framework7rails 2.0.0 → 3.0.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: 463c0b0406e449aa16db0b35b57af51c60dfa00e
-  data.tar.gz: 1aff97bb953bf9fb2f82392718f87f787a8101c2
+  metadata.gz: df30f6365c2f4f5fd823e8d41efd6045d83d6f16
+  data.tar.gz: f5a0bda553bb7606e16aa124fea514ff169088d0
 SHA512:
-  metadata.gz: 6ede6087d6c1c6da14476c6853b52c4eaa59470066eea2f265b99abcda08b0192daaaf7ca81260807315ba2882eb74518569a17f4fbcaa1629136649efc2335d
-  data.tar.gz: 34c5a82ae5aa18702235d1631feb506ee57386150b24130319bada89f04423d040d9e7d86ee3dbd06486bf12823e355244fb49984b1a74f8c878106efd64b9e4
+  metadata.gz: eee72257dae1507fba7e6b6402a93dad725c7642cbc9ba2cb258a4874945933d81fb9ba355f686aa8640e85845341db4f1982973603af4bee1804f436bd32a77
+  data.tar.gz: 0b58c94a767c2d8afbcac0a8c858c64f09b46beb9e63df1f0da381f250f1f3c020d7533862daf2319918adf9a2a2cd130861d21bedd6bafc6cfafcca9fba75bb

data/README.md

@@ -1,4 +1,4 @@
-## Current Version (0.9.7)
+## Current Version (0.10.0)
 
 Although there exists a gem for f7 already, but I found it complicated and it was really out of date. I try to keep it updated from https://github.com/nolimits4web/Framework7/releases but you can also do it yourself by running ``./update_from_vendor``
 

data/lib/framework7rails/version.rb

@@ -1,4 +1,4 @@
 module Framework7rails
-  # framework7 version 0.9.8
-  VERSION = "2.0.0"
+  # framework7 version 0.10.0
+  VERSION = "3.0.0"
 end

data/update_from_vendor.rb

@@ -3,7 +3,7 @@
 if ARGV[0]
   VERSION_FRAMEWORK7 = ARGV[0]
 else 
-  VERSION_FRAMEWORK7 = "0.9.8"
+  VERSION_FRAMEWORK7 = "0.10.0"
 end
 
 puts "Updating Framework Version #{VERSION_FRAMEWORK7}"

data/vendor/assets/javascripts/framework7.js

