framework7-rails 0.7.1.1 → 0.7.4.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: 5948428122dd53c7a4f69df0401ad6258303ad64
-  data.tar.gz: 06b9eace29b3f605ed4fdfd6b31c79a7512f3f2e
+  metadata.gz: 11e8ce51feb9ce116f9e303434a92a1168702abd
+  data.tar.gz: 05db8570c39cc12a1871833824361c0b5212889c
 SHA512:
-  metadata.gz: 14a1ca57c998976e5da926689cd53d268a1e0ed8ed42c09d13131812fb1a4fccce7d20c5e7058000deb6acca249c31e6ffecb7d13dc02b9771a164926a7e14e2
-  data.tar.gz: e86476244837330c12941247f261bd55693d5571412eca180be1694ebb0fe3b330c6fcb85a39454fed3f9b7d95864ff18bdc56b45a1dffd4ce19275bbccb5448
+  metadata.gz: c4fb08aebc439ceb2addcdc2a4db89c875f1071b16de2b958635f026004ef632028a09466518374b8fbe39a3ed752422da28a7a3278ed6a737903956935fc412
+  data.tar.gz: 874adf1ae3ca6a6cca48d1f4dbaae755edaa9224caa8e5816af8aa8524c9201464fb0bf13493c4d42c17447e84302cd0dfd44138229b679ce380ad9a917d099a

data/README.md

@@ -1,8 +1,12 @@
 # Framework7::Rails
 
