From d88eb1c3b3b75e5b1548475534d162065837f40b Mon Sep 17 00:00:00 2001 From: Tochukwu Okoro Date: Sun, 6 Apr 2014 12:56:48 -0400 Subject: [PATCH 1/3] basic refactoring of tile and thumbnail view --- scripted/src/exhibit-api.js | 1 + .../src/scripts/ui/views/thumbnail-view.js | 249 +----------------- scripted/src/scripts/ui/views/tile-view.js | 218 +-------------- scripted/src/styles/views/thumbnail-view.css | 12 +- scripted/src/styles/views/tile-view.css | 6 +- 5 files changed, 26 insertions(+), 460 deletions(-) diff --git a/scripted/src/exhibit-api.js b/scripted/src/exhibit-api.js index d502932c..59299cf8 100644 --- a/scripted/src/exhibit-api.js +++ b/scripted/src/exhibit-api.js @@ -180,6 +180,7 @@ var Exhibit = { "scripts/ui/views/view.js", "scripts/ui/views/view-panel.js", "scripts/ui/views/ordered-view-frame.js", + "scripts/ui/views/enumerated-view.js", "scripts/ui/views/tile-view.js", "scripts/ui/views/tabular-view.js", "scripts/ui/views/thumbnail-view.js", diff --git a/scripted/src/scripts/ui/views/thumbnail-view.js b/scripted/src/scripts/ui/views/thumbnail-view.js index 945dabd0..d5031402 100644 --- a/scripted/src/scripts/ui/views/thumbnail-view.js +++ b/scripted/src/scripts/ui/views/thumbnail-view.js @@ -50,6 +50,7 @@ Exhibit.ThumbnailView = function(containerElmt, uiContext) { this.register(); }; +Exhibit.ThumbnailView.prototype = new Exhibit.EnumeratedView(); /** * @constant */ @@ -61,7 +62,7 @@ Exhibit.ThumbnailView._settingSpecs = { * Constant leftover from a now unnecessary IE hack. * @constant */ -Exhibit.ThumbnailView._itemContainerClass = "exhibit-thumbnailView-itemContainer"; +Exhibit.ThumbnailView.prototype._itemContainerClass = "exhibit-thumbnailView-itemContainer"; /** * @param {Object} configuration @@ -132,152 +133,6 @@ Exhibit.ThumbnailView.createFromDOM = function(configElmt, containerElmt, uiCont return view; }; -/** - * - */ -Exhibit.ThumbnailView.prototype.dispose = function() { - var view = this; - Exhibit.jQuery(this.getUIContext().getCollection().getElement()).unbind( - "onItemsChanged.exhibit", - view._onItemsChanged - ); - - this._orderedViewFrame.dispose(); - this._orderedViewFrame = null; - - this._lensRegistry = null; - this._dom = null; - - this._dispose(); -}; - -/** - * - */ -Exhibit.ThumbnailView.prototype._initializeUI = function() { - var self, template; - - self = this; - - Exhibit.jQuery(this.getContainer()).empty(); - self._initializeViewUI(function() { - return Exhibit.jQuery(self._dom.bodyDiv).html(); - }); - - template = { - elmt: this.getContainer(), - children: [ - { tag: "div", - field: "headerDiv" - }, - { tag: "div", - "class": "exhibit-collectionView-body", - field: "bodyDiv" - }, - { tag: "div", - field: "footerDiv" - } - ] - }; - - this._dom = Exhibit.jQuery.simileDOM("template", template); - - this._orderedViewFrame._divHeader = this._dom.headerDiv; - this._orderedViewFrame._divFooter = this._dom.footerDiv; - this._orderedViewFrame._generatedContentElmtRetriever = function() { - return self._dom.bodyDiv; - }; - - this._orderedViewFrame.initializeUI(); - - Exhibit.View.addViewState( - this.getID(), - this.exportState() - ); - - this._reconstruct(); -}; - -/** - * - */ -Exhibit.ThumbnailView.prototype._reconstruct = function() { - if (this._settings.columnCount < 2) { - this._reconstructWithFloats(); - } else { - this._reconstructWithTable(); - } -}; - -Exhibit.ThumbnailView.prototype._reconstructWithFloats = function() { - var view, state, closeGroups, i; - view = this; - state = { - div: this._dom.bodyDiv, - itemContainer: null, - groupDoms: [], - groupCounts: [] - }; - - closeGroups = function(groupLevel) { - for (i = groupLevel; i < state.groupDoms.length; i++) { - Exhibit.jQuery(state.groupDoms[i].countSpan).html(state.groupCounts[i]); - } - state.groupDoms = state.groupDoms.slice(0, groupLevel); - state.groupCounts = state.groupCounts.slice(0, groupLevel); - - if (groupLevel > 0 && groupLevel <= state.groupDoms.length) { - state.div = state.groupDoms[groupLevel - 1].contentDiv; - } else { - state.div = view._dom.bodyDiv; - } - state.itemContainer = null; - }; - - this._orderedViewFrame.onNewGroup = function(groupSortKey, keyType, groupLevel) { - closeGroups(groupLevel); - - var groupDom = Exhibit.ThumbnailView.constructGroup( - groupLevel, - groupSortKey - ); - - Exhibit.jQuery(state.div).append(groupDom.elmt); - state.div = groupDom.contentDiv; - - state.groupDoms.push(groupDom); - state.groupCounts.push(0); - }; - - this._orderedViewFrame.onNewItem = function(itemID, index) { - //if (index > 10) return; - - var i, itemLensItem, itemLens; - if (typeof state.itemContainer === "undefined" || state.itemContainer === null) { - state.itemContainer = Exhibit.ThumbnailView.constructItemContainer(); - Exhibit.jQuery(state.div).append(state.itemContainer); - } - - for (i = 0; i < state.groupCounts.length; i++) { - state.groupCounts[i]++; - } - - itemLensDiv = Exhibit.jQuery("
"); - itemLensDiv.attr("class", Exhibit.ThumbnailView._itemContainerClass); - - itemLens = view._lensRegistry.createLens(itemID, itemLensDiv, view.getUIContext()); - state.itemContainer.append(itemLensDiv); - }; - - Exhibit.jQuery(this.getContainer()).hide(); - - Exhibit.jQuery(this._dom.bodyDiv).empty(); - this._orderedViewFrame.reconstruct(); - closeGroups(0); - - Exhibit.jQuery(this.getContainer()).show(); -}; - Exhibit.ThumbnailView.prototype._reconstructWithTable = function() { var view, state, closeGroups; view = this; @@ -323,9 +178,8 @@ Exhibit.ThumbnailView.prototype._reconstructWithTable = function() { }; this._orderedViewFrame.onNewItem = function(itemID, index) { - //if (index > 10) return; - var i, td, itemLensDiv, ItemLens; + if (state.columnIndex >= view._settings.columnCount) { state.columnIndex = 0; } @@ -363,104 +217,11 @@ Exhibit.ThumbnailView.prototype._reconstructWithTable = function() { }; -/** - * @returns {Object} - */ -Exhibit.ThumbnailView.prototype.makeState = function() { - return {}; -}; - -/** - * @param {String} sub - * @param {Object} state - * @returns {Object} - */ -Exhibit.ThumbnailView.prototype.makeStateWithSub = function(sub, state) { - var original; - original = this.makeState(); - original[sub] = state; - return original; -}; - -/** - * @param {Object} state - * @returns {Object} - */ -Exhibit.ThumbnailView.prototype.exportState = function(state) { - if (typeof state === "undefined" || state === null) { - return this.makeStateWithSub(this._orderedViewFrame._historyKey, - this._orderedViewFrame.exportState()); - } else { - return state; - } -}; - -/** - * @param {Object} state - * @param {Object} state.orderedViewFrame - */ -Exhibit.ThumbnailView.prototype.importState = function(state) { - if (this._orderedViewFrame !== null && this.stateDiffers(state)) { - this._orderedViewFrame.importState(state.orderedViewFrame); - } -}; - -/** - * @param {Object} state - * @param {Object} state.orderedViewFrame - * @returns {Boolean} - */ -Exhibit.ThumbnailView.prototype.stateDiffers = function(state) { - if (typeof state.orderedViewFrame !== "undefined") { - return this._orderedViewFrame.stateDiffers(state.orderedViewFrame); - } else { - return false; - } -}; - -/** - * @static - * @param {Number} groupLevel - * @param {String} label - * @returns {Element} - */ -Exhibit.ThumbnailView.constructGroup = function(groupLevel, label) { - var template = { - "tag": "div", - "class": "exhibit-thumbnailView-group", - "children": [ - { "tag": "h" + (groupLevel + 1), - "children": [ - label, - { "tag": "span", - "class": "exhibit-collectionView-group-count", - "children": [ - " (", - { "tag": "span", - "field": "countSpan" - }, - ")" - ] - } - ], - "field": "header" - }, - { "tag": "div", - "class": "exhibit-collectionView-group-content", - "field": "contentDiv" - } - ] - }; - return Exhibit.jQuery.simileDOM("template", template); -}; - /** * @returns {jQuery} */ -Exhibit.ThumbnailView.constructItemContainer = function() { - var div = Exhibit.jQuery("
"); - div.addClass("exhibit-thumbnailView-body"); - return div; +Exhibit.ThumbnailView.prototype.constructItemContainer = function() { + return Exhibit.jQuery("
    ").addClass("exhibit-thumbnailView-body"); }; /** diff --git a/scripted/src/scripts/ui/views/tile-view.js b/scripted/src/scripts/ui/views/tile-view.js index 4f005517..a30f2621 100644 --- a/scripted/src/scripts/ui/views/tile-view.js +++ b/scripted/src/scripts/ui/views/tile-view.js @@ -49,11 +49,14 @@ Exhibit.TileView = function(containerElmt, uiContext) { this.register(); }; +Exhibit.TileView.prototype = new Exhibit.EnumeratedView(); /** * @constant */ Exhibit.TileView._settingSpecs = { }; +Exhibit.TileView.prototype._itemContainerClass = "exhibit-tileView-itemContainer"; + /** * @param {Object} configuration * @param {Element} containerElmt @@ -102,223 +105,14 @@ Exhibit.TileView.createFromDOM = function(configElmt, containerElmt, uiContext) return view; }; -/** - * - */ -Exhibit.TileView.prototype.dispose = function() { - var view = this; - Exhibit.jQuery(this.getUIContext().getCollection().getElement()).unbind( - "onItemsChanged.exhibit", - view._onItemsChanged - ); - - this._orderedViewFrame.dispose(); - this._orderedViewFrame = null; - this._dom = null; - - this._dispose(); -}; - -/** - * - */ -Exhibit.TileView.prototype._initializeUI = function() { - var self, template; - - self = this; - - Exhibit.jQuery(this.getContainer()).empty(); - self._initializeViewUI(function() { - return Exhibit.jQuery(self._dom.bodyDiv).html(); - }); - - template = { - elmt: this.getContainer(), - children: [ - { tag: "div", - field: "headerDiv" - }, - { tag: "div", - "class": "exhibit-collectionView-body", - field: "bodyDiv" - }, - { tag: "div", - field: "footerDiv" - } - ] - }; - this._dom = Exhibit.jQuery.simileDOM("template", template); - this._orderedViewFrame._divHeader = this._dom.headerDiv; - this._orderedViewFrame._divFooter = this._dom.footerDiv; - this._orderedViewFrame.initializeUI(); - - Exhibit.View.addViewState( - this.getID(), - this.exportState() - ); - - this._reconstruct(); -}; - -/** - * - */ Exhibit.TileView.prototype._reconstruct = function() { - var view, state, closeGroups, i; - view = this; - state = { - div: this._dom.bodyDiv, - contents: null, - groupDoms: [], - groupCounts: [] - }; - - closeGroups = function(groupLevel) { - for (i = groupLevel; i < state.groupDoms.length; i++) { - Exhibit.jQuery(state.groupDoms[i].countSpan).html(state.groupCounts[i]); - } - state.groupDoms = state.groupDoms.slice(0, groupLevel); - state.groupCounts = state.groupCounts.slice(0, groupLevel); - - if (groupLevel > 0 && groupLevel <= state.groupDoms.length) { - state.div = state.groupDoms[groupLevel - 1].contentDiv; - } else { - state.div = view._dom.bodyDiv; - } - state.contents = null; - }; - - this._orderedViewFrame.onNewGroup = function(groupSortKey, keyType, groupLevel) { - closeGroups(groupLevel); - - var groupDom = Exhibit.TileView.constructGroup(groupLevel, groupSortKey); - - Exhibit.jQuery(state.div).append(groupDom.elmt); - state.div = groupDom.contentDiv; - - state.groupDoms.push(groupDom); - state.groupCounts.push(0); - }; + this._construct(); +} - this._orderedViewFrame.onNewItem = function(itemID, index) { - var i, itemLensItem, itemLens; - if (typeof state.contents === "undefined" || state.contents === null) { - state.contents = Exhibit.TileView.constructList(); - Exhibit.jQuery(state.div).append(state.contents); - } - - for (i = 0; i < state.groupCounts.length; i++) { - state.groupCounts[i]++; - } - - itemLensItem = Exhibit.jQuery("
  1. "); - itemLens = view.getUIContext().getLensRegistry().createLens(itemID, itemLensItem, view.getUIContext()); - state.contents.append(itemLensItem); - }; - - Exhibit.jQuery(this.getContainer()).hide(); - - Exhibit.jQuery(this._dom.bodyDiv).empty(); - this._orderedViewFrame.reconstruct(); - closeGroups(0); - - Exhibit.jQuery(this.getContainer()).show(); -}; - -/** - * @returns {Object} - */ -Exhibit.TileView.prototype.makeState = function() { - return {}; -}; - -/** - * @param {String} sub - * @param {Object} state - * @returns {Object} - */ -Exhibit.TileView.prototype.makeStateWithSub = function(sub, state) { - var original; - original = this.makeState(); - original[sub] = state; - return original; -}; - -/** - * @param {Object} state - * @returns {Object} - */ -Exhibit.TileView.prototype.exportState = function(state) { - if (typeof state === "undefined" || state === null) { - return this.makeStateWithSub(this._orderedViewFrame._historyKey, - this._orderedViewFrame.exportState()); - } else { - return state; - } -}; - -/** - * @param {Object} state - * @param {Object} state.orderedViewFrame - */ -Exhibit.TileView.prototype.importState = function(state) { - if (this._orderedViewFrame !== null && this.stateDiffers(state)) { - this._orderedViewFrame.importState(state.orderedViewFrame); - } -}; - -/** - * @param {Object} state - * @param {Object} state.orderedViewFrame - * @returns {Boolean} - */ -Exhibit.TileView.prototype.stateDiffers = function(state) { - if (typeof state.orderedViewFrame !== "undefined") { - return this._orderedViewFrame.stateDiffers(state.orderedViewFrame); - } else { - return false; - } -}; - -/** - * @static - * @param {Number} groupLevel - * @param {String} label - * @returns {Element} - */ -Exhibit.TileView.constructGroup = function(groupLevel, label) { - var template = { - tag: "div", - "class": "exhibit-collectionView-group", - children: [ - { tag: "h" + (groupLevel + 1), - children: [ - label, - { tag: "span", - "class": "exhibit-collectionView-group-count", - children: [ - " (", - { tag: "span", - field: "countSpan" - }, - ")" - ] - } - ], - field: "header" - }, - { tag: "div", - "class": "exhibit-collectionView-group-content", - field: "contentDiv" - } - ] - }; - return Exhibit.jQuery.simileDOM("template", template); -}; /** * @returns {jQuery} */ -Exhibit.TileView.constructList = function() { +Exhibit.TileView.prototype.constructItemContainer = function() { return Exhibit.jQuery("
      ").addClass("exhibit-tileView-body"); }; diff --git a/scripted/src/styles/views/thumbnail-view.css b/scripted/src/styles/views/thumbnail-view.css index 18ba5241..00c3a151 100644 --- a/scripted/src/styles/views/thumbnail-view.css +++ b/scripted/src/styles/views/thumbnail-view.css @@ -1,11 +1,17 @@ -div.exhibit-thumbnailView-group { +div.exhibit-collectionView-group { clear: both; } -div.exhibit-thumbnailView-body { +ol.exhibit-thumbnailView-body { + list-style: none; } -div.exhibit-thumbnailView-itemContainer { +li.exhibit-thumbnailView-itemContainer { float: left; display: inline; } + + + + + diff --git a/scripted/src/styles/views/tile-view.css b/scripted/src/styles/views/tile-view.css index d02d08fc..3c58cf4d 100644 --- a/scripted/src/styles/views/tile-view.css +++ b/scripted/src/styles/views/tile-view.css @@ -9,4 +9,8 @@ table.exhibit-tileView-body { } td.exhibit-tileView-itemIndex { -} \ No newline at end of file +} + +li.exhibit-thumbnailView-itemContainer { + +} From 76ec6f5350d4da16855c6d32e93789db78ab90d8 Mon Sep 17 00:00:00 2001 From: Tochukwu Okoro Date: Mon, 7 Apr 2014 15:42:00 -0400 Subject: [PATCH 2/3] fixed missing _reconstruct method error --- scripted/src/scripts/ui/views/thumbnail-view.js | 11 +++++++++++ 1 file changed, 11 insertions(+) diff --git a/scripted/src/scripts/ui/views/thumbnail-view.js b/scripted/src/scripts/ui/views/thumbnail-view.js index d5031402..d72b56e8 100644 --- a/scripted/src/scripts/ui/views/thumbnail-view.js +++ b/scripted/src/scripts/ui/views/thumbnail-view.js @@ -133,6 +133,17 @@ Exhibit.ThumbnailView.createFromDOM = function(configElmt, containerElmt, uiCont return view; }; +/** + * + */ +Exhibit.ThumbnailView.prototype._reconstruct = function() { + if (this._settings.columnCount < 2) { + this._construct(); + } else { + this._reconstructWithTable(); + } +}; + Exhibit.ThumbnailView.prototype._reconstructWithTable = function() { var view, state, closeGroups; view = this; From de7bb6d6fc425ca5d1c2f7106cfc9df39640298f Mon Sep 17 00:00:00 2001 From: Tochukwu Okoro Date: Mon, 7 Apr 2014 17:19:08 -0400 Subject: [PATCH 3/3] added the enumeredView file --- .../src/scripts/ui/views/enumerated-view.js | 237 ++++++++++++++++++ 1 file changed, 237 insertions(+) create mode 100644 scripted/src/scripts/ui/views/enumerated-view.js diff --git a/scripted/src/scripts/ui/views/enumerated-view.js b/scripted/src/scripts/ui/views/enumerated-view.js new file mode 100644 index 00000000..6c5bd730 --- /dev/null +++ b/scripted/src/scripts/ui/views/enumerated-view.js @@ -0,0 +1,237 @@ +/** + * @fileOverview View functions for Thumbnail and Tile view. + * @author Tochukwu Okoro + */ + +/** + * @constructor + */ +Exhibit.EnumeratedView = function() {} + +/** + * + */ +Exhibit.EnumeratedView.prototype._initializeUI = function() { + var self, template; + + self = this; + + Exhibit.jQuery(this.getContainer()).empty(); + self._initializeViewUI(function() { + return Exhibit.jQuery(self._dom.bodyDiv).html(); + }); + + template = { + elmt: this.getContainer(), + children: [ + { tag: "div", + field: "headerDiv" + }, + { tag: "div", + "class": "exhibit-collectionView-body", + field: "bodyDiv" + }, + { tag: "div", + field: "footerDiv" + } + ] + }; + this._dom = Exhibit.jQuery.simileDOM("template", template); + this._orderedViewFrame._divHeader = this._dom.headerDiv; + this._orderedViewFrame._divFooter = this._dom.footerDiv; + this._orderedViewFrame._generatedContentElmtRetriever = function() { + return self._dom.bodyDiv; + }; + this._orderedViewFrame.initializeUI(); + + Exhibit.View.addViewState( + this.getID(), + this.exportState() + ); + + this._reconstruct(); +}; + +/** + * @returns {Object} + */ +Exhibit.EnumeratedView.prototype.makeState = function() { + return {}; +}; + +/** + * @param {String} sub + * @param {Object} state + * @returns {Object} + */ +Exhibit.EnumeratedView.prototype.makeStateWithSub = function(sub, state) { + var original; + original = this.makeState(); + original[sub] = state; + return original; +}; + +/** + * @param {Object} state + * @returns {Object} + */ +Exhibit.EnumeratedView.prototype.exportState = function(state) { + if (typeof state === "undefined" || state === null) { + return this.makeStateWithSub(this._orderedViewFrame._historyKey, + this._orderedViewFrame.exportState()); + } else { + return state; + } +}; + + +/** + * @param {Object} state + * @param {Object} state.orderedViewFrame + */ +Exhibit.EnumeratedView.prototype.importState = function(state) { + if (this._orderedViewFrame !== null && this.stateDiffers(state)) { + this._orderedViewFrame.importState(state.orderedViewFrame); + } +}; + +/** + * @param {Object} state + * @param {Object} state.orderedViewFrame + * @returns {Boolean} + */ +Exhibit.EnumeratedView.prototype.stateDiffers = function(state) { + if (typeof state.orderedViewFrame !== "undefined") { + return this._orderedViewFrame.stateDiffers(state.orderedViewFrame); + } else { + return false; + } +}; + +/** + * @static + * @param {Number} groupLevel + * @param {String} label + * @returns {Element} + */ +Exhibit.EnumeratedView.constructGroup = function(groupLevel, label) { + var template = { + tag: "div", + "class": "exhibit-collectionView-group", + children: [ + { tag: "h" + (groupLevel + 1), + children: [ + label, + { tag: "span", + "class": "exhibit-collectionView-group-count", + children: [ + " (", + { tag: "span", + field: "countSpan" + }, + ")" + ] + } + ], + field: "header" + }, + { tag: "div", + "class": "exhibit-collectionView-group-content", + field: "contentDiv" + } + ] + }; + return Exhibit.jQuery.simileDOM("template", template); +}; + +/** + * Handles the construction of the display for new items and also group + * of items for Tile View and Thumbnail View less than two columns. + */ +Exhibit.EnumeratedView.prototype._construct = function() { + var view, state, closeGroups, i; + view = this; + state = { + div: this._dom.bodyDiv, + contents: null, + groupDoms: [], + groupCounts: [] + }; + + closeGroups = function(groupLevel) { + for (i = groupLevel; i < state.groupDoms.length; i++) { + Exhibit.jQuery(state.groupDoms[i].countSpan).html(state.groupCounts[i]); + } + state.groupDoms = state.groupDoms.slice(0, groupLevel); + state.groupCounts = state.groupCounts.slice(0, groupLevel); + + if (groupLevel > 0 && groupLevel <= state.groupDoms.length) { + state.div = state.groupDoms[groupLevel - 1].contentDiv; + } else { + state.div = view._dom.bodyDiv; + } + state.contents = null; + }; + + + this._orderedViewFrame.onNewGroup = function(groupSortKey, keyType, groupLevel) { + closeGroups(groupLevel); + + var groupDom = Exhibit.EnumeratedView.constructGroup(groupLevel, groupSortKey); + + Exhibit.jQuery(state.div).append(groupDom.elmt); + state.div = groupDom.contentDiv; + + state.groupDoms.push(groupDom); + state.groupCounts.push(0); + }; + + this._orderedViewFrame.onNewItem = function(itemID, index) { + var i, itemLensItem, itemLens; + if (typeof state.contents === "undefined" || state.contents === null) { + state.contents = view.constructItemContainer(); + Exhibit.jQuery(state.div).append(state.contents); + } + + for (i = 0; i < state.groupCounts.length; i++) { + state.groupCounts[i]++; + } + + itemLensItem = Exhibit.jQuery("
    1. "); + itemLensItem.attr("class", view._itemContainerClass); + + if (view._lensRegistry){ + itemLens = view._lensRegistry.createLens(itemID, itemLensItem, view.getUIContext()); + } else { + itemLens = view.getUIContext().getLensRegistry().createLens(itemID, itemLensItem, view.getUIContext()); + } + + state.contents.append(itemLensItem); + }; + + Exhibit.jQuery(this.getContainer()).hide(); + + Exhibit.jQuery(this._dom.bodyDiv).empty(); + this._orderedViewFrame.reconstruct(); + closeGroups(0); + + Exhibit.jQuery(this.getContainer()).show(); +}; + +/** + * + */ +Exhibit.EnumeratedView.prototype.dispose = function() { + var view = this; + Exhibit.jQuery(this.getUIContext().getCollection().getElement()).unbind( + "onItemsChanged.exhibit", + view._onItemsChanged + ); + + this._orderedViewFrame.dispose(); + this._orderedViewFrame = null; + this._dom = null; + + this._dispose(); +}; +