page_stack 1.0.4
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 +7 -0
- data/MIT-LICENSE +20 -0
- data/README.md +123 -0
- data/Rakefile +34 -0
- data/app/assets/javascripts/pagestack.js +299 -0
- data/app/assets/stylesheets/pagestack.css +193 -0
- data/lib/page_stack/engine.rb +4 -0
- data/lib/page_stack/version.rb +3 -0
- data/lib/page_stack.rb +10 -0
- data/lib/tasks/page_stack_tasks.rake +4 -0
- data/test/dummy/README.rdoc +28 -0
- data/test/dummy/Rakefile +6 -0
- data/test/dummy/app/assets/javascripts/application.js +13 -0
- data/test/dummy/app/assets/stylesheets/application.css +15 -0
- data/test/dummy/app/controllers/application_controller.rb +5 -0
- data/test/dummy/app/helpers/application_helper.rb +2 -0
- data/test/dummy/app/views/layouts/application.html.erb +14 -0
- data/test/dummy/bin/bundle +3 -0
- data/test/dummy/bin/rails +4 -0
- data/test/dummy/bin/rake +4 -0
- data/test/dummy/bin/setup +29 -0
- data/test/dummy/config/application.rb +26 -0
- data/test/dummy/config/boot.rb +5 -0
- data/test/dummy/config/database.yml +25 -0
- data/test/dummy/config/environment.rb +5 -0
- data/test/dummy/config/environments/development.rb +41 -0
- data/test/dummy/config/environments/production.rb +79 -0
- data/test/dummy/config/environments/test.rb +42 -0
- data/test/dummy/config/initializers/assets.rb +11 -0
- data/test/dummy/config/initializers/backtrace_silencers.rb +7 -0
- data/test/dummy/config/initializers/cookies_serializer.rb +3 -0
- data/test/dummy/config/initializers/filter_parameter_logging.rb +4 -0
- data/test/dummy/config/initializers/inflections.rb +16 -0
- data/test/dummy/config/initializers/mime_types.rb +4 -0
- data/test/dummy/config/initializers/session_store.rb +3 -0
- data/test/dummy/config/initializers/wrap_parameters.rb +14 -0
- data/test/dummy/config/locales/en.yml +23 -0
- data/test/dummy/config/routes.rb +56 -0
- data/test/dummy/config/secrets.yml +22 -0
- data/test/dummy/config.ru +4 -0
- data/test/dummy/public/404.html +67 -0
- data/test/dummy/public/422.html +67 -0
- data/test/dummy/public/500.html +66 -0
- data/test/dummy/public/favicon.ico +0 -0
- data/test/page_stack_test.rb +7 -0
- data/test/test_helper.rb +20 -0
- metadata +139 -0
checksums.yaml
ADDED
@@ -0,0 +1,7 @@
|
|
1
|
+
---
|
2
|
+
SHA1:
|
3
|
+
metadata.gz: b2563b563a818502061ad05de81ad4f3fe661636
|
4
|
+
data.tar.gz: 7b595a56316e36a0c32fb4b389822c62be297071
|
5
|
+
SHA512:
|
6
|
+
metadata.gz: 21b1b480cad5263826d019b4a49977b26d26275f2d4140ad14b1ff80a9127d6f9f91d51611c8711e251696a191fe400499b35c95f65919046eafac467e11bded
|
7
|
+
data.tar.gz: d33683a00e04b16e5ce83fc258941ef8f88590c04f9121e21ccd53e46f1e8245667c4904e832583f339082be349272b72aa1b42586f5c35f433e9d2bb49b1d28
|
data/MIT-LICENSE
ADDED
@@ -0,0 +1,20 @@
|
|
1
|
+
Copyright 2016 Bruno Porto
|
2
|
+
|
3
|
+
Permission is hereby granted, free of charge, to any person obtaining
|
4
|
+
a copy of this software and associated documentation files (the
|
5
|
+
"Software"), to deal in the Software without restriction, including
|
6
|
+
without limitation the rights to use, copy, modify, merge, publish,
|
7
|
+
distribute, sublicense, and/or sell copies of the Software, and to
|
8
|
+
permit persons to whom the Software is furnished to do so, subject to
|
9
|
+
the following conditions:
|
10
|
+
|
11
|
+
The above copyright notice and this permission notice shall be
|
12
|
+
included in all copies or substantial portions of the Software.
|
13
|
+
|
14
|
+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
|
15
|
+
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
|
16
|
+
MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
|
17
|
+
NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
|
18
|
+
LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
|
19
|
+
OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
|
20
|
+
WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
|
data/README.md
ADDED
@@ -0,0 +1,123 @@
|
|
1
|
+
PageStack
|
2
|
+
=======
|
3
|
+
|
4
|
+
[](https://codeclimate.com/github/brunoporto/page_stack)
|
5
|
+
|
6
|
+
Essa GEM fornece a possibilidade de navegação de paǵinas sobrepostas, facilitando assim a abertura de novas páginas em perder o conteúdo anterior.
|
7
|
+
|
8
|
+
# Requisitos
|
9
|
+
|
10
|
+
- Rails 4.2+
|
11
|
+
- jQuery 2+
|
12
|
+
- Remotipart (Envio de formulário por Ajax)
|
13
|
+
|
14
|
+
# Instalação
|
15
|
+
|
16
|
+
Adicione essa linha no Gemfile do projeto:
|
17
|
+
```ruby
|
18
|
+
gem 'page_stack'
|
19
|
+
```
|
20
|
+
|
21
|
+
Instale a gem utilizando o comando abaixo no diretório raiz da aplicação:
|
22
|
+
```sh
|
23
|
+
$ bundle install
|
24
|
+
```
|
25
|
+
|
26
|
+
Adicione no seu arquivo `application_controller.rb` a seguinte configuração:
|
27
|
+
```ruby
|
28
|
+
class ApplicationController < ActionController::Base
|
29
|
+
include PageStack
|
30
|
+
layout :pagestack_layout
|
31
|
+
end
|
32
|
+
```
|
33
|
+
|
34
|
+
Adicione a seguinte linha no seu arquivo `application.css`:
|
35
|
+
```css
|
36
|
+
*= require pagestack
|
37
|
+
```
|
38
|
+
|
39
|
+
Adicione a seguinte linha no seu arquivo `application.js`:
|
40
|
+
```js
|
41
|
+
//= require pagestack
|
42
|
+
//= require jquery.remotipart
|
43
|
+
```
|
44
|
+
|
45
|
+
Para inicializar o plugin você utilizará o código abaixo:
|
46
|
+
```js
|
47
|
+
var pagestack = new PageStack().init();
|
48
|
+
```
|
49
|
+
|
50
|
+
Seus eventos são baseados em [delegator](https://learn.jquery.com/events/event-delegation/) do jQuery e estão vinculados ao **document**.
|
51
|
+
|
52
|
+
# Configuração
|
53
|
+
|
54
|
+
Você possui três parâmetros de configuração para o pagestack:
|
55
|
+
- form : (padrão: 'form') Informe o elemento form que ele deverá o recurso "submit" via AJAX.
|
56
|
+
- loading : (padrão: true) Informa se o ícone de *carregando* será exibido para informar ao usuário o progresso de ações AJAX.
|
57
|
+
- closeOnEsc : (padrão: false) Permite fechar o pagestack ativo com a tecla ESC
|
58
|
+
- debug : (padrão: false) Exibe as mensagens de testes no console.log
|
59
|
+
|
60
|
+
```js
|
61
|
+
var pagestack = new PageStack({
|
62
|
+
form: 'form',
|
63
|
+
loading: true,
|
64
|
+
closeOnEsc: false,
|
65
|
+
debug: false
|
66
|
+
}).init();
|
67
|
+
```
|
68
|
+
|
69
|
+
# Utilização
|
70
|
+
|
71
|
+
Você pode abrir multiplas páginas sobrepostas apenas configurando os links em cada página.
|
72
|
+
|
73
|
+
Para indicar que um link abrirá uma pagestack adicione a classe `pagestack` ao seu elemento:
|
74
|
+
```haml
|
75
|
+
= link_to "Abrir Página", root_path, class: 'pagestack'
|
76
|
+
```
|
77
|
+
|
78
|
+
Para indicar o título da nova página utilize o atributo data `pagestack-title`:
|
79
|
+
```haml
|
80
|
+
= link_to "Abrir Página", root_path, class: 'pagestack', data: {'pagestack-title' => 'Título da minha página sobreposta'}
|
81
|
+
```
|
82
|
+
|
83
|
+
Caso você abra uma sub-página sobreposta e precise que ao fechar essa página você recarregue o conteúdo da página origem você precisa indicar o atributo data `pagestack-refresh-parent-onclose`:
|
84
|
+
```haml
|
85
|
+
= link_to "Abrir Página", root_path, class: 'pagestack', data: {'pagestack-refresh-parent-onclose' => true}
|
86
|
+
```
|
87
|
+
|
88
|
+
Caso você precise alterar o conteúdo da própria pagestack (self) ao invés de abrir uma nova você pode informar o atributo `data-pagestack-replace-content`:
|
89
|
+
```haml
|
90
|
+
= link_to "Abrir Página", root_path, class: 'pagestack', data: {'pagestack-refresh-replace-content' => true}
|
91
|
+
```
|
92
|
+
|
93
|
+
Para ativar/desativar o fechamento do pagestack ativo através da tecla ESC utilize o atributo `data-pagestack-close-esc`. O padrão é **false**:
|
94
|
+
```haml
|
95
|
+
= link_to "Abrir Página", root_path, class: 'pagestack', data: {'pagestack-esc-close' => 'true'}
|
96
|
+
= link_to "Abrir Página", root_path, class: 'pagestack', data: {'pagestack-esc-close' => 'false'}
|
97
|
+
```
|
98
|
+
|
99
|
+
## Eventos Javascript
|
100
|
+
|
101
|
+
Ao iniciar o plugin você recebe o retorno e pode atribuir a uma variável (Ex: `var pagestack` no código de instalação):
|
102
|
+
```js
|
103
|
+
var pagestack = PageStack().init();
|
104
|
+
var current_page = pagestack.getItem(elemento_dentro_do_pagestack);
|
105
|
+
pagestack.close(elemento_dentro_do_pagestack);
|
106
|
+
```
|
107
|
+
|
108
|
+
- **init**: Método que inicia o pagestack e atriu os eventos
|
109
|
+
- **close(elemento)**: Fecha o pagestack de um elemento indicado (pode ser qualquer elemento dentro daquele pagestack, inclusive o próprio elemento pagestack).
|
110
|
+
- **getItem(elemento)**: Retorna o elemento "container" do pagestack a partir de um elemento interno indicado.
|
111
|
+
|
112
|
+
## Comportamento
|
113
|
+
|
114
|
+
**Formulário**
|
115
|
+
- Receberá por padrão o atributo *data-pagestack-replace-content* para carregar o conteúdo de retorno na própria página do formulário.
|
116
|
+
- Receberá por padrão o atributo rails *data-remote* para processamento o "submit" por AJAX através do plugin *jquery.remotipart*.
|
117
|
+
|
118
|
+
**Links**
|
119
|
+
- Os links com method=delete *(Links de exclusão)* receberão por padrão o atributo rails *data-remote* para processamento via AJAX.
|
120
|
+
|
121
|
+
# Referências
|
122
|
+
|
123
|
+
- [Remotipart: Rails jQuery File Uploads](https://github.com/JangoSteve/remotipart)
|
data/Rakefile
ADDED
@@ -0,0 +1,34 @@
|
|
1
|
+
begin
|
2
|
+
require 'bundler/setup'
|
3
|
+
rescue LoadError
|
4
|
+
puts 'You must `gem install bundler` and `bundle install` to run rake tasks'
|
5
|
+
end
|
6
|
+
|
7
|
+
require 'rdoc/task'
|
8
|
+
|
9
|
+
RDoc::Task.new(:rdoc) do |rdoc|
|
10
|
+
rdoc.rdoc_dir = 'rdoc'
|
11
|
+
rdoc.title = 'PageStack'
|
12
|
+
rdoc.options << '--line-numbers'
|
13
|
+
rdoc.rdoc_files.include('README.rdoc')
|
14
|
+
rdoc.rdoc_files.include('lib/**/*.rb')
|
15
|
+
end
|
16
|
+
|
17
|
+
|
18
|
+
|
19
|
+
|
20
|
+
|
21
|
+
|
22
|
+
Bundler::GemHelper.install_tasks
|
23
|
+
|
24
|
+
require 'rake/testtask'
|
25
|
+
|
26
|
+
Rake::TestTask.new(:test) do |t|
|
27
|
+
t.libs << 'lib'
|
28
|
+
t.libs << 'test'
|
29
|
+
t.pattern = 'test/**/*_test.rb'
|
30
|
+
t.verbose = false
|
31
|
+
end
|
32
|
+
|
33
|
+
|
34
|
+
task default: :test
|
@@ -0,0 +1,299 @@
|
|
1
|
+
(function(window, $){
|
2
|
+
|
3
|
+
var PageStack = function(options){
|
4
|
+
this.options = options;
|
5
|
+
this.config = null;
|
6
|
+
};
|
7
|
+
|
8
|
+
var _this;
|
9
|
+
|
10
|
+
PageStack.prototype = {
|
11
|
+
defaults: {
|
12
|
+
form: 'form',
|
13
|
+
debug: false,
|
14
|
+
loading: true,
|
15
|
+
closeOnEsc: false
|
16
|
+
},
|
17
|
+
init: function() {
|
18
|
+
this.config = $.extend({}, this.defaults, this.options);
|
19
|
+
_this = this;
|
20
|
+
|
21
|
+
$(document).on('click','.pagestack_close',function(e){
|
22
|
+
e.preventDefault();
|
23
|
+
_this.close($(this));
|
24
|
+
});
|
25
|
+
|
26
|
+
$(document).on('click','.pagestack',function(ev) {
|
27
|
+
ev.preventDefault();
|
28
|
+
|
29
|
+
var $elem = $(this);
|
30
|
+
var quadroTotal = count();
|
31
|
+
|
32
|
+
if (quadroTotal==0) {
|
33
|
+
var stack = $('<ul id="pagestack_container" class="pagestack_container"></ul>');
|
34
|
+
var wWidth = $(window).width();
|
35
|
+
var wHeight = $(window).height();
|
36
|
+
stack.css({'width': wWidth+'px', 'height': wHeight+'px'});
|
37
|
+
$('body').prepend(stack);
|
38
|
+
}
|
39
|
+
|
40
|
+
var index = quadroTotal + 1;
|
41
|
+
var item = $('<li id="pagestack-item-'+index+'" class="pagestack_item" data-pagestack-load-url="'+encodeURIComponent($elem.attr('href'))+'" data-pagestack-nivel="'+index+'" style="display: none;"></li>');
|
42
|
+
//COPY ALL DATA pagestack attributes
|
43
|
+
$.each($elem.prop("attributes"),function() {
|
44
|
+
if (this.name.match(/^data\-pagestack/)) {
|
45
|
+
item.attr(this.name, this.value);
|
46
|
+
}
|
47
|
+
});
|
48
|
+
|
49
|
+
//~~ CONTENT BLOCK
|
50
|
+
item.append('<div id="pagestack-content-'+index+'" class="pagestack_content"></div>');
|
51
|
+
|
52
|
+
//~~ TITLE
|
53
|
+
var title = $('<div id="pagestack-title-'+index+'" class="pagestack_title">'+item.attr('data-pagestack-title')+'</div>');
|
54
|
+
var btFechar = $('<a href="javascript:void(0);" class="pagestack_close"></a>');
|
55
|
+
var header = $('<div id="pagestack-header-'+index+'" class="pagestack_header"></div>').append(btFechar).append(title);
|
56
|
+
if (item.attr('data-pagestack-esc-close')==undefined && _this.config.closeOnEsc==true) {
|
57
|
+
item.attr('data-pagestack-esc-close','true');
|
58
|
+
}
|
59
|
+
item.prepend(header);
|
60
|
+
|
61
|
+
//~~ STYLE
|
62
|
+
item.css({
|
63
|
+
'transform-origin': 'top center',
|
64
|
+
"-webkit-transform": "translateY(30px)",
|
65
|
+
"-ms-transform": "translateY(30px)",
|
66
|
+
"transform": "translateY(30px)"
|
67
|
+
});
|
68
|
+
|
69
|
+
//~~ RESIZE
|
70
|
+
resize(item);
|
71
|
+
|
72
|
+
//~~ REFRESH EVENT
|
73
|
+
item.on('refresh',function(ev) {
|
74
|
+
if (_this.config.debug) console.log('*** REFRESH EVENT CONTENT - ITEM '+item.attr('id'));
|
75
|
+
loadContent(item).done(function(container) {
|
76
|
+
if (_this.config.debug) console.log('=== LOADED CONTENT - ITEM '+container.attr('id'));
|
77
|
+
});
|
78
|
+
});
|
79
|
+
|
80
|
+
//~~ APPEND TO CONTAINER
|
81
|
+
item.appendTo('#pagestack_container').show("scale",{}, 500);
|
82
|
+
|
83
|
+
//~~ LOAD CONTENT
|
84
|
+
loadContent(item).done(function(pagestack_item) {
|
85
|
+
//SUCCESS
|
86
|
+
}).fail(function(response) {
|
87
|
+
if (_this.config.debug) console.log(response);
|
88
|
+
});
|
89
|
+
|
90
|
+
//~~ REORDER (ANIMATE) CONTAINER ITEMS
|
91
|
+
reorder();
|
92
|
+
});
|
93
|
+
|
94
|
+
$(document).on('click','[data-dismiss="pagestack"]',function(ev){
|
95
|
+
ev.preventDefault();
|
96
|
+
_this.close(this);
|
97
|
+
});
|
98
|
+
|
99
|
+
$(document).keyup(function(e) {
|
100
|
+
if (e.which === 27) { //escape key maps to keycode `27`
|
101
|
+
var $item = $('.pagestack_item[data-pagestack-nivel='+count()+']');
|
102
|
+
if ($item.attr('data-pagestack-esc-close')==='true') {
|
103
|
+
_this.close($item);
|
104
|
+
}
|
105
|
+
}
|
106
|
+
});
|
107
|
+
|
108
|
+
$( window ).resize(function() {
|
109
|
+
//RESIZE CONTAINER
|
110
|
+
var wWidth = $(window).width();
|
111
|
+
var wHeight = $(window).height();
|
112
|
+
$('#pagestack_container').css({'width': wWidth+'px', 'height': wHeight+'px'});
|
113
|
+
//RESIZE PAGESTACK
|
114
|
+
resize($('#pagestack_container .pagestack_item'));
|
115
|
+
});
|
116
|
+
|
117
|
+
return this;
|
118
|
+
},
|
119
|
+
close: function(elem) {
|
120
|
+
var $item = _this.getItem(elem);
|
121
|
+
var nivel = $item.attr('data-pagestack-nivel');
|
122
|
+
var onclose = $item.attr('data-pagestack-refresh-parent-onclose');
|
123
|
+
$item.hide("scale",{percent: 0},300,function() {
|
124
|
+
$item.remove();
|
125
|
+
if (_this.config.loading) {loading($item, false);}
|
126
|
+
reorder();
|
127
|
+
if (count()==0) {
|
128
|
+
$('#pagestack_container').remove();
|
129
|
+
}
|
130
|
+
//VERIFICA SE PRECISA RECARREGAR A PÁGINA
|
131
|
+
if (onclose == 'true') {
|
132
|
+
if (nivel==1) {
|
133
|
+
if (_this.config.loading) {loading('body', true, true);}
|
134
|
+
window.location.reload(true);
|
135
|
+
} else {
|
136
|
+
$('.pagestack_item[data-pagestack-nivel="'+(nivel-1)+'"]').trigger('refresh');
|
137
|
+
}
|
138
|
+
}
|
139
|
+
});
|
140
|
+
},
|
141
|
+
getItem: function(elemento) {
|
142
|
+
return $(elemento).hasClass('pagestack_item') ? $(elemento) : $(elemento).parents('.pagestack_item:first');
|
143
|
+
}
|
144
|
+
};
|
145
|
+
|
146
|
+
//PRIVATE
|
147
|
+
function resize(elements){
|
148
|
+
var wWidth = $(window).width()-40;
|
149
|
+
var wHeight = $(window).height()-40;
|
150
|
+
$.each(elements, function(i, element){
|
151
|
+
$(element).css({
|
152
|
+
'margin-left': '20px',
|
153
|
+
'width': wWidth+'px',
|
154
|
+
'height': wHeight+'px'
|
155
|
+
});
|
156
|
+
});
|
157
|
+
}
|
158
|
+
|
159
|
+
function reorder() {
|
160
|
+
var totalItens = count();
|
161
|
+
for(var i=1; i <= totalItens; i++) {
|
162
|
+
var item = $('#pagestack-item-'+i);
|
163
|
+
var itemIndex = totalItens-i;
|
164
|
+
var newY = 30-(itemIndex*10);
|
165
|
+
var newScale = 1-(itemIndex*10/100);
|
166
|
+
var newOpacity = 1-(itemIndex*20/100);
|
167
|
+
item.css({
|
168
|
+
'transform-origin': 'top center',
|
169
|
+
"-webkit-transform": "translateY("+newY+"px) scale("+newScale+")",
|
170
|
+
"-ms-transform": "translateY("+newY+"px) scale("+newScale+")",
|
171
|
+
"transform": "translateY("+newY+"px) scale("+newScale+")",
|
172
|
+
"opacity": newOpacity
|
173
|
+
});
|
174
|
+
}
|
175
|
+
}
|
176
|
+
|
177
|
+
function count() {
|
178
|
+
return $('ul.pagestack_container li.pagestack_item').length;
|
179
|
+
}
|
180
|
+
|
181
|
+
function loadContent(item, _html) {
|
182
|
+
var dfd = jQuery.Deferred();
|
183
|
+
|
184
|
+
var content = item.find('.pagestack_content:first');
|
185
|
+
if (_this.config.loading) {loading(item);}
|
186
|
+
if (_html!==undefined) {
|
187
|
+
content.html(_html);
|
188
|
+
htmlCallbacks(content);
|
189
|
+
if (_this.config.loading){loading(item, false);}
|
190
|
+
dfd.resolve(item);
|
191
|
+
} else {
|
192
|
+
var loadLink = updateQueryStringParameter(decodeURIComponent(item.attr('data-pagestack-load-url')), 'pagestack', true);
|
193
|
+
content.load(loadLink, function(response, status, xhr){
|
194
|
+
if (status == "error") {
|
195
|
+
content.html(response);
|
196
|
+
dfd.reject(response);
|
197
|
+
}
|
198
|
+
htmlCallbacks(content);
|
199
|
+
if (_this.config.loading){loading(item, false);}
|
200
|
+
dfd.resolve(item);
|
201
|
+
});
|
202
|
+
}
|
203
|
+
return dfd.promise();
|
204
|
+
}
|
205
|
+
//
|
206
|
+
function htmlCallbacks(content) {
|
207
|
+
//FORMS
|
208
|
+
content.find(_this.config.form).each(function(i,form) {
|
209
|
+
var $form = $(form);
|
210
|
+
var container = _this.getItem(form);
|
211
|
+
if ($form.find('.pagestack_container_id').length==0) {
|
212
|
+
$form.attr('data-remote', true);
|
213
|
+
$form.attr('data-pagestack-replace-content', true);
|
214
|
+
$form.append('<input type="hidden" name="pagestack_container_id" value="'+container.attr('id')+'" />');
|
215
|
+
$form.attr('action', updateQueryStringParameter($form.attr('action'),'pagestack',true));
|
216
|
+
ajaxCallbacks($form);
|
217
|
+
}
|
218
|
+
});
|
219
|
+
//LINKS DELETE
|
220
|
+
content.find('[data-method="delete"]').each(function(i,element){
|
221
|
+
var $element = $(element);
|
222
|
+
if ($element.attr('href').indexOf('pagestack') < 0) {
|
223
|
+
$element.attr('data-remote', true);
|
224
|
+
$element.attr('href', updateQueryStringParameter($element.attr('href'),'pagestack',true));
|
225
|
+
ajaxCallbacks($element);
|
226
|
+
}
|
227
|
+
});
|
228
|
+
}
|
229
|
+
//
|
230
|
+
function ajaxCallbacks(element) {
|
231
|
+
element.bind("ajax:beforeSend", function(xhr, settings){
|
232
|
+
if (_this.config.loading) {loading(element)}
|
233
|
+
if (_this.config.debug) console.log('ajax:beforeSend', xhr, settings);
|
234
|
+
});
|
235
|
+
element.bind("ajax:error", function(xhr, status, error) {
|
236
|
+
if (_this.config.loading) {loading(element, false);}
|
237
|
+
// console.log('ajax:error', xhr, status, error);
|
238
|
+
});
|
239
|
+
element.bind("ajax:success", function(e, data, status, xhr) {
|
240
|
+
if (_this.config.debug) console.log('ajax:success', e, data, status, xhr);
|
241
|
+
var item = _this.getItem(element);
|
242
|
+
if (_this.config.loading) {loading(item, false);}
|
243
|
+
if (data !=='' && element.attr('data-pagestack-replace-content') == 'true') {
|
244
|
+
loadContent(item, data);
|
245
|
+
} else {
|
246
|
+
item.trigger('refresh');
|
247
|
+
}
|
248
|
+
});
|
249
|
+
element.bind("ajax:remotipartComplete", function(e, data){
|
250
|
+
if (_this.config.debug) {
|
251
|
+
console.log('carregando...');
|
252
|
+
console.log(e, data);
|
253
|
+
}
|
254
|
+
if (_this.config.loading) {loading(element, false);}
|
255
|
+
});
|
256
|
+
element.bind("ajax:complete", function(data, status, xhr) {
|
257
|
+
if (_this.config.debug) console.log('ajax:complete',xhr, status);
|
258
|
+
if ( !element.data('remotipartSubmitted') ) {
|
259
|
+
if (_this.config.loading) {loading(element, false)}
|
260
|
+
}
|
261
|
+
});
|
262
|
+
}
|
263
|
+
//
|
264
|
+
function updateQueryStringParameter(uri, key, value) {
|
265
|
+
var re = new RegExp("([?&])" + key + "=.*?(&|$)", "i");
|
266
|
+
var separator = uri.indexOf('?') !== -1 ? "&" : "?";
|
267
|
+
if (uri.match(re)) {
|
268
|
+
return uri.replace(re, '$1' + key + "=" + value + '$2');
|
269
|
+
}
|
270
|
+
else {
|
271
|
+
return uri + separator + key + "=" + value;
|
272
|
+
}
|
273
|
+
}
|
274
|
+
//
|
275
|
+
function loading(container, start_stop, fullscreen) {
|
276
|
+
var $container = $(container);
|
277
|
+
if (start_stop==undefined) start_stop=true;
|
278
|
+
if (fullscreen==undefined) fullscreen=false;
|
279
|
+
var $loading_icon = $container.find('.pagestack_loading_icon');
|
280
|
+
if ($loading_icon.length > 0) {
|
281
|
+
if (start_stop!==true) {
|
282
|
+
$loading_icon.remove();
|
283
|
+
$container.find('.pagestack_loading_overlay').remove();
|
284
|
+
}
|
285
|
+
} else {
|
286
|
+
$container.prepend('<div class="pagestack_loading_icon">Aguarde Carregando...…</div>');
|
287
|
+
if (fullscreen===true) {
|
288
|
+
$container.prepend('<div class="pagestack_loading_overlay"></div>');
|
289
|
+
$container.find('.pagestack_loading_icon').css({
|
290
|
+
top: ($container.height()/2)+'px'
|
291
|
+
});
|
292
|
+
}
|
293
|
+
}
|
294
|
+
}
|
295
|
+
|
296
|
+
PageStack.defaults = PageStack.prototype.defaults;
|
297
|
+
|
298
|
+
window.PageStack = PageStack;
|
299
|
+
})(window, jQuery);
|
@@ -0,0 +1,193 @@
|
|
1
|
+
/* COMPONENT */
|
2
|
+
#pagestack_container {
|
3
|
+
z-index: 99999;
|
4
|
+
position: fixed;
|
5
|
+
top: 0;
|
6
|
+
left: 0;
|
7
|
+
right: 0;
|
8
|
+
bottom: 0;
|
9
|
+
padding: 0;
|
10
|
+
background-color: rgba(0,0,0,0.2);
|
11
|
+
}
|
12
|
+
|
13
|
+
#pagestack_container .pagestack_item {
|
14
|
+
background: #fff;
|
15
|
+
height: 100%;
|
16
|
+
width: 100%;
|
17
|
+
border-radius: 4px;
|
18
|
+
overflow: hidden;
|
19
|
+
position: absolute;
|
20
|
+
/*opacity: 0;*/
|
21
|
+
display: -webkit-flex;
|
22
|
+
display: flex;
|
23
|
+
-webkit-flex-direction: column;
|
24
|
+
flex-direction: column;
|
25
|
+
/*-webkit-touch-callout: none;
|
26
|
+
-webkit-user-select: none;
|
27
|
+
-khtml-user-select: none;
|
28
|
+
-moz-user-select: none;
|
29
|
+
-ms-user-select: none;
|
30
|
+
user-select: none;*/
|
31
|
+
pointer-events: auto;
|
32
|
+
|
33
|
+
transition: transform 0.5s ease-in-out;
|
34
|
+
-webkit-transition: -webkit-transform 0.5s ease-in-out;
|
35
|
+
}
|
36
|
+
|
37
|
+
.pagestack_item .pagestack_header {
|
38
|
+
padding: 10px 15px;
|
39
|
+
border-bottom: 1px solid transparent;
|
40
|
+
border-top-right-radius: 3px;
|
41
|
+
border-top-left-radius: 3px;
|
42
|
+
color: #333333;
|
43
|
+
background-color: #f5f5f5;
|
44
|
+
border-color: #ddd;
|
45
|
+
}
|
46
|
+
.pagestack_item .pagestack_header .pagestack_close:before {
|
47
|
+
content: "\00d7";
|
48
|
+
color: #333;
|
49
|
+
font-weight: 300;
|
50
|
+
font-family: Arial, sans-serif;
|
51
|
+
}
|
52
|
+
|
53
|
+
.pagestack_item .pagestack_header .pagestack_close {
|
54
|
+
text-align: center;
|
55
|
+
width: 28px;
|
56
|
+
height: 28px;
|
57
|
+
border-radius: 4px;
|
58
|
+
text-decoration: none;
|
59
|
+
font-size: 20px;
|
60
|
+
float: right !important;
|
61
|
+
background-color: #ddd;
|
62
|
+
}
|
63
|
+
.pagestack_item .pagestack_header .pagestack_close:hover {
|
64
|
+
background-color: #bbb;
|
65
|
+
}
|
66
|
+
|
67
|
+
.pagestack_item .pagestack_header .pagestack_title {
|
68
|
+
margin-top: 0;
|
69
|
+
margin-bottom: 0;
|
70
|
+
font-size: 16px;
|
71
|
+
color: inherit;
|
72
|
+
float: left !important;
|
73
|
+
}
|
74
|
+
|
75
|
+
.pagestack_item .pagestack_content {
|
76
|
+
margin: 10px;
|
77
|
+
overflow: auto;
|
78
|
+
}
|
79
|
+
|
80
|
+
/* LOADING */
|
81
|
+
|
82
|
+
/* Overlay */
|
83
|
+
.pagestack_loading_overlay {
|
84
|
+
z-index: 99999;
|
85
|
+
position: fixed;
|
86
|
+
top: 0;
|
87
|
+
left: 0;
|
88
|
+
right: 0;
|
89
|
+
bottom: 0;
|
90
|
+
padding: 0;
|
91
|
+
background-color: rgba(0,0,0,0.2);
|
92
|
+
}
|
93
|
+
|
94
|
+
/* spinner */
|
95
|
+
.pagestack_loading_icon {
|
96
|
+
z-index: 10;
|
97
|
+
position: relative;
|
98
|
+
margin-left: 50%;
|
99
|
+
top: 50%;
|
100
|
+
}
|
101
|
+
|
102
|
+
/* :not(:required) fix para não carregar em IE9 e anteriores */
|
103
|
+
.pagestack_loading_icon:not(:required) {
|
104
|
+
/* ocultando texto */
|
105
|
+
font: 0/0 a;
|
106
|
+
color: transparent;
|
107
|
+
text-shadow: none;
|
108
|
+
background-color: transparent;
|
109
|
+
border: 0;
|
110
|
+
}
|
111
|
+
|
112
|
+
.pagestack_loading_icon:not(:required):after {
|
113
|
+
content: '';
|
114
|
+
display: block;
|
115
|
+
font-size: 10px;
|
116
|
+
width: 1em;
|
117
|
+
height: 1em;
|
118
|
+
margin-top: -0.5em;
|
119
|
+
-webkit-animation: pagestack_loading_spinner 1500ms infinite linear;
|
120
|
+
-moz-animation: pagestack_loading_spinner 1500ms infinite linear;
|
121
|
+
-ms-animation: pagestack_loading_spinner 1500ms infinite linear;
|
122
|
+
-o-animation: pagestack_loading_spinner 1500ms infinite linear;
|
123
|
+
animation: pagestack_loading_spinner 1500ms infinite linear;
|
124
|
+
border-radius: 0.5em;
|
125
|
+
-webkit-box-shadow: rgba(0, 0, 0, 0.75) 1.5em 0 0 0, rgba(0, 0, 0, 0.75) 1.1em 1.1em 0 0, rgba(0, 0, 0, 0.75) 0 1.5em 0 0, rgba(0, 0, 0, 0.75) -1.1em 1.1em 0 0, rgba(0, 0, 0, 0.5) -1.5em 0 0 0, rgba(0, 0, 0, 0.5) -1.1em -1.1em 0 0, rgba(0, 0, 0, 0.75) 0 -1.5em 0 0, rgba(0, 0, 0, 0.75) 1.1em -1.1em 0 0;
|
126
|
+
box-shadow: rgba(0, 0, 0, 0.75) 1.5em 0 0 0, rgba(0, 0, 0, 0.75) 1.1em 1.1em 0 0, rgba(0, 0, 0, 0.75) 0 1.5em 0 0, rgba(0, 0, 0, 0.75) -1.1em 1.1em 0 0, rgba(0, 0, 0, 0.75) -1.5em 0 0 0, rgba(0, 0, 0, 0.75) -1.1em -1.1em 0 0, rgba(0, 0, 0, 0.75) 0 -1.5em 0 0, rgba(0, 0, 0, 0.75) 1.1em -1.1em 0 0;
|
127
|
+
}
|
128
|
+
|
129
|
+
/* Loading Animation */
|
130
|
+
@-webkit-keyframes pagestack_loading_spinner {
|
131
|
+
0% {
|
132
|
+
-webkit-transform: rotate(0deg);
|
133
|
+
-moz-transform: rotate(0deg);
|
134
|
+
-ms-transform: rotate(0deg);
|
135
|
+
-o-transform: rotate(0deg);
|
136
|
+
transform: rotate(0deg);
|
137
|
+
}
|
138
|
+
100% {
|
139
|
+
-webkit-transform: rotate(360deg);
|
140
|
+
-moz-transform: rotate(360deg);
|
141
|
+
-ms-transform: rotate(360deg);
|
142
|
+
-o-transform: rotate(360deg);
|
143
|
+
transform: rotate(360deg);
|
144
|
+
}
|
145
|
+
}
|
146
|
+
@-moz-keyframes pagestack_loading_spinner {
|
147
|
+
0% {
|
148
|
+
-webkit-transform: rotate(0deg);
|
149
|
+
-moz-transform: rotate(0deg);
|
150
|
+
-ms-transform: rotate(0deg);
|
151
|
+
-o-transform: rotate(0deg);
|
152
|
+
transform: rotate(0deg);
|
153
|
+
}
|
154
|
+
100% {
|
155
|
+
-webkit-transform: rotate(360deg);
|
156
|
+
-moz-transform: rotate(360deg);
|
157
|
+
-ms-transform: rotate(360deg);
|
158
|
+
-o-transform: rotate(360deg);
|
159
|
+
transform: rotate(360deg);
|
160
|
+
}
|
161
|
+
}
|
162
|
+
@-o-keyframes pagestack_loading_spinner {
|
163
|
+
0% {
|
164
|
+
-webkit-transform: rotate(0deg);
|
165
|
+
-moz-transform: rotate(0deg);
|
166
|
+
-ms-transform: rotate(0deg);
|
167
|
+
-o-transform: rotate(0deg);
|
168
|
+
transform: rotate(0deg);
|
169
|
+
}
|
170
|
+
100% {
|
171
|
+
-webkit-transform: rotate(360deg);
|
172
|
+
-moz-transform: rotate(360deg);
|
173
|
+
-ms-transform: rotate(360deg);
|
174
|
+
-o-transform: rotate(360deg);
|
175
|
+
transform: rotate(360deg);
|
176
|
+
}
|
177
|
+
}
|
178
|
+
@keyframes pagestack_loading_spinner {
|
179
|
+
0% {
|
180
|
+
-webkit-transform: rotate(0deg);
|
181
|
+
-moz-transform: rotate(0deg);
|
182
|
+
-ms-transform: rotate(0deg);
|
183
|
+
-o-transform: rotate(0deg);
|
184
|
+
transform: rotate(0deg);
|
185
|
+
}
|
186
|
+
100% {
|
187
|
+
-webkit-transform: rotate(360deg);
|
188
|
+
-moz-transform: rotate(360deg);
|
189
|
+
-ms-transform: rotate(360deg);
|
190
|
+
-o-transform: rotate(360deg);
|
191
|
+
transform: rotate(360deg);
|
192
|
+
}
|
193
|
+
}
|