-Brings the excellent [Framework7](https://github.com/nolimits4web/framework7/) into the Rails 3.1+ Asset Pipeline.
+[![Gem Version](https://badge.fury.io/rb/framework7-rails.svg)](http://badge.fury.io/rb/framework7-rails)
 
-The gem version number ``x.y.z`` is kept in sync with the version of Framework7 being supported.
+Brings the excellent [Framework7](https://github.com/nolimits4web/framework7/)
+into the Rails 3.1+ Asset Pipeline.
+
+The gem version number ``x.y.z`` is kept in sync with the version of Framework7
+being supported.
 
 ## Installation
 
@@ -20,6 +24,12 @@ Or, install it yourself as:
 
 ## Usage
 
+The easiest way to set up ready for use is to use the generator
+
+    $ rails g f7:install
+
+You can do it manually if you want to, as outlined below:
+
 ### Development/Debugging
 
 In your application.js file, add the line:
@@ -40,9 +50,58 @@ In your application.css file, add the line:
 
     *= require framework7.min
 
+## Generators
+
+### f7:install
+
+This generator will add the necessary require statements as outlined above.
+
+### f7:layout
+
+This sets up an application-level layout, and will generate two files:
+
+    app/assets/javascripts/<app_name>.js.coffee
+    app/views/layouts/application.html.erb
+    
+The javascript file creates a wrapping class around the main `Framework7` class.
+This new class is named after your application, an instance is created with the
+lower camel-cased application.
+
+e.g If you did `rails new contacts_app` the javascript file will contain:
+
+    var contactsApp;
+    
+    ContactsApp = function() {
+      ...
+    };
+    
+    contactsApp = new ContactsApp();
+
+If you ever need to get back to the Framework7 application instance, this is
+achieved as follows:
+
+    app = contactsApp.getInstance();
+    
+This may be necessary for future plans, but not too sure. For now it will be
+left in, but you can always fallback to the Framework7 native way of doing
+things by using the above line and never touching that `contactsApp` variable
+again.
+    
+### And there's more...
+
+To find out about the rest of the generators, be sure to 
+[check out the wiki][wiki], which will
+be updated as more become available.
+
+## Helpers
+
+None yet, but this will be listed here, and refer to the [wiki] for the
+documentation.
+
 ## Future Improvements
 
-Currently, the gem only brings in the assets. But it is the intention to add layout/view generators and helpers.
+Currently, the gem only brings in the assets. But it is the intention to add
+layout/view generators and helpers.
 
 ## Contributing
 
@@ -51,3 +110,6 @@ Currently, the gem only brings in the assets. But it is the intention to add lay
 3. Commit your changes (`git commit -am 'Add some feature'`)
 4. Push to the branch (`git push origin my-new-feature`)
 5. Create new Pull Request
+
+
+[wiki]: https://github.com/twss/framework7-rails/wiki "wiki"

data/app/helpers/app_helper.rb

@@ -0,0 +1,22 @@
+module AppHelper
+  # Provides the skeleton application layout ready to be customised
+  def f7_app(options={}, &block)
+    output = []
+    output << statusbar_overlay_div
+    output << panel_overlay_div
+    output << capture(&block)
+    
+    output.join("\n").html_safe
+  end
+  
+  private
+  
+  def statusbar_overlay_div
+    content_tag :div, '', :class => ["statusbar-overlay"]
+  end
+  
+  def panel_overlay_div
+    content_tag :div, '', :class => ["panel-overlay"]
+  end
+  
+end

data/framework7-rails.gemspec

@@ -22,4 +22,5 @@ Gem::Specification.new do |spec|
 
   spec.add_development_dependency "bundler", "~> 1.5"
   spec.add_development_dependency "rake", "~> 0"
+  spec.add_development_dependency "rspec"
 end

data/lib/framework7/rails/version.rb

@@ -1,5 +1,5 @@
 module Framework7
   module Rails
-    VERSION = "0.7.1.1"
+    VERSION = "0.7.4.0"
   end
 end

data/lib/generators/f7/install/install_generator.rb

@@ -0,0 +1,28 @@
+require 'rails/generators'
+
+module F7
+  module Generators
+    class InstallGenerator < ::Rails::Generators::Base
+      source_root File.expand_path('../templates', __FILE__)
+      desc "This generator installs Framework7 to Asset Pipeline"
+      
+      def add_assets
+        js_manifest = 'app/assets/javascripts/application.js'
+        
+        if File.exist?(js_manifest)
+          insert_into_file js_manifest, "//= require framework7\n", :before => "//= require jquery\n"
+        else
+          copy_file "application.js", js_manifest
+        end
+        
+        css_manifest = 'app/assets/stylesheets/application.css'
+        
+        if File.exist?(css_manifest)
+          insert_into_file css_manifest, " *= require framework7\n", :after => "require_self\n"
+        else
+          copy_file "application.css", css_manifest
+        end
+      end
+    end
+  end
+end

data/lib/generators/f7/install/templates/application.css

@@ -0,0 +1,14 @@
+/*
+ * This is a manifest file that'll be compiled into application.css, which will include all the files
+ * listed below.
+ *
+ * Any CSS and SCSS file within this directory, lib/assets/stylesheets, vendor/assets/stylesheets,
+ * or vendor/assets/stylesheets of plugins, if any, can be referenced here using a relative path.
+ *
+ * You're free to add application-wide styles to this file and they'll appear at the top of the
+ * compiled file, but it's generally better to create a new file per style scope.
+ *
+ *= require_self
+ *= require framework7
+ *= require_tree .
+ */

data/lib/generators/f7/install/templates/application.js

@@ -0,0 +1,17 @@
+// This is a manifest file that'll be compiled into application.js, which will include all the files
+// listed below.
+//
+// Any JavaScript/Coffee file within this directory, lib/assets/javascripts, vendor/assets/javascripts,
+// or vendor/assets/javascripts of plugins, if any, can be referenced here using a relative path.
+//
+// It's not advisable to add code directly here, but if you do, it'll appear at the bottom of the
+// compiled file.
+//
+// Read Sprockets README (https://github.com/sstephenson/sprockets#sprockets-directives) for details
+// about supported directives.
+//
+//= require framework7
+//= require jquery
+//= require jquery_ujs
+//= require turbolinks
+//= require_tree .

data/lib/generators/f7/layout/layout_generator.rb

@@ -15,14 +15,6 @@ module F7
         ext = app.config.generators.options[:rails][:template_engine] || :erb
         template "layout.html.#{ext}", "app/views/layouts/#{layout_name}.html.#{ext}"
         template "app.js.coffee.erb", "app/assets/javascripts/#{@app_name.underscore}.js.coffee"
-        
-        insert_into_file "app/assets/javascripts/application.js", :before => %r{//= require +['"]?jquery['"]?$} do
-          "//= require 'framework7'\n"
-        end
-        
-        insert_into_file "app/assets/stylesheets/application.css", :before => "*/" do
-          " *= require 'framework7'\n"
-        end
       end
     end
   end

data/lib/generators/f7/layout/templates/app.js.coffee.erb

@@ -6,6 +6,7 @@ ViewNameExistsException = (value) ->
   return
 
 <%- app_class = "#{app_name.camelize}App" -%>
+<%- app_var = "#{app_name.camelize(:lower)}App" -%>
 <%= app_class %> = ->
   self = @
 
@@ -15,7 +16,7 @@ ViewNameExistsException = (value) ->
   _handlers = {}
   _pageInit = {}
   _views = {}
-  $$ = _instance.$
+  window.$$ = _instance.$
 
   $$(document).on 'pageInit', (e) ->
     page = e.detail.page
@@ -59,7 +60,7 @@ ViewNameExistsException = (value) ->
     self
   @
 
-window.app = new <%= app_class %>()
+window.<%= app_var %> = new <%= app_class %>()
 
 $(document).ready ->
   $$('.panel-left').on 'open', (e) ->
@@ -72,5 +73,5 @@ $(document).ready ->
     $$('.statusbar-overlay').removeClass 'with-panel-left with-panel-right'
     return
     
-  app.getInstance().init()
+  window.app = <%= app_var %>.getInstance().init()
   return

data/lib/generators/f7/layout/templates/layout.html.erb

@@ -38,19 +38,86 @@
   </head>
   <body>
     <div class="statusbar-overlay"></div>
+    <!-- Panels overlay-->
     <div class="panel-overlay"></div>
-    <%%- if content_for?(:panel_left) -%>
-      <div class="panel panel-left panel-cover"><%%= yield(:panel_left) %></div>
-    <%%- end %>
-    <%%- if content_for?(:panel_right) -%>
-      <div class="panel panel-right panel-reveal"><%%= yield(:panel_right) %></div>
-    <%%- end %>
+    <!-- Left panel with reveal effect-->
+    <div class="panel panel-left panel-reveal">
+      <div class="content-block">
+        <p>Left panel content goes here</p>
+      </div>
+    </div>
+    <!-- Right panel with cover effect-->
+    <div class="panel panel-right panel-cover">
+      <div class="content-block">
+        <p>Right panel content goes here</p>
+      </div>
+    </div>
+    <!-- Views-->
     <div class="views">
-      <%%= yield %>
+      <!-- Your main view, should have "view-main" class-->
+      <div class="view view-main">
+        <!-- Top Navbar-->
+        <div class="navbar">
+          <div class="navbar-inner">
+            <!-- We have home navbar without left link-->
+            <div class="center sliding"><%%= content_for?(:title) ? yield(:title) : "<%= app_name.titleize %>" %></div>
+            <div class="right">
+              <!-- Right link contains only icon - additional "icon-only" class--><a href="#" class="link icon-only open-panel"><i class="icon icon-bars-blue"></i></a>
+            </div>
+          </div>
+        </div>
+        <!-- Pages, because we need fixed-through navbar and toolbar, it has additional appropriate classes-->
+        <div class="pages navbar-through toolbar-through">
+          <!-- Page, data-page contains page name-->
+          <div data-page="index" class="page">
+            <!-- Scrollable page content-->
+            <div class="page-content">
+              <div class="content-block-title">Welcome To <%%= content_for?(:title) ? yield(:title) : "<%= app_name.titleize %>" %></div>
+              <div class="content-block">
+                <div class="content-block-inner">
+                  <p>Couple of worlds here because my app is so awesome!</p>
+                  <p>Duis sed erat ac eros ultrices pharetra id ut tellus. Praesent rhoncus enim ornare ipsum aliquet ultricies. Pellentesque sodales erat quis elementum sagittis.</p>
+                </div>
+              </div>
+              <div class="content-block-title">What about simple navigation?</div>
+              <div class="list-block">
+                <ul>
+                  <li><a href="about.html" class="item-link">
+                      <div class="item-content">
+                        <div class="item-inner">
+                          <div class="item-title">About</div>
+                        </div>
+                      </div></a></li>
+                  <li><a href="services.html" class="item-link">
+                      <div class="item-content">
+                        <div class="item-inner">
+                          <div class="item-title">Services</div>
+                        </div>
+                      </div></a></li>
+                  <li><a href="form.html" class="item-link">
+                      <div class="item-content">
+                        <div class="item-inner">
+                          <div class="item-title">Form</div>
+                        </div>
+                      </div></a></li>
+                </ul>
+              </div>
+              <div class="content-block-title">Side panels</div>
+              <div class="content-block">
+                <div class="row">
+                  <div class="col-50"><a href="#" data-panel="left" class="button open-panel">Left Panel</a></div>
+                  <div class="col-50"><a href="#" data-panel="right" class="button open-panel">Right Panel</a></div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <!-- Bottom Toolbar-->
+        <div class="toolbar">
+          <div class="toolbar-inner"><a href="#" class="link">Link 1</a><a href="#" class="link">Link 2</a></div>
+        </div>
+      </div>
     </div>
-    <%%- if content_for?(:popovers) -%>
-      <%%= yield(:popovers) %>
-    <%%- end -%>
     <%%= javascript_include_tag "application" %>
   </body>
 </html>

data/vendor/assets/javascripts/framework7.js

@@ -1,6 +1,6 @@
 /*
- * Framework7 0.7.1
- * Full Featured HTML Framework For Building iOS7 Apps
+ * Framework7 0.7.4
+ * Full Featured HTML Framework For Building iOS 7 Apps
  *
  * http://www.idangero.us/framework7
  *
@@ -10,7 +10,7 @@
  *
  * Licensed under MIT
  *
- * Released on: April 11, 2014
+ * Released on: April 13, 2014
 */
 (function () {
 
@@ -40,6 +40,8 @@
             preloadPreviousPage: true,
             // Fast clicks
             fastClicks : true,
+            // 
+            animateNavBackIcon: false,
             // Swipe Back
             swipeBackPage: true,
             swipeBackPageThreshold: 0,
@@ -52,6 +54,8 @@
             // Swipeout
             swipeout: true,
             swipeoutNoFollow: false,
+            // Smart Select Back link template
+            smartSelectBackTemplate: '<div class="left"><a href="#" class="back link"><i class="icon icon-back-blue"></i><span>Back</span></a></div>',
             // Panels
             panelsCloseByOutside: true,
             panelsVisibleZIndex: 6000,
@@ -96,23 +100,23 @@
         ************   Views   ************
         ======================================================*/
         app.views = [];
-        app.addView = function (viewSelector, viewParams) {
-            if (!viewSelector) return;
-            var $container = $(viewSelector);
+        app.addView = function (selector, params) {
+            if (!selector) return;
+            var $container = $(selector);
             if ($container.length === 0) return;
             
             var container = $container[0];
-            if (typeof viewParams === 'undefined') viewParams = {};
-            var startUrl = container.getAttribute('data-url') || viewParams.startUrl;
+            if (typeof params === 'undefined') params = {};
+        
             var view = {
                 container: container,
-                selector: viewSelector,
-                params: viewParams || {},
+                selector: selector,
+                params: params || {},
                 history: [],
                 contentCache: {},
-                url: container.getAttribute('data-url') || viewParams.startUrl,
+                url: container.getAttribute('data-url') || document.location.href,
                 pagesContainer: $('.pages', container)[0],
-                main: $(container).hasClass('view-main'),
+                main: $container.hasClass('view-main'),
                 loadContent: function (content) {
                     app.loadContent(view, content);
                 },
@@ -136,13 +140,10 @@
                 }
             };
             // Store to history main view's url
-            if (view.main) {
-                view.url = startUrl || document.location.href;
-                view.history.push(view.url);
-            }
-            else if (startUrl) {
+            if (view.url) {
                 view.history.push(view.url);
             }
+        
             // Store View in element for easy access
             container.f7View = view;
         
@@ -175,6 +176,8 @@
                 previousNavbar,
                 activeNavElements,
                 previousNavElements,
+                activeNavBackIcon,
+                previousNavBackIcon,
                 i,
                 dynamicNavbar,
                 el;
@@ -219,6 +222,10 @@
                         previousNavbar = viewContainer.find('.navbar-on-left:not(.cached)');
                         activeNavElements = activeNavbar.find('.left, .center, .right');
                         previousNavElements = previousNavbar.find('.left, .center, .right');
+                        if (app.params.animateNavBackIcon) {
+                            activeNavBackIcon = activeNavbar.find('.left.sliding .back .icon');
+                            previousNavBackIcon = previousNavbar.find('.left.sliding .back .icon');
+                        }
                     }
                 }
                 isMoved = true;
@@ -247,6 +254,11 @@
                             var activeNavTranslate = percentage * el[0].f7NavbarRightOffset;
                             if (app.device.pixelRatio === 1) activeNavTranslate = Math.round(activeNavTranslate);
                             el.transform('translate3d(' + activeNavTranslate + 'px,0,0)');
+                            if (app.params.animateNavBackIcon) {
+                                if (el[0].className.indexOf('left') >= 0 && activeNavBackIcon.length > 0) {
+                                    activeNavBackIcon.transform('translate3d(' + -activeNavTranslate + 'px,0,0)');
+                                }
+                            }
                         }
                     }
                     for (i = 0; i < previousNavElements.length; i++) {
@@ -256,6 +268,11 @@
                             var previousNavTranslate = el[0].f7NavbarLeftOffset * (1 - percentage);
                             if (app.device.pixelRatio === 1) previousNavTranslate = Math.round(previousNavTranslate);
                             el.transform('translate3d(' + previousNavTranslate + 'px,0,0)');
+                            if (app.params.animateNavBackIcon) {
+                                if (el[0].className.indexOf('left') >= 0 && previousNavBackIcon.length > 0) {
+                                    previousNavBackIcon.transform('translate3d(' + -previousNavTranslate + 'px,0,0)');
+                                }
+                            }
                         }
                     }
                 }
@@ -269,6 +286,16 @@
                 }
                 isTouched = false;
                 isMoved = false;
+                if (touchesDiff === 0) {
+                    $([activePage[0], previousPage[0]]).transform('').css({opacity: '', boxShadow: ''});
+                    if (dynamicNavbar) {
+                        activeNavElements.transform('').css({opacity: ''});
+                        previousNavElements.transform('').css({opacity: ''});
+                        if (activeNavBackIcon && activeNavBackIcon.length > 0) activeNavBackIcon.transform('');
+                        if (previousNavBackIcon && activeNavBackIcon.length > 0) previousNavBackIcon.transform('');
+                    }
+                    return;
+                }
                 var timeDiff = (new Date()).getTime() - touchStartTime;
                 var pageChanged = false;
                 // Swipe back to previous page
@@ -291,12 +318,25 @@
                     activeNavElements.css({opacity: ''})
                     .each(function () {
                         var translate = pageChanged ? this.f7NavbarRightOffset : 0;
-                        $(this).transform('translate3d(' + translate + 'px,0,0)');
+                        var sliding = $(this);
+                        sliding.transform('translate3d(' + translate + 'px,0,0)');
+                        if (app.params.animateNavBackIcon) {
+                            if (sliding.hasClass('left') && activeNavBackIcon.length > 0) {
+                                activeNavBackIcon.addClass('page-transitioning').transform('translate3d(' + -translate + 'px,0,0)');
+                            }
+                        }
+        
                     }).addClass('page-transitioning');
         
                     previousNavElements.transform('').css({opacity: ''}).each(function () {
                         var translate = pageChanged ? 0 : this.f7NavbarLeftOffset;
-                        $(this).transform('translate3d(' + translate + 'px,0,0)');
+                        var sliding = $(this);
+                        sliding.transform('translate3d(' + translate + 'px,0,0)');
+                        if (app.params.animateNavBackIcon) {
+                            if (sliding.hasClass('left') && previousNavBackIcon.length > 0) {
+                                previousNavBackIcon.addClass('page-transitioning').transform('translate3d(' + -translate + 'px,0,0)');
+                            }
+                        }
                     }).addClass('page-transitioning');
                 }
                 allowViewTouchMove = false;
@@ -314,10 +354,10 @@
                 activePage.transitionEnd(function () {
                     $([activePage[0], previousPage[0]]).removeClass('page-transitioning');
                     if (dynamicNavbar) {
-                        activeNavElements.removeClass('page-transitioning');
-                        activeNavElements.transform('').css({opacity: ''});
-                        previousNavElements.removeClass('page-transitioning');
-                        previousNavElements.transform('').css({opacity: ''});
+                        activeNavElements.removeClass('page-transitioning').transform('').css({opacity: ''});
+                        previousNavElements.removeClass('page-transitioning').transform('').css({opacity: ''});
+                        if (activeNavBackIcon && activeNavBackIcon.length > 0) activeNavBackIcon.removeClass('page-transitioning').transform('');
+                        if (previousNavBackIcon && previousNavBackIcon.length > 0) previousNavBackIcon.removeClass('page-transitioning').transform('');
                     }
                     allowViewTouchMove = true;
                     app.allowPageChange = true;
@@ -496,22 +536,10 @@
                 from: position
             };
             // Before Init Callback
-            if (app.params.onPageBeforeInit) {
-                app.params.onPageBeforeInit(pageData);
-            }
-            if (view && view.params.onPageBeforeInit) {
-                view.params.onPageBeforeInit(pageData);
-            }
-            $(document).trigger('pageBeforeInit', {page: pageData});
+            $(pageData.container).trigger('pageBeforeInit', {page: pageData});
             app.initPage(pageContainer);
             // Init Callback
-            if (app.params.onPageInit) {
-                app.params.onPageInit(pageData);
-            }
-            if (view && view.params.onPageInit) {
-                view.params.onPageInit(pageData);
-            }
-            $(document).trigger('pageInit', {page: pageData});
+            $(pageData.container).trigger('pageInit', {page: pageData});
         };
         app.pageAnimCallbacks = function (callback, view, params) {
             // Page Data
@@ -527,13 +555,7 @@
                 newPage = params.newPage;
         
             if (callback === 'after') {
-                if (app.params.onPageAfterAnimation) {
-                    app.params.onPageAfterAnimation(pageData);
-                }
-                if (view.params.onPageAfterAnimation) {
-                    view.params.onPageAfterAnimation(pageData);
-                }
-                $(document).trigger('pageAfterAnimation', {page: pageData});
+                $(pageData.container).trigger('pageAfterAnimation', {page: pageData});
         
             }
             if (callback === 'before') {
@@ -555,45 +577,133 @@
                     view.showToolbar();
                 }
                 // Callbacks
-                if (app.params.onPageBeforeAnimation) {
-                    app.params.onPageBeforeAnimation(pageData);
-                }
-                if (view.params.onPageBeforeAnimation) {
-                    view.params.onPageBeforeAnimation(pageData);
-                }
-                $(document).trigger('pageBeforeAnimation', {page: pageData});
+                $(pageData.container).trigger('pageBeforeAnimation', {page: pageData});
             }
         };
