1 /* 2 * ***** BEGIN LICENSE BLOCK ***** 3 * Zimbra Collaboration Suite Web Client 4 * Copyright (C) 2011, 2014, 2016 Synacor, Inc. 5 * 6 * The contents of this file are subject to the Common Public Attribution License Version 1.0 (the "License"); 7 * you may not use this file except in compliance with the License. 8 * You may obtain a copy of the License at: https://www.zimbra.com/license 9 * The License is based on the Mozilla Public License Version 1.1 but Sections 14 and 15 10 * have been added to cover use of software over a computer network and provide for limited attribution 11 * for the Original Developer. In addition, Exhibit A has been modified to be consistent with Exhibit B. 12 * 13 * Software distributed under the License is distributed on an "AS IS" basis, 14 * WITHOUT WARRANTY OF ANY KIND, either express or implied. 15 * See the License for the specific language governing rights and limitations under the License. 16 * The Original Code is Zimbra Open Source Web Client. 17 * The Initial Developer of the Original Code is Zimbra, Inc. All rights to the Original Code were 18 * transferred by Zimbra, Inc. to Synacor, Inc. on September 14, 2015. 19 * 20 * All portions of the code are Copyright (C) 2011, 2014, 2016 Synacor, Inc. All Rights Reserved. 21 * ***** END LICENSE BLOCK ***** 22 */ 23 /** 24 * Section header provides a header to divide groups into sections. The bar supports actions for click, mouseover, 25 * mouseout, expand and collapse sections. 26 * @param {ZmMailListGroup} group Group object 27 * @param {objet} params hash of params for DwtControl 28 */ 29 ZmMailListSectionHeader= function(group, params) { 30 var params = params || {} ; 31 params.parent = params.parent || appCtxt.getShell(); 32 params.id = this.id = params.id || Dwt.getNextId(); 33 params.className = params.className || "groupHeader"; 34 DwtControl.call(this, params); 35 this._group = group; 36 this.setHtmlElementId(Dwt.getNextId(ZmMailListSectionHeader.HEADER_ID)); 37 this._createHtml(params); 38 this._setEventHdlrs([DwtEvent.ONMOUSEDOWN]); 39 this.addListener(DwtEvent.ONMOUSEDOWN, new AjxListener(this, this._groupHeaderMouseClick)); 40 41 this._collapsed = false; 42 }; 43 44 ZmMailListSectionHeader.prototype = new DwtControl; 45 ZmMailListSectionHeader.prototype.constructor = ZmMailListSectionHeader; 46 ZmMailListSectionHeader.HEADER_ID = "GroupHeader_"; 47 48 /** 49 * returns HTML string of header 50 * @return {String} html 51 */ 52 ZmMailListSectionHeader.prototype.getHeaderHtml = 53 function() { 54 return this._el.innerHTML; 55 }; 56 57 58 ZmMailListSectionHeader.prototype._createHtml = 59 function(params) { 60 this._el = this.getHtmlElement(); 61 this._el.innerHTML = this._renderGroupHdr(params.headerTitle); 62 }; 63 64 ZmMailListSectionHeader.prototype._renderGroupHdr = 65 function(headerTitle) { 66 var id = this._el.id; 67 var htmlArr = []; 68 var idx = 0; 69 var nodeIdStr = "id='" + id + "_imgNode'"; 70 htmlArr[idx++] = "<div id='" + id +"'>"; 71 htmlArr[idx++] = "<table cellpadding=0 cellspacing=0 border=0 width=100% class='DwtListView-Column'><tr><td>"; 72 htmlArr[idx++] = AjxImg.getImageHtml("NodeExpanded", "float:left;", nodeIdStr); 73 htmlArr[idx++] = "<div class='DwtListHeaderItem-label black' style='padding:0px 0px 2px 2px; font-weight:bold; float:left;' id='" + id + "_groupTitle'>"; 74 htmlArr[idx++] = headerTitle; 75 htmlArr[idx++] = "</div>"; 76 htmlArr[idx++] = "</td></tr></table>" 77 htmlArr[idx++] = "</div>"; 78 return htmlArr.join(""); 79 }; 80 81 ZmMailListSectionHeader.prototype._groupHeaderMouseClick = 82 function(ev) { 83 if (ev && ev.button == DwtMouseEvent.RIGHT) { 84 this._actionMenuListener(ev); 85 } 86 else { 87 if (!this._collapsed) { 88 this._doCollapse(ev); 89 } 90 else { 91 this._doExpand(ev); 92 } 93 } 94 }; 95 96 ZmMailListSectionHeader.prototype._doCollapse = 97 function(ev) { 98 var p = document.getElementById(this._el.id); 99 while (p) { 100 var ns = p.nextSibling; 101 if (ns && ns.id.indexOf(ZmMailListSectionHeader.HEADER_ID) == -1) { 102 Dwt.setVisible(ns, false); 103 } 104 else{ 105 this._setImage(this._el.id + "_imgNode", "NodeCollapsed"); 106 this._collapsed = true; 107 return; 108 } 109 p = ns; 110 } 111 }; 112 113 ZmMailListSectionHeader.prototype._doExpand = 114 function(ev) { 115 var p = document.getElementById(this._el.id); 116 while (p) { 117 var ns = p.nextSibling; 118 if (ns && ns.id.indexOf(ZmMailListSectionHeader.HEADER_ID) == -1) { 119 Dwt.setVisible(ns, true); 120 } 121 else { 122 this._setImage(this._el.id + "_imgNode", "NodeExpanded"); 123 this._collapsed = false; 124 return; 125 } 126 p = ns; 127 } 128 }; 129 130 ZmMailListSectionHeader.prototype._collapseAll = 131 function(ev) { 132 if (this._group) { 133 var headers = this._group.getAllSectionHeaders(); 134 for (var i=0; i<headers.length; i++) { 135 headers[i]._doCollapse(ev); 136 } 137 } 138 }; 139 140 ZmMailListSectionHeader.prototype._expandAll = 141 function(ev) { 142 if (this._group) { 143 var headers = this._group.getAllSectionHeaders(); 144 for (var i=0; i<headers.length; i++) { 145 headers[i]._doExpand(ev); 146 } 147 } 148 }; 149 150 ZmMailListSectionHeader.prototype._setImage = 151 function(imgId, imgInfo) { 152 var imgNode = document.getElementById(imgId); 153 if (imgNode && imgNode.parentNode) { 154 AjxImg.setImage(imgNode.parentNode, imgInfo); 155 } 156 }; 157 158 ZmMailListSectionHeader.prototype._actionMenuListener = 159 function(ev) { 160 if (!this._menu) { 161 var menu = new ZmPopupMenu(this); 162 var collapseListener = new AjxListener(this, this._collapseAll); 163 var expandListener = new AjxListener(this, this._expandAll); 164 var mi = menu.createMenuItem("collapse_all", {text:ZmMsg.collapseAllGroups, style:DwtMenuItem.NO_STYLE}); 165 mi.addSelectionListener(collapseListener); 166 mi = menu.createMenuItem("expand_all", {text:ZmMsg.expandAllGroups, style:DwtMenuItem.NO_STYLE}); 167 mi.addSelectionListener(expandListener); 168 this._menu = menu; 169 } 170 this._menu.popup(0, ev.docX, ev.docY); 171 }; 172