framework7-rails 0.7.1.1 → 0.7.4.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA1:
3
- metadata.gz: 5948428122dd53c7a4f69df0401ad6258303ad64
4
- data.tar.gz: 06b9eace29b3f605ed4fdfd6b31c79a7512f3f2e
3
+ metadata.gz: 11e8ce51feb9ce116f9e303434a92a1168702abd
4
+ data.tar.gz: 05db8570c39cc12a1871833824361c0b5212889c
5
5
  SHA512:
6
- metadata.gz: 14a1ca57c998976e5da926689cd53d268a1e0ed8ed42c09d13131812fb1a4fccce7d20c5e7058000deb6acca249c31e6ffecb7d13dc02b9771a164926a7e14e2
7
- data.tar.gz: e86476244837330c12941247f261bd55693d5571412eca180be1694ebb0fe3b330c6fcb85a39454fed3f9b7d95864ff18bdc56b45a1dffd4ce19275bbccb5448
6
+ metadata.gz: c4fb08aebc439ceb2addcdc2a4db89c875f1071b16de2b958635f026004ef632028a09466518374b8fbe39a3ed752422da28a7a3278ed6a737903956935fc412
7
+ data.tar.gz: 874adf1ae3ca6a6cca48d1f4dbaae755edaa9224caa8e5816af8aa8524c9201464fb0bf13493c4d42c17447e84302cd0dfd44138229b679ce380ad9a917d099a
data/README.md CHANGED
@@ -1,8 +1,12 @@
1
1
  # Framework7::Rails
2
2
 
