define([ "dojo", "dijit/registry", "../main", "dojo/_base/declare", "dojo/_base/array", "dojo/_base/lang", "dojo/_base/connect", "dojo/_base/sniff", "dojo/query", "dojo/_base/window", "dojo/text!./resources/View.html", "dojo/dnd/Source", "dijit/_Widget", "dijit/_TemplatedMixin", "dojox/html/metrics", "./util", "dojo/_base/html", "./_Builder", "dojo/dnd/Avatar", "dojo/dnd/Manager" ], function(dojo, dijit, dojox, declare, array, lang, connect, has, query, win, template, Source, _Widget, _TemplatedMixin, metrics, util, html, _Builder, Avatar, Manager){ // a private function var getStyleText = function(inNode, inStyleText){ return inNode.style.cssText == undefined ? inNode.getAttribute("style") : inNode.style.cssText; }; // some public functions var _View = declare('dojox.grid._View', [_Widget, _TemplatedMixin], { // summary: // A collection of grid columns. A grid is comprised of a set of views that stack horizontally. // Grid creates views automatically based on grid's layout structure. // Users should typically not need to access individual views directly. // // defaultWidth: String // Default width of the view defaultWidth: "18em", // viewWidth: String // Width for the view, in valid css unit viewWidth: "", templateString: template, classTag: 'dojoxGrid', marginBottom: 0, rowPad: 2, // _togglingColumn: int // Width of the column being toggled (-1 for none) _togglingColumn: -1, // _headerBuilderClass: Object // The class to use for our header builder _headerBuilderClass: _Builder._HeaderBuilder, // _contentBuilderClass: Object // The class to use for our content builder _contentBuilderClass: _Builder._ContentBuilder, postMixInProperties: function(){ this.rowNodes = {}; }, postCreate: function(){ this.connect(this.scrollboxNode,"onscroll","doscroll"); util.funnelEvents(this.contentNode, this, "doContentEvent", [ 'mouseover', 'mouseout', 'click', 'dblclick', 'contextmenu', 'mousedown' ]); util.funnelEvents(this.headerNode, this, "doHeaderEvent", [ 'dblclick', 'mouseover', 'mouseout', 'mousemove', 'mousedown', 'click', 'contextmenu' ]); this.content = new this._contentBuilderClass(this); this.header = new this._headerBuilderClass(this); //BiDi: in RTL case, style width='9000em' causes scrolling problem in head node if(!this.grid.isLeftToRight()){ this.headerNodeContainer.style.width = ""; } }, destroy: function(){ html.destroy(this.headerNode); delete this.headerNode; for(var i in this.rowNodes){ this._cleanupRowWidgets(this.rowNodes[i]); html.destroy(this.rowNodes[i]); } this.rowNodes = {}; if(this.source){ this.source.destroy(); } this.inherited(arguments); }, // focus focus: function(){ if(has('ie') || has('webkit') || has('opera')){ this.hiddenFocusNode.focus(); }else{ this.scrollboxNode.focus(); } }, setStructure: function(inStructure){ var vs = (this.structure = inStructure); // FIXME: similar logic is duplicated in layout if(vs.width && !isNaN(vs.width)){ this.viewWidth = vs.width + 'em'; }else{ this.viewWidth = vs.width || (vs.noscroll ? 'auto' : this.viewWidth); //|| this.defaultWidth; } this._onBeforeRow = vs.onBeforeRow||function(){}; this._onAfterRow = vs.onAfterRow||function(){}; this.noscroll = vs.noscroll; if(this.noscroll){ this.scrollboxNode.style.overflow = "hidden"; } this.simpleStructure = Boolean(vs.cells.length == 1); // bookkeeping this.testFlexCells(); // accomodate new structure this.updateStructure(); }, _cleanupRowWidgets: function(inRowNode){ // Summary: // Cleans up the widgets for the given row node so that // we can reattach them if needed if(inRowNode){ array.forEach(query("[widgetId]", inRowNode).map(dijit.byNode), function(w){ if(w._destroyOnRemove){ w.destroy(); delete w; }else if(w.domNode && w.domNode.parentNode){ w.domNode.parentNode.removeChild(w.domNode); } }); } }, onBeforeRow: function(inRowIndex, cells){ this._onBeforeRow(inRowIndex, cells); if(inRowIndex >= 0){ this._cleanupRowWidgets(this.getRowNode(inRowIndex)); } }, onAfterRow: function(inRowIndex, cells, inRowNode){ this._onAfterRow(inRowIndex, cells, inRowNode); var g = this.grid; array.forEach(query(".dojoxGridStubNode", inRowNode), function(n){ if(n && n.parentNode){ var lw = n.getAttribute("linkWidget"); var cellIdx = window.parseInt(html.attr(n, "cellIdx"), 10); var cellDef = g.getCell(cellIdx); var w = dijit.byId(lw); if(w){ n.parentNode.replaceChild(w.domNode, n); if(!w._started){ w.startup(); } dojo.destroy(n); }else{ n.innerHTML = ""; } } }, this); }, testFlexCells: function(){ // FIXME: cheater, this function does double duty as initializer and tester this.flexCells = false; for(var j=0, row; (row=this.structure.cells[j]); j++){ for(var i=0, cell; (cell=row[i]); i++){ cell.view = this; this.flexCells = this.flexCells || cell.isFlex(); } } return this.flexCells; }, updateStructure: function(){ // header builder needs to update table map this.header.update(); // content builder needs to update markup cache this.content.update(); }, getScrollbarWidth: function(){ var hasScrollSpace = this.hasVScrollbar(); var overflow = html.style(this.scrollboxNode, "overflow"); if(this.noscroll || !overflow || overflow == "hidden"){ hasScrollSpace = false; }else if(overflow == "scroll"){ hasScrollSpace = true; } return (hasScrollSpace ? metrics.getScrollbar().w : 0); // Integer }, getColumnsWidth: function(){ var h = this.headerContentNode; return h && h.firstChild ? (h.firstChild.offsetWidth || html.style(h.firstChild, 'width')) : 0; // Integer }, setColumnsWidth: function(width){ this.headerContentNode.firstChild.style.width = width + 'px'; if(this.viewWidth){ this.viewWidth = width + 'px'; } }, getWidth: function(){ return this.viewWidth || (this.getColumnsWidth()+this.getScrollbarWidth()) +'px'; // String }, getContentWidth: function(){ return Math.max(0, html._getContentBox(this.domNode).w - this.getScrollbarWidth()) + 'px'; // String }, render: function(){ this.scrollboxNode.style.height = ''; this.renderHeader(); if(this._togglingColumn >= 0){ this.setColumnsWidth(this.getColumnsWidth() - this._togglingColumn); this._togglingColumn = -1; } var cells = this.grid.layout.cells; var getSibling = lang.hitch(this, function(node, before){ !this.grid.isLeftToRight() && (before = !before); var inc = before?-1:1; var idx = this.header.getCellNodeIndex(node) + inc; var cell = cells[idx]; while(cell && cell.getHeaderNode() && cell.getHeaderNode().style.display == "none"){ idx += inc; cell = cells[idx]; } if(cell){ return cell.getHeaderNode(); } return null; }); if(this.grid.columnReordering && this.simpleStructure){ if(this.source){ this.source.destroy(); } // Create the top and bottom markers var bottomMarkerId = "dojoxGrid_bottomMarker"; var topMarkerId = "dojoxGrid_topMarker"; if(this.bottomMarker){ html.destroy(this.bottomMarker); } this.bottomMarker = html.byId(bottomMarkerId); if(this.topMarker){ html.destroy(this.topMarker); } this.topMarker = html.byId(topMarkerId); if (!this.bottomMarker) { this.bottomMarker = html.create("div", { "id": bottomMarkerId, "class": "dojoxGridColPlaceBottom" }, win.body()); this._hide(this.bottomMarker); this.topMarker = html.create("div", { "id": topMarkerId, "class": "dojoxGridColPlaceTop" }, win.body()); this._hide(this.topMarker); } this.arrowDim = html.contentBox(this.bottomMarker); var headerHeight = html.contentBox(this.headerContentNode.firstChild.rows[0]).h; this.source = new Source(this.headerContentNode.firstChild.rows[0], { horizontal: true, accept: [ "gridColumn_" + this.grid.id ], viewIndex: this.index, generateText: false, onMouseDown: lang.hitch(this, function(e){ this.header.decorateEvent(e); if((this.header.overRightResizeArea(e) || this.header.overLeftResizeArea(e)) && this.header.canResize(e) && !this.header.moveable){ this.header.beginColumnResize(e); }else{ if(this.grid.headerMenu){ this.grid.headerMenu.onCancel(true); } // IE reports a left click as 1, where everything else reports 0 if(e.button === (has('ie') < 9 ? 1 : 0)){ Source.prototype.onMouseDown.call(this.source, e); } } }), onMouseOver: lang.hitch(this, function(e){ var src = this.source; if(src._getChildByEvent(e)){ Source.prototype.onMouseOver.apply(src, arguments); } }), _markTargetAnchor: lang.hitch(this, function(before){ var src = this.source; if(src.current == src.targetAnchor && src.before == before){ return; } if(src.targetAnchor && getSibling(src.targetAnchor, src.before)){ src._removeItemClass(getSibling(src.targetAnchor, src.before), src.before ? "After" : "Before"); } Source.prototype._markTargetAnchor.call(src, before); var target = before ? src.targetAnchor : getSibling(src.targetAnchor, src.before); var endAdd = 0; if (!target) { target = src.targetAnchor; endAdd = html.contentBox(target).w + this.arrowDim.w/2 + 2; } var pos = html.position(target, true); var left = Math.floor(pos.x - this.arrowDim.w/2 + endAdd); html.style(this.bottomMarker, "visibility", "visible"); html.style(this.topMarker, "visibility", "visible"); html.style(this.bottomMarker, { "left": left + "px", "top" : (headerHeight + pos.y) + "px" }); html.style(this.topMarker, { "left": left + "px", "top" : (pos.y - this.arrowDim.h) + "px" }); if(src.targetAnchor && getSibling(src.targetAnchor, src.before)){ src._addItemClass(getSibling(src.targetAnchor, src.before), src.before ? "After" : "Before"); } }), _unmarkTargetAnchor: lang.hitch(this, function(){ var src = this.source; if(!src.targetAnchor){ return; } if(src.targetAnchor && getSibling(src.targetAnchor, src.before)){ src._removeItemClass(getSibling(src.targetAnchor, src.before), src.before ? "After" : "Before"); } this._hide(this.bottomMarker); this._hide(this.topMarker); Source.prototype._unmarkTargetAnchor.call(src); }), destroy: lang.hitch(this, function(){ connect.disconnect(this._source_conn); connect.unsubscribe(this._source_sub); Source.prototype.destroy.call(this.source); if(this.bottomMarker){ html.destroy(this.bottomMarker); delete this.bottomMarker; } if(this.topMarker){ html.destroy(this.topMarker); delete this.topMarker; } }), onDndCancel: lang.hitch(this, function(){ Source.prototype.onDndCancel.call(this.source); this._hide(this.bottomMarker); this._hide(this.topMarker); }) }); this._source_conn = connect.connect(this.source, "onDndDrop", this, "_onDndDrop"); this._source_sub = connect.subscribe("/dnd/drop/before", this, "_onDndDropBefore"); this.source.startup(); } }, _hide: function(node){ html.style(node, { top: "-10000px", "visibility": "hidden" }); }, _onDndDropBefore: function(source, nodes, copy){ if(Manager.manager().target !== this.source){ return; } this.source._targetNode = this.source.targetAnchor; this.source._beforeTarget = this.source.before; var views = this.grid.views.views; var srcView = views[source.viewIndex]; var tgtView = views[this.index]; if(tgtView != srcView){ srcView.convertColPctToFixed(); tgtView.convertColPctToFixed(); } }, _onDndDrop: function(source, nodes, copy){ if(Manager.manager().target !== this.source){ if(Manager.manager().source === this.source){ this._removingColumn = true; } return; } this._hide(this.bottomMarker); this._hide(this.topMarker); var getIdx = function(n){ return n ? html.attr(n, "idx") : null; }; var w = html.marginBox(nodes[0]).w; if(source.viewIndex !== this.index){ var views = this.grid.views.views; var srcView = views[source.viewIndex]; var tgtView = views[this.index]; if(srcView.viewWidth && srcView.viewWidth != "auto"){ srcView.setColumnsWidth(srcView.getColumnsWidth() - w); } if(tgtView.viewWidth && tgtView.viewWidth != "auto"){ tgtView.setColumnsWidth(tgtView.getColumnsWidth()); } } var stn = this.source._targetNode; var stb = this.source._beforeTarget; !this.grid.isLeftToRight() && (stb = !stb); var layout = this.grid.layout; var idx = this.index; delete this.source._targetNode; delete this.source._beforeTarget; layout.moveColumn( source.viewIndex, idx, getIdx(nodes[0]), getIdx(stn), stb); }, renderHeader: function(){ this.headerContentNode.innerHTML = this.header.generateHtml(this._getHeaderContent); if(this.flexCells){ this.contentWidth = this.getContentWidth(); this.headerContentNode.firstChild.style.width = this.contentWidth; } util.fire(this, "onAfterRow", [-1, this.structure.cells, this.headerContentNode]); }, // note: not called in 'view' context _getHeaderContent: function(inCell){ var n = inCell.name || inCell.grid.getCellName(inCell); if(/^\s+$/.test(n)){ n = ' '//otherwise arrow styles will be messed up } var ret = [ '