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/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("
");
+ 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();
+};
+
diff --git a/scripted/src/scripts/ui/views/thumbnail-view.js b/scripted/src/scripts/ui/views/thumbnail-view.js
index 945dabd0..d72b56e8 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,17 @@ 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();
+ this._construct();
} 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 +189,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 +228,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("- ");
- 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 {
+
+}