3
- Brings the excellent [Framework7](https://github.com/nolimits4web/framework7/) into the Rails 3.1+ Asset Pipeline.
3
+ [![Gem Version](https://badge.fury.io/rb/framework7-rails.svg)](http://badge.fury.io/rb/framework7-rails)
4
4
 
5
- The gem version number ``x.y.z`` is kept in sync with the version of Framework7 being supported.
5
+ Brings the excellent [Framework7](https://github.com/nolimits4web/framework7/)
6
+ into the Rails 3.1+ Asset Pipeline.
7
+
8
+ The gem version number ``x.y.z`` is kept in sync with the version of Framework7
9
+ being supported.
6
10
 
7
11
  ## Installation
8
12
 
@@ -20,6 +24,12 @@ Or, install it yourself as:
20
24
 
21
25
  ## Usage
22
26
 
27
+ The easiest way to set up ready for use is to use the generator
28
+
29
+ $ rails g f7:install
30
+
31
+ You can do it manually if you want to, as outlined below:
32
+
23
33
  ### Development/Debugging
24
34
 
25
35
  In your application.js file, add the line:
@@ -40,9 +50,58 @@ In your application.css file, add the line:
40
50
 
41
51
  *= require framework7.min
42
52
 
53
+ ## Generators
54
+
55
+ ### f7:install
56
+
57
+ This generator will add the necessary require statements as outlined above.
58
+
59
+ ### f7:layout
60
+
61
+ This sets up an application-level layout, and will generate two files:
62
+
63
+ app/assets/javascripts/<app_name>.js.coffee
64
+ app/views/layouts/application.html.erb
65
+
66
+ The javascript file creates a wrapping class around the main `Framework7` class.
67
+ This new class is named after your application, an instance is created with the
68
+ lower camel-cased application.
69
+
70
+ e.g If you did `rails new contacts_app` the javascript file will contain:
71
+
72
+ var contactsApp;
73
+
74
+ ContactsApp = function() {
75
+ ...
76
+ };
77
+
78
+ contactsApp = new ContactsApp();
79
+
80
+ If you ever need to get back to the Framework7 application instance, this is
81
+ achieved as follows:
82
+
83
+ app = contactsApp.getInstance();
84
+
85
+ This may be necessary for future plans, but not too sure. For now it will be
86
+ left in, but you can always fallback to the Framework7 native way of doing
87
+ things by using the above line and never touching that `contactsApp` variable
88
+ again.
89
+
90
+ ### And there's more...
91
+
92
+ To find out about the rest of the generators, be sure to
93
+ [check out the wiki][wiki], which will
94
+ be updated as more become available.
95
+
96
+ ## Helpers
97
+
98
+ None yet, but this will be listed here, and refer to the [wiki] for the
99
+ documentation.
100
+
43
101
  ## Future Improvements
44
102
 
45
- Currently, the gem only brings in the assets. But it is the intention to add layout/view generators and helpers.
103
+ Currently, the gem only brings in the assets. But it is the intention to add
104
+ layout/view generators and helpers.
46
105
 
47
106
  ## Contributing
48
107
 
@@ -51,3 +110,6 @@ Currently, the gem only brings in the assets. But it is the intention to add lay
51
110
  3. Commit your changes (`git commit -am 'Add some feature'`)
52
111
  4. Push to the branch (`git push origin my-new-feature`)
53
112
  5. Create new Pull Request
113
+
114
+
115
+ [wiki]: https://github.com/twss/framework7-rails/wiki "wiki"
@@ -0,0 +1,22 @@
1
+ module AppHelper
2
+ # Provides the skeleton application layout ready to be customised
3
+ def f7_app(options={}, &block)
4
+ output = []
5
+ output << statusbar_overlay_div
6
+ output << panel_overlay_div
7
+ output << capture(&block)
8
+
9
+ output.join("\n").html_safe
10
+ end
11
+
12
+ private
13
+
14
+ def statusbar_overlay_div
15
+ content_tag :div, '', :class => ["statusbar-overlay"]
16
+ end
17
+
18
+ def panel_overlay_div
19
+ content_tag :div, '', :class => ["panel-overlay"]
20
+ end
21
+
22
+ end
@@ -22,4 +22,5 @@ Gem::Specification.new do |spec|
22
22
 
23
23
  spec.add_development_dependency "bundler", "~> 1.5"
24
24
  spec.add_development_dependency "rake", "~> 0"
25
+ spec.add_development_dependency "rspec"
25
26
  end
@@ -1,5 +1,5 @@
1
1
  module Framework7
2
2
  module Rails
3
- VERSION = "0.7.1.1"
3
+ VERSION = "0.7.4.0"
4
4
  end
5
5
  end
@@ -0,0 +1,28 @@
1
+ require 'rails/generators'
2
+
3
+ module F7
4
+ module Generators
5
+ class InstallGenerator < ::Rails::Generators::Base
6
+ source_root File.expand_path('../templates', __FILE__)
7
+ desc "This generator installs Framework7 to Asset Pipeline"
8
+
9
+ def add_assets
10
+ js_manifest = 'app/assets/javascripts/application.js'
11
+
12
+ if File.exist?(js_manifest)
13
+ insert_into_file js_manifest, "//= require framework7\n", :before => "//= require jquery\n"
14
+ else
15
+ copy_file "application.js", js_manifest
16
+ end
17
+
18
+ css_manifest = 'app/assets/stylesheets/application.css'
19
+
20
+ if File.exist?(css_manifest)
21
+ insert_into_file css_manifest, " *= require framework7\n", :after => "require_self\n"
22
+ else
23
+ copy_file "application.css", css_manifest
24
+ end
25
+ end
26
+ end
27
+ end
28
+ end
@@ -0,0 +1,14 @@
1
+ /*
2
+ * This is a manifest file that'll be compiled into application.css, which will include all the files
3
+ * listed below.
4
+ *
5
+ * Any CSS and SCSS file within this directory, lib/assets/stylesheets, vendor/assets/stylesheets,
6
+ * or vendor/assets/stylesheets of plugins, if any, can be referenced here using a relative path.
7
+ *
8
+ * You're free to add application-wide styles to this file and they'll appear at the top of the
9
+ * compiled file, but it's generally better to create a new file per style scope.
10
+ *
11
+ *= require_self
12
+ *= require framework7
13
+ *= require_tree .
14
+ */
@@ -0,0 +1,17 @@
1
+ // This is a manifest file that'll be compiled into application.js, which will include all the files
2
+ // listed below.
3
+ //
4
+ // Any JavaScript/Coffee file within this directory, lib/assets/javascripts, vendor/assets/javascripts,
5
+ // or vendor/assets/javascripts of plugins, if any, can be referenced here using a relative path.
6
+ //
7
+ // It's not advisable to add code directly here, but if you do, it'll appear at the bottom of the
8
+ // compiled file.
9
+ //
10
+ // Read Sprockets README (https://github.com/sstephenson/sprockets#sprockets-directives) for details
11
+ // about supported directives.
12
+ //
13
+ //= require framework7
14
+ //= require jquery
15
+ //= require jquery_ujs
16
+ //= require turbolinks
17
+ //= require_tree .
@@ -15,14 +15,6 @@ module F7
15
15
  ext = app.config.generators.options[:rails][:template_engine] || :erb
16
16
  template "layout.html.#{ext}", "app/views/layouts/#{layout_name}.html.#{ext}"
17
17
  template "app.js.coffee.erb", "app/assets/javascripts/#{@app_name.underscore}.js.coffee"
18
-
19
- insert_into_file "app/assets/javascripts/application.js", :before => %r{//= require +['"]?jquery['"]?$} do
20
- "//= require 'framework7'\n"
21
- end
22
-
23
- insert_into_file "app/assets/stylesheets/application.css", :before => "*/" do
24
- " *= require 'framework7'\n"
25
- end
26
18
  end
27
19
  end
28
20
  end
@@ -6,6 +6,7 @@ ViewNameExistsException = (value) ->
6
6
  return
7
7
 
8
8
  <%- app_class = "#{app_name.camelize}App" -%>
9
+ <%- app_var = "#{app_name.camelize(:lower)}App" -%>
9
10
  <%= app_class %> = ->
10
11
  self = @
11
12
 
@@ -15,7 +16,7 @@ ViewNameExistsException = (value) ->
15
16
  _handlers = {}
16
17
  _pageInit = {}
17
18
  _views = {}
18
- $$ = _instance.$
19
+ window.$$ = _instance.$
19
20
 
20
21
  $$(document).on 'pageInit', (e) ->
21
22
  page = e.detail.page
@@ -59,7 +60,7 @@ ViewNameExistsException = (value) ->
59
60
  self
60
61
  @
61
62
 
62
- window.app = new <%= app_class %>()
63
+ window.<%= app_var %> = new <%= app_class %>()
63
64
 
64
65
  $(document).ready ->
65
66
  $$('.panel-left').on 'open', (e) ->
@@ -72,5 +73,5 @@ $(document).ready ->
72
73
  $$('.statusbar-overlay').removeClass 'with-panel-left with-panel-right'
73
74
  return
74
75
 
75
- app.getInstance().init()
76
+ window.app = <%= app_var %>.getInstance().init()
76
77
  return
@@ -38,19 +38,86 @@
38
38
  </head>
39
39
  <body>
40
40
  <div class="statusbar-overlay"></div>
41
+ <!-- Panels overlay-->
41
42
  <div class="panel-overlay"></div>
42
- <%%- if content_for?(:panel_left) -%>
43
- <div class="panel panel-left panel-cover"><%%= yield(:panel_left) %></div>
44
- <%%- end %>
45
- <%%- if content_for?(:panel_right) -%>
46
- <div class="panel panel-right panel-reveal"><%%= yield(:panel_right) %></div>
47
- <%%- end %>
43
+ <!-- Left panel with reveal effect-->
44
+ <div class="panel panel-left panel-reveal">
45
+ <div class="content-block">
46
+ <p>Left panel content goes here</p>
47
+ </div>
48
+ </div>
49
+ <!-- Right panel with cover effect-->
50
+ <div class="panel panel-right panel-cover">
51
+ <div class="content-block">
52
+ <p>Right panel content goes here</p>
53
+ </div>
54
+ </div>
55
+ <!-- Views-->
48
56
  <div class="views">
49
- <%%= yield %>
57
+ <!-- Your main view, should have "view-main" class-->
58
+ <div class="view view-main">
59
+ <!-- Top Navbar-->
60
+ <div class="navbar">
61
+ <div class="navbar-inner">
62
+ <!-- We have home navbar without left link-->
63
+ <div class="center sliding"><%%= content_for?(:title) ? yield(:title) : "<%= app_name.titleize %>" %></div>
64
+ <div class="right">
65
+ <!-- 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>
66
+ </div>
67
+ </div>
68
+ </div>
69
+ <!-- Pages, because we need fixed-through navbar and toolbar, it has additional appropriate classes-->
70
+ <div class="pages navbar-through toolbar-through">
71
+ <!-- Page, data-page contains page name-->
72
+ <div data-page="index" class="page">
73
+ <!-- Scrollable page content-->
74
+ <div class="page-content">
75
+ <div class="content-block-title">Welcome To <%%= content_for?(:title) ? yield(:title) : "<%= app_name.titleize %>" %></div>
76
+ <div class="content-block">
77
+ <div class="content-block-inner">
78
+ <p>Couple of worlds here because my app is so awesome!</p>
79
+ <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>
80
+ </div>
81
+ </div>
82
+ <div class="content-block-title">What about simple navigation?</div>
83
+ <div class="list-block">
84
+ <ul>
85
+ <li><a href="about.html" class="item-link">
86
+ <div class="item-content">
87
+ <div class="item-inner">
88
+ <div class="item-title">About</div>
89
+ </div>
90
+ </div></a></li>
91
+ <li><a href="services.html" class="item-link">
92
+ <div class="item-content">
93
+ <div class="item-inner">
94
+ <div class="item-title">Services</div>
95
+ </div>
96
+ </div></a></li>
97
+ <li><a href="form.html" class="item-link">
98
+ <div class="item-content">
99
+ <div class="item-inner">
100
+ <div class="item-title">Form</div>
101
+ </div>
102
+ </div></a></li>
103
+ </ul>
104
+ </div>
105
+ <div class="content-block-title">Side panels</div>
106
+ <div class="content-block">
107
+ <div class="row">
108
+ <div class="col-50"><a href="#" data-panel="left" class="button open-panel">Left Panel</a></div>
109
+ <div class="col-50"><a href="#" data-panel="right" class="button open-panel">Right Panel</a></div>
110
+ </div>
111
+ </div>
112
+ </div>
113
+ </div>
114
+ </div>
115
+ <!-- Bottom Toolbar-->
116
+ <div class="toolbar">
117
+ <div class="toolbar-inner"><a href="#" class="link">Link 1</a><a href="#" class="link">Link 2</a></div>
118
+ </div>
119
+ </div>
50
120
  </div>
51
- <%%- if content_for?(:popovers) -%>
52
- <%%= yield(:popovers) %>
53
- <%%- end -%>
54
121
  <%%= javascript_include_tag "application" %>
55
122
  </body>
56
123
  </html>
@@ -1,6 +1,6 @@
1
1
  /*
2
- * Framework7 0.7.1
3
- * Full Featured HTML Framework For Building iOS7 Apps
2
+ * Framework7 0.7.4
3
+ * Full Featured HTML Framework For Building iOS 7 Apps
4
4
  *
5
5
  * http://www.idangero.us/framework7
6
6
  *
@@ -10,7 +10,7 @@
10
10
  *
11
11
  * Licensed under MIT
12
12
  *
13
- * Released on: April 11, 2014
13
+ * Released on: April 13, 2014
14
14
  */
15
15
  (function () {
16
16
 
@@ -40,6 +40,8 @@
40
40
  preloadPreviousPage: true,
41
41
  // Fast clicks
42
42
  fastClicks : true,
43
+ //
44
+ animateNavBackIcon: false,
43
45
  // Swipe Back
44
46
  swipeBackPage: true,
45
47
  swipeBackPageThreshold: 0,
@@ -52,6 +54,8 @@
52
54
  // Swipeout
53
55
  swipeout: true,
54
56
  swipeoutNoFollow: false,
57
+ // Smart Select Back link template
58
+ smartSelectBackTemplate: '<div class="left"><a href="#" class="back link"><i class="icon icon-back-blue"></i><span>Back</span></a></div>',
55
59
  // Panels
56
60
  panelsCloseByOutside: true,
57
61
  panelsVisibleZIndex: 6000,
@@ -96,23 +100,23 @@
96
100
  ************ Views ************
97
101
  ======================================================*/
98
102
  app.views = [];
99
- app.addView = function (viewSelector, viewParams) {
100
- if (!viewSelector) return;
101
- var $container = $(viewSelector);
103
+ app.addView = function (selector, params) {
104
+ if (!selector) return;
105
+ var $container = $(selector);
102
106
  if ($container.length === 0) return;
103
107
 
104
108
  var container = $container[0];
105
- if (typeof viewParams === 'undefined') viewParams = {};
106
- var startUrl = container.getAttribute('data-url') || viewParams.startUrl;
109
+ if (typeof params === 'undefined') params = {};
110
+
107
111
  var view = {
108
112
  container: container,
109
- selector: viewSelector,
110
- params: viewParams || {},
113
+ selector: selector,
114
+ params: params || {},
111
115
  history: [],
112
116
  contentCache: {},
113
- url: container.getAttribute('data-url') || viewParams.startUrl,
117
+ url: container.getAttribute('data-url') || document.location.href,
114
118
  pagesContainer: $('.pages', container)[0],
115
- main: $(container).hasClass('view-main'),
119
+ main: $container.hasClass('view-main'),
116
120
  loadContent: function (content) {
117
121
  app.loadContent(view, content);
118
122
  },
@@ -136,13 +140,10 @@
136
140
  }
137
141
  };
138
142
  // Store to history main view's url
139
- if (view.main) {
140
- view.url = startUrl || document.location.href;
141
- view.history.push(view.url);
142
- }
143
- else if (startUrl) {
143
+ if (view.url) {
144
144
  view.history.push(view.url);
145
145
  }
146
+
146
147
  // Store View in element for easy access
147
148
  container.f7View = view;
148
149
 
@@ -175,6 +176,8 @@
175
176
  previousNavbar,
176
177
  activeNavElements,
177
178
  previousNavElements,
179
+ activeNavBackIcon,
180
+ previousNavBackIcon,
178
181
  i,
179
182
  dynamicNavbar,
180
183
  el;
@@ -219,6 +222,10 @@
219
222
  previousNavbar = viewContainer.find('.navbar-on-left:not(.cached)');
220
223
  activeNavElements = activeNavbar.find('.left, .center, .right');
221
224
  previousNavElements = previousNavbar.find('.left, .center, .right');
225
+ if (app.params.animateNavBackIcon) {
226
+ activeNavBackIcon = activeNavbar.find('.left.sliding .back .icon');
227
+ previousNavBackIcon = previousNavbar.find('.left.sliding .back .icon');
228
+ }
222
229
  }
223
230
  }
224
231
  isMoved = true;
@@ -247,6 +254,11 @@
247
254
  var activeNavTranslate = percentage * el[0].f7NavbarRightOffset;
248
255
  if (app.device.pixelRatio === 1) activeNavTranslate = Math.round(activeNavTranslate);
249
256
  el.transform('translate3d(' + activeNavTranslate + 'px,0,0)');
257
+ if (app.params.animateNavBackIcon) {
258
+ if (el[0].className.indexOf('left') >= 0 && activeNavBackIcon.length > 0) {
259
+ activeNavBackIcon.transform('translate3d(' + -activeNavTranslate + 'px,0,0)');
260
+ }
261
+ }
250
262
  }
251
263
  }
252
264
  for (i = 0; i < previousNavElements.length; i++) {
@@ -256,6 +268,11 @@
256
268
  var previousNavTranslate = el[0].f7NavbarLeftOffset * (1 - percentage);
257
269
  if (app.device.pixelRatio === 1) previousNavTranslate = Math.round(previousNavTranslate);
258
270
  el.transform('translate3d(' + previousNavTranslate + 'px,0,0)');
271
+ if (app.params.animateNavBackIcon) {
272
+ if (el[0].className.indexOf('left') >= 0 && previousNavBackIcon.length > 0) {
273
+ previousNavBackIcon.transform('translate3d(' + -previousNavTranslate + 'px,0,0)');
274
+ }
275
+ }
259
276
  }
260
277
  }
261
278
  }
@@ -269,6 +286,16 @@
269
286
  }
270
287
  isTouched = false;
271
288
  isMoved = false;
289
+ if (touchesDiff === 0) {
290
+ $([activePage[0], previousPage[0]]).transform('').css({opacity: '', boxShadow: ''});
291
+ if (dynamicNavbar) {
292
+ activeNavElements.transform('').css({opacity: ''});
293
+ previousNavElements.transform('').css({opacity: ''});
294
+ if (activeNavBackIcon && activeNavBackIcon.length > 0) activeNavBackIcon.transform('');
295
+ if (previousNavBackIcon && activeNavBackIcon.length > 0) previousNavBackIcon.transform('');
296
+ }
297
+ return;
298
+ }
272
299
  var timeDiff = (new Date()).getTime() - touchStartTime;
273
300
  var pageChanged = false;
274
301
  // Swipe back to previous page
@@ -291,12 +318,25 @@
291
318
  activeNavElements.css({opacity: ''})
292
319
  .each(function () {
293
320
  var translate = pageChanged ? this.f7NavbarRightOffset : 0;
294
- $(this).transform('translate3d(' + translate + 'px,0,0)');
321
+ var sliding = $(this);
322
+ sliding.transform('translate3d(' + translate + 'px,0,0)');
323
+ if (app.params.animateNavBackIcon) {
324
+ if (sliding.hasClass('left') && activeNavBackIcon.length > 0) {
325
+ activeNavBackIcon.addClass('page-transitioning').transform('translate3d(' + -translate + 'px,0,0)');
326
+ }
327
+ }
328
+
295
329
  }).addClass('page-transitioning');
296
330
 
297
331
  previousNavElements.transform('').css({opacity: ''}).each(function () {
298
332
  var translate = pageChanged ? 0 : this.f7NavbarLeftOffset;
299
- $(this).transform('translate3d(' + translate + 'px,0,0)');
333
+ var sliding = $(this);
334
+ sliding.transform('translate3d(' + translate + 'px,0,0)');
335
+ if (app.params.animateNavBackIcon) {
336
+ if (sliding.hasClass('left') && previousNavBackIcon.length > 0) {
337
+ previousNavBackIcon.addClass('page-transitioning').transform('translate3d(' + -translate + 'px,0,0)');
338
+ }
339
+ }
300
340
  }).addClass('page-transitioning');
301
341
  }
302
342
  allowViewTouchMove = false;
@@ -314,10 +354,10 @@
314
354
  activePage.transitionEnd(function () {
315
355
  $([activePage[0], previousPage[0]]).removeClass('page-transitioning');
316
356
  if (dynamicNavbar) {
317
- activeNavElements.removeClass('page-transitioning');
318
- activeNavElements.transform('').css({opacity: ''});
319
- previousNavElements.removeClass('page-transitioning');
320
- previousNavElements.transform('').css({opacity: ''});
357
+ activeNavElements.removeClass('page-transitioning').transform('').css({opacity: ''});
358
+ previousNavElements.removeClass('page-transitioning').transform('').css({opacity: ''});
359
+ if (activeNavBackIcon && activeNavBackIcon.length > 0) activeNavBackIcon.removeClass('page-transitioning').transform('');
360
+ if (previousNavBackIcon && previousNavBackIcon.length > 0) previousNavBackIcon.removeClass('page-transitioning').transform('');
321
361
  }
322
362
  allowViewTouchMove = true;
323
363
  app.allowPageChange = true;
@@ -496,22 +536,10 @@
496
536
  from: position
497
537
  };
498
538
  // Before Init Callback
499
- if (app.params.onPageBeforeInit) {
500
- app.params.onPageBeforeInit(pageData);
501
- }
502
- if (view && view.params.onPageBeforeInit) {
503
- view.params.onPageBeforeInit(pageData);
504
- }
505
- $(document).trigger('pageBeforeInit', {page: pageData});
539
+ $(pageData.container).trigger('pageBeforeInit', {page: pageData});
506
540
  app.initPage(pageContainer);
507
541
  // Init Callback
508
- if (app.params.onPageInit) {
509
- app.params.onPageInit(pageData);
510
- }
511
- if (view && view.params.onPageInit) {
512
- view.params.onPageInit(pageData);
513
- }
514
- $(document).trigger('pageInit', {page: pageData});
542
+ $(pageData.container).trigger('pageInit', {page: pageData});
515
543
  };
516
544
  app.pageAnimCallbacks = function (callback, view, params) {
517
545
  // Page Data
@@ -527,13 +555,7 @@
527
555
  newPage = params.newPage;
528
556
 
529
557
  if (callback === 'after') {
530
- if (app.params.onPageAfterAnimation) {
531
- app.params.onPageAfterAnimation(pageData);
532
- }
533
- if (view.params.onPageAfterAnimation) {
534
- view.params.onPageAfterAnimation(pageData);
535
- }
536
- $(document).trigger('pageAfterAnimation', {page: pageData});
558
+ $(pageData.container).trigger('pageAfterAnimation', {page: pageData});
537
559
 
538
560
  }
539
561
  if (callback === 'before') {
@@ -555,45 +577,133 @@
555
577
  view.showToolbar();
556
578
  }
557
579
  // Callbacks
558
- if (app.params.onPageBeforeAnimation) {
559
- app.params.onPageBeforeAnimation(pageData);
560
- }
561
- if (view.params.onPageBeforeAnimation) {
562
- view.params.onPageBeforeAnimation(pageData);
563
- }
564
- $(document).trigger('pageBeforeAnimation', {page: pageData});
580
+ $(pageData.container).trigger('pageBeforeAnimation', {page: pageData});
565
581
  }
566
582
  };
