framework7-rails 0.7.1.1 → 0.7.4.0
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/README.md +65 -3
- data/app/helpers/app_helper.rb +22 -0
- data/framework7-rails.gemspec +1 -0
- data/lib/framework7/rails/version.rb +1 -1
- data/lib/generators/f7/install/install_generator.rb +28 -0
- data/lib/generators/f7/install/templates/application.css +14 -0
- data/lib/generators/f7/install/templates/application.js +17 -0
- data/lib/generators/f7/layout/layout_generator.rb +0 -8
- data/lib/generators/f7/layout/templates/app.js.coffee.erb +4 -3
- data/lib/generators/f7/layout/templates/layout.html.erb +77 -10
- data/vendor/assets/javascripts/framework7.js +374 -152
- data/vendor/assets/javascripts/framework7.min.js +5 -5
- data/vendor/assets/stylesheets/framework7.css +18 -9
- data/vendor/assets/stylesheets/framework7.min.css +4 -4
- metadata +20 -2
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA1:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: 11e8ce51feb9ce116f9e303434a92a1168702abd
|
|
4
|
+
data.tar.gz: 05db8570c39cc12a1871833824361c0b5212889c
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: c4fb08aebc439ceb2addcdc2a4db89c875f1071b16de2b958635f026004ef632028a09466518374b8fbe39a3ed752422da28a7a3278ed6a737903956935fc412
|
|
7
|
+
data.tar.gz: 874adf1ae3ca6a6cca48d1f4dbaae755edaa9224caa8e5816af8aa8524c9201464fb0bf13493c4d42c17447e84302cd0dfd44138229b679ce380ad9a917d099a
|
data/README.md
CHANGED
|
@@ -1,8 +1,12 @@
|
|
|
1
1
|
# Framework7::Rails
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
[](http://badge.fury.io/rb/framework7-rails)
|
|
4
4
|
|
|
5
|
-
|
|
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
|
|
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
|
data/framework7-rails.gemspec
CHANGED
|
@@ -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
|
-
|
|
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
|
|
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
|
|
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
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
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
|
-
|
|
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.
|
|
3
|
-
* Full Featured HTML Framework For Building
|
|
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
|
|
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 (
|
|
100
|
-
if (!
|
|
101
|
-
var $container = $(
|
|
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
|
|
106
|
-
|
|
109
|
+
if (typeof params === 'undefined') params = {};
|
|
110
|
+
|
|
107
111
|
var view = {
|
|
108
112
|
container: container,
|
|
109
|
-
selector:
|
|
110
|
-
params:
|
|
113
|
+
selector: selector,
|
|
114
|
+
params: params || {},
|
|
111
115
|
history: [],
|
|
112
116
|
contentCache: {},
|
|
113
|
-
url: container.getAttribute('data-url') ||
|
|
117
|
+
url: container.getAttribute('data-url') || document.location.href,
|
|
114
118
|
pagesContainer: $('.pages', container)[0],
|
|
115
|
-
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.
|
|
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)
|
|
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)
|
|
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
|
-
|
|
319
|
-
|
|
320
|
-
|
|
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
|
-
|
|
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
|
-
|
|
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
|
-
|
|
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
|
-
|
|
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
|
-
//
|
|
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
|
-
|
|
607
|
-
|
|
608
|
-
newPage = $(app._tempDomElement).find('.view-main .page');
|
|
609
|
-
}
|
|
716
|
+
// Find new page
|
|
717
|
+
newPage = _findElement('.page', app._tempDomElement, view);
|
|
610
718
|
|
|
611
|
-
// If
|
|
612
|
-
if (newPage
|
|
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 =
|
|
640
|
-
if (newNavbarInner
|
|
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
|
|
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
|
-
|
|
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
|
-
|
|
703
|
-
oldPage
|
|
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
|
|
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.
|
|
720
|
-
oldPage.
|
|
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.
|
|
723
|
-
oldNavbarInner.
|
|
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
|
-
|
|
771
|
-
newPage
|
|
772
|
-
|
|
773
|
-
|
|
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
|
|
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 =
|
|
791
|
-
if (newNavbarInner
|
|
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
|
-
|
|
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
|
-
|
|
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 =
|
|
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"
|
|
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
|
-
|
|
1797
|
-
|
|
1798
|
-
|
|
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
|
-
|
|
1801
|
-
|
|
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') {
|