function setCSS(el, properties) {
+ function setCSS(el, properties) {
var key;
for (key in properties) {
if (properties.hasOwnProperty(key)) {
@@ -193,12 +195,29 @@ Helper functions
-
function bulkUpdateCSS(data) {
- executeNextFrame(function () {
+ function bulkUpdateCSS(data, callback) {
+ executeNextFrame(function () {
var i, item;
for (i = 0; i < data.length; i++) {
item = data[i];
setCSS(item.el, item.css);
+ }
+
+
+
+
Run optional callback
+
+
if (typeof callback === 'function') {
+ executeNextFrame(callback);
}
});
}Helper functions
-
+
Remove whitespace around filter names
- function cleanFilterName(filterName) {
+ function cleanFilterName(filterName) {
return filterName.replace(/^\s+|\s+$/g, '').toLowerCase();
}
+
Remove listener from an element (IE8 compatible)
- function removeEventListener(el, eventName, handler) {
- if (el.removeEventListener) {
+ function removeEventListener(el, eventName, handler) {
+ if (window.jQuery) {
+ $(el).off(eventName, handler);
+ } else if (el.removeEventListener) {
el.removeEventListener(eventName, handler);
} else {
el.detachEvent('on' + eventName, handler);
@@ -244,22 +265,25 @@ Helper functions
-
+
Add listener to an element (IE8 compatible)
- function addEventListener(el, eventName, handler) {
+ function addEventListener(el, eventName, handler) {
removeEventListener(el, eventName, handler);
- if (el.addEventListener) {
+
+ if (window.jQuery) {
+ $(el).on(eventName, handler);
+ } else if (el.addEventListener) {
el.addEventListener(eventName, handler);
} else {
- el.attachEvent('on' + eventName, function () {
+ el.attachEvent('on' + eventName, function () {
handler.call(el);
});
}
@@ -268,68 +292,68 @@ Helper functions
-
+
Checks if element el is not visible in the browser
- function isHidden(el) {
+ function isHidden(el) {
return el.offsetParent === null;
}
+
Returns the elements height without margin
- function getHeight(el) {
+ function getHeight(el) {
return el.offsetHeight;
}
+
Returns the elements width without margin
- function getWidth(el) {
+ function getWidth(el) {
return el.offsetWidth;
}
+
Return true if element has class
- function hasClass(el, className) {
+ function hasClass(el, className) {
if (el.classList) {
return el.classList.contains(className);
}
@@ -339,17 +363,17 @@ Helper functions
-
+
Add class to element (IE8+)
- function addClass(el, className) {
+ function addClass(el, className) {
if (el.classList) {
el.classList.add(className);
} else {
@@ -360,17 +384,17 @@ Helper functions
-
+
Remove class from element (IE8+)
- function removeClass(el, className) {
+ function removeClass(el, className) {
if (el.classList) {
el.classList.remove(className);
} else {
@@ -381,17 +405,17 @@ Helper functions
-
+
Get value of specified data attribute
- function getData(el, attr, isInt, prefix) {
+ function getData(el, attr, isInt, prefix) {
if (prefix === undefined) {
prefix = 'wookmark-';
}
@@ -405,17 +429,17 @@ Helper functions
-
+
Set value of specified data attribute
- function setData(el, attr, val, prefix) {
+ function setData(el, attr, val, prefix) {
if (prefix === undefined) {
prefix = 'wookmark-';
}
@@ -425,17 +449,17 @@ Helper functions
-
+
Remove duplicates from given array
- function removeDuplicates(items) {
+ function removeDuplicates(items) {
var temp = {}, result = [], x, i = items.length;
while (i--) {
x = getData(items[i], 'id', true);
@@ -450,51 +474,51 @@ Helper functions
-
+
Get the computed style from an element (IE 8 compatible)
- function getStyle(el, prop) {
+ function getStyle(el, prop) {
return window.getComputedStyle !== undefined ? window.getComputedStyle(el, null).getPropertyValue(prop) : el.currentStyle[prop];
}
+
- function indexOf(items, item) {
+ function indexOf(items, item) {
var len = items.length, i;
for (i = 0; i < len; i++) {
if (items[i] === item) {
return i;
}
}
- return -1;
+ return -1;
}
+
Main wookmark plugin class
@@ -503,16 +527,16 @@
Main wookmark plugin class
-
+
- function Wookmark(container, options) {
+ function Wookmark(container, options) {
options = options || {};
if (typeof container === 'string') {
@@ -522,18 +546,18 @@ Main wookmark plugin class
-
+
this.container = container;
- this.columns = this.containerWidth = this.resizeTimer = null;
+ this.columns = this.resizeTimer = null;
this.activeItemCount = 0;
this.placeholders = [];
this.itemHeightsInitialized = false;
@@ -543,11 +567,11 @@ Main wookmark plugin class
-
+
Bind instance methods
@@ -571,11 +595,11 @@
Main wookmark plugin class
-
+
Initialize children of the container
@@ -586,11 +610,11 @@
Main wookmark plugin class
-
+
Initial update and layout
@@ -602,11 +626,11 @@
Main wookmark plugin class
-
+
Collect filter classes after items have been initialized
@@ -617,11 +641,11 @@
Main wookmark plugin class
-
+
Listen to resize event of the browser if enabled
@@ -634,11 +658,11 @@
Main wookmark plugin class
-
+
Listen to external refresh event
@@ -650,26 +674,26 @@
Main wookmark plugin class
-
+
Get all valid children of the container object and store them
- Wookmark.prototype.initItems = function () { Wookmark.prototype.initItems = function () {
-
+
By select all children of the container if no selector is specified
@@ -677,18 +701,18 @@
Main wookmark plugin class
if (this.itemSelector === undefined) {
var items = [], child, children = this.container.children,
- i = children.length;
+ i = children.length;
while (i--) {
child = children[i];
-
+
Skip comment nodes on IE8
@@ -699,11 +723,11 @@
Main wookmark plugin class
-
+
Show item
@@ -728,26 +752,26 @@
Main wookmark plugin class
-
+
Reload all filter classes from all items and cache them
- Wookmark.prototype.updateFilterClasses = function () { Wookmark.prototype.updateFilterClasses = function () {
-
+
Collect filter data
@@ -763,11 +787,11 @@
Main wookmark plugin class
-
+
Read filter classes and globally store each filter class as object and the fitting items in the array
@@ -799,17 +823,17 @@
Main wookmark plugin class
-
+
Method for updating the plugins options
- Wookmark.prototype.updateOptions = function (options) {
+ Wookmark.prototype.updateOptions = function (options) {
var key;
this.itemHeightsDirty = true;
options = options || {};Main wookmark plugin class
-
+
Overwrite non existing instance variables with the ones from options or the defaults
@@ -840,11 +864,11 @@
Main wookmark plugin class
-
+
Vertical offset uses a fallback to offset
@@ -855,11 +879,11 @@
Main wookmark plugin class
-
+
Update layout so changes apply
@@ -871,17 +895,17 @@
Main wookmark plugin class
-
+
This timer ensures that layout is not continuously called as window is being dragged.
- Wookmark.prototype.onResize = function () {
+ Wookmark.prototype.onResize = function () {
clearTimeout(this.resizeTimer);
this.itemHeightsDirty = this.flexibleWidth !== 0;
this.resizeTimer = setTimeout(this.layout, this.resizeDelay);
@@ -890,17 +914,17 @@ Main wookmark plugin class
-
+
Marks the items heights as dirty and does a relayout
- Wookmark.prototype.onRefresh = function () {
+ Wookmark.prototype.onRefresh = function () {
this.itemHeightsDirty = true;
this.layout();
};Main wookmark plugin class
-
+
Filters the active items with the given string filters.
@param filters array of string
@@ -920,7 +944,7 @@
Main wookmark plugin class
- Wookmark.prototype.filter = function (filters, mode, dryRun) {
+ Wookmark.prototype.filter = function (filters, mode, dryRun) {
var activeFilters = [], activeFiltersLength, activeItems = [],
i, j, k, filter;
@@ -933,11 +957,11 @@ Main wookmark plugin class
-
+
Collect active filters
@@ -953,11 +977,11 @@
Main wookmark plugin class
-
+
Get items for active filters with the selected mode
@@ -969,11 +993,11 @@
Main wookmark plugin class
-
+
Set all items in all active filters active
@@ -989,11 +1013,11 @@
Main wookmark plugin class
-
+
Find shortest filter class
@@ -1008,11 +1032,11 @@
Main wookmark plugin class
-
+
Iterate over shortest filter and find elements in other filter classes
@@ -1032,11 +1056,11 @@
Main wookmark plugin class
-
+
Search for current item in each active filter class
@@ -1060,11 +1084,11 @@
Main wookmark plugin class
-
+
Remove duplicates from active items
@@ -1077,11 +1101,11 @@
Main wookmark plugin class
-
+
Hide inactive items
@@ -1090,7 +1114,7 @@
Main wookmark plugin class
if (!dryRun) {
i = this.items.length;
while (i--) {
- if (indexOf(activeItems, this.items[i]) === -1) {
+ if (indexOf(activeItems, this.items[i]) === -1) {
addClass(this.items[i], this.inactiveClass);
}
}
@@ -1100,11 +1124,11 @@ Main wookmark plugin class
-
+
Show all items if no filter is selected
@@ -1116,11 +1140,11 @@
Main wookmark plugin class
-
+
Show active items
@@ -1135,11 +1159,11 @@
Main wookmark plugin class
-
+
Unset columns and refresh grid for a full layout
@@ -1154,17 +1178,17 @@
Main wookmark plugin class
-
+
Creates or updates existing placeholders to create columns of even height
- Wookmark.prototype.refreshPlaceholders = function (columnWidth, sideOffset) {
+ Wookmark.prototype.refreshPlaceholders = function (columnWidth, sideOffset) {
var i,
containerHeight = getHeight(this.container),
columnsLength = this.columns.length,
@@ -1179,11 +1203,11 @@ Main wookmark plugin class
-
+
Add more placeholders if necessary
@@ -1203,11 +1227,11 @@
Main wookmark plugin class
-
+
Update each placeholder
@@ -1225,12 +1249,12 @@
Main wookmark plugin class
height =
Math.max(
0, containerHeight - top - innerOffset);
setCSS(placeholder, {
- position:
'absolute',
- display: height >
0 ?
'block' :
'none',
- left: (i * columnWidth + sideOffset) +
'px',
- top: top +
'px',
- width: (columnWidth - innerOffset) +
'px',
- height: height +
'px'
+
position:
'absolute',
+
display: height >
0 ?
'block' :
'none',
+
left: (i * columnWidth + sideOffset) +
'px',
+
top: top +
'px',
+
width: (columnWidth - innerOffset) +
'px',
+
height: height +
'px'
});
}
}
@@ -1239,17 +1263,17 @@
Main wookmark plugin class
-
+
Method the get active items which are not disabled and visible
- Wookmark.prototype.getActiveItems = function () {
+ Wookmark.prototype.getActiveItems = function () {
var inactiveClass = this.inactiveClass,
i,
result = [],
@@ -1263,6 +1287,8 @@ Main wookmark plugin class
result.push(item);
}
}
+ } else {
+ return items;
}
return result;
};Main wookmark plugin class
-
+
Method to get the standard item width
- Wookmark.prototype.getItemWidth = function () {
+ Wookmark.prototype.getItemWidth = function () {
var itemWidth = this.itemWidth,
innerWidth = getWidth(this.container) - 2 * this.outerOffset,
flexibleWidth = this.flexibleWidth;
@@ -1292,17 +1318,17 @@ Main wookmark plugin class
if (this.items.length > 0 && (itemWidth === undefined || (itemWidth === 0 && !this.flexibleWidth))) {
itemWidth = getWidth(this.items[0]);
} else if (typeof itemWidth === 'string' && itemWidth.indexOf('%') >= 0) {
- itemWidth = parseFloat(this.itemWidth) / 100 * innerWidth;
+ itemWidth = parseFloat(itemWidth) / 100 * innerWidth;
}
+
Calculate flexible item width if option is set
@@ -1320,11 +1346,11 @@
Main wookmark plugin class
-
+
Find highest column count
@@ -1345,41 +1371,41 @@
Main wookmark plugin class
-
+
- Wookmark.prototype.layout = function (force, callback) { Wookmark.prototype.layout = function (force, callback) {
-
+
Do nothing if container isn’t visible
- if (isHidden(this.container)) { return; } if (!force && isHidden(this.container)) { return; }
-
+
Calculate basic layout parameters.
@@ -1390,28 +1416,27 @@
Main wookmark plugin class
containerWidth = getWidth(
this.container),
innerWidth = containerWidth -
2 *
this.outerOffset,
columns =
Math.floor((innerWidth +
this.offset) / columnWidth),
- offset =
0,
+ offset,
maxHeight =
0,
activeItems =
this.getActiveItems(),
activeItemsLength = activeItems.length,
- item,
- i = activeItemsLength;
+ item;
-
+
- if (this.itemHeightsDirty || !this.itemHeightsInitialized) {
- while (i--) {
+ if (force || this.itemHeightsDirty || !this.itemHeightsInitialized) {
+ for (var i = 0; i < activeItemsLength; i++) {
item = activeItems[i];
if (this.flexibleWidth) {Main wookmark plugin class
-
+
Stretch items to fill calculated width
@@ -1440,11 +1465,11 @@
Main wookmark plugin class
-
+
Use less columns if there are to few items
@@ -1455,11 +1480,11 @@
Main wookmark plugin class
-
+
Calculate the offset based on the alignment of columns to the parent container
@@ -1473,11 +1498,11 @@
Main wookmark plugin class
-
+
Get direction for positioning
@@ -1488,11 +1513,11 @@
Main wookmark plugin class
-
+
If container and column count hasn’t changed, we can only update the columns.
@@ -1508,11 +1533,11 @@
Main wookmark plugin class
-
+
Set container height to height of the grid.
@@ -1523,11 +1548,11 @@
Main wookmark plugin class
-
+
Update placeholders
@@ -1544,11 +1569,11 @@
Main wookmark plugin class
-
+
Run optional callback
@@ -1562,47 +1587,47 @@
Main wookmark plugin class
-
+
Sort elements with configurable comparator
- Wookmark.prototype.sortElements = function (elements) {
+ Wookmark.prototype.sortElements = function (elements) {
return typeof this.comparator === 'function' ? elements.sort(this.comparator) : elements;
};
+
Perform a full layout update.
- Wookmark.prototype.layoutFull = function (columnWidth, columns, offset) {
+ Wookmark.prototype.layoutFull = function (columnWidth, columns, offset) {
var item, k = 0, i = 0, activeItems, activeItemCount, shortest = null, shortestIndex = null,
- sideOffset, heights = [], itemBulkCSS = [], leftAligned = this.align === 'left';
+ sideOffset, heights = [], itemBulkCSS = [], leftAligned = this.align === 'left', self = this;
this.columns = [];
+
Sort elements before layouting
@@ -1614,11 +1639,11 @@
Main wookmark plugin class
-
+
Prepare arrays to store height of columns and items.
@@ -1632,11 +1657,11 @@
Main wookmark plugin class
-
+
Loop over items.
@@ -1648,11 +1673,11 @@
Main wookmark plugin class
-
+
Find the shortest column.
@@ -1671,11 +1696,11 @@
Main wookmark plugin class
-
+
stick to left side if alignment is left and this is the first column
@@ -1689,21 +1714,21 @@
Main wookmark plugin class
-
+
itemBulkCSS[i] = {
- el: item,
- css: {
- position: 'absolute',
- top: shortest + 'px'
+ el: item,
+ css: {
+ position: 'absolute',
+ top: shortest + 'px'
}
};
itemBulkCSS[i].css[this.direction] = sideOffset + 'px';Main wookmark plugin class
-
+
Update column height and store item in shortest column
@@ -1724,18 +1749,49 @@
Main wookmark plugin class
heights[shortestIndex] += getData(item, 'height', true) + this.verticalOffset;
this.columns[shortestIndex].push(item);
i++;
- }
+ }
+
+
+
+
+
+
+
+
+
Update all css in the next frame and mark container as initalised
- bulkUpdateCSS(itemBulkCSS);
+
+
+ bulkUpdateCSS(itemBulkCSS, function () {
-
+
+
Initialisation done
+
+
+
+ if (!hasClass(self.container, 'wookmark-initialised')) {
+ addClass(self.container, 'wookmark-initialised');
+ }
+ });
+
+
+
+
+
+
Return longest column
@@ -1747,18 +1803,18 @@
Main wookmark plugin class
-
+
This layout method only updates the vertical position of the
existing column assignments.
- Wookmark.prototype.layoutColumns = function (columnWidth, offset) {
+ Wookmark.prototype.layoutColumns = function (columnWidth, offset) {
var heights = [], itemBulkCSS = [], k = 0, j = 0,
i = this.columns.length, currentHeight,
column, item, sideOffset;
@@ -1773,9 +1829,9 @@ Main wookmark plugin class
item = column[k];
setData(item, 'top', currentHeight);
itemBulkCSS[j] = {
- el: item,
- css: {
- top: currentHeight + 'px'
+ el: item,
+ css: {
+ top: currentHeight + 'px'
}
};
itemBulkCSS[j].css[this.direction] = sideOffset + 'px';
@@ -1790,11 +1846,11 @@ Main wookmark plugin class
-
+
Return longest column
@@ -1806,17 +1862,17 @@
Main wookmark plugin class
-
+
Clear event listeners and time outs and the instance itself
- Wookmark.prototype.clear = function () {
+ Wookmark.prototype.clear = function () {
clearTimeout(this.resizeTimer);
var i = this.placeholders.length;
while (i--) {
@@ -1829,28 +1885,28 @@ Main wookmark plugin class
-
+
Register as jQuery plugin if jQuery is loaded
if (window.jQuery !== undefined) {
- jQuery.fn.wookmark = function (options) {
+ jQuery.fn.wookmark = function (options) {
var i = this.length;
-
+
Use first element if container is an jQuery object
@@ -1863,11 +1919,11 @@
Main wookmark plugin class
-
+
Call plugin multiple times if there are multiple elements selected
@@ -1882,11 +1938,11 @@
Main wookmark plugin class
-
+
Create a wookmark instance or update an existing one
@@ -1904,7 +1960,8 @@
Main wookmark plugin class
window.Wookmark = Wookmark;
return Wookmark;
-}));
+}));
+})(window.jQuery);
diff --git a/example/index.html b/example/index.html
index 4f0fd17..99e61c9 100644
--- a/example/index.html
+++ b/example/index.html
@@ -23,7 +23,7 @@
Wookmark Simple Example
- Resize the browser window or click a grid item to trigger layout updates.
+ Resize the browser window to trigger layout updates.
The example contains two grids to show that they both work on their own but are instantiated with a single call.
@@ -31,7 +31,7 @@ Wookmark Simple Example
-
+
1
2
Wookmark Simple Example
-
+
16
17
18
Wookmark Simple Example
-
-
-