583
+
567
584
  // Init Page Events and Manipulations
568
585
  app.initPage = function (pageContainer) {
569
586
  // Size navbars on page load
570
587
  if (app.sizeNavbars) app.sizeNavbars($(pageContainer).parents('.view')[0]);
571
588
  // Init messages
572
589
  if (app.initMessages) app.initMessages(pageContainer);
590
+ // Init smart select
591
+ if (app.initSmartSelects) app.initSmartSelects(pageContainer);
573
592
  };
593
+
574
594
  // Load Page
575
595
  app.allowPageChange = true;
576
596
  app._tempDomElement = document.createElement('div');
577
597
 
598
+ // Search required element in parsed content in related view
599
+ function _findElement(selector, container, view) {
600
+ container = $(container);
601
+ var found = container.find(selector);
602
+ if (found.length > 1) {
603
+ if (typeof view.selector === 'string') {
604
+ // Search in related view
605
+ found = container.find(view.selector + ' ' + selector);
606
+ }
607
+ if (found.length > 1) {
608
+ // Search in main view
609
+ found = container.find('.view-main ' + selector);
610
+ }
611
+ }
612
+ if (found.length === 1) return found;
613
+ else {
614
+ return undefined;
615
+ }
616
+ }
617
+
618
+ // Set pages classess for animation
619
+ function _animatePages(leftPage, rightPage, direction, view) {
620
+ // Loading new page
621
+ if (direction === 'to-left') {
622
+ leftPage.removeClass('page-on-center').addClass('page-from-center-to-left');
623
+ rightPage.addClass('page-from-right-to-center');
624
+ }
625
+ // Go back
626
+ if (direction === 'to-right') {
627
+ leftPage.removeClass('page-on-left').addClass('page-from-left-to-center');
628
+ rightPage.removeClass('page-on-center').addClass('page-from-center-to-right');
629
+ }
630
+ }
631
+
632
+ // Set navbars classess for animation
633
+ function _animateNavbars(leftNavbarInner, rightNavbarInner, direction, view) {
634
+ // Loading new page
635
+ if (direction === 'to-left') {
636
+ rightNavbarInner.removeClass('navbar-on-right').addClass('navbar-from-right-to-center');
637
+ rightNavbarInner.find('.sliding').each(function () {
638
+ var sliding = $(this);
639
+ sliding.transform('translate3d(0px,0,0)');
640
+ if (app.params.animateNavBackIcon) {
641
+ if (sliding.hasClass('left') && sliding.find('.back .icon').length > 0) {
642
+ sliding.find('.back .icon').transform('translate3d(0px,0,0)');
643
+ }
644
+ }
645
+ });
646
+
647
+ leftNavbarInner.removeClass('navbar-on-center').addClass('navbar-from-center-to-left');
648
+ leftNavbarInner.find('.sliding').each(function () {
649
+ var sliding = $(this);
650
+ if (app.params.animateNavBackIcon) {
651
+ if (sliding.hasClass('center') && rightNavbarInner.find('.sliding.left .back .icon').length > 0) {
652
+ this.f7NavbarLeftOffset += rightNavbarInner.find('.sliding.left .back span')[0].offsetLeft;
653
+ }
654
+ if (sliding.hasClass('left') && sliding.find('.back .icon').length > 0) {
655
+ sliding.find('.back .icon').transform('translate3d(' + (-this.f7NavbarLeftOffset) + 'px,0,0)');
656
+ }
657
+ }
658
+ sliding.transform('translate3d(' + (this.f7NavbarLeftOffset) + 'px,0,0)');
659
+ });
660
+ }
661
+ // Go back
662
+ if (direction === 'to-right') {
663
+ leftNavbarInner.removeClass('navbar-on-left').addClass('navbar-from-left-to-center');
664
+ leftNavbarInner.find('.sliding').each(function () {
665
+ var sliding = $(this);
666
+ sliding.transform('translate3d(0px,0,0)');
667
+ if (app.params.animateNavBackIcon) {
668
+ if (sliding.hasClass('left') && sliding.find('.back .icon').length > 0) {
669
+ sliding.find('.back .icon').transform('translate3d(0px,0,0)');
670
+ }
671
+ }
672
+ });
673
+
674
+ rightNavbarInner.removeClass('navbar-on-center').addClass('navbar-from-center-to-right');
675
+ rightNavbarInner.find('.sliding').each(function () {
676
+ var sliding = $(this);
677
+ if (app.params.animateNavBackIcon) {
678
+ if (sliding.hasClass('left') && sliding.find('.back .icon').length > 0) {
679
+ sliding.find('.back .icon').transform('translate3d(' + (-this.f7NavbarRightOffset) + 'px,0,0)');
680
+ }
681
+ }
682
+ sliding.transform('translate3d(' + (this.f7NavbarRightOffset) + 'px,0,0)');
683
+ });
684
+ }
685
+ }
578
686
  function _load(view, url, content) {
579
687
  var viewContainer = $(view.container),
580
688
  newPage, oldPage, pagesInView, i, oldNavbarInner, newNavbarInner, navbar, dynamicNavbar;
581
689
 
582
- // Parse DOM to find new page
690
+ // Clear temp div
691
+ app._tempDomElement.innerHTML = '';
692
+
693
+ // Parse DOM
583
694
  if (url || (typeof content === 'string')) {
584
695
  app._tempDomElement.innerHTML = content;
585
696
  } else {
586
697
  if ('length' in content && content.length > 1) {
587
- app._tempDomElement = document.createElement('div');
588
698
  for (var ci = 0; ci < content.length; ci++) {
589
699
  $(app._tempDomElement).append(content[ci]);
590
700
  }
591
701
  } else {
592
- app._tempDomElement.innerHTML = '';
593
702
  $(app._tempDomElement).append(content);
594
703
  }
595
704
  }
596
705
 
706
+ // Subevents for iframes
597
707
  if (view.params.subEvents) {
598
708
  $(app._tempDomElement).find('.page').each(function () {
599
709
  var page = this;
@@ -603,16 +713,15 @@
603
713
  });
604
714
  }
605
715
 
606
- newPage = $('.page', app._tempDomElement);
607
- if (newPage.length > 1) {
608
- newPage = $(app._tempDomElement).find('.view-main .page');
609
- }
716
+ // Find new page
717
+ newPage = _findElement('.page', app._tempDomElement, view);
610
718
 
611
- // If pages not found or there are still more than one, exit
612
- if (newPage.length === 0 || newPage.length > 1) {
719
+ // If page not found exit
720
+ if (!newPage) {
613
721
  app.allowPageChange = true;
614
722
  return;
615
723
  }
724
+
616
725
  newPage.addClass('page-on-right');
617
726
 
618
727
  // Find old page (should be the last one) and remove older pages
@@ -636,11 +745,8 @@
636
745
  if (view.params.dynamicNavbar) {
637
746
  dynamicNavbar = true;
638
747
  // Find navbar
639
- newNavbarInner = $('.navbar-inner', app._tempDomElement);
640
- if (newNavbarInner.length > 1) {
641
- newNavbarInner = $('.view-main .navbar-inner', app._tempDomElement);
642
- }
643
- if (newNavbarInner.length === 0 || newNavbarInner > 1) {
748
+ newNavbarInner = _findElement('.navbar-inner', app._tempDomElement, view);
749
+ if (!newNavbarInner) {
644
750
  dynamicNavbar = false;
645
751
  }
646
752
  navbar = viewContainer.find('.navbar');
@@ -652,7 +758,7 @@
652
758
  else
653
759
  $(oldNavbarInner[i]).addClass('cached');
654
760
  }
655
- if (newNavbarInner.length === 0 && oldNavbarInner.length === 1) {
761
+ if (!newNavbarInner && oldNavbarInner.length === 1) {
656
762
  if (!view.params.domCache)
657
763
  $(oldNavbarInner[0]).remove();
658
764
  else
@@ -690,7 +796,13 @@
690
796
 
691
797
  if (dynamicNavbar) {
692
798
  newNavbarInner.find('.sliding').each(function () {
693
- $(this).transform('translate3d(' + (this.f7NavbarRightOffset) + 'px,0,0)');
799
+ var sliding = $(this);
800
+ sliding.transform('translate3d(' + (this.f7NavbarRightOffset) + 'px,0,0)');
801
+ if (app.params.animateNavBackIcon) {
802
+ if (sliding.hasClass('left') && sliding.find('.back .icon').length > 0) {
803
+ sliding.find('.back .icon').transform('translate3d(' + (-this.f7NavbarRightOffset) + 'px,0,0)');
804
+ }
805
+ }
694
806
  });
695
807
  }
696
808
  // Force reLayout
@@ -698,29 +810,22 @@
698
810
 
699
811
  // Before Anim Callback
700
812
  app.pageAnimCallbacks('before', view, {pageContainer: newPage[0], url: url, position: 'left', oldPage: oldPage, newPage: newPage});
701
-
702
- newPage.addClass('page-from-right-to-center');
703
- oldPage.addClass('page-from-center-to-left').removeClass('page-on-center');
813
+
814
+ // Set pages before animation
815
+ _animatePages(oldPage, newPage, 'to-left', view);
704
816
 
705
817
  // Dynamic navbar animation
706
818
  if (dynamicNavbar) {
707
- newNavbarInner.removeClass('navbar-on-right').addClass('navbar-from-right-to-center');
708
- newNavbarInner.find('.sliding').each(function () {
709
- $(this).transform('translate3d(0px,0,0)');
710
- });
711
- oldNavbarInner.removeClass('navbar-on-center').addClass('navbar-from-center-to-left');
712
- oldNavbarInner.find('.sliding').each(function () {
713
- $(this).transform('translate3d(' + (this.f7NavbarLeftOffset) + 'px,0,0)');
714
- });
819
+ _animateNavbars(oldNavbarInner, newNavbarInner, 'to-left', view);
715
820
  }
716
821
 
717
822
  newPage.animationEnd(function (e) {
718
823
  app.allowPageChange = true;
719
- newPage.toggleClass('page-from-right-to-center page-on-center page-on-right');
720
- oldPage.toggleClass('page-from-center-to-left page-on-left');
824
+ newPage.removeClass('page-from-right-to-center page-on-right').addClass('page-on-center');
825
+ oldPage.removeClass('page-from-center-to-left').addClass('page-on-left');
721
826
  if (dynamicNavbar) {
722
- newNavbarInner.toggleClass('navbar-from-right-to-center navbar-on-center');
723
- oldNavbarInner.toggleClass('navbar-from-center-to-left navbar-on-left');
827
+ newNavbarInner.removeClass('navbar-from-right-to-center').addClass('navbar-on-center');
828
+ oldNavbarInner.removeClass('navbar-from-center-to-left').addClass('navbar-on-left');
724
829
  }
725
830
  app.pageAnimCallbacks('after', view, {pageContainer: newPage[0], url: url, position: 'right', oldPage: oldPage, newPage: newPage});
726
831
  });
@@ -735,7 +840,6 @@
735
840
 
736
841
  _load(view, null, content);
737
842
 
738
- app.allowPageChange = true;
739
843
  };
740
844
  app.loadPage = function (view, url) {
741
845
  if (!app.allowPageChange) return false;
@@ -766,15 +870,28 @@
766
870
  var viewContainer = $(view.container),
767
871
  pagesInView = viewContainer.find('.page'),
768
872
  oldPage, newPage, oldNavbarInner, newNavbarInner, navbar, dynamicNavbar;
873
+ function _animate() {
874
+ // Page before animation callback
875
+ app.pageAnimCallbacks('before', view, {pageContainer: newPage[0], url: url, position: 'left', oldPage: oldPage, newPage: newPage});
769
876
 
770
- function _preload() {
771
- newPage = $('.page', app._tempDomElement);
772
- if (newPage.length > 1) {
773
- newPage = $(app._tempDomElement).find('.view-main .page');
877
+ // Set pages before animation
878
+ _animatePages(newPage, oldPage, 'to-right', view);
879
+
880
+ // Dynamic navbar animation
881
+ if (dynamicNavbar) {
882
+ _animateNavbars(newNavbarInner, oldNavbarInner, 'to-right', view);
774
883
  }
884
+
885
+ newPage.animationEnd(function () {
886
+ app.afterGoBack(view, oldPage[0], newPage[0]);
887
+ app.pageAnimCallbacks('after', view, {pageContainer: newPage[0], url: url, position: 'left', oldPage: oldPage, newPage: newPage});
888
+ });
889
+ }
890
+ function _preload() {
891
+ newPage = _findElement('.page', app._tempDomElement, view);
775
892
 
776
893
  // If pages not found or there are still more than one, exit
777
- if (newPage.length === 0 || newPage.length > 1) {
894
+ if (!newPage) {
778
895
  app.allowPageChange = true;
779
896
  return;
780
897
  }
@@ -787,11 +904,8 @@
787
904
  if (view.params.dynamicNavbar) {
788
905
  dynamicNavbar = true;
789
906
  // Find navbar
790
- newNavbarInner = $('.navbar-inner', app._tempDomElement);
791
- if (newNavbarInner.length > 1) {
792
- newNavbarInner = $('.view-main .navbar-inner', app._tempDomElement);
793
- }
794
- if (newNavbarInner.length === 0 || newNavbarInner > 1) {
907
+ newNavbarInner = _findElement('.navbar-inner', app._tempDomElement, view);
908
+ if (!newNavbarInner) {
795
909
  dynamicNavbar = false;
796
910
  }
797
911
 
@@ -815,7 +929,16 @@
815
929
 
816
930
  if (dynamicNavbar && newNavbarInner.hasClass('navbar-on-left')) {
817
931
  newNavbarInner.find('.sliding').each(function () {
818
- $(this).transform('translate3d(' + (this.f7NavbarLeftOffset) + 'px,0,0)');
932
+ var sliding = $(this);
933
+ if (app.params.animateNavBackIcon) {
934
+ if (sliding.hasClass('left') && sliding.find('.back .icon').length > 0) {
935
+ sliding.find('.back .icon').transform('translate3d(' + (-this.f7NavbarLeftOffset) + 'px,0,0)');
936
+ }
937
+ if (sliding.hasClass('center') && oldNavbarInner.find('.left .back .icon').length > 0) {
938
+ this.f7NavbarLeftOffset += oldNavbarInner.find('.left .back span')[0].offsetLeft;
939
+ }
940
+ }
941
+ sliding.transform('translate3d(' + (this.f7NavbarLeftOffset) + 'px,0,0)');
819
942
  });
820
943
  }
821
944
 
@@ -832,28 +955,7 @@
832
955
  // Force reLayout
833
956
  var clientLeft = newPage[0].clientLeft;
834
957
 
835
- // Before Anim Callback
836
- app.pageAnimCallbacks('before', view, {pageContainer: newPage[0], url: url, position: 'left', oldPage: oldPage, newPage: newPage});
837
-
838
- newPage.addClass('page-from-left-to-center');
839
- oldPage.removeClass('page-on-center').addClass('page-from-center-to-right');
840
-
841
- // Dynamic navbar animation
842
- if (dynamicNavbar) {
843
- newNavbarInner.removeClass('navbar-on-left').addClass('navbar-from-left-to-center');
844
- newNavbarInner.find('.sliding').each(function () {
845
- $(this).transform('translate3d(0px,0,0)');
846
- });
847
- oldNavbarInner.removeClass('navbar-on-center').addClass('navbar-from-center-to-right');
848
- oldNavbarInner.find('.sliding').each(function () {
849
- $(this).transform('translate3d(' + (this.f7NavbarRightOffset) + 'px,0,0)');
850
- });
851
- }
852
-
853
- newPage.animationEnd(function () {
854
- app.afterGoBack(view, oldPage[0], newPage[0]);
855
- app.pageAnimCallbacks('after', view, {pageContainer: newPage[0], url: url, position: 'left', oldPage: oldPage, newPage: newPage});
856
- });
958
+ _animate();
857
959
  }
858
960
 
859
961
  if (pagesInView.length > 1) {
@@ -877,31 +979,7 @@
877
979
  newNavbarInner = $(inners[0]);
878
980
  oldNavbarInner = $(inners[1]);
879
981
  }
880
-
881
- // Page before animation callback
882
- app.pageAnimCallbacks('before', view, {pageContainer: newPage[0], url: url, position: 'left', oldPage: oldPage, newPage: newPage});
883
-
884
- // Add classes for animation
885
- newPage.removeClass('page-on-left').addClass('page-from-left-to-center');
886
- oldPage.removeClass('page-on-center').addClass('page-from-center-to-right');
887
-
888
- // Dynamic navbar animation
889
- if (dynamicNavbar) {
890
- newNavbarInner.removeClass('navbar-on-left').addClass('navbar-from-left-to-center');
891
- newNavbarInner.find('.sliding').each(function () {
892
- $(this).transform('translate3d(0px,0,0)');
893
- });
894
-
895
- oldNavbarInner.removeClass('navbar-on-center').addClass('navbar-from-center-to-right');
896
- oldNavbarInner.find('.sliding').each(function () {
897
- $(this).transform('translate3d(' + (this.f7NavbarRightOffset) + 'px,0,0)');
898
- });
899
- }
900
-
901
- newPage.animationEnd(function () {
902
- app.afterGoBack(view, oldPage[0], newPage[0]);
903
- app.pageAnimCallbacks('after', view, {pageContainer: newPage[0], url: url, position: 'left', oldPage: oldPage, newPage: newPage});
904
- });
982
+ _animate();
905
983
  }
906
984
  else {
907
985
  if (url && url.indexOf('#') === 0) url = undefined;
@@ -917,7 +995,7 @@
917
995
  if (!view.params.domCache && (url in view.contentCache)) {
918
996
  var _cache = view.contentCache[url];
919
997
 
920
- app._tempDomElement = document.createElement('div');
998
+ app._tempDomElement.innerHTML = '';
921
999
  $(app._tempDomElement).append(_cache.nav[0]).append(_cache.page[0]);
922
1000
  _preload();
923
1001
  return;
@@ -928,9 +1006,7 @@
928
1006
  app.allowPageChange = true;
929
1007
  return;
930
1008
  }
931
- // Parse DOM to find new page
932
1009
  app._tempDomElement.innerHTML = data;
933
-
934
1010
  _preload();
935
1011
  });
936
1012
  }
@@ -1309,7 +1385,7 @@
1309
1385
  ======================================================*/
1310
1386
  app.allowPanelOpen = true;
1311
1387
  app.openPanel = function (panelPosition) {
1312
- // @panelPosition - string with panel position "left", "right", "top"
1388
+ // @panelPosition - string with panel position "left", "right"
1313
1389
  if (!app.allowPanelOpen) return false;
1314
1390
  var panel = $('.panel-' + panelPosition);
1315
1391
  if (panel.length === 0 || panel.hasClass('active')) return false;
@@ -1318,6 +1394,9 @@
1318
1394
  var effect = panel.hasClass('panel-reveal') ? 'reveal' : 'cover';
1319
1395
  panel.css({display: 'block'}).addClass('active');
1320
1396
  panel.trigger('open');
1397
+ if (panel.find('.view').length > 0) {
1398
+ if (app.sizeNavbars) app.sizeNavbars(panel.find('.view')[0]);
1399
+ }
1321
1400
 
1322
1401
  // Trigger reLayout
1323
1402
  var clientLeft = panel[0].clientLeft;
@@ -1604,6 +1683,131 @@
1604
1683
  });
1605
1684
  el.find('.swipeout-content').transform('translate3d(-100%,0,0)');
1606
1685
  };
1686
+ /*===============================================================================
1687
+ ************ Smart Select ************
1688
+ ===============================================================================*/
1689
+ app.initSmartSelects = function (pageContainer) {
1690
+ var page = $(pageContainer);
1691
+ if (page.length === 0) return;
1692
+
1693
+ var selects = page.find('.smart-select');
1694
+ if (selects.length === 0) return;
1695
+
1696
+ selects.each(function () {
1697
+ var smartSelect = $(this);
1698
+
1699
+ var $select = smartSelect.find('select');
1700
+ if ($select.length === 0) return;
1701
+
1702
+ var select = $select[0];
1703
+ if (select.length === 0) return;
1704
+
1705
+ var valueText;
1706
+ for (var i = 0; i < select.length; i++) {
1707
+ if (select[i].selected) valueText = select[i].textContent.trim();
1708
+ }
1709
+
1710
+ var itemAfter = smartSelect.find('.item-after');
1711
+ if (itemAfter.length === 0) {
1712
+ smartSelect.find('.item-inner').append('<div class="item-after">' + valueText + '</div>');
1713
+ }
1714
+ else {
1715
+ itemAfter.text(valueText);
1716
+ }
1717
+
1718
+ });
1719
+
1720
+ };
1721
+ app.smartSelectOpen = function (smartSelect) {
1722
+ smartSelect = $(smartSelect);
1723
+ if (smartSelect.length === 0) return;
1724
+
1725
+ // Find related view
1726
+ var view = smartSelect.parents('.view');
1727
+ if (view.length === 0) return;
1728
+ view = view[0].f7View;
1729
+ if (!view) return;
1730
+
1731
+ // Collect all values
1732
+ var select = smartSelect.find('select')[0];
1733
+ var values = {};
1734
+ values.length = select.length;
1735
+ for (var i = 0; i < select.length; i++) {
1736
+ values[i] = {
1737
+ value: select[i].value,
1738
+ text: select[i].textContent.trim(),
1739
+ selected: select[i].selected
1740
+ };
1741
+ }
1742
+
1743
+ var pageTitle = smartSelect.find('.item-title').text();
1744
+
1745
+ // Generate dynamic page layout
1746
+ var radiosName = 'radio-' + (new Date()).getTime();
1747
+ var radiosHTML = '';
1748
+ for (var j = 0; j < values.length; j++) {
1749
+ var checked = values[j].selected ? 'checked' : '';
1750
+ radiosHTML +=
1751
+ '<li>' +
1752
+ '<label class="label-radio item-content">' +
1753
+ '<input type="radio" name="' + radiosName + '" value="' + values[j].value + '" ' + checked + '>' +
1754
+ '<div class="item-inner">' +
1755
+ '<div class="item-title">' + values[j].text + '</div>' +
1756
+ '</div>' +
1757
+ '</label>' +
1758
+ '</li>';
1759
+ }
1760
+ // Navbar HTML
1761
+ var navbarHTML =
1762
+ '<div class="navbar">' +
1763
+ ' <div class="navbar-inner">' +
1764
+ app.params.smartSelectBackTemplate +
1765
+ ' <div class="center sliding">' + pageTitle + '</div>' +
1766
+ ' </div>' +
1767
+ '</div>';
1768
+ // Determine navbar layout type - static/fixed/through
1769
+ var navbarLayout = 'static';
1770
+ if (smartSelect.parents('.navbar-through').length > 0) navbarLayout = 'through';
1771
+ if (smartSelect.parents('.navbar-fixed').length > 0) navbarLayout = 'fixed';
1772
+ // Page Layout
1773
+ var pageName = 'smart-select-' + radiosName;
1774
+ var pageHTML =
1775
+ (navbarLayout === 'through' ? navbarHTML : '') +
1776
+ '<div class="pages">' +
1777
+ ' <div data-page="' + pageName + '" class="page">' +
1778
+ (navbarLayout === 'fixed' ? navbarHTML : '') +
1779
+ ' <div class="page-content">' +
1780
+ (navbarLayout === 'static' ? navbarHTML : '') +
1781
+ ' <div class="list-block">' +
1782
+ ' <ul>' +
1783
+ radiosHTML +
1784
+ ' </ul>' +
1785
+ ' </div>' +
1786
+ ' </div>' +
1787
+ ' </div>' +
1788
+ '</div>';
1789
+
1790
+ // Event Listeners on new page
1791
+ function handleRadios(e) {
1792
+ var page = e.detail.page;
1793
+ if (page.name === pageName) {
1794
+ $(document).off('pageInit', handleRadios);
1795
+ $(page.container).find('input[name="' + radiosName + '"]').on('change', function () {
1796
+ var value = this.value;
1797
+ select.value = value;
1798
+ $(select).trigger('change');
1799
+ var optionText = smartSelect.find('option[value="' + value + '"]').text();
1800
+ smartSelect.find('.item-after').text(optionText);
1801
+ });
1802
+ }
1803
+ }
1804
+ $(document).on('pageInit', handleRadios);
1805
+
1806
+ // Load content
1807
+ view.loadContent(pageHTML);
1808
+
1809
+ };
1810
+
1607
1811
  /*======================================================
1608
1812
  ************ Pull To Refresh ************
1609
1813
  ======================================================*/
@@ -1793,13 +1997,20 @@
1793
1997
  /*jshint validthis:true */
1794
1998
  var clicked = $(this);
1795
1999
  var url = clicked.attr('href');
1796
- // External
1797
- if (clicked.hasClass('external')) {
1798
- return;
2000
+ if (clicked[0].nodeName.toLowerCase() === 'a') {
2001
+ // External
2002
+ if (clicked.hasClass('external')) {
2003
+ return;
2004
+ }
2005
+ else {
2006
+ e.preventDefault();
2007
+ }
1799
2008
  }
1800
- else if (clicked[0].nodeName.toLowerCase() === 'a') {
1801
- e.preventDefault();
2009
+ // Smart Select
2010
+ if (clicked.hasClass('smart-select')) {
2011
+ if (app.smartSelectOpen) app.smartSelectOpen(clicked);
1802
2012
  }
2013
+
1803
2014
  // Open Panel
1804
2015
  if (clicked.hasClass('open-panel')) {
1805
2016
  if ($('.panel').length === 1) {
@@ -1909,7 +2120,7 @@
1909
2120
  else view.loadPage(clicked.attr('href'));
1910
2121
  }
1911
2122
  }
1912
- $(document).on('click', 'a, .open-panel, .close-panel, .panel-overlay, .modal-overlay, .swipeout-delete, .close-popup, .open-popup, .open-popover', handleClicks);
2123
+ $(document).on('click', 'a, .open-panel, .close-panel, .panel-overlay, .modal-overlay, .swipeout-delete, .close-popup, .open-popup, .open-popover, .smart-select', handleClicks);
1913
2124
  };
1914
2125
  /*======================================================
1915
2126
  ************ App Resize Actions ************
@@ -1942,9 +2153,11 @@
1942
2153
  if (android) {
1943
2154
  device.os = 'android';
1944
2155
  device.osVersion = android[2];
2156
+ device.android = true;
1945
2157
  }
1946
2158
  if (ipad || iphone || ipod) {
1947
2159
  device.os = 'ios';
2160
+ device.ios = true;
1948
2161
  }
1949
2162
  // iOS
1950
2163
  device.iphone = false;
@@ -1992,7 +2205,6 @@
1992
2205
  (windowWidth === 1024 && windowHeight === 768)
1993
2206
  )
1994
2207
  ) {
1995
- console.log(device.webview);
1996
2208
  device.statusBar = true;
1997
2209
  }
1998
2210
  else {
@@ -2363,6 +2575,16 @@
2363
2575
  if (this[i] === el) return i;
2364
2576
  }
2365
2577
  },
2578
+ index: function () {
2579
+ if (this[0]) {
2580
+ var child = this[0];
2581
+ var i = 0;
2582
+ while ((child = child.previousSibling) != null)
2583
+ i++;
2584
+ return i;
2585
+ }
2586
+ else return undefined;
2587
+ },
2366
2588
  append: function (newChild) {
2367
2589
  for (var i = 0; i < this.length; i++) {
2368
2590
  if (typeof newChild === 'string') {