+        
         // Init Page Events and Manipulations
         app.initPage = function (pageContainer) {
             // Size navbars on page load
             if (app.sizeNavbars) app.sizeNavbars($(pageContainer).parents('.view')[0]);
             // Init messages
             if (app.initMessages) app.initMessages(pageContainer);
+            // Init smart select
+            if (app.initSmartSelects) app.initSmartSelects(pageContainer);
         };
+        
         // Load Page
         app.allowPageChange = true;
         app._tempDomElement = document.createElement('div');
         
+        // Search required element in parsed content in related view
+        function _findElement(selector, container, view) {
+            container = $(container);
+            var found = container.find(selector);
+            if (found.length > 1) {
+                if (typeof view.selector === 'string') {
+                    // Search in related view
+                    found = container.find(view.selector + ' ' + selector);
+                }
+                if (found.length > 1) {
+                    // Search in main view
+                    found = container.find('.view-main ' + selector);
+                }
+            }
+            if (found.length === 1) return found;
+            else {
+                return undefined;
+            }
+        }
+        
+        // Set pages classess for animation
+        function _animatePages(leftPage, rightPage, direction, view) {
+            // Loading new page
+            if (direction === 'to-left') {
+                leftPage.removeClass('page-on-center').addClass('page-from-center-to-left');
+                rightPage.addClass('page-from-right-to-center');
+            }
+            // Go back
+            if (direction === 'to-right') {
+                leftPage.removeClass('page-on-left').addClass('page-from-left-to-center');
+                rightPage.removeClass('page-on-center').addClass('page-from-center-to-right');
+            }
+        }
+        
+        // Set navbars classess for animation
+        function _animateNavbars(leftNavbarInner, rightNavbarInner, direction, view) {
+            // Loading new page
+            if (direction === 'to-left') {
+                rightNavbarInner.removeClass('navbar-on-right').addClass('navbar-from-right-to-center');
+                rightNavbarInner.find('.sliding').each(function () {
+                    var sliding = $(this);
+                    sliding.transform('translate3d(0px,0,0)');
+                    if (app.params.animateNavBackIcon) {
+                        if (sliding.hasClass('left') && sliding.find('.back .icon').length > 0) {
+                            sliding.find('.back .icon').transform('translate3d(0px,0,0)');
+                        }
+                    }
+                });
+        
+                leftNavbarInner.removeClass('navbar-on-center').addClass('navbar-from-center-to-left');
+                leftNavbarInner.find('.sliding').each(function () {
+                    var sliding = $(this);
+                    if (app.params.animateNavBackIcon) {
+                        if (sliding.hasClass('center') && rightNavbarInner.find('.sliding.left .back .icon').length > 0) {
+                            this.f7NavbarLeftOffset += rightNavbarInner.find('.sliding.left .back span')[0].offsetLeft;
+                        }
+                        if (sliding.hasClass('left') && sliding.find('.back .icon').length > 0) {
+                            sliding.find('.back .icon').transform('translate3d(' + (-this.f7NavbarLeftOffset) + 'px,0,0)');
+                        }
+                    }
+                    sliding.transform('translate3d(' + (this.f7NavbarLeftOffset) + 'px,0,0)');
+                });
+            }
+            // Go back
+            if (direction === 'to-right') {
+                leftNavbarInner.removeClass('navbar-on-left').addClass('navbar-from-left-to-center');
+                leftNavbarInner.find('.sliding').each(function () {
+                    var sliding = $(this);
+                    sliding.transform('translate3d(0px,0,0)');
+                    if (app.params.animateNavBackIcon) {
+                        if (sliding.hasClass('left') && sliding.find('.back .icon').length > 0) {
+                            sliding.find('.back .icon').transform('translate3d(0px,0,0)');
+                        }
+                    }
+                });
+        
+                rightNavbarInner.removeClass('navbar-on-center').addClass('navbar-from-center-to-right');
+                rightNavbarInner.find('.sliding').each(function () {
+                    var sliding = $(this);
+                    if (app.params.animateNavBackIcon) {
+                        if (sliding.hasClass('left') && sliding.find('.back .icon').length > 0) {
+                            sliding.find('.back .icon').transform('translate3d(' + (-this.f7NavbarRightOffset) + 'px,0,0)');
+                        }
+                    }
+                    sliding.transform('translate3d(' + (this.f7NavbarRightOffset) + 'px,0,0)');
+                });
+            }
+        }
         function _load(view, url, content) {
             var viewContainer = $(view.container),
                 newPage, oldPage, pagesInView, i, oldNavbarInner, newNavbarInner, navbar, dynamicNavbar;
         
-            // Parse DOM to find new page
+            // Clear temp div
+            app._tempDomElement.innerHTML = '';
+        
+            // Parse DOM
             if (url || (typeof content === 'string')) {
                 app._tempDomElement.innerHTML = content;
             } else {
                 if ('length' in content && content.length > 1) {
-                    app._tempDomElement = document.createElement('div');
                     for (var ci = 0; ci < content.length; ci++) {
                         $(app._tempDomElement).append(content[ci]);
                     }
                 } else {
-                    app._tempDomElement.innerHTML = '';
                     $(app._tempDomElement).append(content);
                 }
             }
             
+            // Subevents for iframes
             if (view.params.subEvents) {
                 $(app._tempDomElement).find('.page').each(function () {
                     var page = this;
@@ -603,16 +713,15 @@
                 });
             }
         
-            newPage = $('.page', app._tempDomElement);
-            if (newPage.length > 1) {
-                newPage = $(app._tempDomElement).find('.view-main .page');
-            }
+            // Find new page
+            newPage = _findElement('.page', app._tempDomElement, view);
         
-            // If pages not found or there are still more than one, exit
-            if (newPage.length === 0 || newPage.length > 1) {
+            // If page not found exit
+            if (!newPage) {
                 app.allowPageChange = true;
                 return;
             }
+        
             newPage.addClass('page-on-right');
         
             // Find old page (should be the last one) and remove older pages
@@ -636,11 +745,8 @@
             if (view.params.dynamicNavbar) {
                 dynamicNavbar = true;
                 // Find navbar
-                newNavbarInner = $('.navbar-inner', app._tempDomElement);
-                if (newNavbarInner.length > 1) {
-                    newNavbarInner = $('.view-main .navbar-inner', app._tempDomElement);
-                }
-                if (newNavbarInner.length === 0 || newNavbarInner > 1) {
+                newNavbarInner = _findElement('.navbar-inner', app._tempDomElement, view);
+                if (!newNavbarInner) {
                     dynamicNavbar = false;
                 }
                 navbar = viewContainer.find('.navbar');
@@ -652,7 +758,7 @@
                         else
                             $(oldNavbarInner[i]).addClass('cached');
                     }
-                    if (newNavbarInner.length === 0 && oldNavbarInner.length === 1) {
+                    if (!newNavbarInner && oldNavbarInner.length === 1) {
                         if (!view.params.domCache)
                             $(oldNavbarInner[0]).remove();
                         else
@@ -690,7 +796,13 @@
             
             if (dynamicNavbar) {
                 newNavbarInner.find('.sliding').each(function () {
-                    $(this).transform('translate3d(' + (this.f7NavbarRightOffset) + 'px,0,0)');
+                    var sliding = $(this);
+                    sliding.transform('translate3d(' + (this.f7NavbarRightOffset) + 'px,0,0)');
+                    if (app.params.animateNavBackIcon) {
+                        if (sliding.hasClass('left') && sliding.find('.back .icon').length > 0) {
+                            sliding.find('.back .icon').transform('translate3d(' + (-this.f7NavbarRightOffset) + 'px,0,0)');
+                        }
+                    }
                 });
             }
             // Force reLayout
@@ -698,29 +810,22 @@
         
             // Before Anim Callback
             app.pageAnimCallbacks('before', view, {pageContainer: newPage[0], url: url, position: 'left', oldPage: oldPage, newPage: newPage});
-            
-            newPage.addClass('page-from-right-to-center');
-            oldPage.addClass('page-from-center-to-left').removeClass('page-on-center');
+        
+            // Set pages before animation
+            _animatePages(oldPage, newPage, 'to-left', view);
         
             // Dynamic navbar animation
             if (dynamicNavbar) {
-                newNavbarInner.removeClass('navbar-on-right').addClass('navbar-from-right-to-center');
-                newNavbarInner.find('.sliding').each(function () {
-                    $(this).transform('translate3d(0px,0,0)');
-                });
-                oldNavbarInner.removeClass('navbar-on-center').addClass('navbar-from-center-to-left');
-                oldNavbarInner.find('.sliding').each(function () {
-                    $(this).transform('translate3d(' + (this.f7NavbarLeftOffset) + 'px,0,0)');
-                });
+                _animateNavbars(oldNavbarInner, newNavbarInner, 'to-left', view);
             }
         
             newPage.animationEnd(function (e) {
                 app.allowPageChange = true;
-                newPage.toggleClass('page-from-right-to-center page-on-center page-on-right');
-                oldPage.toggleClass('page-from-center-to-left page-on-left');
+                newPage.removeClass('page-from-right-to-center page-on-right').addClass('page-on-center');
+                oldPage.removeClass('page-from-center-to-left').addClass('page-on-left');
                 if (dynamicNavbar) {
-                    newNavbarInner.toggleClass('navbar-from-right-to-center navbar-on-center');
-                    oldNavbarInner.toggleClass('navbar-from-center-to-left navbar-on-left');
+                    newNavbarInner.removeClass('navbar-from-right-to-center').addClass('navbar-on-center');
+                    oldNavbarInner.removeClass('navbar-from-center-to-left').addClass('navbar-on-left');
                 }
                 app.pageAnimCallbacks('after', view, {pageContainer: newPage[0], url: url, position: 'right', oldPage: oldPage, newPage: newPage});
             });
@@ -735,7 +840,6 @@
         
             _load(view, null, content);
         
-            app.allowPageChange = true;
         };
         app.loadPage = function (view, url) {
             if (!app.allowPageChange) return false;
@@ -766,15 +870,28 @@
             var viewContainer = $(view.container),
                 pagesInView = viewContainer.find('.page'),
                 oldPage, newPage, oldNavbarInner, newNavbarInner, navbar, dynamicNavbar;
+            function _animate() {
+                // Page before animation callback
+                app.pageAnimCallbacks('before', view, {pageContainer: newPage[0], url: url, position: 'left', oldPage: oldPage, newPage: newPage});
         
-            function _preload() {
-                newPage = $('.page', app._tempDomElement);
-                if (newPage.length > 1) {
-                    newPage = $(app._tempDomElement).find('.view-main .page');
+                // Set pages before animation
+                _animatePages(newPage, oldPage, 'to-right', view);
+        
+                // Dynamic navbar animation
+                if (dynamicNavbar) {
+                    _animateNavbars(newNavbarInner, oldNavbarInner, 'to-right', view);
                 }
+                
+                newPage.animationEnd(function () {
+                    app.afterGoBack(view, oldPage[0], newPage[0]);
+                    app.pageAnimCallbacks('after', view, {pageContainer: newPage[0], url: url, position: 'left', oldPage: oldPage, newPage: newPage});
+                });
+            }
+            function _preload() {
+                newPage = _findElement('.page', app._tempDomElement, view);
         
                 // If pages not found or there are still more than one, exit
-                if (newPage.length === 0 || newPage.length > 1) {
+                if (!newPage) {
                     app.allowPageChange = true;
                     return;
                 }
@@ -787,11 +904,8 @@
                 if (view.params.dynamicNavbar) {
                     dynamicNavbar = true;
                     // Find navbar
-                    newNavbarInner = $('.navbar-inner', app._tempDomElement);
-                    if (newNavbarInner.length > 1) {
-                        newNavbarInner = $('.view-main .navbar-inner', app._tempDomElement);
-                    }
-                    if (newNavbarInner.length === 0 || newNavbarInner > 1) {
+                    newNavbarInner = _findElement('.navbar-inner', app._tempDomElement, view);
+                    if (!newNavbarInner) {
                         dynamicNavbar = false;
                     }
                     
@@ -815,7 +929,16 @@
         
                 if (dynamicNavbar && newNavbarInner.hasClass('navbar-on-left')) {
                     newNavbarInner.find('.sliding').each(function () {
-                        $(this).transform('translate3d(' + (this.f7NavbarLeftOffset) + 'px,0,0)');
+                        var sliding = $(this);
+                        if (app.params.animateNavBackIcon) {
+                            if (sliding.hasClass('left') && sliding.find('.back .icon').length > 0) {
+                                sliding.find('.back .icon').transform('translate3d(' + (-this.f7NavbarLeftOffset) + 'px,0,0)');
+                            }
+                            if (sliding.hasClass('center') && oldNavbarInner.find('.left .back .icon').length > 0) {
+                                this.f7NavbarLeftOffset += oldNavbarInner.find('.left .back span')[0].offsetLeft;
+                            }
+                        }
+                        sliding.transform('translate3d(' + (this.f7NavbarLeftOffset) + 'px,0,0)');
                     });
                 }
         
@@ -832,28 +955,7 @@
                 // Force reLayout
                 var clientLeft = newPage[0].clientLeft;
         
-                // Before Anim Callback
-                app.pageAnimCallbacks('before', view, {pageContainer: newPage[0], url: url, position: 'left', oldPage: oldPage, newPage: newPage});
-        
-                newPage.addClass('page-from-left-to-center');
-                oldPage.removeClass('page-on-center').addClass('page-from-center-to-right');
-        
-                // Dynamic navbar animation
-                if (dynamicNavbar) {
-                    newNavbarInner.removeClass('navbar-on-left').addClass('navbar-from-left-to-center');
-                    newNavbarInner.find('.sliding').each(function () {
-                        $(this).transform('translate3d(0px,0,0)');
-                    });
-                    oldNavbarInner.removeClass('navbar-on-center').addClass('navbar-from-center-to-right');
-                    oldNavbarInner.find('.sliding').each(function () {
-                        $(this).transform('translate3d(' + (this.f7NavbarRightOffset) + 'px,0,0)');
-                    });
-                }
-        
-                newPage.animationEnd(function () {
-                    app.afterGoBack(view, oldPage[0], newPage[0]);
-                    app.pageAnimCallbacks('after', view, {pageContainer: newPage[0], url: url, position: 'left', oldPage: oldPage, newPage: newPage});
-                });
+                _animate();
             }
         
             if (pagesInView.length > 1) {
@@ -877,31 +979,7 @@
                     newNavbarInner = $(inners[0]);
                     oldNavbarInner = $(inners[1]);
                 }
-        
-                // Page before animation callback
-                app.pageAnimCallbacks('before', view, {pageContainer: newPage[0], url: url, position: 'left', oldPage: oldPage, newPage: newPage});
-        
-                // Add classes for animation
-                newPage.removeClass('page-on-left').addClass('page-from-left-to-center');
-                oldPage.removeClass('page-on-center').addClass('page-from-center-to-right');
-        
-                // Dynamic navbar animation
-                if (dynamicNavbar) {
-                    newNavbarInner.removeClass('navbar-on-left').addClass('navbar-from-left-to-center');
-                    newNavbarInner.find('.sliding').each(function () {
-                        $(this).transform('translate3d(0px,0,0)');
-                    });
-        
-                    oldNavbarInner.removeClass('navbar-on-center').addClass('navbar-from-center-to-right');
-                    oldNavbarInner.find('.sliding').each(function () {
-                        $(this).transform('translate3d(' + (this.f7NavbarRightOffset) + 'px,0,0)');
-                    });
-                }
-                
-                newPage.animationEnd(function () {
-                    app.afterGoBack(view, oldPage[0], newPage[0]);
-                    app.pageAnimCallbacks('after', view, {pageContainer: newPage[0], url: url, position: 'left', oldPage: oldPage, newPage: newPage});
-                });
+                _animate();
             }
             else {
                 if (url && url.indexOf('#') === 0) url = undefined;
@@ -917,7 +995,7 @@
                 if (!view.params.domCache && (url in view.contentCache)) {
                     var _cache = view.contentCache[url];
         
-                    app._tempDomElement = document.createElement('div');
+                    app._tempDomElement.innerHTML = '';
                     $(app._tempDomElement).append(_cache.nav[0]).append(_cache.page[0]);
                     _preload();
                     return;
@@ -928,9 +1006,7 @@
                         app.allowPageChange = true;
                         return;
                     }
-                    // Parse DOM to find new page
                     app._tempDomElement.innerHTML = data;
-                    
                     _preload();
                 });
             }
@@ -1309,7 +1385,7 @@
         ======================================================*/
         app.allowPanelOpen = true;
         app.openPanel = function (panelPosition) {
-            // @panelPosition - string with panel position "left", "right", "top"
+            // @panelPosition - string with panel position "left", "right"
             if (!app.allowPanelOpen) return false;
             var panel = $('.panel-' + panelPosition);
             if (panel.length === 0 || panel.hasClass('active')) return false;
@@ -1318,6 +1394,9 @@
             var effect = panel.hasClass('panel-reveal') ? 'reveal' : 'cover';
             panel.css({display: 'block'}).addClass('active');
             panel.trigger('open');
+            if (panel.find('.view').length > 0) {
+                if (app.sizeNavbars) app.sizeNavbars(panel.find('.view')[0]);
+            }
         
             // Trigger reLayout
             var clientLeft = panel[0].clientLeft;
@@ -1604,6 +1683,131 @@
             });
             el.find('.swipeout-content').transform('translate3d(-100%,0,0)');
         };
+        /*===============================================================================
+        ************   Smart Select   ************
+        ===============================================================================*/
+        app.initSmartSelects = function (pageContainer) {
+            var page = $(pageContainer);
+            if (page.length === 0) return;
+        
+            var selects = page.find('.smart-select');
+            if (selects.length === 0) return;
+        
+            selects.each(function () {
+                var smartSelect = $(this);
+        
+                var $select = smartSelect.find('select');
+                if ($select.length === 0) return;
+        
+                var select = $select[0];
+                if (select.length === 0) return;
+        
+                var valueText;
+                for (var i = 0; i < select.length; i++) {
+                    if (select[i].selected) valueText = select[i].textContent.trim();
+                }
+        
+                var itemAfter = smartSelect.find('.item-after');
+                if (itemAfter.length === 0) {
+                    smartSelect.find('.item-inner').append('<div class="item-after">' + valueText + '</div>');
+                }
+                else {
+                    itemAfter.text(valueText);
+                }
+                
+            });
+            
+        };
+        app.smartSelectOpen = function (smartSelect) {
+            smartSelect = $(smartSelect);
+            if (smartSelect.length === 0) return;
+        
+            // Find related view
+            var view = smartSelect.parents('.view');
+            if (view.length === 0) return;
+            view = view[0].f7View;
+            if (!view) return;
+        
+            // Collect all values
+            var select = smartSelect.find('select')[0];
+            var values = {};
+            values.length = select.length;
+            for (var i = 0; i < select.length; i++) {
+                values[i] = {
+                    value: select[i].value,
+                    text: select[i].textContent.trim(),
+                    selected: select[i].selected
+                };
+            }
+        
+            var pageTitle = smartSelect.find('.item-title').text();
+        
+            // Generate dynamic page layout
+            var radiosName = 'radio-' + (new Date()).getTime();
+            var radiosHTML = '';
+            for (var j = 0; j < values.length; j++) {
+                var checked = values[j].selected ? 'checked' : '';
+                radiosHTML +=
+                    '<li>' +
+                        '<label class="label-radio item-content">' +
+                            '<input type="radio" name="' + radiosName + '" value="' + values[j].value + '" ' + checked + '>' +
+                            '<div class="item-inner">' +
+                                '<div class="item-title">' + values[j].text + '</div>' +
+                            '</div>' +
+                        '</label>' +
+                    '</li>';
+            }
+            // Navbar HTML
+            var navbarHTML =
+                '<div class="navbar">' +
+                '  <div class="navbar-inner">' +
+                    app.params.smartSelectBackTemplate +
+                '    <div class="center sliding">' + pageTitle + '</div>' +
+                '  </div>' +
+                '</div>';
+            // Determine navbar layout type - static/fixed/through
+            var navbarLayout = 'static';
+            if (smartSelect.parents('.navbar-through').length > 0) navbarLayout = 'through';
+            if (smartSelect.parents('.navbar-fixed').length > 0) navbarLayout = 'fixed';
+            // Page Layout
+            var pageName = 'smart-select-' + radiosName;
+            var pageHTML =
+                (navbarLayout === 'through' ? navbarHTML : '') +
+                '<div class="pages">' +
+                '  <div data-page="' + pageName + '" class="page">' +
+                     (navbarLayout === 'fixed' ? navbarHTML : '') +
+                '    <div class="page-content">' +
+                       (navbarLayout === 'static' ? navbarHTML : '') +
+                '      <div class="list-block">' +
+                '        <ul>' +
+                            radiosHTML +
+                '        </ul>' +
+                '      </div>' +
+                '    </div>' +
+                '  </div>' +
+                '</div>';
+        
+            // Event Listeners on new page
+            function handleRadios(e) {
+                var page = e.detail.page;
+                if (page.name === pageName) {
+                    $(document).off('pageInit', handleRadios);
+                    $(page.container).find('input[name="' + radiosName + '"]').on('change', function () {
+                        var value = this.value;
+                        select.value = value;
+                        $(select).trigger('change');
+                        var optionText = smartSelect.find('option[value="' + value + '"]').text();
+                        smartSelect.find('.item-after').text(optionText);
+                    });
+                }
+            }
+            $(document).on('pageInit', handleRadios);
+        
+            // Load content
+            view.loadContent(pageHTML);
+        
+        };
+        
         /*======================================================
         ************   Pull To Refresh   ************
         ======================================================*/
@@ -1793,13 +1997,20 @@
                 /*jshint validthis:true */
                 var clicked = $(this);
                 var url = clicked.attr('href');
-                // External
-                if (clicked.hasClass('external')) {
-                    return;
+                if (clicked[0].nodeName.toLowerCase() === 'a') {
+                    // External
+                    if (clicked.hasClass('external')) {
+                        return;
+                    }
+                    else {
+                        e.preventDefault();
+                    }
                 }
-                else if (clicked[0].nodeName.toLowerCase() === 'a') {
-                    e.preventDefault();
+                // Smart Select
+                if (clicked.hasClass('smart-select')) {
+                    if (app.smartSelectOpen) app.smartSelectOpen(clicked);
                 }
+                
                 // Open Panel
                 if (clicked.hasClass('open-panel')) {
                     if ($('.panel').length === 1) {
@@ -1909,7 +2120,7 @@
                     else view.loadPage(clicked.attr('href'));
                 }
             }
-            $(document).on('click', 'a, .open-panel, .close-panel, .panel-overlay, .modal-overlay, .swipeout-delete, .close-popup, .open-popup, .open-popover', handleClicks);
+            $(document).on('click', 'a, .open-panel, .close-panel, .panel-overlay, .modal-overlay, .swipeout-delete, .close-popup, .open-popup, .open-popover, .smart-select', handleClicks);
         };
         /*======================================================
         ************   App Resize Actions   ************
@@ -1942,9 +2153,11 @@
             if (android) {
                 device.os = 'android';
                 device.osVersion = android[2];
+                device.android = true;
             }
             if (ipad || iphone || ipod) {
                 device.os = 'ios';
+                device.ios = true;
             }
             // iOS
             device.iphone = false;
@@ -1992,7 +2205,6 @@
                     (windowWidth === 1024 && windowHeight === 768)
                 )
             ) {
-                console.log(device.webview);
                 device.statusBar = true;
             }
             else {
@@ -2363,6 +2575,16 @@
                 if (this[i] === el) return i;
             }
         },
+        index: function () {
+            if (this[0]) {
+                var child = this[0];
+                var i = 0;
+                while ((child = child.previousSibling) != null)
+                    i++;
+                return i;
+            }
+            else return undefined;
+        },
         append: function (newChild) {
             for (var i = 0; i < this.length; i++) {
                 if (typeof newChild === 'string') {