getnikola · May 19, 2017 · May 19, 2017
Showing with 371 additions and 8 deletions.

+1 −0 CHANGES.txt

+309 −0 nikola/data/themes/base/assets/js/flowr.js

+61 −8 nikola/data/themes/base/templates/gallery.tmpl
diff --git a/CHANGES.txt b/CHANGES.txt
@@ -4,6 +4,7 @@ New in master
 Features
 --------
 
+* Ported gallery image layout to base theme (Issue #2775)
 * Use ``.theme`` files to store theme metadata (Issue #2758)
 * New ``add_header_permalinks`` filter, for Sphinx-style header links
   (Issue #2636)

diff --git a/nikola/data/themes/base/assets/js/flowr.js b/nikola/data/themes/base/assets/js/flowr.js
@@ -0,0 +1,309 @@
+/**
+ * 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) {
+        var data = (function() {
+        var lastId = 0,
+            store = {};
+
+        return {
+            set: function(element, info) {
+                var id;
+                if (element.myCustomDataTag === undefined) {
+                    id = lastId++;
+                    element.myCustomDataTag = id;
+                }
+                store[id] = info;
+            },
+
+            get: function(element) {
+                return store[element.myCustomDataTag] || {};
+            }
+        };
+        }());
+
+        $this = elem;
+        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 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 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];
+            }
+        }
+
+        // A standalone utility to calculate the item widths for a particular row
+        // Returns rowWidth: width occupied & data : the items in the new row
+        var utils = {
+                getNextRow: function(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()
+                    };
+                }, //getNextRow
+                reorderContent: function() {
+                    /*
+                     TODO: optimize for faster resizing by reusing dom objects instead of killing the dom
+                     */
+                    var _initialWidth = data.get($this).width;
+                    var _newWidth = $this.offsetWidth;
+                    var _change = _initialWidth - _newWidth;
+
+                    if (_initialWidth != _newWidth) {
+                        $this.html('');
+                        var _settings = data.get($this).lastSettings;
+                        _settings.data = data.get($this).data;
+                        _settings.maxWidth = $this.offsetWidth - 1;
+                        flowr($this, _settings);
+                    }
+                }
+            } //utils
+
+        // 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) {
+        // FIXME
+//            $(window).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(utils.reorderContent, 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 = utils.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);
+            }
+    };
+
+})();