@@ -1,5 +1,5 @@
 /*
- * Framework7 0.9.7
+ * Framework7 0.10.0
  * Full Featured HTML Framework For Building iOS 7 Apps
  *
  * http://www.idangero.us/framework7
@@ -10,7 +10,7 @@
  *
  * Licensed under MIT
  *
- * Released on: November 2, 2014
+ * Released on: December 8, 2014
 */
 (function () {
 
@@ -24,7 +24,7 @@
         var app = this;
     
         // Version
-        app.version = '0.9.8';
+        app.version = '0.10.0';
     
         // Default Parameters
         app.params = {
@@ -36,6 +36,7 @@
             uniqueHistory: false,
             uniqueHistoryIgnoreGetParameters: false,
             dynamicPageUrl: 'content-{{index}}',
+            allowDuplicateUrls: false,
             router: true,
             // Push State
             pushState: false,
@@ -86,6 +87,7 @@
             swipePanel: false, // or 'left' or 'right'
             swipePanelActiveArea: 0,
             swipePanelCloseOpposite: true,
+            swipePanelOnlyClose: false,
             swipePanelNoFollow: false,
             swipePanelThreshold: 0,
             panelsCloseByOutside: true,
@@ -163,6 +165,7 @@
                 reloadPages: false,
                 uniqueHistory: app.params.uniqueHistory,
                 uniqueHistoryIgnoreGetParameters: app.params.uniqueHistoryIgnoreGetParameters,
+                allowDuplicateUrls: app.params.allowDuplicateUrls,
                 swipeBackPage: app.params.swipeBackPage,
                 swipeBackPageAnimateShadow: app.params.swipeBackPageAnimateShadow,
                 swipeBackPageAnimateOpacity: app.params.swipeBackPageAnimateOpacity,
@@ -716,7 +719,7 @@
                     leftWidth = noLeft ? 0 : left.outerWidth(true),
                     rightWidth = noRight ? 0 : right.outerWidth(true),
                     centerWidth = center.outerWidth(true),
-                    navbarWidth = n.width(),
+                    navbarWidth = n[0].offsetWidth - parseInt(n.css('padding-left'), 10) - parseInt(n.css('padding-right'), 10),
                     onLeft = n.hasClass('navbar-on-left'),
                     currLeft, diff;
         
@@ -926,7 +929,10 @@
             attachEvents();
         
             // Search
+            var previousQuery;
             function search(query) {
+                if (query.trim() === previousQuery) return;
+                previousQuery = query.trim();
                 var values = query.trim().toLowerCase().split(' ');
                 var foundItems = [];
                 if (isVirtualList) {
@@ -1981,7 +1987,7 @@
             if (view.params.reloadPages === true) options.reload = true;
         
             if (!view.allowPageChange) return false;
-            if (url && view.url === url && !options.reload) return false;
+            if (url && view.url === url && !options.reload && !view.params.allowDuplicateUrls) return false;
             view.allowPageChange = false;
             if (app.xhr && view.xhr && view.xhr === app.xhr) {
                 app.xhr.abort();
@@ -2127,21 +2133,21 @@
                     navbarInners = viewContainer.find('.navbar-inner:not(.cached)');
                     newNavbarInner.addClass('navbar-on-left').removeClass('cached');
                 }
-                
                 // Remove/hide previous page in force mode
                 if (force) {
                     var pageToRemove, navbarToRemove;
                     pageToRemove = $(pagesInView[pagesInView.length - 2]);
-                    if (dynamicNavbar) navbarToRemove = $(pageToRemove[0].f7RelatedNavbar || navbarInners[navbarInners.length - 2]);
+                    
+                    if (dynamicNavbar) navbarToRemove = $(pageToRemove[0] && pageToRemove[0].f7RelatedNavbar || navbarInners[navbarInners.length - 2]);
                     if (view.params.domCache && view.initialPages.indexOf(pageToRemove[0]) >= 0) {
-                        pageToRemove.addClass('cached');
-                        if (dynamicNavbar) {
+                        if (pageToRemove.length && pageToRemove[0] !== newPage[0]) pageToRemove.addClass('cached');
+                        if (dynamicNavbar && navbarToRemove.length && navbarToRemove[0] !== newNavbarInner[0]) {
                             navbarToRemove.addClass('cached');
                         }
                     }
                     else {
-                        pageToRemove.remove();
-                        if (dynamicNavbar) {
+                        if (pageToRemove.length) pageToRemove.remove();
+                        if (dynamicNavbar && navbarToRemove.length) {
                             navbarToRemove.remove();
                         } 
                     }
@@ -2153,14 +2159,33 @@
                         view.history = view.history.slice(0, view.history.indexOf(url) + 2);
                     }
                     else {
-                        view.history[view.history.length - 2] = url;
+                        if (view.history[[view.history.length - 2]]) {
+                            view.history[view.history.length - 2] = url;    
+                        }
+                        else {
+                            view.history.unshift(url);
+                        }
                     }
                 }
         
                 oldPage = $(pagesInView[pagesInView.length - 1]);
+                if (view.params.domCache) {
+                    if (oldPage[0] === newPage[0]) {
+                        oldPage = pagesContainer.children('.page.page-on-center');
+                        if (oldPage.length === 0 && view.activePage) oldPage = $(view.activePage.container);
+                    }
+                }
                     
                 if (dynamicNavbar && !oldNavbarInner) {
                     oldNavbarInner = $(navbarInners[navbarInners.length - 1]);
+                    if (view.params.domCache) {
+                        if (oldNavbarInner[0] === newNavbarInner[0]) {
+                            oldNavbarInner = navbar.children('.navbar-inner.navbar-on-center:not(.cached)');
+                        }
+                        if (oldNavbarInner.length === 0) {
+                            oldNavbarInner = navbar.children('.navbar-inner[data-page="'+oldPage.attr('data-page')+'"]');
+                        }
+                    }
                     if (oldNavbarInner.length === 0 || newNavbarInner[0] === oldNavbarInner[0]) dynamicNavbar = false;
                 }
         
@@ -2236,8 +2261,11 @@
             
             if (!force) {
                 // Go back when there is no pages on left
-                view.url = view.history[view.history.length - 2];
-                url = view.url;
+                if (!preloadOnly) {
+                    view.url = view.history[view.history.length - 2];
+                    url = view.url;
+                }
+                    
                 if (content) {
                     parseNewPage();
                     setPages();
@@ -2311,7 +2339,6 @@
                     app.router._back(view, options);
                 });
             }
-            
             if (pagesInView.length > 1 && !force) {
                 // Simple go back to previos page in view
                 app.router._back(view, options);
@@ -2332,7 +2359,7 @@
                     proceed();
                     return;
                 }
-                else if (url.indexOf('#') < 0) {
+                else if (url.indexOf('#') !== 0) {
                     // Load ajax page
                     app.get(options.url, view, options.ignoreCache, function (content, error) {
                         if (error) {
@@ -2438,8 +2465,8 @@
                         if (newNavbar) {
                             previousNavbar = $(view.container).find('.navbar-inner[data-page="' + view.pagesCache[preloadUrl] + '"]');
                             previousNavbar.insertBefore(newNavbar);
+                            if(!previousNavbar || previousNavbar.length === 0) previousNavbar = newNavbar.prev('.navbar-inner.cached');
                         }
-                        if(!previousNavbar || previousNavbar.length === 0) previousNavbar = newNavbar.prev('.navbar-inner.cached');
                     }
                     else {
                         // Just load previous page
@@ -2476,7 +2503,8 @@
                 var textHTML = params.text ? '<div class="modal-text">' + params.text + '</div>' : '';
                 var afterTextHTML = params.afterText ? params.afterText : '';
                 var noButtons = !params.buttons || params.buttons.length === 0 ? 'modal-no-buttons' : '';
-                modalHTML = '<div class="modal ' + noButtons + '"><div class="modal-inner">' + (titleHTML + textHTML + afterTextHTML) + '</div><div class="modal-buttons">' + buttonsHTML + '</div></div>';
+                var verticalButtons = params.verticalButtons ? 'modal-buttons-vertical' : '';
+                modalHTML = '<div class="modal ' + noButtons + '"><div class="modal-inner">' + (titleHTML + textHTML + afterTextHTML) + '</div><div class="modal-buttons ' + verticalButtons + '">' + buttonsHTML + '</div></div>';
             }
             
             _modalTemplateTempDiv.innerHTML = modalHTML;
@@ -2717,7 +2745,7 @@
             if (typeof removeOnClose === 'undefined') removeOnClose = true;
             if (typeof modal === 'string' && modal.indexOf('<') >= 0) {
                 var _modal = document.createElement('div');
-                _modal.innerHTML = $.trim(modal);
+                _modal.innerHTML = modal.trim();
                 if (_modal.childNodes.length > 0) {
                     modal = _modal.childNodes[0];
                     if (removeOnClose) modal.classList.add('remove-on-close');
@@ -2831,7 +2859,7 @@
             if (typeof removeOnClose === 'undefined') removeOnClose = true;
             if (typeof modal === 'string' && modal.indexOf('<') >= 0) {
                 var _modal = document.createElement('div');
-                _modal.innerHTML = $.trim(modal);
+                _modal.innerHTML = modal.trim();
                 if (_modal.childNodes.length > 0) {
                     modal = _modal.childNodes[0];
                     if (removeOnClose) modal.classList.add('remove-on-close');
@@ -3007,23 +3035,32 @@
         ************   Swipe panels   ************
         ======================================================*/
         app.initSwipePanels = function () {
-            var panel = $('.panel.panel-' + app.params.swipePanel);
-            if (panel.length === 0) return;
-        
+            var panel, side;
+            if (app.params.swipePanel) {
+                panel = $('.panel.panel-' + app.params.swipePanel);
+                side = app.params.swipePanel;
+                if (panel.length === 0) return;
+            }
+            else {
+                if (app.params.swipePanelOnlyClose) {
+                    if ($('.panel').length === 0) return;
+                }
+                else return;
+            }
+            
             var panelOverlay = $('.panel-overlay');
-            var isTouched, isMoved, isScrolling, touchesStart = {}, touchStartTime, touchesDiff, translate, opened, panelWidth, effect, direction, side;
+            var isTouched, isMoved, isScrolling, touchesStart = {}, touchStartTime, touchesDiff, translate, opened, panelWidth, effect, direction;
             var views = $('.' + app.params.viewsClass);
-            side = app.params.swipePanel;
         
             function handleTouchStart(e) {
-                if (!app.allowPanelOpen || !app.params.swipePanel || isTouched) return;
+                if (!app.allowPanelOpen || (!app.params.swipePanel && !app.params.swipePanelOnlyClose) || isTouched) return;
                 if ($('.modal-in, .photo-browser-in').length > 0) return;
-                if (!app.params.swipePanelCloseOpposite) {
+                if (!(app.params.swipePanelCloseOpposite || app.params.swipePanelOnlyClose)) {
                     if ($('.panel.active').length > 0 && !panel.hasClass('active')) return;
                 }
                 touchesStart.x = e.type === 'touchstart' ? e.targetTouches[0].pageX : e.pageX;
                 touchesStart.y = e.type === 'touchstart' ? e.targetTouches[0].pageY : e.pageY;
-                if (app.params.swipePanelCloseOpposite) {
+                if (app.params.swipePanelCloseOpposite || app.params.swipePanelOnlyClose) {
                     if ($('.panel.active').length > 0) {
                         side = $('.panel.active').hasClass('panel-left') ? 'left' : 'right';
                     }
@@ -3032,7 +3069,8 @@
                     }
                 }
                 panel = $('.panel.panel-' + side);
-                if (app.params.swipePanelActiveArea) {
+                opened = panel.hasClass('active');
+                if (app.params.swipePanelActiveArea && !opened) {
                     if (side === 'left') {
                         if (touchesStart.x > app.params.swipePanelActiveArea) return;
                     }
@@ -3102,10 +3140,11 @@
         
                 if (!isMoved) {
                     effect = panel.hasClass('panel-cover') ? 'cover' : 'reveal';
-                    panel.show();
-                    panelOverlay.show();
-                    opened = panel.hasClass('active');
-                    panelWidth = panel.width();
+                    if (!opened) {
+                        panel.show();
+                        panelOverlay.show();
+                    }
+                    panelWidth = panel[0].offsetWidth;
                     panel.transition(0);
                     if (panel.find('.' + app.params.viewClass).length > 0) {
                         if (app.sizeNavbars) app.sizeNavbars(panel.find('.' + app.params.viewClass)[0]);
@@ -3241,8 +3280,8 @@
             var messages = page.find('.messages');
             if (messages.length === 0) return;
             var pageContent = page.find('.page-content');
-            if (!messages.hasClass('new-messages-first')) pageContent[0].scrollTop = messages.height() - pageContent.height();
             if (messages.hasClass('messages-auto-layout')) app.updateMessagesLayout(messages);
+            if (!messages.hasClass('new-messages-first')) pageContent[0].scrollTop = pageContent[0].scrollHeight - pageContent[0].offsetHeight;
         };
         app.addMessage = function (props) {
             props = props || {};
@@ -3326,7 +3365,7 @@
             var messages = messagesContent.find('.messages');
             var newOnTop = messages.hasClass('new-messages-first');
             var currentScroll = messagesContent[0].scrollTop;
-            var newScroll = newOnTop ? 0 : messages.height() - messagesContent.height();
+            var newScroll = newOnTop ? 0 : messagesContent[0].scrollHeight - messagesContent[0].offsetHeight;
             if (newScroll === currentScroll) return;
             messagesContent.scrollTop(newScroll, 300);
         };
@@ -3345,7 +3384,7 @@
                         app.swipeoutOpenedEl.is(target[0]) ||
                         target.parents('.swipeout').is(app.swipeoutOpenedEl) ||
                         target.hasClass('modal-in') ||
-                        target.parents('.modal-in').length > 0 ||
+                        target.parents('.modal.modal-in').length > 0 ||
                         target.hasClass('modal-overlay')
                         )) {
                         app.swipeoutClose(app.swipeoutOpenedEl);
@@ -3385,12 +3424,12 @@
                     noFoldLeft = actionsLeft.hasClass('swipeout-actions-no-fold') || app.params.swipeoutActionsNoFold;
                     noFoldRight = actionsRight.hasClass('swipeout-actions-no-fold') || app.params.swipeoutActionsNoFold;
                     if (actionsLeft.length > 0) {
-                        actionsLeftWidth = actionsLeft.width();
+                        actionsLeftWidth = actionsLeft.outerWidth();
                         buttonsLeft = actionsLeft.children('a');
                         overswipeLeftButton = actionsLeft.find('.swipeout-overswipe');
                     }
                     if (actionsRight.length > 0) {
-                        actionsRightWidth = actionsRight.width();
+                        actionsRightWidth = actionsRight.outerWidth();
                         buttonsRight = actionsRight.children('a');
                         overswipeRightButton = actionsRight.find('.swipeout-overswipe');
                     }
@@ -3622,7 +3661,7 @@
             el.trigger('open').addClass('swipeout-opened').removeClass('transitioning');
             swipeOutActions.addClass('swipeout-actions-opened');
             var buttons = swipeOutActions.children('a');
-            var swipeOutActionsWidth = swipeOutActions.width();
+            var swipeOutActionsWidth = swipeOutActions.outerWidth();
             var translate = dir === 'right' ? -swipeOutActionsWidth : swipeOutActionsWidth;
             var i;
             if (buttons.length > 1) {
@@ -3653,7 +3692,7 @@
             var swipeOutActions = el.find('.swipeout-actions-opened').removeClass('swipeout-actions-opened');
             var noFold = swipeOutActions.hasClass('swipeout-actions-no-fold') || app.params.swipeoutActionsNoFold;
             var buttons = swipeOutActions.children('a');
-            var swipeOutActionsWidth = swipeOutActions.width();
+            var swipeOutActionsWidth = swipeOutActions.outerWidth();
             app.allowSwipeout = false;
             el.trigger('close');
             el.removeClass('swipeout-opened').addClass('transitioning');
@@ -3737,7 +3776,7 @@
                 sortingItems = sortingEl.parent().find('li');
                 sortableContainer = sortingEl.parents('.sortable');
                 e.preventDefault();
-                app.allowsPanelOpen = app.allowSwipeout = false;
+                app.allowPanelOpen = app.allowSwipeout = false;
             }
             function handleTouchMove(e) {
                 if (!isTouched || !sortingEl) return;
@@ -3785,7 +3824,7 @@
                 });
             }
             function handleTouchEnd(e) {
-                app.allowsPanelOpen = app.allowSwipeout = true;
+                app.allowPanelOpen = app.allowSwipeout = true;
                 if (!isTouched || !isMoved) {
                     isTouched = false;
                     isMoved = false;
@@ -3871,27 +3910,7 @@
             view = view[0].f7View;
             if (!view) return;
         
-            // Collect all values
-            var select = smartSelect.find('select')[0];
-            var $select = $(select);
-            if (select.disabled || smartSelect.hasClass('disabled') || $select.hasClass('disabled')) {
-                return;
-            }
-            var values = {};
-            values.length = select.length;
-            var option;
-            for (var i = 0; i < select.length; i++) {
-                option = $(select[i]);
-                values[i] = {
-                    value: select[i].value,
-                    text: select[i].textContent.trim(),
-                    selected: select[i].selected,
-                    group: option.parent('optgroup')[0],
-                    image: option.attr('data-option-image') || $select.attr('data-option-image'),
-                    icon: option.attr('data-option-icon') || $select.attr('data-option-icon'),
-                    disabled: select[i].disabled
-                };
-            }
+            // Parameters
             var openIn = smartSelect.attr('data-open-in');
             if (!openIn) openIn = app.params.smartSelectInPopup ? 'popup' : 'page';
         
@@ -3901,61 +3920,110 @@
             var backOnSelect = smartSelect.attr('data-back-onselect') ? (smartSelect.attr('data-back-onselect') === 'true' ? true : false) : app.params.smartSelectBackOnSelect;
             var formTheme = smartSelect.attr('data-form-theme') || app.params.smartSelectFormTheme;
             var navbarTheme = smartSelect.attr('data-navbar-theme') || app.params.smartSelectNavbarTheme;
+            var virtualList = smartSelect.attr('data-virtual-list') === 'true';
+            var virtualListItemHeight = smartSelect.attr('data-virtual-list-height');
         
-            // Generate dynamic page layout
+            // Collect all options/values
+            var select = smartSelect.find('select')[0];
+            var $select = $(select);
+            if (select.disabled || smartSelect.hasClass('disabled') || $select.hasClass('disabled')) {
+                return;
+            }
+            var values = [];
             var id = (new Date()).getTime();
             var inputType = select.multiple ? 'checkbox' : 'radio';
             var inputName = inputType + '-' + id;
-            var inputsHTML = '';
-            var previousGroup;
-            for (var j = 0; j < values.length; j++) {
-                if (values[j].disabled) continue;
-                var checked = values[j].selected ? 'checked' : '';
-                if (values[j].group) {
-                    if (values[j].group !== previousGroup) {
-                        inputsHTML += '<li class="item-divider">' + values[j].group.label + '</li>';
-                        previousGroup = values[j].group;
-                    }
-                }
-                var media = '';
-                if (inputType === 'checkbox') media += '<i class="icon icon-form-checkbox"></i>';
-                if (values[j].icon) media += '<i class="icon ' + values[j].icon + '"></i>';
-                if (values[j].image) media += '<img src="' + values[j].image + '">';
-                inputsHTML +=
+            var option, optionHasMedia, optionImage, optionIcon, optionGroup, optionGroupLabel, optionPreviousGroup, optionShowGroupLabel, previousGroup;
+            for (var i = 0; i < select.length; i++) {
+                option = $(select[i]);
+                if (option[0].disabled) continue;
+                optionImage = option.attr('data-option-image') || $select.attr('data-option-image');
+                optionIcon = option.attr('data-option-icon') || $select.attr('data-option-icon');
+                optionHasMedia = optionImage || optionIcon || inputType === 'checkbox';
+                optionGroup = option.parent('optgroup')[0];
+                optionGroupLabel = optionGroup && optionGroup.label;
+                optionShowGroupLabel = false;
+                if (optionGroup) {
+                    if (optionGroup !== previousGroup) {
+                        optionShowGroupLabel = true;
+                        previousGroup = optionGroup;
+                    }
+                }
+                values.push({
+                    value: option[0].value,
+                    text: option[0].textContent.trim(),
+                    selected: option[0].selected,
+                    group: optionGroup,
+                    groupLabel: optionGroupLabel,
+                    showGroupLabel: optionShowGroupLabel,
+                    image: optionImage,
+                    icon: optionIcon,
+                    disabled: option[0].disabled,
+                    inputType: inputType,
+                    id: id,
+                    hasMedia: optionHasMedia,
+                    checkbox: inputType === 'checkbox',
+                    inputName: inputName,
+                    test: this
+                });
+            }
+        
+        
+            // Item template/HTML
+            if (!app._compiledTemplates.smartSelectItem) {
+                app._compiledTemplates.smartSelectItem = t7.compile(app.params.smartSelectItemTemplate || 
+                    '{{#if showGroupLabel}}' +
+                    '<li class="item-divider">{{groupLabel}}</li>' +
+                    '{{/if}}' +
                     '<li>' +
-                        '<label class="label-' + inputType + ' item-content">' +
-                            '<input type="' + inputType + '" name="' + inputName + '" value="' + values[j].value + '" ' + checked + '>' +
-                            (media !== '' ? '<div class="item-media">' + media + '</div>' : '') +
+                        '<label class="label-{{inputType}} item-content">' +
+                            '<input type="{{inputType}}" name="{{inputName}}" value="{{value}}" {{#if selected}}checked{{/if}}>' +
+                            '{{#if hasMedia}}' +
+                            '<div class="item-media">' +
+                                '{{#if checkbox}}<i class="icon icon-form-checkbox"></i>{{/if}}' +
+                                '{{#if icon}}<i class="icon {{icon}}"></i>{{/if}}' +
+                                '{{#if image}}<img src="{{image}}">{{/if}}' +
+                            '</div>' +
+                            '{{/if}}' +
                             '<div class="item-inner">' +
-                                '<div class="item-title">' + values[j].text + '</div>' +
+                                '<div class="item-title">{{text}}</div>' +
                             '</div>' +
                         '</label>' +
-                    '</li>';
+                    '</li>'
+                );
             }
-            // Navbar HTML
-            var navbarLeftTemplate = openIn === 'popup' ? app.params.smartSelectPopupCloseTemplate.replace(/{{closeText}}/g, closeText) : app.params.smartSelectBackTemplate.replace(/{{backText}}/g, backText);
-            var navbarHTML =
-                '<div class="navbar ' + (navbarTheme ? 'theme-' + navbarTheme : '') + '">' +
-                '  <div class="navbar-inner">' +
-                    navbarLeftTemplate +
-                '    <div class="center sliding">' + pageTitle + '</div>' +
-                '  </div>' +
-                '</div>';
-        
-            if (app.params.smartSelectNavbarTemplate) {
-                if (!app._compiledTemplates.smartSelectNavbar) {
-                    app._compiledTemplates.smartSelectNavbar = t7.compile(app.params.smartSelectNavbarTemplate);
+            var smartSelectItemTemplate = app._compiledTemplates.smartSelectItem;
+            
+            var inputsHTML = '';
+            if (!virtualList) {
+                for (var j = 0; j < values.length; j++) {
+                    inputsHTML += smartSelectItemTemplate(values[j]);
                 }
-                navbarHTML = app._compiledTemplates.smartSelectNavbar({
-                    pageTitle: pageTitle,
-                    backText: backText,
-                    openIn: openIn,
-                    inPopup: openIn === 'popup',
-                    inPage: openIn === 'page',
-                    id: id,
-                    inputType: inputType
-                });
             }
+        
+            // Navbar HTML
+            if (!app._compiledTemplates.smartSelectNavbar) {
+                app._compiledTemplates.smartSelectNavbar = t7.compile(app.params.smartSelectNavbarTemplate || 
+                    '<div class="navbar {{#if navbarTheme}}theme-{{navbarTheme}}{{/if}}">' +
+                        '<div class="navbar-inner">' +
+                            '{{leftTemplate}}' +
+                            '<div class="center sliding">{{pageTitle}}</div>' +
+                        '</div>' +
+                    '</div>'
+                );
+            }
+            var navbarHTML = app._compiledTemplates.smartSelectNavbar({
+                pageTitle: pageTitle,
+                backText: backText,
+                closeText: closeText,
+                openIn: openIn,
+                navbarTheme: navbarTheme,
+                inPopup: openIn === 'popup',
+                inPage: openIn === 'page',
+                leftTemplate: openIn === 'popup' ? app.params.smartSelectPopupCloseTemplate.replace(/{{closeText}}/g, closeText) : app.params.smartSelectBackTemplate.replace(/{{backText}}/g, backText)
+            });
+        
+            
             // Determine navbar layout type - static/fixed/through
             var noNavbar = '', noToolbar = '', navbarLayout;
             if (openIn === 'page') {
@@ -3998,9 +4066,9 @@
                      (useSearchbar ? searchbarHTML : '') +
                 '    <div class="page-content">' +
                        (navbarLayout === 'static' ? navbarHTML : '') +
-                '      <div class="list-block smart-select-list-' + id + ' ' + (formTheme ? 'theme-' + formTheme : '') + '">' +
+                '      <div class="list-block ' + (virtualList ? 'virtual-list' : '') + ' smart-select-list-' + id + ' ' + (formTheme ? 'theme-' + formTheme : '') + '">' +
                 '        <ul>' +
-                            inputsHTML +
+                            (virtualList ? '' : inputsHTML) +
                 '        </ul>' +
                 '      </div>' +
                 '    </div>' +
@@ -4012,7 +4080,21 @@
         
             // Event Listeners on new page
             function handleInputs(container) {
-                $(container).find('input[name="' + inputName + '"]').on('change', function () {
+                if (virtualList) {
+                    var virtualListInstance = app.virtualList($(container).find('.virtual-list'), {
+                        items: values,
+                        template: smartSelectItemTemplate,
+                        height: virtualListItemHeight || undefined,
+                        searchByItem: function (query, index, item) {
+                            if (item.text.toLowerCase().indexOf(query.trim()) >=0 ) return true;
+                            return false;
+                        }
+                    });
+                    $(container).once(openIn === 'popup' ? 'closed': 'pageBeforeRemove', function () {
+                        if (virtualListInstance && virtualListInstance.destroy) virtualListInstance.destroy();
+                    });
+                }
+                $(container).on('change', 'input[name="' + inputName + '"]', function () {
                     var input = this;
                     var value = input.value;
                     var optionText = [];
@@ -4048,18 +4130,23 @@
                     handleInputs(page.container);
                 }
             }
-            $(document).on('pageInit', pageInit);
-        
+            
             // Load content
             if (openIn === 'popup') {
-                popup = app.popup('<div class="popup smart-select-popup smart-select-popup-' + inputName + '">' +
+                popup = app.popup(
+                        '<div class="popup smart-select-popup smart-select-popup-' + inputName + '">' +
                             '<div class="view navbar-fixed">' +
                                 pageHTML +
                             '</div>' +
-                        '</div>');
+                        '</div>'
+                        );
+                app.initPage($(popup).find('.page'));
                 handleInputs(popup);
             }
-            else view.router.load({content: pageHTML});
+            else {
+                $(document).on('pageInit', pageInit);
+                view.router.load({content: pageHTML});
+            }
         };
         
         /*===============================================================================
@@ -4102,7 +4189,7 @@
             }
                 
             // Append <ul>
-            vl.ul = vl.listBlock.children('ul');
+            vl.ul = vl.params.ul ? $(vl.params.ul) : vl.listBlock.children('ul');
             if (vl.ul.length === 0) {
                 vl.listBlock.append('<ul></ul>');
                 vl.ul = vl.listBlock.children('ul');
@@ -4158,7 +4245,7 @@
                     }
                 }
                 else {
-                    listHeight = items.length * vl.params.height;
+                    listHeight = items.length * vl.params.height / vl.params.cols;
                     rowsPerScreen = Math.ceil(pageHeight / vl.params.height);
                     rowsBefore = vl.params.rowsBefore || rowsPerScreen * 2;
                     rowsAfter = vl.params.rowsAfter || rowsPerScreen;
@@ -4174,13 +4261,15 @@
             // Render items
             vl.render = function (force) {
                 if (force) vl.lastRepaintY = null;
-                var scrollTop = vl.pageContent[0].scrollTop;
-                if (vl.lastRepaintY === null || Math.abs(scrollTop - vl.lastRepaintY) > maxBufferHeight || (!updatableScroll && (scrollTop + pageHeight >= vl.pageContent[0].scrollHeight))) {
+                // var scrollTop = vl.pageContent[0].scrollTop;
+                var scrollTop = -(vl.listBlock[0].getBoundingClientRect().top + vl.pageContent[0].getBoundingClientRect().top);
+                if (vl.lastRepaintY === null || Math.abs(scrollTop - vl.lastRepaintY) > maxBufferHeight || (!updatableScroll && (vl.pageContent[0].scrollTop + pageHeight >= vl.pageContent[0].scrollHeight))) {
                     vl.lastRepaintY = scrollTop;
                 }
                 else {
                     return;
                 }
+        
                 var items = vl.filteredItems || vl.items, 
                     fromIndex, toIndex, heightBeforeFirstItem = 0, heightBeforeLastItem = 0;
                 if (dynamicHeight) {
@@ -4256,16 +4345,19 @@
                     // Append item to fragment
                     vl.fragment.appendChild(item);
         
-                    // Update list height with not updatable scroll
-                    if (!updatableScroll) {
-                        if (dynamicHeight) {
-                            vl.ul[0].style.height = heightBeforeLastItem + 'px';
-                        }
-                        else {
-                            vl.ul[0].style.height = (i + 1) * vl.params.height + 'px';
-                        }
+                
+                }
+        
+                // Update list height with not updatable scroll
+                if (!updatableScroll) {
+                    if (dynamicHeight) {
+                        vl.ul[0].style.height = heightBeforeLastItem + 'px';
+                    }
+                    else {
+                        vl.ul[0].style.height = i * vl.params.height / vl.params.cols + 'px';
                     }
                 }
+                    
         
                 // Update list html
                 if (vl.params.onBeforeClear) vl.params.onBeforeClear(vl, vl.fragment);
@@ -4492,7 +4584,7 @@
             if (!eventsTarget.hasClass('pull-to-refresh-content')) {
                 eventsTarget = eventsTarget.find('.pull-to-refresh-content');
             }
-            if (eventsTarget.length === 0) return;
+            if (!eventsTarget || eventsTarget.length === 0) return;
         
             var isTouched, isMoved, touchesStart = {}, isScrolling, touchesDiff, touchStartTime, container, refresh = false, useTranslate = false, startTranslate = 0, translate, scrollTop, wasScrolled, layer;
             var page = eventsTarget.hasClass('page') ? eventsTarget : eventsTarget.parents('.page');
@@ -4501,8 +4593,6 @@
             if (page.hasClass('no-navbar')) hasNavbar = false;
             if (!hasNavbar) eventsTarget.addClass('pull-to-refresh-no-navbar');
         
-            if (eventsTarget)
-        
             container = eventsTarget;
         
             function handleTouchStart(e) {
@@ -4617,11 +4707,14 @@
         
             // Detach Events on page remove
             if (page.length === 0) return;
-            function detachEvents() {
+            function destroyPullToRefresh() {
                 eventsTarget.off(app.touchEvents.start, handleTouchStart);
                 eventsTarget.off(app.touchEvents.move, handleTouchMove);
                 eventsTarget.off(app.touchEvents.end, handleTouchEnd);
-        
+            }
+            eventsTarget[0].f7DestroyPullToRefresh = destroyPullToRefresh;
+            function detachEvents() {
+                destroyPullToRefresh();
                 page.off('pageBeforeRemove', detachEvents);
             }
             page.on('pageBeforeRemove', detachEvents);
@@ -4648,6 +4741,13 @@
             });
         };
         
+        app.destroyPullToRefresh = function (pageContainer) {
+            pageContainer = $(pageContainer);
+            var pullToRefreshContent = pageContainer.hasClass('pull-to-refresh-content') ? pageContainer : pageContainer.find('.pull-to-refresh-content');
+            if (pullToRefreshContent.length === 0) return;
+            if (pullToRefreshContent[0].f7DestroyPullToRefresh) pullToRefreshContent[0].f7DestroyPullToRefresh();
+        };
+        
         /* ===============================================================================
         ************   Infinite Scroll   ************
         =============================================================================== */
@@ -4880,9 +4980,10 @@
         };
         app.accordionOpen = function (item) {
             item = $(item);
-            var list = item.parents('.accordion-list');
-            var content = item.find('.accordion-item-content');
-            var expandedItem = list.find('.accordion-item-expanded');
+            var list = item.parents('.accordion-list').eq(0);
+            var content = item.children('.accordion-item-content');
+            if (content.length === 0) content = item.find('.accordion-item-content');
+            var expandedItem = list.length > 0 && item.parent().children('.accordion-item-expanded');
             if (expandedItem.length > 0) {
                 app.accordionClose(expandedItem);
             }
@@ -4904,7 +5005,8 @@
         };
         app.accordionClose = function (item) {
             item = $(item);
-            var content = item.find('.accordion-item-content');
+            var content = item.children('.accordion-item-content');
+            if (content.length === 0) content = item.find('.accordion-item-content');
             item.removeClass('accordion-item-expanded');
             content.transition(0);
             content.css('height', content[0].scrollHeight + 'px');
@@ -5378,7 +5480,8 @@
                 }
                 // Accordion
                 if (clicked.hasClass('accordion-item-toggle') || (clicked.hasClass('item-link') && clicked.parent().hasClass('accordion-item'))) {
-                    var accordionItem = clicked.parents('.accordion-item');
+                    var accordionItem = clicked.parent('.accordion-item');
+                    if (accordionItem.length === 0) accordionItem = clicked.parents('.accordion-item');
                     if (accordionItem.length === 0) accordionItem = clicked.parents('li');
                     app.accordionToggle(accordionItem);
                 }
@@ -5406,9 +5509,7 @@
                         }
                     }
                     if (!view) {
-                        for (var i = 0; i < app.views.length; i++) {
-                            if (app.views[i].main) view = app.views[i];
-                        }
+                        if (app.mainView) view = app.mainView;
                     }
                     if (!view) return;
         
@@ -5715,10 +5816,7 @@
             });
             function handlePopState(e) {
                 if (blockPopstate) return;
-                var mainView;
-                for (var i = 0; i < app.views.length; i++) {
-                    if (app.views[i].main) mainView = app.views[i];
-                }
+                var mainView = app.mainView;
                 if (!mainView) return;
                 var state = e.state;
                 if (!state) {
@@ -5875,8 +5973,8 @@
                     }
                 }
                 // First/last
-                s.isFirst = s.activeSlideIndex === 0;
-                s.isLast = s.activeSlideIndex === s.slides.length - s.params.slidesPerView;
+                s.isFirst = s.isBeginning = s.activeSlideIndex === 0;
+                s.isLast = s.isEnd = s.activeSlideIndex === s.slides.length - s.params.slidesPerView;
             };
         
             s.updatePagination = function () {
@@ -6123,8 +6221,8 @@
                 if (typeof speed === 'undefined') speed = s.params.speed;
                 s.previousSlideIndex = s.activeSlideIndex;
                 s.activeSlideIndex = Math.round(index);
-                s.isFirst = s.activeSlideIndex === 0;
-                s.isLast = s.activeSlideIndex === s.slides.length - s.params.slidesPerView;
+                s.isFirst = s.isBeginning = s.activeSlideIndex === 0;
+                s.isLast = s.isEnd = s.activeSlideIndex === s.slides.length - s.params.slidesPerView;
                 s.onTransitionStart();
                 var translateX = isH ? translate * inverter : 0, translateY = isH ? 0 : translate;
                 if (speed === 0) {
@@ -6299,6 +6397,9 @@
                 else s.updateClasses();
                 s.attachEvents();
                 if (s.params.autoplay) s.startAutoplay();
+                if (typeof s.params.onInit === 'function') {
+        	        s.params.onInit();
+                }
             };
             s.update = function () {
                 if (s.params.loop) s.createLoop();
@@ -6417,14 +6518,6 @@
         
             pb.params = params;
             
-            function findView() {
-                var view;
-                for (i = 0; i < app.views.length; i ++) {
-                    if (app.views[i].main) view = app.views[i];
-                }
-                return view;
-            }
-        
             var iconColor = pb.params.theme === 'dark' ? 'color-white' : '';
         
             var navbarTemplate = pb.params.navbarTemplate ||
@@ -6540,7 +6633,7 @@
                 if (pb.params.type === 'page') {
                     $(document).on('pageBeforeInit', pb.onPageBeforeInit);
                     $(document).on('pageBeforeRemove', pb.onPageBeforeRemove);
-                    if (!pb.params.view) pb.params.view = findView();
+                    if (!pb.params.view) pb.params.view = app.mainView;
                     pb.params.view.loadContent(htmlTemplate);
                     return;
                 }
@@ -7095,7 +7188,7 @@
             list.prepend(item[0]);
             container.show();
             
-            var itemHeight = item.height();
+            var itemHeight = item.outerHeight();
             item.css('marginTop', -itemHeight + 'px');
             item.transition(0);
         
@@ -7114,7 +7207,7 @@
             if (item.hasClass('notification-item-removing')) return;
             var container = $('.notifications');
         
-            var itemHeight = item.height();
+            var itemHeight = item.outerHeight();
             item.css('height', itemHeight + 'px').transition(0);
             var clientLeft = item[0].clientLeft;
         
@@ -7139,7 +7232,7 @@
             if (!window.Template7) return;
             Template7.templates = Template7.templates || app.params.templates || {};
             Template7.data = Template7.data || app.params.template7Data || {};
-            Template7.template7Cache = {};
+            Template7.cache = Template7.cache || {};
         
             app.templates = Template7.templates;
             app.template7Data = Template7.data;
@@ -7235,7 +7328,7 @@
             if (app.initSortable && app.params.sortable) app.initSortable();
         
             // Init Live Swipe Panels
-            if (app.initSwipePanels && app.params.swipePanel) app.initSwipePanels();
+            if (app.initSwipePanels && (app.params.swipePanel || app.params.swipePanelOnlyClose)) app.initSwipePanels();
             
             // App Init callback
             if (app.params.onAppInit) app.params.onAppInit();
@@ -7276,9 +7369,32 @@
             if (selector) {
                 // String
                 if (typeof selector === 'string') {
-                    var els = (context || document).querySelectorAll(selector);
-                    for (i = 0; i < els.length; i++) {
-                        arr.push(els[i]);
+                    var els, tempParent, html = selector.trim();
+                    if (html.indexOf('<') >= 0 && html.indexOf('>') >= 0) {
+                        var toCreate = 'div';
+                        if (html.indexOf('<li') === 0) toCreate = 'ul';
+                        if (html.indexOf('<tr') === 0) toCreate = 'tbody';
+                        if (html.indexOf('<td') === 0 || html.indexOf('<th') === 0) toCreate = 'tr';
+                        if (html.indexOf('<tbody') === 0) toCreate = 'table';
+                        if (html.indexOf('<option') === 0) toCreate = 'select';
+                        tempParent = document.createElement(toCreate);
+                        tempParent.innerHTML = selector;
+                        for (i = 0; i < tempParent.childNodes.length; i++) {
+                            arr.push(tempParent.childNodes[i]);
+                        }
+                    }
+                    else {
+                        if (!context && selector[0] === '#' && !selector.match(/[ .<>:~]/)) {
+                            // Pure ID selector
+                            els = [document.getElementById(selector.split('#')[1])];
+                        }
+                        else {
+                            // Other selectors
+                            els = (context || document).querySelectorAll(selector);
+                        }
+                        for (i = 0; i < els.length; i++) {
+                            if (els[i]) arr.push(els[i]);
+                        }
                     }
                 }
                 // Node/element
@@ -7330,14 +7446,26 @@
                 }
                 return this;
             },
-            attr: function (attr, value) {
-                if (typeof value === 'undefined') {
-                    if (this[0]) return this[0].getAttribute(attr);
+            attr: function (attrs, value) {
+                if (arguments.length === 1 && typeof attrs === 'string') {
+                    // Get attr
+                    if (this[0]) return this[0].getAttribute(attrs);
                     else return undefined;
                 }
                 else {
+                    // Set attrs
                     for (var i = 0; i < this.length; i++) {
-                        this[i].setAttribute(attr, value);
+                        if (arguments.length === 2) {
+                            // String
+                            this[i].setAttribute(attrs, value);
+                        }
+                        else {
+                            // Object
+                            for (var attrName in attrs) {
+                                this[i][attrName] = attrs[attrName];
+                                this[i].setAttribute(attrName, attrs[attrName]);
+                            }
+                        }
                     }
                     return this;
                 }
@@ -7347,14 +7475,25 @@
                     this[i].removeAttribute(attr);
                 }
             },
-            prop: function (prop, value) {
-                if (typeof value === 'undefined') {
-                    if (this[0]) return this[0][prop];
+            prop: function (props, value) {
+                if (arguments.length === 1 && typeof props === 'string') {
+                    // Get prop
+                    if (this[0]) return this[0][props];
                     else return undefined;
                 }
                 else {
+                    // Set props
                     for (var i = 0; i < this.length; i++) {
-                        this[i][prop] = value;
+                        if (arguments.length === 2) {
+                            // String
+                            this[i][props] = value;
+                        }
+                        else {
+                            // Object
+                            for (var propName in props) {
+                                this[i][propName] = props[propName];
+                            }
+                        }
                     }
                     return this;
                 }
@@ -7542,17 +7681,16 @@
                 }
                 else {
                     if (this.length > 0) {
-                        return parseFloat(this.css('width')) - parseFloat(this.css('padding-left')) - parseFloat(this.css('padding-right'));
+                        return parseFloat(this.css('width'));
                     }
                     else {
                         return null;
                     }
                 }
-                    
             },
-            outerWidth: function (margins) {
+            outerWidth: function (includeMargins) {
                 if (this.length > 0) {
-                    if (margins)
+                    if (includeMargins)
                         return this[0].offsetWidth + parseFloat(this.css('margin-right')) + parseFloat(this.css('margin-left'));
                     else
                         return this[0].offsetWidth;
@@ -7565,17 +7703,16 @@
                 }
                 else {
                     if (this.length > 0) {
-                        return this[0].offsetHeight - parseFloat(this.css('padding-top')) - parseFloat(this.css('padding-bottom'));
+                        return parseFloat(this.css('height'));
                     }
                     else {
                         return null;
                     }
                 }
-                    
             },
-            outerHeight: function (margins) {
+            outerHeight: function (includeMargins) {
                 if (this.length > 0) {
-                    if (margins)
+                    if (includeMargins)
                         return this[0].offsetHeight + parseFloat(this.css('margin-top')) + parseFloat(this.css('margin-bottom'));
                     else
                         return this[0].offsetHeight;
@@ -7740,7 +7877,6 @@
                         while (tempDiv.firstChild) {
                             this[i].appendChild(tempDiv.firstChild);
                         }
-                        // this[i].insertAdjacentHTML('beforeend', newChild);
                     }
                     else if (newChild instanceof Dom7) {
                         for (j = 0; j < newChild.length; j++) {
@@ -8674,24 +8810,27 @@ window.Template7 = (function () {
         }
         function getCompileVar(name, ctx) {
             var parents, variable, context;
-            
-            if (name.indexOf('.') > 0) {
-                if (name.indexOf('this') === 0) variable = name.replace('this', ctx);
-                else variable = ctx + '.' + name;
+            if (name.indexOf('@global') >= 0) {
+                variable = '(Template7.global && Template7.global.' + (name.split('@global.')[1]) + ')';
             }
-            else if (name.indexOf('../') === 0) {
-                var levelUp = name.split('../').length - 1;
-                var newName = name.split('../')[name.split('../').length - 1];
-                var newDepth = ctx.split('_')[1] - levelUp;
-                variable = 'ctx_' + (newDepth >= 1 ? newDepth : 1) + '.' + newName;
+            else if (name.indexOf('@') >= 0) {
+                variable = '(data && data.' + name.replace('@', '') + ')';
             }
             else {
-                variable = name === 'this' ? ctx : ctx + '.' + name;
-            }
-            if (name && name.indexOf('@') >= 0) {
-                variable = '(data && data.' + name.replace('@', '') + ')';
+                if (name.indexOf('.') > 0) {
+                    if (name.indexOf('this') === 0) variable = name.replace('this', ctx);
+                    else variable = ctx + '.' + name;
+                }
+                else if (name.indexOf('../') === 0) {
+                    var levelUp = name.split('../').length - 1;
+                    var newName = name.split('../')[name.split('../').length - 1];
+                    var newDepth = ctx.split('_')[1] - levelUp;
+                    variable = 'ctx_' + (newDepth >= 1 ? newDepth : 1) + '.' + newName;
+                }
+                else {
+                    variable = name === 'this' ? ctx : ctx + '.' + name;
+                }
             }
-                
             return variable;
         }
         function getCompiledArguments(contextArray, ctx) {
@@ -8819,7 +8958,7 @@ window.Template7 = (function () {
             },
             'join': function (context, options) {
                 if (isFunction(context)) { context = context.call(this); }
-                return context.join(options.hash.delimeter);
+                return context.join(options.hash.delimiter || options.hash.delimeter);
             }
         }
     };