aboutsummaryrefslogtreecommitdiffstats
path: root/docs/assets/js/flowr.js
diff options
context:
space:
mode:
Diffstat (limited to 'docs/assets/js/flowr.js')
-rw-r--r--docs/assets/js/flowr.js307
1 files changed, 0 insertions, 307 deletions
diff --git a/docs/assets/js/flowr.js b/docs/assets/js/flowr.js
deleted file mode 100644
index 79d2830..0000000
--- a/docs/assets/js/flowr.js
+++ /dev/null
@@ -1,307 +0,0 @@
-/**
- * Flowr.js - Simple jQuery plugin to emulate Flickr's justified view
- * For usage information refer to http://github.com/kalyan02/flowr-js
- *
- *
- * @author: Kalyan Chakravarthy (http://KalyanChakravarthy.net)
- * @version: v0.1
- */
-(function() {
- //$("#container2").css( 'border', '1px solid #ccc');
-
-
- flowr = function(elem, options) {
-
- $this = elem;
-
- var extend = function(out) {
- out = out || {};
-
- for (var i = 1; i < arguments.length; i++) {
- if (!arguments[i])
- continue;
-
- for (var key in arguments[i]) {
- if (arguments[i].hasOwnProperty(key))
- out[key] = arguments[i][key];
- }
- }
-
- return out;
- };
-
-
- var data = (function() {
- var lastId = 0,
- store = {};
-
- return {
- set: function(element, info) {
- var id;
- if (element.myCustomDataTag === undefined) {
- id = lastId++;
- element.myCustomDataTag = id;
- } else { id = element.myCustomDataTag; }
- store[id] = extend(store[id], info);
- },
-
- get: function(element) {
- return store[element.myCustomDataTag] || {};
- }
- };
- }());
-
- function reorderContent() {
- var _initialWidth = data.get($this).width;
- var _newWidth = $this.offsetWidth;
- var _change = _initialWidth - _newWidth;
-
- if (_initialWidth != _newWidth) {
- $this.innerHTML = "";
- var _settings = data.get($this).lastSettings || {};
- _settings.data = data.get($this).data || {};
- _settings.maxWidth = $this.offsetWidth - 1;
- flowr($this, _settings);
- }
- }
-
-
- var ROW_CLASS_NAME = 'flowr-row'; // Class name for the row of flowy
- var MAX_LAST_ROW_GAP = 25; // If the width of last row is lesser than max-width, recalculation is needed
- var NO_COPY_FIELDS = ['complete', 'data', 'responsive']; // these attributes will not be carried forward for append related calls
- var DEFAULTS = {
- 'data': [],
- 'padding': 5, // whats the padding between flowy items
- 'height': 240, // Minimum height an image row should take
- 'render': null, // callback function to get the tag
- 'append': false, // TODO
- 'widthAttr': 'width', // a custom data structure can specify which attribute refers to height/width
- 'heightAttr': 'height',
- 'maxScale': 1.5, // In case there is only 1 elment in last row
- 'maxWidth': $this.offsetWidth - 1, // 1px is just for offset
- 'itemWidth': null, // callback function for width
- 'itemHeight': null, // callback function for height
- 'complete': null, // complete callback
- 'rowClassName': ROW_CLASS_NAME,
- 'rows': -1, // Maximum number of rows to render. -1 for no limit.
- 'responsive': true // make content responsive
- };
-
- var settings = extend(DEFAULTS, options);
-
- // If data is being appended, we already have settings
- // If we already have settings, retrieve them
- if (settings.append && data.get($this).lastSettings) {
- lastSettings = data.get($this).lastSettings;
-
- // Copy over the settings from previous init
- for (attr in DEFAULTS) {
- if (NO_COPY_FIELDS.indexOf(attr) < 0 && settings[attr] == DEFAULTS[attr]) {
- settings[attr] = lastSettings[attr];
- }
- }
-
- // Check if we have an incomplete last row
- lastRow = data.get($this).lastRow;
- if (lastRow.data.length > 0 && settings.maxWidth - lastRow.width > MAX_LAST_ROW_GAP) {
- // Prepend the incomplete row to newly loaded data and redraw
- lastRowData = lastSettings.data.slice(lastSettings.data.length - lastRow.data.length - 1);
- settings.data = lastRowData.concat(settings.data);
-
- // Remove the incomplete row
- // TODO: Don't reload this stuff later. Reattach to new row.
- $('.' + settings.rowClassName + ':last', $this).detach();
- } else {
- // console.log( lastRow.data.length );
- // console.log( lastRow.width );
- }
- }
-
- // only on the first initial call
- if (!settings.responsive && !settings.append)
- $this.width($this.width());
-
- // Basic sanity checks
- if (!(settings.data instanceof Array))
- return;
-
- if (typeof(settings.padding) != 'number')
- settings.padding = parseInt(settings.padding);
-
- if (typeof(settings.itemWidth) != 'function') {
- settings.itemWidth = function(data) {
- return data[settings.widthAttr];
- }
- }
-
- if (typeof(settings.itemHeight) != 'function') {
- settings.itemHeight = function(data) {
- return data[settings.heightAttr];
- }
- }
-
- function getNextRow(data, settings) {
- var itemIndex = 0;
- var itemsLength = data.length;
- var lineItems = [];
- var lineWidth = 0;
- var maxWidth = settings.maxWidth;
- var paddingSize = settings.padding;
-
- // console.log( 'maxItems=' + data.length );
-
- requiredPadding = function() {
- var extraPads = arguments.length == 1 ? arguments[0] : 0;
- return (lineItems.length - 1 + extraPads) * settings.padding;
- }
-
- while (lineWidth + requiredPadding() < settings.maxWidth && (itemIndex < itemsLength)) {
- var itemData = data[itemIndex];
- var itemWidth = settings.itemWidth.call($this, itemData);
- var itemHeight = settings.itemHeight.call($this, itemData);
-
- var minHeight = settings.height;
- var minWidth = Math.floor(itemWidth * settings.height / itemHeight);
-
-
- if (minWidth > settings.maxWidth) {
- // very short+wide images like panoramas
- // show them even if ugly, as wide as possible
- minWidth = settings.maxWidth - 1 - requiredPadding(1);
- minHeight = settings.height * minHeight / minWidth;
- }
- var newLineWidth = lineWidth + minWidth;
-
- // console.log( 'lineWidth = ' + lineWidth );
- // console.log( 'newLineWidth = ' + newLineWidth );
- if (newLineWidth < settings.maxWidth) {
- lineItems.push({
- 'height': minHeight,
- 'width': minWidth,
- 'itemData': itemData
- });
-
- lineWidth += minWidth;
- itemIndex++;
- } else {
- // We'd have exceeded width. So break off to scale.
- // console.log( 'breaking off = ' + itemIndex );
- // console.log( 'leave off size = ' + lineItems.length );
- break;
- }
- } //while
-
- // Scale the size to max width
- testWidth = 0;
- if (lineWidth < settings.maxWidth) {
- var fullScaleWidth = settings.maxWidth - requiredPadding() - 10;
- var currScaleWidth = lineWidth;
- var scaleFactor = fullScaleWidth / currScaleWidth;
- if (scaleFactor > settings.maxScale)
- scaleFactor = 1;
-
- var newHeight = Math.round(settings.height * scaleFactor);
- for (i = 0; i < lineItems.length; i++) {
- var lineItem = lineItems[i];
- lineItem.width = Math.floor(lineItem.width * scaleFactor);
- lineItem.height = newHeight;
-
- testWidth += lineItem.width;
- }
- }
-
- return {
- data: lineItems,
- width: testWidth + requiredPadding()
- };
- }
-
-
- // If the responsive var is set to true then listen for resize method
- // and prevent resizing from happening twice if responsive is set again during append phase!
- if (settings.responsive && !data.get($this).__responsive) {
- window.addEventListener('resize', function() {
- initialWidth = data.get($this).width;
- newWidth = $this.offsetWidth;
-
- //initiate resize
- if (initialWidth != newWidth) {
- var task_id = data.get($this).task_id;
- if (task_id) {
- task_id = clearTimeout(task_id);
- task_id = null;
- }
- task_id = setTimeout(function() {reorderContent(data);}, 80);
- data.set($this, {task_id: task_id});
- }
- });
- data.set($this, {__responsive: true});
- }
-
-
- // Get a copy of original data. 1 level deep copy is sufficient.
- var _data = settings.data.slice(0);
- var rowData = null;
- var currentRow = 0;
- var currentItem = 0;
-
- // Store all the data
- var allData = [];
- for (i = 0; i < _data.length; i++) {
- allData.push(_data[i]);
- }
- data.set($this, {data: allData});
-
- // While we have a new row
- while ((rowData = getNextRow(_data, settings)) != null && rowData.data.length > 0) {
- if (settings.rows > 0 && currentRow >= settings.rows)
- break;
- // remove the number of elements in the new row from the top of data stack
- _data.splice(0, rowData.data.length);
-
- // Create a new row div, add class, append the htmls and insert the flowy items
- var $row = document.createElement('DIV');
- if ($row.classList)
- $row.classList.add(settings.rowClassName);
- else
- $row.className += ' ' + settings.rowClassName;
- var slack = $this.clientWidth - rowData.width - 2 * settings.padding
- for (i = 0; i < rowData.data.length; i++) {
- var displayData = rowData.data[i];
- // Get the HTML object from custom render function passed as argument
- var displayObject = settings.render.call($this, displayData);
- extraw = Math.floor(slack/rowData.data.length)
- if (i == 0) {
- extraw += slack % rowData.data.length
- }
- // Set some basic stuff
- displayObject.style.width = displayData.width + extraw;
- displayObject.style.height = displayData.height;
- displayObject.style.marginBottom = settings.padding + "px";
- displayObject.style.marginLeft = i == 0 ? '0' : settings.padding + "px";
- $row.append(displayObject);
-
- currentItem++;
- }
- $this.append($row);
- // console.log ( "I> rowData.data.length="+rowData.data.length +" rowData.width="+rowData.width );
-
- currentRow++;
- data.set($this, {lastRow: rowData});
- }
- // store the current state of settings and the items in last row
- // we'll need this info when we append more items
- data.set($this, {lastSettings: settings});
-
- // onComplete callback
- // pass back info about list of rows and items rendered
- if (typeof(settings.complete) == 'function') {
- var completeData = {
- renderedRows: currentRow,
- renderedItems: currentItem
- }
- settings.complete.call($this, completeData);
- }
- };
-
-})();
generated by cgit v1.2.3 (git 2.25.1) at 2024-11-21 23:07:12 +0000