////////////////////////////////////////////// // Closed Column Browser Control ////////////////////////////////////////////// // // The column object is the main focus of the // mSpace explorer, and allows users to // interact with a particular dimension of // the information domain. At present the // column object only supports list controls // as children, but in the future it is // envisaged that the column could contain // more advanced data types, such as temporal, // geospatial and visual etc. // // The column allows for users to drag a // dimension around within the slice, close // it, add new dimensions and use the child // list object to make selections within the // slice. // // ////////////////////////////////////////////// var Column = Class.create(); Column.prototype = { // // Member Variables ctlsfc: null, // DOM Elements CNTHLDR: null, MVLFTBTN: null, MVRHTBTN: null, CLSBTN: null, OPFLTBTN: null, ALLBTN: null, FLTCLBTN: null, FLTTXTBOX: null, FLTINPCNT: null, HDR: null, DRAGBTN: null, SPCR: null, SRCH: null, CNTNT: null, LDNGDIV: null, HDRLBL: null, ccbtn_lbl: null, ccbtn_rs: null, ccbtn_ls: null, //col uri uri: "curi", //col name/label label: "", //is col being dragged dragging: false, //mouse down offset on the col header msdwnX: 0, msdwnY: 0, //The columns list object list: null, //Is the column open isopen: false, //col filter type fltrTypSel: 0, //flag to indicate if buttons should be persistant persBtns: false, //flag to indicate id per column filtering should be enabled filterIsOn: false, //flag to indicate that the column is loading isColLdng: false, //default column widths for the different types thnCWdth: 90, nrCWdth: 150, thkCWdth: 200, //min column width minCWdth: 180, //current column width currWdth: 180, //current col height currHght: 180, //if IE then can't use box model and must reduce size of the ColumnSPCR div by the ammount of padding boxModelPadding: 0, //custom user width; -1 is none customWidth: -1, //default filter box message fltMsg: "Filter Column...", // // Constructor initialize: function(oo, id) { //Inherit all the passed object options Object.extend(this, oo); //setup this columns id this._id = "_" + id; var l_id = this._id; this._pid = "Column"; var l_pid = this._pid; //Load the custom width cookie, and set custom width if available /* var cStr = getCookie((l_pid+"CUSTOMWIDTH"+l_id)); if (cStr) { try { this.customWidth = parseInt(cStr); } catch (e) {} } */ //Check the width column parameter to determine what the minimum size for the col is if (this.cwd==0) { this.minCWdth = this.thnCWdth; } else if (this.cwd==1) { this.minCWdth = this.nrCWdth; } else if (this.cwd==2) { this.minCWdth = this.thkCWdth; } this.currWdth = this.minCWdth; if (this.customWidth!=-1) this.currWdth = this.customWidth; ///////////////// LOAD THE COLUMN BROWSER STATUS /////////////// ///////////////////////////////////////////////////////////////// // Creat the buttons this.MVLFTBTN = $(Builder.node('div', {className: "ColMvLBtn", id: (l_pid + "MVLFTBTN" + l_id), title: "Move column to the left"})); this.MVRHTBTN = $(Builder.node('div', {className: "ColMvRBtn", id: (l_pid + "MVRHTBTN" + l_id), title: "Move column to the right"})); this.CLSBTN = $(Builder.node('div', {className: "ColClsBtn", id: (l_pid + "CLSBTN" + l_id), title: "Close this column"})); this.OPFLTBTN = $(Builder.node('div', {className: "ColFltBtn", id: (l_pid + "OPFLTBTN" + l_id), title: "Filter this column"})); this.ALLBTN = $(Builder.node('div', {className: "ColAllBtn", id: (l_pid + "ALLBTN" + l_id), title: "Deselect all items this column"})); this.LDNGDIV = $(Builder.node('div', {className: "ColLdngDiv", id: (l_pid + "LDNGDIV" + l_id), style: "display:none"})); this.FLTCLBTN = $(Builder.node('div', {className: "FilterClear", id: (l_pid + "FLTCLBTN" + l_id), title: "Remove filtering"})); //Create the Header this.ccbtn_ls = $(Builder.node('div', {id: (l_pid + "ccbtn_ls" + l_id), className : "ccbtn_ls"}, [ Builder.node('div', {className : "ccbtn_tl"}), Builder.node('div', {className : "ccbtn_bl"}) ])); this.ccbtn_lbl = $(Builder.node('div', {id: (l_pid + "ccbtn_lbl" + l_id), className : "ccbtn_lbl"}, [this.label])); this.ccbtn_rs = $(Builder.node('div', {id: (l_pid + "ccbtn_rs" + l_id), className : "ccbtn_rs"}, [ Builder.node('div', {className : "ccbtn_tr"}), Builder.node('div', {className : "ccbtn_br"}) ])); this.HDRLBL = $(Builder.node('div', {className: "ColHrdLbl ColHrdLblJS", id: (l_pid + "HDRLBL" + l_id)}, [ this.ccbtn_ls, this.ccbtn_lbl, this.ccbtn_rs ])); this.HDR = $(Builder.node('div', {className: "ColHdr", id: (l_pid + "HDR" + l_id), title: "Click and drag to re-order columns"}, [ this.MVLFTBTN, this.HDRLBL, this.MVRHTBTN, this.CLSBTN, this.OPFLTBTN, this.ALLBTN, this.LDNGDIV ])); //Create the search div this.FLTTXTBOX = $(Builder.node('input', {className: "colfilter",type: "text", id: (l_pid + "FLTTXTBOX" + l_id), value: this.fltMsg})); this.FLTINPCNT = $(Builder.node('div', {className: "ColSrchInpCnt", id: (l_pid + "FLTINPCNT" + l_id)}, [ this.FLTTXTBOX ])); this.SRCH = $(Builder.node('div', {className: "ColSrch", id: (l_pid + "SRCH" + l_id), style: "display:none"}, [ this.FLTCLBTN, //Builder.node('div', {className: "FltTypeAll", id: (l_pid + "FLTTYPBTN" + l_id), title: "Match any part - click to change"}), this.FLTINPCNT ])); this.CNTNT = $(Builder.node('div', {className: "ColCont", id: (l_pid + "CNTNT" + l_id)}, [ Builder.node('div', {className: "NoResults", id: (l_pid + "NORES" + l_id), style: "display:none"}, ["No Results"]) ])); this.CNTHLDR = $(Builder.node('div', {className: "ColContHldr", id: (l_pid + "CNTHLDR" + l_id)}, [ this.CNTNT ])); //Create the column container div this.DRAGBTN = $(Builder.node('a', {className : "dragBtn", id: (l_pid + "DRAGBTN" + l_id)})); this.SPCR = $(Builder.node('div', {className: "ColSpcr ColSpcrJS", id: (l_pid + "SPCR" + l_id)}, [ this.HDR, this.SRCH, this.CNTHLDR ])); this.ctlsfc = $(Builder.node('li', {className: "Col", id: (l_pid + "SFC" + l_id), style: "display:none; width: " + this.currWdth + "px;"}, [ this.SPCR, this.DRAGBTN ])); //document.body.appendChild(this.ctlsfc); //Create the list control oo.pcol = this; oo.pcolsfc = this.CNTNT; this.list = new List(oo); var thisObj = this; if (!this.persBtns) { this.MVLFTBTN.setStyle({visibility: "hidden"}); this.MVRHTBTN.setStyle({display: "none"}); this.CLSBTN.setStyle({display: "none"}); this.OPFLTBTN.setStyle({display: "none"}); this.ALLBTN.setStyle({display: "none"}); } //Register custom events //////////////////////// //Register DOM events ///////////////////// Event.observe(this.ctlsfc, "click", this.MouseClick.bindAsEventListener(this)); Event.observe(this.MVLFTBTN, "click", this.MouseClick.bindAsEventListener(this)); Event.observe(this.MVRHTBTN, "click", this.MouseClick.bindAsEventListener(this)); Event.observe(this.CLSBTN, "click", this.MouseClick.bindAsEventListener(this)); Event.observe(this.OPFLTBTN, "click", this.MouseClick.bindAsEventListener(this)); Event.observe(this.ALLBTN, "click", this.MouseClick.bindAsEventListener(this)); Event.observe(this.FLTCLBTN, "click", this.MouseClick.bindAsEventListener(this)); //Event.observe((l_pid + "FLTTYPBTN" + l_id), "click", this.MouseClick.bindAsEventListener(this)); Event.observe(this.FLTTXTBOX, "keyup", this.SearchUpdate.bindAsEventListener(this)); Event.observe(this.FLTTXTBOX, "click", this.MouseClick.bindAsEventListener(this)); Event.observe(this.HDR, "mouseover", this.MouseOver.bindAsEventListener(this)); Event.observe(this.ctlsfc, "mouseover", this.MouseOver.bindAsEventListener(this)); Event.observe(this.ctlsfc, "mouseout", this.MouseOut.bindAsEventListener(this)); if(mSpaceApplication.GetConfig('ColumnBrowser.Resizing.Horizontal')) { //Add the columns resize handle //Make the object resizable: custom scriptaculous function var t = this; var opts = {}; opts.min = [this.minCWdth, 0]; opts.constraint = "horizontal" opts.handle = t.DRAGBTN; opts.change = function(){ //if new width is greater than current, then update, resize etc //otherwise dont, we dont want the holder to scrolling when making smaller //do want a resize when made bigger, otherwise cols dissapear if (t.ctlsfc.offsetWidth > t.customWidth) { t.customWidth = t.ctlsfc.offsetWidth t.currWdth = t.customWidth; setCookie( (t._pid+"CUSTOMWIDTH"+t._id), t.customWidth, 365*10, '/', '', '' ); mSpaceApplication.Resize(); } else { t.SPCR.style.width = IEINT(t.ctlsfc.clientWidth - t.boxModelPadding - t.DRAGBTN.offsetWidth) + "px"; } } opts.onEnd = function() { //when resize ends, update again t.customWidth = t.ctlsfc.offsetWidth t.currWdth = t.customWidth; setCookie( (t._pid+"CUSTOMWIDTH"+t._id), t.customWidth, 365*10, '/', '', '' ); mSpaceApplication.Resize(); } new Resizable(this.ctlsfc, opts); } else { this.DRAGBTN.hide(); } }, //Append the column surface dom element to the end of a //container node. Append: function(pNode) { this.ctlsfc.setStyle({display: "block"}); pNode.appendChild(this.ctlsfc); this.isopen = true; // If its IE we need to set the boxModelPadding value to the ammount of padding set by CSS if(browserDetails[0]=="msie") this.boxModelPadding = IEINT(parseInt(this.ctlsfc.currentStyle.paddingLeft)); }, //Add the column surface to the front of a dom //element, in front of any children elements Prepend: function(pNode) { this.ctlsfc.setStyle({display: "block"}); if (pNode.firstChild) { pNode.insertBefore(this.ctlsfc, pNode.firstChild); } else { pNode.appendChild(this.ctlsfc); } this.isopen = true; // If its IE we need to set the boxModelPadding value to the ammount of padding set by CSS if(browserDetails[0]=="msie") this.boxModelPadding = IEINT(parseInt(this.ctlsfc.currentStyle.paddingLeft)); }, //get leftover width based on the min column width GetLeftoverWidth: function(width) { if (this.customWidth!=-1) return width - this.customWidth; return width - this.minCWdth; }, //Resize the column and its contents. Resize: function(extraWidth, height) { if (!this.isopen) return; var currW = this.currWdth; var currH = this.currHght; if (extraWidth) { currW = this.minCWdth + extraWidth; if (this.customWidth!=-1) { currW = this.customWidth; // If the new width is now less than the "suggested" width with this number of items increase it if(currW < this.minCWdth+extraWidth) currW = this.minCWdth+extraWidth; } } if (height) { if(browserDetails[0]=="msie" || browserDetails[0]=="safari") // All webkit browsers (eg Chrome) seem to show up as Safari - This might not always be the case! currH = height - 12; else currH = height; } if (isNaN(currW) || isNaN(currH) ) return; this.currWdth = currW; this.currHght = currH; if (currW>0) this.ctlsfc.style.width = currW + "px"; if (currH>0) this.ctlsfc.style.height = currH + "px"; var spacerPadding = 0; //Getting the padding only works in ie, so this compensates for the lack of //moz-box-typ.? css style if(browserDetails[0]=="safari") var styleString = getStyle(this.SPCR, "padding-top"); // Safari does not compound the paddings if they are equal - so get the padding-top instead else var styleString = getStyle(this.SPCR, "padding"); if ((styleString!="undefined") && (styleString!="")) { spacerPadding = parseInt(styleString); } // Resize filter this.FLTINPCNT.style.width = IEINT(this.SRCH.clientWidth - this.FLTCLBTN.offsetWidth) + "px"; if (currH>0) { // If its IE we need to set the boxModelPadding value to the ammount of padding set by CSS if(browserDetails[0]=="msie") this.boxModelPadding = IEINT(parseInt(this.SPCR.currentStyle.paddingLeft)); // Safari Fix var searchHeight = 0; if(this.SRCH.offsetHeight) searchHeight = this.SRCH.offsetHeight; // Safari falls over if offsetHeight is unset this.SPCR.style.height = IEINT(currH-this.HDR.offsetHeight-searchHeight - (spacerPadding*2))+ "px"; this.SPCR.style.width = IEINT(currW - this.boxModelPadding - this.DRAGBTN.offsetWidth) + "px"; this.CNTHLDR.style.height = "100%"; } }, //Mouse over event handler. MouseOver: function(e) { Event.stop(e); var element = Event.element(e); //Show column buttons if necessary if ((!this.persBtns) && (!this.isColLdng) && (this.isopen)) { $(this._pid+"MVLFTBTN"+this._id).style.visibility = "visible"; $(this._pid+"MVRHTBTN"+this._id).style.display = "block"; $(this._pid+"CLSBTN"+this._id).style.display = "block"; if(this.filterIsOn) $(this._pid+"OPFLTBTN"+this._id).style.display = "block"; $(this._pid+"ALLBTN"+this._id).style.display = "block"; this.SetHeaderLabelWidth(); } }, //Mouse out event handler MouseOut: function(e) { Event.stop(e); element = Event.findElement(e, "li"); if (element==$(this._pid+"SFC"+this._id)) { //If necessary hide the column buttons. if (!this.persBtns && (this.isopen)) { $(this._pid+"MVLFTBTN"+this._id).style.visibility = "hidden"; $(this._pid+"MVRHTBTN"+this._id).style.display = "none"; $(this._pid+"CLSBTN"+this._id).style.display = "none"; $(this._pid+"OPFLTBTN"+this._id).style.display = "none"; $(this._pid+"ALLBTN"+this._id).style.display = "none"; $(this._pid+"HDRLBL"+this._id).style.width = ""; } } }, //Mouse click event handler MouseClick: function(e) { var element = Event.element(e); Event.stop(e); if (element==$(this._pid+"MVLFTBTN"+this._id)) { //######## MOVE LEFT BUTTON CLICK document.fire('Column:MoveLeft', this); } else if (element==$(this._pid+"MVRHTBTN"+this._id)) { //######## MOVE RIGHT BUTTON CLICK document.fire('Column:MoveRight', this); } else if (element==$(this._pid+"CLSBTN"+this._id)) { //######## CLOSE BUTTON CLICK //Send an imitation escape key press to filter e.keyCode = 27; this.SearchUpdate(e, null); $(this._pid+"SRCH"+this._id).style.display = "none"; document.fire('Column:Close', this); this.isopen = false; } else if (element==$(this._pid+"OPFLTBTN"+this._id)) { //######## OPEN FILTER BOX BUTTON CLICK // Toggles the filter box on and off if ($(this._pid+"SRCH"+this._id).style.display=="") { $(this._pid+"SRCH"+this._id).style.display = "none"; if($(this._pid+"FLTTXTBOX"+this._id).value == this.fltMsg) $(this._pid+"FLTTXTBOX"+this._id).value = ""; window.mSpaceApplication.Resize(false); } else { $(this._pid+"SRCH"+this._id).style.display = ""; if($(this._pid+"FLTTXTBOX"+this._id).value == "") $(this._pid+"FLTTXTBOX"+this._id).value = this.fltMsg; } window.ColumnBrowser.Resize(); } /*else if (element==$(this._pid+"FLTTYPBTN"+this._id)) { //####### FILTER TYPE BUTTON CLICK this.fltrTypSel += 1; if(this.fltrTypSel > 2) this.fltrTypSel = 0; switch(this.fltrTypSel) { case 0: $(this._pid+"FLTTYPBTN"+this._id).className = "FltTypeAll"; $(this._pid+"FLTTYPBTN"+this._id).title = "Match any part - click to change"; break; case 1: $(this._pid+"FLTTYPBTN"+this._id).className = "FltTypeStart"; $(this._pid+"FLTTYPBTN"+this._id).title = "Match the first letters - click to change"; break; case 2: $(this._pid+"FLTTYPBTN"+this._id).className = "FltTypeEnd"; $(this._pid+"FLTTYPBTN"+this._id).title = "Match the last letters only - click to change"; break; } this.list.RefreshFilter(null); }*/ else if (element==$(this._pid+"FLTCLBTN"+this._id)) { //##### FILTER BAR CLOSE BUTTON CLICK $(this._pid+"FLTTXTBOX"+this._id).value = ""; $(this._pid+"OPFLTBTN"+this._id).className = "ColFltBtn"; this.list.ClearTextFilter(); // Close filter $(this._pid+"SRCH"+this._id).style.display = "none"; if($(this._pid+"FLTTXTBOX"+this._id).value == this.fltMsg) $(this._pid+"FLTTXTBOX"+this._id).value = ""; window.mSpaceApplication.Resize(false); } else if (element==$(this._pid+"FLTTXTBOX"+this._id)) { //######### FILTER INPUT BOX CLICK // remove any filter default message // from the box when clicked into if ($(this._pid+"FLTTXTBOX"+this._id).value==this.fltMsg) { $(this._pid+"FLTTXTBOX"+this._id).value = ""; } } else if (element==$(this._pid+"ALLBTN"+this._id)) { //###### SHOW ALL/CLEAR SELECTIONS BUTTON CLICK this.list.ShowAll(); } }, //Function called when the user types into the //filter input box, updates either the local filter //or requests a new server filter SearchUpdate: function(e) { var element = Event.element(e); if (e.keyCode==27) { this.list.ClearTextFilter(); $(this._pid+"FLTTXTBOX"+this._id).value = ""; $(this._pid+"OPFLTBTN"+this._id).className = "ColFltBtn"; return; } if (this.list) { this.list.SetTextFilter($(this._pid+"FLTTXTBOX"+this._id).value); // Turn the filter icon off if the string is empty if($(this._pid+"FLTTXTBOX"+this._id).value == "") { $(this._pid+"OPFLTBTN"+this._id).className = "ColFltBtn"; } else { $(this._pid+"OPFLTBTN"+this._id).className = "ColFltBtnOn"; } } }, //calls the child lists replace items //function ReplaceItems: function(items) { this.list.ReplaceItems(items); }, //calls the child lists UpdateData //function UpdateColumnData: function(cd, fl) { if (this.list) { this.list.UpdateData(cd, fl); } }, //Get an array of all selected items //within the child list object GetSelectedItems: function() { if ((this.list) && (this.list.Selected)) { return this.list.GetSelectedItems(); } else { return new Array(); } }, //Indicates if the column should be displayed //in its loading state. SetLoading: function(flag, btnOnly) { var sclT = this.list.ctlsfc.scrollTop; this.isColLdng = flag; if (flag) { this.LDNGDIV.style.display = ""; //If the iconOnly flag is not set, then set the className for the column, //rather than just the loading button if (!btnOnly) { this.CNTNT.className = "ColContLdng"; } //Hide buttons this.MVLFTBTN.style.visibility = "hidden"; this.MVRHTBTN.style.display = "none"; this.CLSBTN.style.display = "none"; this.OPFLTBTN.style.display = "none"; this.ALLBTN.style.display = "none"; this.SetHeaderLabelWidth(); } else { //hide loading imnage this.LDNGDIV.style.display = "none"; //Reset column class this.CNTNT.className = "ColCont"; this.SetHeaderLabelWidth(); } this.list.SetScroll(sclT); this.Resize(); }, //Function to set the header label width based on the size of the buttons on the column SetHeaderLabelWidth: function() { //var HDR = $(this._pid+"HDR"+this._id); var lblWdth = this.HDR.clientWidth - (this.MVLFTBTN.offsetWidth + this.MVRHTBTN.offsetWidth + this.CLSBTN.offsetWidth + this.OPFLTBTN.offsetWidth + this.ALLBTN.offsetWidth + this.LDNGDIV.offsetWidth); if (lblWdth<0) lblWdth = 0; this.HDRLBL.style.width = lblWdth + "px"; if (this.isopen) { this.HDR.style.width = "auto"; } else { var nw = (this.ccbtn_lbl.offsetWidth + this.ccbtn_rs.offsetWidth + this.ccbtn_ls.offsetWidth); if (nw<0) nw = 0; if (nw>0 || this.isopen ) { //$(this._pid+"SPCR"+this._id).style.width = nw + "px"; this.HDRLBL.style.width = nw + "px"; this.HDR.style.width = nw + "px"; } } }, //Clear any list item selections ClearSelections: function() { if (this.list) { this.list.ClearSelections(); } }, //Gets the list slice string, a URL HTTP param based //notation representing the column and its selections GetSliceString: function(BreadCrumb) { if (this.list) { return this.list.GetSliceString(BreadCrumb); } return null; }, //DEPRECATED FUNCTION??? LoadVisibleListItems: function(coldetails, clear) { if (this.list) { return this.list.LoadVisibleListItems(coldetails, clear); } }, //Reset the column list Reset: function() { if (this.list) { this.list.Reset(); } }, //Get a url to send for filtering the column? GetFilterUrlText: function() { if (this.list) { return this.list.GetFilterUrlText(); } return ""; }, //Set the column title style based on the highlights and //selections within the list. UpdateTitle: function(selections, highlights) { this.HDRLBL.className = "ColHrdLbl ColHrdLblJS"; if (selections) { this.HDRLBL.addClassName("sel"); } else if (highlights) { this.HDRLBL.addClassName("hig"); } } }