c80_wslider 0.1.0
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +7 -0
- data/.gitignore +11 -0
- data/CODE_OF_CONDUCT.md +49 -0
- data/Gemfile +4 -0
- data/LICENSE.txt +21 -0
- data/README.md +50 -0
- data/Rakefile +2 -0
- data/app/assets/javascripts/c80_wslider.js.coffee +2 -0
- data/app/assets/javascripts/components/pbuttons.js +52 -0
- data/app/assets/javascripts/components/wloader/preloader.js +57 -0
- data/app/assets/javascripts/components/wloader/shower.js +100 -0
- data/app/assets/javascripts/components/wloader.js +95 -0
- data/app/assets/javascripts/wslider.js +127 -0
- data/app/assets/stylesheets/c80_wslider/wslider/spinner.scss +119 -0
- data/app/assets/stylesheets/c80_wslider/wslider.scss +144 -0
- data/app/assets/stylesheets/c80_wslider.scss +1 -0
- data/app/helpers/c80_wslider/application_helper.rb +28 -0
- data/app/views/c80_wslider/_wslider_wrapper.html.erb +52 -0
- data/bin/console +14 -0
- data/bin/setup +8 -0
- data/c80_wslider.gemspec +26 -0
- data/lib/c80_wslider/engine.rb +23 -0
- data/lib/c80_wslider/version.rb +3 -0
- data/lib/c80_wslider.rb +8 -0
- metadata +109 -0
checksums.yaml
ADDED
@@ -0,0 +1,7 @@
|
|
1
|
+
---
|
2
|
+
SHA1:
|
3
|
+
metadata.gz: 5a881c9ec524f5eb3125b5e3a647007f0aa43a71
|
4
|
+
data.tar.gz: 02f8989b104fbee6191bc22a8fb9609711134158
|
5
|
+
SHA512:
|
6
|
+
metadata.gz: f2dedb120cffe763fddfb410bf75db465da7bc71502015e875f14ae8323825a2209a66920ae8a4c6b72d312bb0ba91103d98d507afecb365d8a97c2d8ff127f8
|
7
|
+
data.tar.gz: 0c488676d45c24a46a9b71c8f7614b5fcc4f9ebac30b5e707ffe6abb480c026c068ec53f6bc40f182524dabc650b533f72fdeeaac8f948d0736e1fddf91e9ff4
|
data/.gitignore
ADDED
data/CODE_OF_CONDUCT.md
ADDED
@@ -0,0 +1,49 @@
|
|
1
|
+
# Contributor Code of Conduct
|
2
|
+
|
3
|
+
As contributors and maintainers of this project, and in the interest of
|
4
|
+
fostering an open and welcoming community, we pledge to respect all people who
|
5
|
+
contribute through reporting issues, posting feature requests, updating
|
6
|
+
documentation, submitting pull requests or patches, and other activities.
|
7
|
+
|
8
|
+
We are committed to making participation in this project a harassment-free
|
9
|
+
experience for everyone, regardless of level of experience, gender, gender
|
10
|
+
identity and expression, sexual orientation, disability, personal appearance,
|
11
|
+
body size, race, ethnicity, age, religion, or nationality.
|
12
|
+
|
13
|
+
Examples of unacceptable behavior by participants include:
|
14
|
+
|
15
|
+
* The use of sexualized language or imagery
|
16
|
+
* Personal attacks
|
17
|
+
* Trolling or insulting/derogatory comments
|
18
|
+
* Public or private harassment
|
19
|
+
* Publishing other's private information, such as physical or electronic
|
20
|
+
addresses, without explicit permission
|
21
|
+
* Other unethical or unprofessional conduct
|
22
|
+
|
23
|
+
Project maintainers have the right and responsibility to remove, edit, or
|
24
|
+
reject comments, commits, code, wiki edits, issues, and other contributions
|
25
|
+
that are not aligned to this Code of Conduct, or to ban temporarily or
|
26
|
+
permanently any contributor for other behaviors that they deem inappropriate,
|
27
|
+
threatening, offensive, or harmful.
|
28
|
+
|
29
|
+
By adopting this Code of Conduct, project maintainers commit themselves to
|
30
|
+
fairly and consistently applying these principles to every aspect of managing
|
31
|
+
this project. Project maintainers who do not follow or enforce the Code of
|
32
|
+
Conduct may be permanently removed from the project team.
|
33
|
+
|
34
|
+
This code of conduct applies both within project spaces and in public spaces
|
35
|
+
when an individual is representing the project or its community.
|
36
|
+
|
37
|
+
Instances of abusive, harassing, or otherwise unacceptable behavior may be
|
38
|
+
reported by contacting a project maintainer at c080609a@gmail.com. All
|
39
|
+
complaints will be reviewed and investigated and will result in a response that
|
40
|
+
is deemed necessary and appropriate to the circumstances. Maintainers are
|
41
|
+
obligated to maintain confidentiality with regard to the reporter of an
|
42
|
+
incident.
|
43
|
+
|
44
|
+
This Code of Conduct is adapted from the [Contributor Covenant][homepage],
|
45
|
+
version 1.3.0, available at
|
46
|
+
[http://contributor-covenant.org/version/1/3/0/][version]
|
47
|
+
|
48
|
+
[homepage]: http://contributor-covenant.org
|
49
|
+
[version]: http://contributor-covenant.org/version/1/3/0/
|
data/Gemfile
ADDED
data/LICENSE.txt
ADDED
@@ -0,0 +1,21 @@
|
|
1
|
+
The MIT License (MIT)
|
2
|
+
|
3
|
+
Copyright (c) 2016 C80609A
|
4
|
+
|
5
|
+
Permission is hereby granted, free of charge, to any person obtaining a copy
|
6
|
+
of this software and associated documentation files (the "Software"), to deal
|
7
|
+
in the Software without restriction, including without limitation the rights
|
8
|
+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
9
|
+
copies of the Software, and to permit persons to whom the Software is
|
10
|
+
furnished to do so, subject to the following conditions:
|
11
|
+
|
12
|
+
The above copyright notice and this permission notice shall be included in
|
13
|
+
all copies or substantial portions of the Software.
|
14
|
+
|
15
|
+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
16
|
+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
17
|
+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
18
|
+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
19
|
+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
20
|
+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
|
21
|
+
THE SOFTWARE.
|
data/README.md
ADDED
@@ -0,0 +1,50 @@
|
|
1
|
+
# C80Wslider
|
2
|
+
|
3
|
+
Welcome to your new gem! In this directory, you'll find the files you need to be able to package up your Ruby library into a gem. Put your Ruby code in the file `lib/c80_wslider`. To experiment with that code, run `bin/console` for an interactive prompt.
|
4
|
+
|
5
|
+
TODO: Delete this and the text above, and describe your gem
|
6
|
+
|
7
|
+
## Installation
|
8
|
+
|
9
|
+
Add this line to your application's Gemfile:
|
10
|
+
|
11
|
+
```ruby
|
12
|
+
gem 'c80_wslider'
|
13
|
+
```
|
14
|
+
|
15
|
+
And then execute:
|
16
|
+
|
17
|
+
$ bundle
|
18
|
+
|
19
|
+
Or install it yourself as:
|
20
|
+
|
21
|
+
$ gem install c80_wslider
|
22
|
+
|
23
|
+
## Usage
|
24
|
+
|
25
|
+
Host app:
|
26
|
+
|
27
|
+
# application.scss:
|
28
|
+
@import "c80_wslider";
|
29
|
+
|
30
|
+
# application.js.coffee:
|
31
|
+
#= require c80_wslider
|
32
|
+
|
33
|
+
# ApplicationController:
|
34
|
+
helper C80Wslider::Engine.helpers
|
35
|
+
|
36
|
+
## Development
|
37
|
+
|
38
|
+
After checking out the repo, run `bin/setup` to install dependencies. You can also run `bin/console` for an interactive prompt that will allow you to experiment.
|
39
|
+
|
40
|
+
To install this gem onto your local machine, run `bundle exec rake install`. To release a new version, update the version number in `version.rb`, and then run `bundle exec rake release`, which will create a git tag for the version, push git commits and tags, and push the `.gem` file to [rubygems.org](https://rubygems.org).
|
41
|
+
|
42
|
+
## Contributing
|
43
|
+
|
44
|
+
Bug reports and pull requests are welcome on GitHub at https://github.com/[USERNAME]/c80_wslider. This project is intended to be a safe, welcoming space for collaboration, and contributors are expected to adhere to the [Contributor Covenant](http://contributor-covenant.org) code of conduct.
|
45
|
+
|
46
|
+
|
47
|
+
## License
|
48
|
+
|
49
|
+
The gem is available as open source under the terms of the [MIT License](http://opensource.org/licenses/MIT).
|
50
|
+
|
data/Rakefile
ADDED
@@ -0,0 +1,52 @@
|
|
1
|
+
"use strict";
|
2
|
+
|
3
|
+
// slider_height - высота слайдера. Подаётся для того, чтобы позиционировать div с кнопками по центру по вертикали
|
4
|
+
var PButtons = function ($div_pbuttons, slider_height, fOnClick) {
|
5
|
+
|
6
|
+
// ссылка на функцию, которая вызовется, когда пользователь кликнет по кнопке
|
7
|
+
var _fOnClick = fOnClick;
|
8
|
+
|
9
|
+
// в этом диве живут кнопки
|
10
|
+
var _div_buttons = null;
|
11
|
+
|
12
|
+
// высота слайдера. Нужна для того, чтобы позиционировать _div_buttons по центру по вертикали
|
13
|
+
var _slider_height;
|
14
|
+
|
15
|
+
// две кнопки перемотки
|
16
|
+
var button_prev;
|
17
|
+
var button_next;
|
18
|
+
|
19
|
+
// инициализация
|
20
|
+
var _fInit = function ($div_pbuttons, slider_height) {
|
21
|
+
|
22
|
+
_div_buttons = $div_pbuttons;
|
23
|
+
_slider_height = slider_height;
|
24
|
+
|
25
|
+
// разместим _div_buttons по центру по вертикали
|
26
|
+
var top = (_slider_height - _div_buttons.height()) / 2;
|
27
|
+
$div_pbuttons.css('top', top + 'px');
|
28
|
+
|
29
|
+
// зафиксируем кнопки
|
30
|
+
button_prev = _div_buttons.find('.prev a');
|
31
|
+
button_next = _div_buttons.find('.next a');
|
32
|
+
|
33
|
+
// слушаем клики
|
34
|
+
button_prev.on('click', _fOnButtonClick);
|
35
|
+
button_next.on('click', _fOnButtonClick);
|
36
|
+
};
|
37
|
+
|
38
|
+
// слушаем клики
|
39
|
+
var _fOnButtonClick = function () {
|
40
|
+
//console.log($(this).attr('class')); => prev или next
|
41
|
+
|
42
|
+
// определяем кнопку, по которой кликнули
|
43
|
+
var clicked_button = $(this).attr('class');
|
44
|
+
|
45
|
+
// отправляем её имя в функцию уровнем выше
|
46
|
+
_fOnClick(clicked_button);
|
47
|
+
|
48
|
+
};
|
49
|
+
|
50
|
+
_fInit($div_pbuttons, slider_height);
|
51
|
+
|
52
|
+
};
|
@@ -0,0 +1,57 @@
|
|
1
|
+
"use strict";
|
2
|
+
|
3
|
+
// Анимированная индикация загрузки картинки
|
4
|
+
|
5
|
+
var Preloader = function ($slider_wrapper, slider_height) {
|
6
|
+
|
7
|
+
// див, в котором живёт анимация загрузки (view)
|
8
|
+
var _$preloader;
|
9
|
+
|
10
|
+
// анимация загрузки
|
11
|
+
var _$spinner;
|
12
|
+
|
13
|
+
//slider_height передаётся для того, чтобы можно было сделать прелоадер высотой равной высоте слайдера
|
14
|
+
var _slider_height = slider_height;
|
15
|
+
|
16
|
+
// инициализация
|
17
|
+
var _fInit = function ($slider_wrapper) {
|
18
|
+
|
19
|
+
// фиксируем view
|
20
|
+
_$preloader = $slider_wrapper.find('.preloader');
|
21
|
+
|
22
|
+
// фиксируем анимацию загрузки
|
23
|
+
_$spinner = _$preloader.find('.spinner');
|
24
|
+
|
25
|
+
// корректируем высоту области прелоадера
|
26
|
+
_$preloader.css('height', _slider_height+'px');
|
27
|
+
|
28
|
+
// корректируем положение по вертикали блока spinner
|
29
|
+
var t = (_slider_height - _$spinner.height())/2;
|
30
|
+
_$spinner.css('top', t);
|
31
|
+
|
32
|
+
};
|
33
|
+
|
34
|
+
// показать анимацию загрузки
|
35
|
+
this.show = function () {
|
36
|
+
console.log('<preloader.show>\t Покажем прелоадер.');
|
37
|
+
_$preloader.css('display','block');
|
38
|
+
_$preloader.css('opacity','1');
|
39
|
+
};
|
40
|
+
|
41
|
+
// скрыть анимацию загрузки
|
42
|
+
this.hide = function () {
|
43
|
+
console.log('<preloader.hide>\t Спрячем прелоадер.');
|
44
|
+
|
45
|
+
_$preloader.css('opacity','0');
|
46
|
+
|
47
|
+
// NOTE:: по хардкоду подогнали время под длительность анимации, заданной в scss
|
48
|
+
setTimeout(function () {
|
49
|
+
_$preloader.css('display','none');
|
50
|
+
},400);
|
51
|
+
|
52
|
+
};
|
53
|
+
|
54
|
+
// поехали
|
55
|
+
_fInit($slider_wrapper);
|
56
|
+
|
57
|
+
};
|
@@ -0,0 +1,100 @@
|
|
1
|
+
|
2
|
+
// slider_height передаётся для того, чтобы можно было позиционировать текстовый блок по вертикали
|
3
|
+
var Shower = function ($wimages, slider_height) {
|
4
|
+
|
5
|
+
// ссылка на дивы, в которых отрисовываются картинки
|
6
|
+
// изначально оба дива приходят "чистыми"
|
7
|
+
// В таком случае: берём первый попавшийся див , помещаем в него картинку, делаем его "показанным сейчас"
|
8
|
+
var _$wimages = $wimages;
|
9
|
+
|
10
|
+
// после первого вызова show(), когда дивы перестают быть "чистыми", эта переменная сбросится в false
|
11
|
+
// нужна для того, чтобы при первом вызове взять первый попавшийся див и сделать его "показанным сейчас"
|
12
|
+
var _mark_first_call = true;
|
13
|
+
|
14
|
+
//slider_height передаётся для того, чтобы можно было позиционировать текстовый блок по вертикали
|
15
|
+
var _slider_height = slider_height;
|
16
|
+
|
17
|
+
// низкоуровневый механизм показа картинки с подписями (вызывается только из this.show)
|
18
|
+
var _fShow = function ($div, url, props) {
|
19
|
+
console.log("<shower._fShow>\t div class:" + $div.attr('class') + ", url: " + url);
|
20
|
+
|
21
|
+
// убираем плавность, возвращаем в начальное состояние
|
22
|
+
$div.removeClass('eased').css('opacity','0');
|
23
|
+
|
24
|
+
// помещаем в него картинку
|
25
|
+
$div.css('background-image', 'url('+url+')');
|
26
|
+
|
27
|
+
// находим блок с текстом, фиксируем h4 и p
|
28
|
+
var $div_text = $div.find('.frame_text');
|
29
|
+
var $h4 = $div_text.find('h4');
|
30
|
+
var $p = $div_text.find('p');
|
31
|
+
|
32
|
+
// подставляем туда текст из props
|
33
|
+
$h4.text(props['h4']);
|
34
|
+
$p.text(props['p']);
|
35
|
+
|
36
|
+
// позиционируем блок с текстом по вертикали по центру
|
37
|
+
var top = (_slider_height - $div_text.height()) / 2;
|
38
|
+
$div_text.css('top', top + 'px');
|
39
|
+
|
40
|
+
// плавно проявляем фрейм
|
41
|
+
$div.addClass('eased').css('opacity','1');
|
42
|
+
|
43
|
+
// помечаем его как "показанный сейчас"
|
44
|
+
$div.addClass('shown_right_now');
|
45
|
+
|
46
|
+
};
|
47
|
+
|
48
|
+
// низкоуровневый механизм плавного сокрытия картинки (вызывается только из this.hide)
|
49
|
+
var _fHide = function ($div) {
|
50
|
+
console.log("<shower._fHide>\t div class: " + $div.attr('class'));
|
51
|
+
|
52
|
+
// плавно скрываем фрейм
|
53
|
+
$div.css('opacity', '0');
|
54
|
+
|
55
|
+
// удаляем пометку "показанный сейчас" у фрейма
|
56
|
+
$div.removeClass('shown_right_now');
|
57
|
+
|
58
|
+
};
|
59
|
+
|
60
|
+
// плавно показать картинку url
|
61
|
+
// Этот метод зафиксирован в маршруте "Показать Картинку"
|
62
|
+
// диаграммы d:\Distrs\drakon\drakon_editor1.27\work\vapehub\slider.drn
|
63
|
+
this.show = function (url, props) {
|
64
|
+
|
65
|
+
// если это первый вызов show() - сбрасываем переменную _mark_first_call, берем первый див и делаем его "показанным сейчас"
|
66
|
+
if (_mark_first_call) {
|
67
|
+
console.log("<shower.show>\t Первый вызов.");
|
68
|
+
|
69
|
+
_mark_first_call = false;
|
70
|
+
|
71
|
+
// фиксируем first image
|
72
|
+
var $fi = $(_$wimages[0]);
|
73
|
+
|
74
|
+
// покажем картинку с подписями
|
75
|
+
_fShow($fi, url, props);
|
76
|
+
|
77
|
+
}
|
78
|
+
|
79
|
+
// если это не первый вызов show() - значит какой-то фрейм уже показан
|
80
|
+
//
|
81
|
+
else {
|
82
|
+
console.log("<shower.show>\t НЕ-первый вызов.");
|
83
|
+
|
84
|
+
// фиксируем показанный фрейм (shown image)
|
85
|
+
var $si = _$wimages.filter('.shown_right_now');
|
86
|
+
|
87
|
+
// фиксируем спрятанный фрейм (hidden image)
|
88
|
+
var $hi = _$wimages.not('.shown_right_now');
|
89
|
+
|
90
|
+
// прячем показанный фрейм
|
91
|
+
_fHide($si);
|
92
|
+
|
93
|
+
// показываем спрятанный фрейм
|
94
|
+
_fShow($hi, url, props);
|
95
|
+
|
96
|
+
}
|
97
|
+
|
98
|
+
}
|
99
|
+
|
100
|
+
};
|
@@ -0,0 +1,95 @@
|
|
1
|
+
// грузит картинки в "невидимом", фоновом режиме, показывает их
|
2
|
+
// другими словами: содержит механику загрузки и показа картинок
|
3
|
+
|
4
|
+
var Wloader = function (images, frames_props, $wimages, slider_height, $slider_wrapper) {
|
5
|
+
|
6
|
+
// ссылка на враппер вокруг всего слайдера (подаётся для того, чтобы можно было прицепить прелоадер)
|
7
|
+
var _$slider_wrapper = $slider_wrapper;
|
8
|
+
|
9
|
+
// механику показа картинки фрейма содержит этот вспомогательный класс
|
10
|
+
var _shower = new Shower($wimages, slider_height);
|
11
|
+
|
12
|
+
// images - ссылка на полный список урлов картинок для загрузки и отображения
|
13
|
+
var _images = images;
|
14
|
+
|
15
|
+
// здесь содержится список описаний каждой картинки: h4 - крупный текст и p - мелкий
|
16
|
+
var _frames_props = frames_props;
|
17
|
+
|
18
|
+
// собственно, с помощью этого грузим
|
19
|
+
var _loader = null;
|
20
|
+
var _$loader = null;
|
21
|
+
|
22
|
+
// индикатор загрузки
|
23
|
+
var _preloader = new Preloader(_$slider_wrapper, slider_height);
|
24
|
+
|
25
|
+
// либо покажем картинку, либо сначала загрузим, затем покажем картинку
|
26
|
+
this.checkAndShowFrame = function (frame_index) {
|
27
|
+
console.log('<wloader.checkAndShowFrame>\t Покажем картинку с проверкой: frame_index = ' + frame_index);
|
28
|
+
|
29
|
+
// предварительно создадим то, с помощью чего будем непосредственно грузить
|
30
|
+
_loader = new Image();
|
31
|
+
_$loader = $(_loader);
|
32
|
+
|
33
|
+
// фиксируем урл текущей картинки
|
34
|
+
var u = _images[frame_index];
|
35
|
+
|
36
|
+
// фиксируем свойства картинки (подпись)
|
37
|
+
var pr = _frames_props[frame_index];
|
38
|
+
|
39
|
+
// инициация внутреннего механизма загрузки картинки (из кэша или из сети)
|
40
|
+
_$loader.attr({ src:u });
|
41
|
+
|
42
|
+
// если картинка уже есть в кэше - просто покажем её
|
43
|
+
if (_loader.complete || _loader.readyState === 4) {
|
44
|
+
__fShowFrame(u,pr);
|
45
|
+
}
|
46
|
+
|
47
|
+
// если картинки нет в кэше - запросим её с сервера
|
48
|
+
else {
|
49
|
+
__fLoadFrame(u, __fShowFrame,pr);
|
50
|
+
}
|
51
|
+
|
52
|
+
};
|
53
|
+
|
54
|
+
// вызывается только из _fCheckAndShowFrame
|
55
|
+
// отобразить картинку фрейма url со свойствами props
|
56
|
+
var __fShowFrame = function (url, props) {
|
57
|
+
console.log("<wloader.__fShowFrame>\t Отображем картинку фрейма: url = " + url);
|
58
|
+
_shower.show(url, props);
|
59
|
+
};
|
60
|
+
|
61
|
+
// вызывается только из _fCheckAndShowFrame
|
62
|
+
// загрузить картинку фрейма
|
63
|
+
// будет показан прелоадер
|
64
|
+
// fCallBack - вызовется в конце успешной загрузки (скорее всего - это __fShowFrame)
|
65
|
+
// fCallBackParameter - можно передать один параметр, который дополнительно отдастся fCallBack (скорее всего это pr)
|
66
|
+
var __fLoadFrame = function (url, fCallBack, fCallBackParameter) {
|
67
|
+
console.log("<wloader.__fLoadFrame>\t ГРУЗИМ картинку фрейма: url = " + url);
|
68
|
+
|
69
|
+
// покажем прелоадер
|
70
|
+
_preloader.show();
|
71
|
+
|
72
|
+
// загрузим
|
73
|
+
_$loader.load(function (responce, status, xhr) {
|
74
|
+
|
75
|
+
// картинку загрузить не получилось
|
76
|
+
if (status == 'error') {
|
77
|
+
|
78
|
+
}
|
79
|
+
|
80
|
+
// картинка успешно загружена
|
81
|
+
else {
|
82
|
+
|
83
|
+
// прячем прелоадер
|
84
|
+
_preloader.hide();
|
85
|
+
|
86
|
+
console.log("<wloader.__fLoadFrame>\t Загрузили картинку, url: " + url);
|
87
|
+
|
88
|
+
fCallBack(url,fCallBackParameter);
|
89
|
+
|
90
|
+
}
|
91
|
+
});
|
92
|
+
|
93
|
+
};
|
94
|
+
|
95
|
+
};
|
@@ -0,0 +1,127 @@
|
|
1
|
+
'use strict';
|
2
|
+
|
3
|
+
// 01. позволяет создавать слайдеры, главной особенностью которых является картинка фрейма, которая
|
4
|
+
// отображается с помощью css свойства background-image и с применением background-size: cover
|
5
|
+
|
6
|
+
// 02. Чтобы код применился
|
7
|
+
|
8
|
+
var Wslider = function (options) {
|
9
|
+
|
10
|
+
// добавлена для того, чтобы передавать ссылку на wslider находясь внутри вложенных функций
|
11
|
+
var _this = this;
|
12
|
+
|
13
|
+
// по этим параметрам отрисован слайдер
|
14
|
+
var _options = {
|
15
|
+
parent_node: 'body',
|
16
|
+
height: 100
|
17
|
+
};
|
18
|
+
|
19
|
+
// здесь содержится список урлов картинок, которые надо отобразить в слайдере
|
20
|
+
var _images = null;
|
21
|
+
|
22
|
+
// здесь содержится список описаний каждой картинки: h4 - крупный текст и p - мелкий
|
23
|
+
var _frames_props = null;
|
24
|
+
|
25
|
+
// указатель на текущий фрейм
|
26
|
+
var _current_frame = 0;
|
27
|
+
|
28
|
+
// контейнер, в который упакован слайдер
|
29
|
+
var _$wrapper = null;
|
30
|
+
|
31
|
+
// 2 дива, в которых отрисовываются картинки
|
32
|
+
var _$wimages = null;
|
33
|
+
|
34
|
+
// в ответе за загрузку и показ картинок фрейма
|
35
|
+
// во время загрузки покажет прелодаер
|
36
|
+
var _wloader = null;
|
37
|
+
|
38
|
+
// код кнопок next\prev сконцентрирован тут
|
39
|
+
var _buttons = null;
|
40
|
+
|
41
|
+
//------------------------------------------------------------------------------------------------------------------
|
42
|
+
|
43
|
+
// инициализация
|
44
|
+
var _fInit = function (options) {
|
45
|
+
|
46
|
+
// акуализируем параметры слайдера
|
47
|
+
_options = $.extend(_options, options);
|
48
|
+
|
49
|
+
// зафиксируем контейнер и див с картинкой
|
50
|
+
_$wrapper = $(_options.parent_node).find('.wslider_wrapper');
|
51
|
+
_$wimages = _$wrapper.find('div.wimage');
|
52
|
+
//console.log(_$wimages);
|
53
|
+
|
54
|
+
// зафиксируем список картинок для отображения
|
55
|
+
_images = _$wrapper.data('images');
|
56
|
+
|
57
|
+
// зафиксируем массив свойств картинок (текстовые подписи фреймов), разложенные в том же порядке что и _images
|
58
|
+
_frames_props = _$wrapper.data('props');
|
59
|
+
|
60
|
+
// зададим высоту картинок
|
61
|
+
_$wimages.css('height', _$wrapper.data('height') + "px");
|
62
|
+
|
63
|
+
// инициализация механизма загрузки и показа картинок
|
64
|
+
_wloader = new Wloader(
|
65
|
+
_images,
|
66
|
+
_frames_props,
|
67
|
+
_$wimages,
|
68
|
+
_$wrapper.data('height'),
|
69
|
+
_$wrapper
|
70
|
+
);
|
71
|
+
|
72
|
+
// инициализация кнопок next\prev
|
73
|
+
_buttons = new PButtons(
|
74
|
+
_$wrapper.find('div.pbuttons'),
|
75
|
+
_$wrapper.data('height'),
|
76
|
+
_onPbuttonClick
|
77
|
+
);
|
78
|
+
|
79
|
+
};
|
80
|
+
|
81
|
+
// запускаем приложение
|
82
|
+
var _fStart = function () {
|
83
|
+
_wloader.checkAndShowFrame(_current_frame);
|
84
|
+
};
|
85
|
+
|
86
|
+
//--[ контроллер: слушает клики, меняет переменную _current_frame ]-------------------------------------------------
|
87
|
+
|
88
|
+
var _onPbuttonClick = function (clickd_button) {
|
89
|
+
console.log("<wslider._onPbuttonClick>\t Нажали кнопку перемотки: clickd_button = " + clickd_button); // => prev или next
|
90
|
+
|
91
|
+
switch (clickd_button) {
|
92
|
+
|
93
|
+
case 'prev':
|
94
|
+
_fPrevFrame();
|
95
|
+
break;
|
96
|
+
|
97
|
+
case 'next':
|
98
|
+
_fNextFrame();
|
99
|
+
break;
|
100
|
+
|
101
|
+
}
|
102
|
+
};
|
103
|
+
|
104
|
+
var _fNextFrame = function () {
|
105
|
+
_current_frame += 1;
|
106
|
+
if (_current_frame >= _images.length) {
|
107
|
+
_current_frame = 0;
|
108
|
+
}
|
109
|
+
//console.log("<wslider._fNextFrame> _current_frame = " + _current_frame);
|
110
|
+
_wloader.checkAndShowFrame(_current_frame);
|
111
|
+
};
|
112
|
+
|
113
|
+
var _fPrevFrame = function () {
|
114
|
+
_current_frame -= 1;
|
115
|
+
if (_current_frame < 0) {
|
116
|
+
_current_frame = _images.length-1;
|
117
|
+
}
|
118
|
+
//console.log("<wslider._fPrevFrame> _current_frame = " + _current_frame);
|
119
|
+
_wloader.checkAndShowFrame(_current_frame);
|
120
|
+
};
|
121
|
+
|
122
|
+
//------------------------------------------------------------------------------------------------------------------
|
123
|
+
|
124
|
+
_fInit(options);
|
125
|
+
_fStart();
|
126
|
+
|
127
|
+
};
|
@@ -0,0 +1,119 @@
|
|
1
|
+
/* spinner indicator */
|
2
|
+
.spinner {
|
3
|
+
position: relative;
|
4
|
+
width: 72px; /* diameter */
|
5
|
+
height: 72px; /* diameter */
|
6
|
+
}
|
7
|
+
.outer, .inner, .spinner:after {
|
8
|
+
position: absolute;
|
9
|
+
left: 0;
|
10
|
+
top: 0;
|
11
|
+
right: 0;
|
12
|
+
bottom: 0;
|
13
|
+
}
|
14
|
+
/* Mask */
|
15
|
+
.spinner:after {
|
16
|
+
content:" ";
|
17
|
+
margin: 10%; /* stroke width */
|
18
|
+
border-radius: 100%;
|
19
|
+
background: #393A3D; /* container background */
|
20
|
+
}
|
21
|
+
/* Spinning gradients */
|
22
|
+
.outer, .inner {
|
23
|
+
animation-duration: 5s; /* speed */
|
24
|
+
-webkit-animation-duration: 5s; /* speed */
|
25
|
+
animation-iteration-count: infinite;
|
26
|
+
-webkit-animation-iteration-count: infinite;
|
27
|
+
animation-timing-function: linear;
|
28
|
+
-webkit-animation-timing-function: linear;
|
29
|
+
}
|
30
|
+
.outer {
|
31
|
+
animation-name: rotate-outer;
|
32
|
+
-webkit-animation-name: rotate-outer;
|
33
|
+
}
|
34
|
+
.inner {
|
35
|
+
animation-name: rotate-inner;
|
36
|
+
-webkit-animation-name: rotate-inner;
|
37
|
+
}
|
38
|
+
/* Halfs */
|
39
|
+
.outer:before, .inner:before, .outer:after, .inner:after {
|
40
|
+
position: absolute;
|
41
|
+
top: 0;
|
42
|
+
bottom: 0;
|
43
|
+
content:" ";
|
44
|
+
}
|
45
|
+
/* Left half */
|
46
|
+
.outer:before, .inner:before {
|
47
|
+
left: 0;
|
48
|
+
right: 50%;
|
49
|
+
border-radius: 72px 0 0 72px; /* diameter */
|
50
|
+
}
|
51
|
+
/* Right half */
|
52
|
+
.outer:after, .inner:after {
|
53
|
+
left: 50%;
|
54
|
+
right: 0;
|
55
|
+
border-radius: 0 72px 72px 0; /* diameter */
|
56
|
+
}
|
57
|
+
/* Half gradients */
|
58
|
+
.outer:before {
|
59
|
+
background-image: -webkit-linear-gradient(top, hsla(0, 0%, 100%, 0.0), hsla(0, 0%, 100%, 0.6));
|
60
|
+
background-image: -moz-linear-gradient(top, hsla(0, 0%, 100%, 0.0), hsla(0, 0%, 100%, 0.6));
|
61
|
+
background-image: linear-gradient(to bottom, hsla(0, 0%, 100%, 0.0), hsla(0, 0%, 100%, 0.6));
|
62
|
+
}
|
63
|
+
.outer:after {
|
64
|
+
background-image: -webkit-linear-gradient(top, hsla(0, 0%, 100%, 1.0), hsla(0, 0%, 100%, 0.4));
|
65
|
+
background-image: -moz-linear-gradient(top, hsla(0, 0%, 100%, 1.0), hsla(0, 0%, 100%, 0.4));
|
66
|
+
background-image: linear-gradient(to bottom, hsla(0, 0%, 100%, 1.0), hsla(0, 0%, 100%, 0.4));
|
67
|
+
}
|
68
|
+
.inner:before {
|
69
|
+
background-image: -webkit-linear-gradient(top, hsla(0, 0%, 100%, 0.6), hsla(0, 0%, 75%, 0.6));
|
70
|
+
background-image: -moz-linear-gradient(top, hsla(0, 0%, 100%, 0.6), hsla(0, 0%, 75%, 0.6));
|
71
|
+
background-image: linear-gradient(to bottom, hsla(0, 0%, 100%, 0.6), hsla(0, 0%, 75%, 0.6));
|
72
|
+
}
|
73
|
+
.inner:after {
|
74
|
+
background-image: -webkit-linear-gradient(top, hsla(0, 0%, 50%, 0.6), hsla(0, 0%, 75%, 0.6));
|
75
|
+
background-image: -moz-linear-gradient(top, hsla(0, 0%, 50%, 0.6), hsla(0, 0%, 75%, 0.6));
|
76
|
+
background-image: linear-gradient(to bottom, hsla(0, 0%, 50%, 0.6), hsla(0, 0%, 75%, 0.6));
|
77
|
+
}
|
78
|
+
|
79
|
+
/* Spinning animations */
|
80
|
+
@keyframes rotate-outer {
|
81
|
+
0% {
|
82
|
+
transform: rotate(0deg);
|
83
|
+
-moz-transform: rotate(0deg);
|
84
|
+
-webkit-transform: rotate(0deg);
|
85
|
+
}
|
86
|
+
100% {
|
87
|
+
transform: rotate(1080deg);
|
88
|
+
-moz-transform: rotate(1080deg);
|
89
|
+
-webkit-transform: rotate(1080deg);
|
90
|
+
}
|
91
|
+
}
|
92
|
+
@-webkit-keyframes rotate-outer {
|
93
|
+
0% {
|
94
|
+
-webkit-transform: rotate(0deg);
|
95
|
+
}
|
96
|
+
100% {
|
97
|
+
-webkit-transform: rotate(1080deg);
|
98
|
+
}
|
99
|
+
}
|
100
|
+
@keyframes rotate-inner {
|
101
|
+
0% {
|
102
|
+
transform: rotate(720deg);
|
103
|
+
-moz-transform: rotate(720deg);
|
104
|
+
-webkit-transform: rotate(720deg);
|
105
|
+
}
|
106
|
+
100% {
|
107
|
+
transform: rotate(0deg);
|
108
|
+
-moz-transform: rotate(0deg);
|
109
|
+
-webkit-transform: rotate(0deg);
|
110
|
+
}
|
111
|
+
}
|
112
|
+
@-webkit-keyframes rotate-inner {
|
113
|
+
0% {
|
114
|
+
-webkit-transform: rotate(720deg);
|
115
|
+
}
|
116
|
+
100% {
|
117
|
+
-webkit-transform: rotate(0deg);
|
118
|
+
}
|
119
|
+
}
|
@@ -0,0 +1,144 @@
|
|
1
|
+
div.wslider_wrapper {
|
2
|
+
position: relative;
|
3
|
+
|
4
|
+
// 01. зафиксируем в css то, что не будет меняться в процессе исполнения программы. Картинка будет подставляться через
|
5
|
+
// атрибут style как background-image
|
6
|
+
// 02. Также контролироваться извне будет свойство height
|
7
|
+
div.wimage {
|
8
|
+
background-size: cover;
|
9
|
+
background-repeat: no-repeat;
|
10
|
+
background-position: center center;
|
11
|
+
position: absolute;
|
12
|
+
width: 100%;
|
13
|
+
z-index: 1;
|
14
|
+
overflow: hidden;
|
15
|
+
opacity: 0; /* изначально фреймы "чистые", без картинок, невидимые */
|
16
|
+
|
17
|
+
// чтобы картинки плавно сменяли друг друга - добавим эти стили
|
18
|
+
&.eased {
|
19
|
+
-webkit-transition: opacity .4s ease-out;
|
20
|
+
-moz-transition: opacity .4s ease-out;
|
21
|
+
-ms-transition: opacity .4s ease-out;
|
22
|
+
-o-transition: opacity .4s ease-out;
|
23
|
+
transition: opacity .4s ease-out;
|
24
|
+
}
|
25
|
+
|
26
|
+
// внутри bootstrap container класса живёт блок с текстом: подписью фрейма
|
27
|
+
> .container {
|
28
|
+
padding-right: 110px;
|
29
|
+
|
30
|
+
.frame_text {
|
31
|
+
width: 500px;
|
32
|
+
height: 360px;
|
33
|
+
float: right;
|
34
|
+
padding: 30px;
|
35
|
+
background-color: rgba(0,0,0,0.5);
|
36
|
+
color: white;
|
37
|
+
position: relative;
|
38
|
+
|
39
|
+
div.h4_wrapper {
|
40
|
+
|
41
|
+
&::after {
|
42
|
+
background-color: #ffffff;
|
43
|
+
}
|
44
|
+
|
45
|
+
h4 {
|
46
|
+
font-size: 50px;
|
47
|
+
line-height: 60px;
|
48
|
+
text-transform: uppercase;
|
49
|
+
margin-top: 0;
|
50
|
+
text-align: center;
|
51
|
+
}
|
52
|
+
|
53
|
+
}
|
54
|
+
|
55
|
+
p {
|
56
|
+
text-align: center;
|
57
|
+
margin-top: 30px;
|
58
|
+
}
|
59
|
+
|
60
|
+
}
|
61
|
+
|
62
|
+
}
|
63
|
+
|
64
|
+
}
|
65
|
+
|
66
|
+
// в этом диве живут кнопки next/prev
|
67
|
+
div.pbuttons {
|
68
|
+
height: 100px;
|
69
|
+
/*background-color: rgba(0,0,0,0.1);*/
|
70
|
+
z-index: 2;
|
71
|
+
position: relative;
|
72
|
+
|
73
|
+
div.but {
|
74
|
+
height: 100px;
|
75
|
+
width: 80px;
|
76
|
+
/*background-color: rgba(0,0,0,0.14);*/
|
77
|
+
|
78
|
+
text-align: center; /*!*/
|
79
|
+
white-space: nowrap; /*!*/
|
80
|
+
|
81
|
+
a {
|
82
|
+
|
83
|
+
i {
|
84
|
+
color: white;
|
85
|
+
font-size: 40px;
|
86
|
+
line-height: 100px;
|
87
|
+
|
88
|
+
-webkit-transition: color .4s ease-out;
|
89
|
+
-moz-transition: color .4s ease-out;
|
90
|
+
-ms-transition: color .4s ease-out;
|
91
|
+
-o-transition: color .4s ease-out;
|
92
|
+
transition: color .4s ease-out;
|
93
|
+
|
94
|
+
}
|
95
|
+
|
96
|
+
&:hover {
|
97
|
+
i {
|
98
|
+
color: #E1000F;
|
99
|
+
}
|
100
|
+
}
|
101
|
+
|
102
|
+
}
|
103
|
+
|
104
|
+
&.prev {
|
105
|
+
float: left;
|
106
|
+
}
|
107
|
+
|
108
|
+
&.next {
|
109
|
+
float: right;
|
110
|
+
}
|
111
|
+
|
112
|
+
}
|
113
|
+
|
114
|
+
}
|
115
|
+
|
116
|
+
div.preloader {
|
117
|
+
position: absolute;
|
118
|
+
top: 0;
|
119
|
+
left: 0;
|
120
|
+
right: 0;
|
121
|
+
/*height:500px;*/ /* NOTE:: высота прелоадера устанавливается в js, наследуется от высоты слайдера */
|
122
|
+
text-align: center;
|
123
|
+
font-size: 20px;
|
124
|
+
background: rgba(0,0,0,.4);
|
125
|
+
opacity: 0;
|
126
|
+
display: none;
|
127
|
+
z-index: 11;
|
128
|
+
|
129
|
+
-webkit-transition: opacity .4s ease-out;
|
130
|
+
-moz-transition: opacity .4s ease-out;
|
131
|
+
-ms-transition: opacity .4s ease-out;
|
132
|
+
-o-transition: opacity .4s ease-out;
|
133
|
+
transition: opacity .4s ease-out;
|
134
|
+
|
135
|
+
// дополнения к библиотечному, каноничному стилю
|
136
|
+
.spinner {
|
137
|
+
margin: 0 auto;
|
138
|
+
width: 35px;
|
139
|
+
height: 35px;
|
140
|
+
}
|
141
|
+
|
142
|
+
}
|
143
|
+
|
144
|
+
}
|
@@ -0,0 +1 @@
|
|
1
|
+
@import "c80_wslider/**/*";
|
@@ -0,0 +1,28 @@
|
|
1
|
+
module C80Wslider
|
2
|
+
module ApplicationHelper
|
3
|
+
|
4
|
+
# 01. для того, чтобы в каком-то div появился слайдер,
|
5
|
+
# необходимо передать в него
|
6
|
+
# массив картинок, которые надо отрисовать в слайдере
|
7
|
+
|
8
|
+
# 02. Еще нужно задать высоту в px
|
9
|
+
|
10
|
+
# images - массив строк вида ['frame1.jpg','frame2.jpg',...]
|
11
|
+
# props - описание каждой картинки в соответствующем порядке ({h4,p})
|
12
|
+
def render_wslider(images, props, height)
|
13
|
+
|
14
|
+
# предварительно соберём пути до картинок фреймов
|
15
|
+
images.each_with_index do |image_name,indx|
|
16
|
+
images[indx] = image_path(image_name)
|
17
|
+
end
|
18
|
+
|
19
|
+
render :partial => 'c80_wslider/wslider_wrapper',
|
20
|
+
:locals => {
|
21
|
+
images: images,
|
22
|
+
props: props,
|
23
|
+
height: height
|
24
|
+
}
|
25
|
+
end
|
26
|
+
|
27
|
+
end
|
28
|
+
end
|
@@ -0,0 +1,52 @@
|
|
1
|
+
<div class="wslider_wrapper"
|
2
|
+
data-images='<%= images.to_json.html_safe %>'
|
3
|
+
data-props='<%= props.to_json.html_safe %>'
|
4
|
+
data-height='<%= height %>'>
|
5
|
+
|
6
|
+
<%# класс каждого дива есть название js-класса %>
|
7
|
+
<%# из этих дивов пользователь видит только один %>
|
8
|
+
<%# они добавлены для плавных одновременных переходов при переключении фреймов %>
|
9
|
+
|
10
|
+
<div class="wimage">
|
11
|
+
<div class="container"> <%# [**] в данном случае bootstrap класс container позволяет позиционировать блок с текстовой подписью фрейма %>
|
12
|
+
<div class="frame_text">
|
13
|
+
<div class="h4_wrapper"><h4></h4></div>
|
14
|
+
<p></p>
|
15
|
+
</div>
|
16
|
+
</div>
|
17
|
+
</div>
|
18
|
+
|
19
|
+
<div class="wimage">
|
20
|
+
<div class="container">
|
21
|
+
<div class="frame_text">
|
22
|
+
<div class="h4_wrapper"><h4></h4></div>
|
23
|
+
<p></p>
|
24
|
+
</div>
|
25
|
+
</div>
|
26
|
+
</div>
|
27
|
+
|
28
|
+
<%# [**] в данном случае ширину контента слайдера зададим с помощью bootstrap класса container %>
|
29
|
+
<div class="pbuttons container">
|
30
|
+
|
31
|
+
<div class="prev but"> <%# здесь класс добавлен, чтобы css-позиционировать див but %>
|
32
|
+
<a href="#" class="prev"> <%# здесь класс добавлен, чтобы можно было отличить ссылку, когда по ней кликаем%>
|
33
|
+
<i class="fa fa-chevron-left" aria-hidden="true"></i>
|
34
|
+
</a>
|
35
|
+
</div>
|
36
|
+
|
37
|
+
<div class="next but">
|
38
|
+
<a href="#" class="next">
|
39
|
+
<i class="fa fa-chevron-right" aria-hidden="true"></i>
|
40
|
+
</a>
|
41
|
+
</div>
|
42
|
+
|
43
|
+
</div>
|
44
|
+
|
45
|
+
<div class="preloader">
|
46
|
+
<div class="spinner">
|
47
|
+
<div class="outer"></div>
|
48
|
+
<div class="inner"></div>
|
49
|
+
</div>
|
50
|
+
</div>
|
51
|
+
|
52
|
+
</div>
|
data/bin/console
ADDED
@@ -0,0 +1,14 @@
|
|
1
|
+
#!/usr/bin/env ruby
|
2
|
+
|
3
|
+
require "bundler/setup"
|
4
|
+
require "c80_wslider"
|
5
|
+
|
6
|
+
# You can add fixtures and/or initialization code here to make experimenting
|
7
|
+
# with your gem easier. You can also use a different console, if you like.
|
8
|
+
|
9
|
+
# (If you use this, don't forget to add pry to your Gemfile!)
|
10
|
+
# require "pry"
|
11
|
+
# Pry.start
|
12
|
+
|
13
|
+
require "irb"
|
14
|
+
IRB.start
|
data/bin/setup
ADDED
data/c80_wslider.gemspec
ADDED
@@ -0,0 +1,26 @@
|
|
1
|
+
# coding: utf-8
|
2
|
+
lib = File.expand_path('../lib', __FILE__)
|
3
|
+
$LOAD_PATH.unshift(lib) unless $LOAD_PATH.include?(lib)
|
4
|
+
require 'c80_wslider/version'
|
5
|
+
|
6
|
+
Gem::Specification.new do |spec|
|
7
|
+
spec.name = "c80_wslider"
|
8
|
+
spec.version = C80Wslider::VERSION
|
9
|
+
spec.authors = ["C80609A"]
|
10
|
+
spec.email = ["c080609a@gmail.com"]
|
11
|
+
|
12
|
+
spec.summary = %q{Широкий слайдер}
|
13
|
+
spec.description = %q{Позволяет создавать слайдеры на всю ширину (css background-size) }
|
14
|
+
spec.homepage = "http://github.com"
|
15
|
+
spec.license = "MIT"
|
16
|
+
|
17
|
+
spec.files = `git ls-files -z`.split("\x0").reject { |f| f.match(%r{^(test|spec|features)/}) }
|
18
|
+
spec.bindir = "exe"
|
19
|
+
spec.executables = spec.files.grep(%r{^exe/}) { |f| File.basename(f) }
|
20
|
+
spec.require_paths = ["lib"]
|
21
|
+
|
22
|
+
spec.add_development_dependency "bundler", "~> 1.12"
|
23
|
+
spec.add_development_dependency "rake", "~> 10.0"
|
24
|
+
spec.add_dependency 'activesupport', ['>= 3.0.0']
|
25
|
+
|
26
|
+
end
|
@@ -0,0 +1,23 @@
|
|
1
|
+
module C80Wslider
|
2
|
+
class Engine < ::Rails::Engine
|
3
|
+
isolate_namespace C80Wslider
|
4
|
+
|
5
|
+
initializer :c80_wslider_engine do
|
6
|
+
if defined?(ActiveAdmin)
|
7
|
+
ActiveAdmin.application.load_paths += Dir["#{config.root}/app/models/**/"]
|
8
|
+
#ActiveAdmin.application.load_paths += Dir["#{config.root}/app/models/concerns/**/"]
|
9
|
+
ActiveAdmin.application.load_paths += Dir["#{config.root}/app/admin/c80_wslider/**/"]
|
10
|
+
# ActiveAdmin.application.load_paths += Dir["#{config.root}/app/jobs/**/"]
|
11
|
+
end
|
12
|
+
end
|
13
|
+
|
14
|
+
initializer :append_migrations do |app|
|
15
|
+
unless app.root.to_s.match root.to_s
|
16
|
+
config.paths["db/migrate"].expanded.each do |expanded_path|
|
17
|
+
app.config.paths["db/migrate"] << expanded_path
|
18
|
+
end
|
19
|
+
end
|
20
|
+
end
|
21
|
+
|
22
|
+
end
|
23
|
+
end
|
data/lib/c80_wslider.rb
ADDED
metadata
ADDED
@@ -0,0 +1,109 @@
|
|
1
|
+
--- !ruby/object:Gem::Specification
|
2
|
+
name: c80_wslider
|
3
|
+
version: !ruby/object:Gem::Version
|
4
|
+
version: 0.1.0
|
5
|
+
platform: ruby
|
6
|
+
authors:
|
7
|
+
- C80609A
|
8
|
+
autorequire:
|
9
|
+
bindir: exe
|
10
|
+
cert_chain: []
|
11
|
+
date: 2016-08-30 00:00:00.000000000 Z
|
12
|
+
dependencies:
|
13
|
+
- !ruby/object:Gem::Dependency
|
14
|
+
name: bundler
|
15
|
+
requirement: !ruby/object:Gem::Requirement
|
16
|
+
requirements:
|
17
|
+
- - "~>"
|
18
|
+
- !ruby/object:Gem::Version
|
19
|
+
version: '1.12'
|
20
|
+
type: :development
|
21
|
+
prerelease: false
|
22
|
+
version_requirements: !ruby/object:Gem::Requirement
|
23
|
+
requirements:
|
24
|
+
- - "~>"
|
25
|
+
- !ruby/object:Gem::Version
|
26
|
+
version: '1.12'
|
27
|
+
- !ruby/object:Gem::Dependency
|
28
|
+
name: rake
|
29
|
+
requirement: !ruby/object:Gem::Requirement
|
30
|
+
requirements:
|
31
|
+
- - "~>"
|
32
|
+
- !ruby/object:Gem::Version
|
33
|
+
version: '10.0'
|
34
|
+
type: :development
|
35
|
+
prerelease: false
|
36
|
+
version_requirements: !ruby/object:Gem::Requirement
|
37
|
+
requirements:
|
38
|
+
- - "~>"
|
39
|
+
- !ruby/object:Gem::Version
|
40
|
+
version: '10.0'
|
41
|
+
- !ruby/object:Gem::Dependency
|
42
|
+
name: activesupport
|
43
|
+
requirement: !ruby/object:Gem::Requirement
|
44
|
+
requirements:
|
45
|
+
- - ">="
|
46
|
+
- !ruby/object:Gem::Version
|
47
|
+
version: 3.0.0
|
48
|
+
type: :runtime
|
49
|
+
prerelease: false
|
50
|
+
version_requirements: !ruby/object:Gem::Requirement
|
51
|
+
requirements:
|
52
|
+
- - ">="
|
53
|
+
- !ruby/object:Gem::Version
|
54
|
+
version: 3.0.0
|
55
|
+
description: "Позволяет создавать слайдеры на всю ширину (css background-size) "
|
56
|
+
email:
|
57
|
+
- c080609a@gmail.com
|
58
|
+
executables: []
|
59
|
+
extensions: []
|
60
|
+
extra_rdoc_files: []
|
61
|
+
files:
|
62
|
+
- ".gitignore"
|
63
|
+
- CODE_OF_CONDUCT.md
|
64
|
+
- Gemfile
|
65
|
+
- LICENSE.txt
|
66
|
+
- README.md
|
67
|
+
- Rakefile
|
68
|
+
- app/assets/javascripts/c80_wslider.js.coffee
|
69
|
+
- app/assets/javascripts/components/pbuttons.js
|
70
|
+
- app/assets/javascripts/components/wloader.js
|
71
|
+
- app/assets/javascripts/components/wloader/preloader.js
|
72
|
+
- app/assets/javascripts/components/wloader/shower.js
|
73
|
+
- app/assets/javascripts/wslider.js
|
74
|
+
- app/assets/stylesheets/c80_wslider.scss
|
75
|
+
- app/assets/stylesheets/c80_wslider/wslider.scss
|
76
|
+
- app/assets/stylesheets/c80_wslider/wslider/spinner.scss
|
77
|
+
- app/helpers/c80_wslider/application_helper.rb
|
78
|
+
- app/views/c80_wslider/_wslider_wrapper.html.erb
|
79
|
+
- bin/console
|
80
|
+
- bin/setup
|
81
|
+
- c80_wslider.gemspec
|
82
|
+
- lib/c80_wslider.rb
|
83
|
+
- lib/c80_wslider/engine.rb
|
84
|
+
- lib/c80_wslider/version.rb
|
85
|
+
homepage: http://github.com
|
86
|
+
licenses:
|
87
|
+
- MIT
|
88
|
+
metadata: {}
|
89
|
+
post_install_message:
|
90
|
+
rdoc_options: []
|
91
|
+
require_paths:
|
92
|
+
- lib
|
93
|
+
required_ruby_version: !ruby/object:Gem::Requirement
|
94
|
+
requirements:
|
95
|
+
- - ">="
|
96
|
+
- !ruby/object:Gem::Version
|
97
|
+
version: '0'
|
98
|
+
required_rubygems_version: !ruby/object:Gem::Requirement
|
99
|
+
requirements:
|
100
|
+
- - ">="
|
101
|
+
- !ruby/object:Gem::Version
|
102
|
+
version: '0'
|
103
|
+
requirements: []
|
104
|
+
rubyforge_project:
|
105
|
+
rubygems_version: 2.5.1
|
106
|
+
signing_key:
|
107
|
+
specification_version: 4
|
108
|
+
summary: "Широкий слайдер"
|
109
|
+
test_files: []
|