c80_wslider 0.1.0

checksums.yaml

@@ -0,0 +1,7 @@
+---
+SHA1:
+  metadata.gz: 5a881c9ec524f5eb3125b5e3a647007f0aa43a71
+  data.tar.gz: 02f8989b104fbee6191bc22a8fb9609711134158
+SHA512:
+  metadata.gz: f2dedb120cffe763fddfb410bf75db465da7bc71502015e875f14ae8323825a2209a66920ae8a4c6b72d312bb0ba91103d98d507afecb365d8a97c2d8ff127f8
+  data.tar.gz: 0c488676d45c24a46a9b71c8f7614b5fcc4f9ebac30b5e707ffe6abb480c026c068ec53f6bc40f182524dabc650b533f72fdeeaac8f948d0736e1fddf91e9ff4

data/.gitignore

@@ -0,0 +1,11 @@
+/.bundle/
+/.yardoc
+/Gemfile.lock
+/_yardoc/
+/coverage/
+/doc/
+/pkg/
+/spec/reports/
+/tmp/
+*.gem
+/.idea

data/CODE_OF_CONDUCT.md

@@ -0,0 +1,49 @@
+# Contributor Code of Conduct
+
+As contributors and maintainers of this project, and in the interest of
+fostering an open and welcoming community, we pledge to respect all people who
+contribute through reporting issues, posting feature requests, updating
+documentation, submitting pull requests or patches, and other activities.
+
+We are committed to making participation in this project a harassment-free
+experience for everyone, regardless of level of experience, gender, gender
+identity and expression, sexual orientation, disability, personal appearance,
+body size, race, ethnicity, age, religion, or nationality.
+
+Examples of unacceptable behavior by participants include:
+
+* The use of sexualized language or imagery
+* Personal attacks
+* Trolling or insulting/derogatory comments
+* Public or private harassment
+* Publishing other's private information, such as physical or electronic
+  addresses, without explicit permission
+* Other unethical or unprofessional conduct
+
+Project maintainers have the right and responsibility to remove, edit, or
+reject comments, commits, code, wiki edits, issues, and other contributions
+that are not aligned to this Code of Conduct, or to ban temporarily or
+permanently any contributor for other behaviors that they deem inappropriate,
+threatening, offensive, or harmful.
+
+By adopting this Code of Conduct, project maintainers commit themselves to
+fairly and consistently applying these principles to every aspect of managing
+this project. Project maintainers who do not follow or enforce the Code of
+Conduct may be permanently removed from the project team.
+
+This code of conduct applies both within project spaces and in public spaces
+when an individual is representing the project or its community.
+
+Instances of abusive, harassing, or otherwise unacceptable behavior may be
+reported by contacting a project maintainer at c080609a@gmail.com. All
+complaints will be reviewed and investigated and will result in a response that
+is deemed necessary and appropriate to the circumstances. Maintainers are
+obligated to maintain confidentiality with regard to the reporter of an
+incident.
+
+This Code of Conduct is adapted from the [Contributor Covenant][homepage],
+version 1.3.0, available at
+[http://contributor-covenant.org/version/1/3/0/][version]
+
+[homepage]: http://contributor-covenant.org
+[version]: http://contributor-covenant.org/version/1/3/0/

data/Gemfile

@@ -0,0 +1,4 @@
+source 'https://rubygems.org'
+
+# Specify your gem's dependencies in c80_wslider.gemspec
+gemspec

data/LICENSE.txt

@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2016 C80609A
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.

data/README.md

@@ -0,0 +1,50 @@
+# C80Wslider
+
+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.
+
+TODO: Delete this and the text above, and describe your gem
+
+## Installation
+
+Add this line to your application's Gemfile:
+
+```ruby
+gem 'c80_wslider'
+```
+
+And then execute:
+
+    $ bundle
+
+Or install it yourself as:
+
+    $ gem install c80_wslider
+
+## Usage
+
+Host app:
+
+    # application.scss:
+    @import "c80_wslider";
+    
+    # application.js.coffee:
+    #= require c80_wslider
+
+    # ApplicationController:
+    helper C80Wslider::Engine.helpers
+
+## Development
+
+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.
+
+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).
+
+## Contributing
+
+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.
+
+
+## License
+
+The gem is available as open source under the terms of the [MIT License](http://opensource.org/licenses/MIT).
+

data/Rakefile

@@ -0,0 +1,2 @@
+require "bundler/gem_tasks"
+task :default => :spec

data/app/assets/javascripts/c80_wslider.js.coffee

@@ -0,0 +1,2 @@
+#= require_tree ./components
+#= require wslider

data/app/assets/javascripts/components/pbuttons.js

@@ -0,0 +1,52 @@
+"use strict";
+
+// slider_height - высота слайдера. Подаётся для того, чтобы позиционировать div с кнопками по центру по вертикали
+var PButtons = function ($div_pbuttons, slider_height, fOnClick) {
+
+    // ссылка на функцию, которая вызовется, когда пользователь кликнет по кнопке
+    var _fOnClick = fOnClick;
+
+    // в этом диве живут кнопки
+    var _div_buttons = null;
+
+    // высота слайдера. Нужна для того, чтобы позиционировать _div_buttons по центру по вертикали
+    var _slider_height;
+
+    // две кнопки перемотки
+    var button_prev;
+    var button_next;
+
+    // инициализация
+    var _fInit = function ($div_pbuttons, slider_height) {
+
+        _div_buttons = $div_pbuttons;
+        _slider_height = slider_height;
+
+        // разместим _div_buttons по центру по вертикали
+        var top = (_slider_height - _div_buttons.height()) / 2;
+        $div_pbuttons.css('top', top + 'px');
+
+        // зафиксируем кнопки
+        button_prev = _div_buttons.find('.prev a');
+        button_next = _div_buttons.find('.next a');
+
+        // слушаем клики
+        button_prev.on('click', _fOnButtonClick);
+        button_next.on('click', _fOnButtonClick);
+    };
+
+    // слушаем клики
+    var _fOnButtonClick = function () {
+        //console.log($(this).attr('class')); => prev или next
+
+        // определяем кнопку, по которой кликнули
+        var clicked_button = $(this).attr('class');
+
+        // отправляем её имя в функцию уровнем выше
+        _fOnClick(clicked_button);
+
+    };
+
+    _fInit($div_pbuttons, slider_height);
+
+};

data/app/assets/javascripts/components/wloader/preloader.js

@@ -0,0 +1,57 @@
+"use strict";
+
+// Анимированная индикация загрузки картинки
+
+var Preloader = function ($slider_wrapper, slider_height) {
+
+    // див, в котором живёт анимация загрузки (view)
+    var _$preloader;
+
+    // анимация загрузки
+    var _$spinner;
+
+    //slider_height передаётся для того, чтобы можно было сделать прелоадер высотой равной высоте слайдера
+    var _slider_height = slider_height;
+
+    // инициализация
+    var _fInit = function ($slider_wrapper) {
+
+        // фиксируем view
+        _$preloader = $slider_wrapper.find('.preloader');
+
+        // фиксируем анимацию загрузки
+        _$spinner = _$preloader.find('.spinner');
+
+        // корректируем высоту области прелоадера
+        _$preloader.css('height', _slider_height+'px');
+
+        // корректируем положение по вертикали блока spinner
+        var t = (_slider_height - _$spinner.height())/2;
+        _$spinner.css('top', t);
+
+    };
+
+    // показать анимацию загрузки
+    this.show = function () {
+        console.log('<preloader.show>\t Покажем прелоадер.');
+        _$preloader.css('display','block');
+        _$preloader.css('opacity','1');
+    };
+
+    // скрыть анимацию загрузки
+    this.hide = function () {
+        console.log('<preloader.hide>\t Спрячем прелоадер.');
+
+        _$preloader.css('opacity','0');
+
+        // NOTE:: по хардкоду подогнали время под длительность анимации, заданной в scss
+        setTimeout(function () {
+            _$preloader.css('display','none');
+        },400);
+
+    };
+
+    // поехали
+    _fInit($slider_wrapper);
+
+};

data/app/assets/javascripts/components/wloader/shower.js

@@ -0,0 +1,100 @@
+
+// slider_height передаётся для того, чтобы можно было позиционировать текстовый блок по вертикали
+var Shower = function ($wimages, slider_height) {
+
+    // ссылка на дивы, в которых отрисовываются картинки
+    // изначально оба дива приходят "чистыми"
+    // В таком случае: берём первый попавшийся див , помещаем в него картинку, делаем его "показанным сейчас"
+    var _$wimages = $wimages;
+
+    // после первого вызова show(), когда дивы перестают быть "чистыми", эта переменная сбросится в false
+    // нужна для того, чтобы при первом вызове взять первый попавшийся див и сделать его "показанным сейчас"
+    var _mark_first_call = true;
+
+    //slider_height передаётся для того, чтобы можно было позиционировать текстовый блок по вертикали
+    var _slider_height = slider_height;
+
+    // низкоуровневый механизм показа картинки с подписями (вызывается только из this.show)
+    var _fShow = function ($div, url, props) {
+        console.log("<shower._fShow>\t div class:" + $div.attr('class') + ", url: " + url);
+
+        // убираем плавность, возвращаем в начальное состояние
+        $div.removeClass('eased').css('opacity','0');
+
+        // помещаем в него картинку
+        $div.css('background-image', 'url('+url+')');
+
+        // находим блок с текстом, фиксируем h4 и p
+        var $div_text = $div.find('.frame_text');
+        var $h4 = $div_text.find('h4');
+        var $p = $div_text.find('p');
+
+        // подставляем туда текст из props
+        $h4.text(props['h4']);
+        $p.text(props['p']);
+
+        // позиционируем блок с текстом по вертикали по центру
+        var top = (_slider_height - $div_text.height()) / 2;
+        $div_text.css('top', top + 'px');
+
+        // плавно проявляем фрейм
+        $div.addClass('eased').css('opacity','1');
+
+        // помечаем его как "показанный сейчас"
+        $div.addClass('shown_right_now');
+
+    };
+
+    // низкоуровневый механизм плавного сокрытия картинки (вызывается только из this.hide)
+    var _fHide = function ($div) {
+        console.log("<shower._fHide>\t div class: " + $div.attr('class'));
+
+        // плавно скрываем фрейм
+        $div.css('opacity', '0');
+
+        // удаляем пометку "показанный сейчас" у фрейма
+        $div.removeClass('shown_right_now');
+
+    };
+
+    // плавно показать картинку url
+    // Этот метод зафиксирован в маршруте "Показать Картинку"
+    // диаграммы d:\Distrs\drakon\drakon_editor1.27\work\vapehub\slider.drn
+    this.show = function (url, props) {
+
+        // если это первый вызов show() - сбрасываем переменную _mark_first_call, берем первый див и делаем его "показанным сейчас"
+        if (_mark_first_call) {
+            console.log("<shower.show>\t Первый вызов.");
+
+            _mark_first_call = false;
+
+            // фиксируем first image
+            var $fi = $(_$wimages[0]);
+
+            // покажем картинку с подписями
+            _fShow($fi, url, props);
+
+        }
+
+        // если это не первый вызов show() - значит какой-то фрейм уже показан
+        //
+        else {
+            console.log("<shower.show>\t НЕ-первый вызов.");
+
+            // фиксируем показанный фрейм (shown image)
+            var $si = _$wimages.filter('.shown_right_now');
+
+            // фиксируем спрятанный фрейм (hidden image)
+            var $hi = _$wimages.not('.shown_right_now');
+
+            // прячем показанный фрейм
+            _fHide($si);
+
+            // показываем спрятанный фрейм
+            _fShow($hi, url, props);
+
+        }
+
+    }
+
+};

data/app/assets/javascripts/components/wloader.js

@@ -0,0 +1,95 @@
+// грузит картинки в "невидимом", фоновом режиме, показывает их
+// другими словами: содержит механику загрузки и показа картинок
+
+var Wloader = function (images, frames_props, $wimages, slider_height, $slider_wrapper) {
+
+    // ссылка на враппер вокруг всего слайдера (подаётся для того, чтобы можно было прицепить прелоадер)
+    var _$slider_wrapper = $slider_wrapper;
+
+    // механику показа картинки фрейма содержит этот вспомогательный класс
+    var _shower = new Shower($wimages, slider_height);
+
+    // images - ссылка на полный список урлов картинок для загрузки и отображения
+    var _images = images;
+
+    // здесь содержится список описаний каждой картинки: h4 - крупный текст и p - мелкий
+    var _frames_props = frames_props;
+
+    // собственно, с помощью этого грузим
+    var _loader = null;
+    var _$loader = null;
+
+    // индикатор загрузки
+    var _preloader = new Preloader(_$slider_wrapper, slider_height);
+
+    // либо покажем картинку, либо сначала загрузим, затем покажем картинку
+    this.checkAndShowFrame = function (frame_index) {
+        console.log('<wloader.checkAndShowFrame>\t Покажем картинку с проверкой: frame_index = ' + frame_index);
+
+        // предварительно создадим то, с помощью чего будем непосредственно грузить
+        _loader = new Image();
+        _$loader = $(_loader);
+
+        // фиксируем урл текущей картинки
+        var u = _images[frame_index];
+
+        // фиксируем свойства картинки (подпись)
+        var pr = _frames_props[frame_index];
+
+        // инициация внутреннего механизма загрузки картинки (из кэша или из сети)
+        _$loader.attr({ src:u });
+
+        // если картинка уже есть в кэше - просто покажем её
+        if (_loader.complete || _loader.readyState === 4) {
+            __fShowFrame(u,pr);
+        }
+
+        // если картинки нет в кэше - запросим её с сервера
+        else {
+            __fLoadFrame(u, __fShowFrame,pr);
+        }
+
+    };
+
+    // вызывается только из _fCheckAndShowFrame
+    // отобразить картинку фрейма url со свойствами props
+    var __fShowFrame = function (url, props) {
+        console.log("<wloader.__fShowFrame>\t Отображем картинку фрейма: url = " + url);
+        _shower.show(url, props);
+    };
+
+    // вызывается только из _fCheckAndShowFrame
+    // загрузить картинку фрейма
+    // будет показан прелоадер
+    // fCallBack - вызовется в конце успешной загрузки (скорее всего - это __fShowFrame)
+    // fCallBackParameter - можно передать один параметр, который дополнительно отдастся fCallBack (скорее всего это pr)
+    var __fLoadFrame = function (url, fCallBack, fCallBackParameter) {
+        console.log("<wloader.__fLoadFrame>\t ГРУЗИМ картинку фрейма: url = " + url);
+
+        // покажем прелоадер
+        _preloader.show();
+
+        // загрузим
+        _$loader.load(function (responce, status, xhr) {
+
+            // картинку загрузить не получилось
+            if (status == 'error') {
+
+            }
+
+            // картинка успешно загружена
+            else {
+
+                // прячем прелоадер
+                _preloader.hide();
+
+                console.log("<wloader.__fLoadFrame>\t Загрузили картинку, url: " + url);
+
+                fCallBack(url,fCallBackParameter);
+
+            }
+        });
+
+    };
+
+};

data/app/assets/javascripts/wslider.js

@@ -0,0 +1,127 @@
+'use strict';
+
+// 01. позволяет создавать слайдеры, главной особенностью которых является картинка фрейма, которая
+// отображается с помощью css свойства background-image и с применением background-size: cover
+
+// 02. Чтобы код применился
+
+var Wslider = function (options) {
+
+    // добавлена для того, чтобы передавать ссылку на wslider находясь внутри вложенных функций
+    var _this = this;
+
+    // по этим параметрам отрисован слайдер
+    var _options = {
+        parent_node: 'body',
+        height: 100
+    };
+
+    // здесь содержится список урлов картинок, которые надо отобразить в слайдере
+    var _images = null;
+
+    // здесь содержится список описаний каждой картинки: h4 - крупный текст и p - мелкий
+    var _frames_props = null;
+
+    // указатель на текущий фрейм
+    var _current_frame = 0;
+
+    // контейнер, в который упакован слайдер
+    var _$wrapper = null;
+
+    // 2 дива, в которых отрисовываются картинки
+    var _$wimages = null;
+
+    // в ответе за загрузку и показ картинок фрейма
+    // во время загрузки покажет прелодаер
+    var _wloader = null;
+
+    // код кнопок next\prev сконцентрирован тут
+    var _buttons = null;
+
+    //------------------------------------------------------------------------------------------------------------------
+
+    // инициализация
+    var _fInit = function (options) {
+
+        // акуализируем параметры слайдера
+        _options = $.extend(_options, options);
+
+        // зафиксируем контейнер и див с картинкой
+        _$wrapper = $(_options.parent_node).find('.wslider_wrapper');
+        _$wimages = _$wrapper.find('div.wimage');
+        //console.log(_$wimages);
+
+        // зафиксируем список картинок для отображения
+        _images = _$wrapper.data('images');
+
+        // зафиксируем массив свойств картинок (текстовые подписи фреймов), разложенные в том же порядке что и _images
+        _frames_props = _$wrapper.data('props');
+
+        // зададим высоту картинок
+        _$wimages.css('height', _$wrapper.data('height') + "px");
+
+        // инициализация механизма загрузки и показа картинок
+        _wloader = new Wloader(
+            _images,
+            _frames_props,
+            _$wimages,
+            _$wrapper.data('height'),
+            _$wrapper
+        );
+
+        // инициализация кнопок next\prev
+        _buttons = new PButtons(
+            _$wrapper.find('div.pbuttons'),
+            _$wrapper.data('height'),
+            _onPbuttonClick
+        );
+
+    };
+
+    // запускаем приложение
+    var _fStart = function () {
+        _wloader.checkAndShowFrame(_current_frame);
+    };
+
+    //--[ контроллер: слушает клики, меняет переменную _current_frame ]-------------------------------------------------
+
+    var _onPbuttonClick = function (clickd_button) {
+        console.log("<wslider._onPbuttonClick>\t Нажали кнопку перемотки: clickd_button = " + clickd_button); // => prev или next
+
+        switch (clickd_button) {
+
+            case 'prev':
+                _fPrevFrame();
+            break;
+
+            case 'next':
+                _fNextFrame();
+            break;
+
+        }
+    };
+
+    var _fNextFrame = function () {
+        _current_frame += 1;
+        if (_current_frame >= _images.length) {
+            _current_frame = 0;
+        }
+        //console.log("<wslider._fNextFrame> _current_frame = " + _current_frame);
+        _wloader.checkAndShowFrame(_current_frame);
+    };
+
+    var _fPrevFrame = function () {
+        _current_frame -= 1;
+        if (_current_frame < 0) {
+            _current_frame = _images.length-1;
+        }
+        //console.log("<wslider._fPrevFrame> _current_frame = " + _current_frame);
+        _wloader.checkAndShowFrame(_current_frame);
+    };
+
+    //------------------------------------------------------------------------------------------------------------------
+
+    _fInit(options);
+    _fStart();
+
+};

data/app/assets/stylesheets/c80_wslider/wslider/spinner.scss

@@ -0,0 +1,119 @@
+/* spinner indicator */
+.spinner {
+  position: relative;
+  width: 72px;    /* diameter */
+  height: 72px;    /* diameter */
+}
+.outer, .inner, .spinner:after {
+  position: absolute;
+  left: 0;
+  top: 0;
+  right: 0;
+  bottom: 0;
+}
+/* Mask */
+.spinner:after {
+  content:" ";
+  margin: 10%;    /* stroke width */
+  border-radius: 100%;
+  background: #393A3D;    /* container background */
+}
+/* Spinning gradients */
+.outer, .inner {
+  animation-duration: 5s;    /* speed */
+  -webkit-animation-duration: 5s;    /* speed */
+  animation-iteration-count: infinite;
+  -webkit-animation-iteration-count: infinite;
+  animation-timing-function: linear;
+  -webkit-animation-timing-function: linear;
+}
+.outer {
+  animation-name: rotate-outer;
+  -webkit-animation-name: rotate-outer;
+}
+.inner {
+  animation-name: rotate-inner;
+  -webkit-animation-name: rotate-inner;
+}
+/* Halfs */
+.outer:before, .inner:before, .outer:after, .inner:after {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  content:" ";
+}
+/* Left half */
+.outer:before, .inner:before {
+  left: 0;
+  right: 50%;
+  border-radius: 72px 0 0 72px;    /* diameter */
+}
+/* Right half */
+.outer:after, .inner:after {
+  left: 50%;
+  right: 0;
+  border-radius: 0 72px 72px 0;    /* diameter */
+}
+/* Half gradients */
+.outer:before {
+  background-image: -webkit-linear-gradient(top, hsla(0, 0%, 100%, 0.0), hsla(0, 0%, 100%, 0.6));
+  background-image: -moz-linear-gradient(top, hsla(0, 0%, 100%, 0.0), hsla(0, 0%, 100%, 0.6));
+  background-image: linear-gradient(to bottom, hsla(0, 0%, 100%, 0.0), hsla(0, 0%, 100%, 0.6));
+}
+.outer:after {
+  background-image: -webkit-linear-gradient(top, hsla(0, 0%, 100%, 1.0), hsla(0, 0%, 100%, 0.4));
+  background-image: -moz-linear-gradient(top, hsla(0, 0%, 100%, 1.0), hsla(0, 0%, 100%, 0.4));
+  background-image: linear-gradient(to bottom, hsla(0, 0%, 100%, 1.0), hsla(0, 0%, 100%, 0.4));
+}
+.inner:before {
+  background-image: -webkit-linear-gradient(top, hsla(0, 0%, 100%, 0.6), hsla(0, 0%, 75%, 0.6));
+  background-image: -moz-linear-gradient(top, hsla(0, 0%, 100%, 0.6), hsla(0, 0%, 75%, 0.6));
+  background-image: linear-gradient(to bottom, hsla(0, 0%, 100%, 0.6), hsla(0, 0%, 75%, 0.6));
+}
+.inner:after {
+  background-image: -webkit-linear-gradient(top, hsla(0, 0%, 50%, 0.6), hsla(0, 0%, 75%, 0.6));
+  background-image: -moz-linear-gradient(top, hsla(0, 0%, 50%, 0.6), hsla(0, 0%, 75%, 0.6));
+  background-image: linear-gradient(to bottom, hsla(0, 0%, 50%, 0.6), hsla(0, 0%, 75%, 0.6));
+}
+
+/* Spinning animations */
+@keyframes rotate-outer {
+  0% {
+    transform: rotate(0deg);
+    -moz-transform: rotate(0deg);
+    -webkit-transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(1080deg);
+    -moz-transform: rotate(1080deg);
+    -webkit-transform: rotate(1080deg);
+  }
+}
+@-webkit-keyframes rotate-outer {
+  0% {
+    -webkit-transform: rotate(0deg);
+  }
+  100% {
+    -webkit-transform: rotate(1080deg);
+  }
+}
+@keyframes rotate-inner {
+  0% {
+    transform: rotate(720deg);
+    -moz-transform: rotate(720deg);
+    -webkit-transform: rotate(720deg);
+  }
+  100% {
+    transform: rotate(0deg);
+    -moz-transform: rotate(0deg);
+    -webkit-transform: rotate(0deg);
+  }
+}
+@-webkit-keyframes rotate-inner {
+  0% {
+    -webkit-transform: rotate(720deg);
+  }
+  100% {
+    -webkit-transform: rotate(0deg);
+  }
+}

data/app/assets/stylesheets/c80_wslider/wslider.scss

@@ -0,0 +1,144 @@
+div.wslider_wrapper {
+  position: relative;
+
+  // 01. зафиксируем в css то, что не будет меняться в процессе исполнения программы. Картинка будет подставляться через
+  // атрибут style как background-image
+  // 02. Также контролироваться извне будет свойство height
+  div.wimage {
+    background-size: cover;
+    background-repeat: no-repeat;
+    background-position: center center;
+    position: absolute;
+    width: 100%;
+    z-index: 1;
+    overflow: hidden;
+    opacity: 0; /* изначально фреймы "чистые", без картинок, невидимые */
+
+    // чтобы картинки плавно сменяли друг друга - добавим эти стили
+    &.eased {
+      -webkit-transition: opacity .4s ease-out;
+      -moz-transition: opacity .4s ease-out;
+      -ms-transition: opacity .4s ease-out;
+      -o-transition: opacity .4s ease-out;
+      transition: opacity .4s ease-out;
+    }
+
+    // внутри bootstrap container класса живёт блок с текстом: подписью фрейма
+    > .container {
+      padding-right: 110px;
+
+      .frame_text {
+        width: 500px;
+        height: 360px;
+        float: right;
+        padding: 30px;
+        background-color: rgba(0,0,0,0.5);
+        color: white;
+        position: relative;
+
+        div.h4_wrapper {
+
+          &::after {
+            background-color: #ffffff;
+          }
+
+          h4 {
+            font-size: 50px;
+            line-height: 60px;
+            text-transform: uppercase;
+            margin-top: 0;
+            text-align: center;
+          }
+
+        }
+
+        p {
+          text-align: center;
+          margin-top: 30px;
+        }
+
+      }
+
+    }
+
+  }
+
+  // в этом диве живут кнопки next/prev
+  div.pbuttons {
+    height: 100px;
+    /*background-color: rgba(0,0,0,0.1);*/
+    z-index: 2;
+    position: relative;
+
+    div.but {
+      height: 100px;
+      width: 80px;
+      /*background-color: rgba(0,0,0,0.14);*/
+
+      text-align: center;         /*!*/
+      white-space: nowrap;        /*!*/
+
+      a {
+
+        i {
+          color: white;
+          font-size: 40px;
+          line-height: 100px;
+
+          -webkit-transition: color .4s ease-out;
+          -moz-transition: color .4s ease-out;
+          -ms-transition: color .4s ease-out;
+          -o-transition: color .4s ease-out;
+          transition: color .4s ease-out;
+
+        }
+
+        &:hover {
+          i {
+            color: #E1000F;
+          }
+        }
+
+      }
+
+      &.prev {
+        float: left;
+      }
+
+      &.next {
+        float: right;
+      }
+
+    }
+
+  }
+
+  div.preloader {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    /*height:500px;*/ /* NOTE:: высота прелоадера устанавливается в js, наследуется от высоты слайдера */
+    text-align: center;
+    font-size: 20px;
+    background: rgba(0,0,0,.4);
+    opacity: 0;
+    display: none;
+    z-index: 11;
+
+    -webkit-transition: opacity .4s ease-out;
+    -moz-transition: opacity .4s ease-out;
+    -ms-transition: opacity .4s ease-out;
+    -o-transition: opacity .4s ease-out;
+    transition: opacity .4s ease-out;
+
+    // дополнения к библиотечному, каноничному стилю
+    .spinner {
+      margin: 0 auto;
+      width: 35px;
+      height: 35px;
+    }
+
+  }
+
+}

data/app/assets/stylesheets/c80_wslider.scss

@@ -0,0 +1 @@
+@import "c80_wslider/**/*";

data/app/helpers/c80_wslider/application_helper.rb

@@ -0,0 +1,28 @@
+module C80Wslider
+  module ApplicationHelper
+
+    # 01. для того, чтобы в каком-то div появился слайдер,
+    # необходимо передать в него
+    # массив картинок, которые надо отрисовать в слайдере
+
+    # 02. Еще нужно задать высоту в px
+
+    # images - массив строк вида ['frame1.jpg','frame2.jpg',...]
+    # props - описание каждой картинки в соответствующем порядке ({h4,p})
+    def render_wslider(images, props, height)
+
+      # предварительно соберём пути до картинок фреймов
+      images.each_with_index do |image_name,indx|
+        images[indx] = image_path(image_name)
+      end
+
+      render :partial => 'c80_wslider/wslider_wrapper',
+             :locals => {
+                 images: images,
+                 props: props,
+                 height: height
+             }
+    end
+
+  end
+end

data/app/views/c80_wslider/_wslider_wrapper.html.erb

@@ -0,0 +1,52 @@
+<div class="wslider_wrapper"
+     data-images='<%= images.to_json.html_safe %>'
+     data-props='<%= props.to_json.html_safe %>'
+     data-height='<%= height %>'>
+
+  <%# класс каждого дива есть название js-класса %>
+  <%# из этих дивов пользователь видит только один %>
+  <%# они добавлены для плавных одновременных переходов при переключении фреймов %>
+
+  <div class="wimage">
+    <div class="container"> <%# [**] в данном случае bootstrap класс container позволяет позиционировать блок с текстовой подписью фрейма %>
+      <div class="frame_text">
+        <div class="h4_wrapper"><h4></h4></div>
+        <p></p>
+      </div>
+    </div>
+  </div>
+
+  <div class="wimage">
+    <div class="container">
+      <div class="frame_text">
+        <div class="h4_wrapper"><h4></h4></div>
+        <p></p>
+      </div>
+    </div>
+  </div>
+
+  <%# [**] в данном случае ширину контента слайдера зададим с помощью bootstrap класса container %>
+  <div class="pbuttons container">
+
+    <div class="prev but"> <%# здесь класс добавлен, чтобы css-позиционировать див but %>
+      <a href="#" class="prev"> <%# здесь класс добавлен, чтобы можно было отличить ссылку, когда по ней кликаем%>
+        <i class="fa fa-chevron-left" aria-hidden="true"></i>
+      </a>
+    </div>
+
+    <div class="next but">
+      <a href="#" class="next">
+        <i class="fa fa-chevron-right" aria-hidden="true"></i>
+      </a>
+    </div>
+
+  </div>
+
+  <div class="preloader">
+    <div class="spinner">
+      <div class="outer"></div>
+      <div class="inner"></div>
+    </div>
+  </div>
+
+</div>

data/bin/console

@@ -0,0 +1,14 @@
+#!/usr/bin/env ruby
+
+require "bundler/setup"
+require "c80_wslider"
+
+# You can add fixtures and/or initialization code here to make experimenting
+# with your gem easier. You can also use a different console, if you like.
+
+# (If you use this, don't forget to add pry to your Gemfile!)
+# require "pry"
+# Pry.start
+
+require "irb"
+IRB.start

data/bin/setup

@@ -0,0 +1,8 @@
+#!/usr/bin/env bash
+set -euo pipefail
+IFS=$'\n\t'
+set -vx
+
+bundle install
+
+# Do any other automated setup that you need to do here

data/c80_wslider.gemspec

@@ -0,0 +1,26 @@
+# coding: utf-8
+lib = File.expand_path('../lib', __FILE__)
+$LOAD_PATH.unshift(lib) unless $LOAD_PATH.include?(lib)
+require 'c80_wslider/version'
+
+Gem::Specification.new do |spec|
+  spec.name          = "c80_wslider"
+  spec.version       = C80Wslider::VERSION
+  spec.authors       = ["C80609A"]
+  spec.email         = ["c080609a@gmail.com"]
+
+  spec.summary       = %q{Широкий слайдер}
+  spec.description   = %q{Позволяет создавать слайдеры на всю ширину (css background-size) }
+  spec.homepage      = "http://github.com"
+  spec.license       = "MIT"
+
+  spec.files         = `git ls-files -z`.split("\x0").reject { |f| f.match(%r{^(test|spec|features)/}) }
+  spec.bindir        = "exe"
+  spec.executables   = spec.files.grep(%r{^exe/}) { |f| File.basename(f) }
+  spec.require_paths = ["lib"]
+
+  spec.add_development_dependency "bundler", "~> 1.12"
+  spec.add_development_dependency "rake", "~> 10.0"
+  spec.add_dependency 'activesupport', ['>= 3.0.0']
+
+end

data/lib/c80_wslider/engine.rb

@@ -0,0 +1,23 @@
+module C80Wslider
+  class Engine < ::Rails::Engine
+    isolate_namespace C80Wslider
+
+    initializer :c80_wslider_engine do
+      if defined?(ActiveAdmin)
+        ActiveAdmin.application.load_paths += Dir["#{config.root}/app/models/**/"]
+        #ActiveAdmin.application.load_paths += Dir["#{config.root}/app/models/concerns/**/"]
+        ActiveAdmin.application.load_paths += Dir["#{config.root}/app/admin/c80_wslider/**/"]
+        # ActiveAdmin.application.load_paths += Dir["#{config.root}/app/jobs/**/"]
+      end
+    end
+
+    initializer :append_migrations do |app|
+      unless app.root.to_s.match root.to_s
+        config.paths["db/migrate"].expanded.each do |expanded_path|
+          app.config.paths["db/migrate"] << expanded_path
+        end
+      end
+    end
+
+  end
+end

data/lib/c80_wslider/version.rb

@@ -0,0 +1,3 @@
+module C80Wslider
+  VERSION = "0.1.0"
+end

data/lib/c80_wslider.rb

@@ -0,0 +1,8 @@
+require "c80_wslider/version"
+require "c80_wslider/engine"
+
+module C80Wslider
+  def self.table_name_prefix
+    'c80_wslider_'
+  end
+end

metadata

@@ -0,0 +1,109 @@
+--- !ruby/object:Gem::Specification
+name: c80_wslider
+version: !ruby/object:Gem::Version
+  version: 0.1.0
+platform: ruby
+authors:
+- C80609A
+autorequire: 
+bindir: exe
+cert_chain: []
+date: 2016-08-30 00:00:00.000000000 Z
+dependencies:
+- !ruby/object:Gem::Dependency
+  name: bundler
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '1.12'
+  type: :development
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '1.12'
+- !ruby/object:Gem::Dependency
+  name: rake
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '10.0'
+  type: :development
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '10.0'
+- !ruby/object:Gem::Dependency
+  name: activesupport
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: 3.0.0
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: 3.0.0
+description: "Позволяет создавать слайдеры на всю ширину (css background-size) "
+email:
+- c080609a@gmail.com
+executables: []
+extensions: []
+extra_rdoc_files: []
+files:
+- ".gitignore"
+- CODE_OF_CONDUCT.md
+- Gemfile
+- LICENSE.txt
+- README.md
+- Rakefile
+- app/assets/javascripts/c80_wslider.js.coffee
+- app/assets/javascripts/components/pbuttons.js
+- app/assets/javascripts/components/wloader.js
+- app/assets/javascripts/components/wloader/preloader.js
+- app/assets/javascripts/components/wloader/shower.js
+- app/assets/javascripts/wslider.js
+- app/assets/stylesheets/c80_wslider.scss
+- app/assets/stylesheets/c80_wslider/wslider.scss
+- app/assets/stylesheets/c80_wslider/wslider/spinner.scss
+- app/helpers/c80_wslider/application_helper.rb
+- app/views/c80_wslider/_wslider_wrapper.html.erb
+- bin/console
+- bin/setup
+- c80_wslider.gemspec
+- lib/c80_wslider.rb
+- lib/c80_wslider/engine.rb
+- lib/c80_wslider/version.rb
+homepage: http://github.com
+licenses:
+- MIT
+metadata: {}
+post_install_message: 
+rdoc_options: []
+require_paths:
+- lib
+required_ruby_version: !ruby/object:Gem::Requirement
+  requirements:
+  - - ">="
+    - !ruby/object:Gem::Version
+      version: '0'
+required_rubygems_version: !ruby/object:Gem::Requirement
+  requirements:
+  - - ">="
+    - !ruby/object:Gem::Version
+      version: '0'
+requirements: []
+rubyforge_project: 
+rubygems_version: 2.5.1
+signing_key: 
+specification_version: 4
+summary: "Широкий слайдер"
+test_files: []