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 +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') {
|