c80_wslider2 0.1.0.1

checksums.yaml

@@ -0,0 +1,7 @@
+---
+SHA1:
+  metadata.gz: 033a631a1710a529c8a9795f617a7cefc13fa155
+  data.tar.gz: dbaf86107ba97cc752fea6301b5d6aea6a74658f
+SHA512:
+  metadata.gz: f2ca56506981976d29b72285d09595bd3dd1bf8a737567f79db21f6dc86204995322eb6d876f7ef873e66f5d0b99247bbd30483524c57e9e55c89beefd241920
+  data.tar.gz: 89168025fef91ace7184c5a3c9f3850a3cdb5dfdcf798611ac2db52ec81f08aace097dfccdc53ee7010258a1e3914666904a658149bc3d6213e6938868a0bc7d

data/.gitignore

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

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_wslider2.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,41 @@
+# C80Wslider2
+
+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_wslider2`. 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_wslider2'
+```
+
+And then execute:
+
+    $ bundle
+
+Or install it yourself as:
+
+    $ gem install c80_wslider2
+
+## Usage
+
+TODO: Write usage instructions here
+
+## 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_wslider2. 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/admin/c80_wslider2/frames.rb

@@ -0,0 +1,40 @@
+ActiveAdmin.register C80Wslider2::Frame, as: 'Frame' do
+
+  menu :label => 'Фреймы', # TODO_MY:: название пункта меню перенесести в параметры в базу
+       priority: 2,
+       parent: 'Слайдер'# TODO_MY:: название пункта меню перенесести в параметры в базу
+
+  permit_params :title,
+                :image
+
+  # batch_action :destroy, false
+  config.per_page = 100
+  config.sort_order = 'id_asc'
+  before_filter :skip_sidebar!, :only => :index
+
+  index do
+    selectable_column
+    column :title
+    column :image do |frame|
+      if frame.image.present?
+        link_to image_tag(frame.image.thumb_preview), image_path(frame.image.thumb_big), target: '_blank'
+      end
+    end
+    actions
+  end
+
+  form(:html => {:multipart => true}) do |f|
+
+    f.inputs 'Свойства' do
+
+      f.input :title
+      f.input :image,
+               :as => :file,
+               :hint => image_tag(f.object.image.thumb_preview)
+
+    end
+
+    f.actions
+  end
+
+end

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

@@ -0,0 +1,26 @@
+
+var LeftClickIcon = function ($wrapper, onClick) {
+
+    var _html_str = '<div class="container with_left_click_icon white_icon"><div></div></div>'; // TODO_MY:: хардкод white_icon. А что, если я хочу чёрную иконку?
+    var _$html_div = null;
+    var _$wrapper = null;
+    var _onClick = null;
+
+    var _fInit = function ($wrapper, onClick) {
+        _$wrapper = $wrapper;
+        _onClick = onClick;
+    };
+
+    var _fEnableLeftClickIcon = function () {
+        _$html_div = _$wrapper.prepend(_html_str);
+    };
+
+    var _fStartListenClicks = function () {
+        _$html_div.on('click', onClick);
+    };
+
+    _fInit($wrapper,onClick);
+    _fEnableLeftClickIcon();
+    _fStartListenClicks();
+
+};

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

@@ -0,0 +1,16 @@
+// добавляем фичу "изменение background-position-y при скролле"
+
+var Paralaxer = function (_$wimages) {
+
+    var _fInit = function (_$wimages) {
+
+        $(document).on('scroll', function(){
+            var xx = $(this).scrollTop();
+            _$wimages.css('background-position-y', "-"+parseInt(xx/2)+'px');
+        });
+
+    };
+
+    _fInit(_$wimages);
+
+};

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

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

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

@@ -0,0 +1,126 @@
+// механику показа картинки фрейма содержит этот вспомогательный класс
+// класс знает, что имеются два фрейма, один из которых видим, а другой, в это же время, скрыт
+// класс показывает фреймы, жонглирует css-классом shown_right_now
+
+// slider_height передаётся для того, чтобы можно было позиционировать текстовый блок по вертикали
+var Shower = function ($wimages) {
+
+    // ссылка на дивы, в которых отрисовываются картинки
+    // изначально оба дива приходят "чистыми"
+    // В таком случае: берём первый попавшийся див , помещаем в него картинку, делаем его "показанным сейчас"
+    var _$wimages = null;
+
+    // после первого вызова show(), когда дивы перестают быть "чистыми", эта переменная сбросится в false
+    // нужна для того, чтобы при первом вызове взять первый попавшийся див и сделать его "показанным сейчас"
+    var _mark_first_call = true;
+
+    var _fInit = function ($wimages) {
+        _$wimages = $wimages;
+
+        $( window ).resize(_fOnResize);
+
+    };
+
+    var _fOnResize = function () {
+        _fCenterFrameTitle(_$wimages.filter('.shown_right_now'));
+    };
+
+    var _fCenterFrameTitle = function ($div) {
+
+        var $h1 = $div.find('h1');
+        var frame_height = $div.outerHeight();
+        var h1_height = $h1.outerHeight();
+
+        // позиционируем $div_text блок с текстом по вертикали по центру относительно высоты родителя _slider_height
+        var top = (frame_height - h1_height) / 2;
+        $h1.css('top', top + 'px');
+
+    };
+
+    // подставляем текст во фрейм
+    var _fPutTextInFrame = function ($div,props) {
+        //console.log("<_fPutTextInFrame>");
+        //console.log(props); // Object {title: "Оптовая торговля жидкостями для электронных сигарет"}
+        $div.find('h1').text(props["title"]);
+
+        _fCenterFrameTitle($div);
+
+    };
+
+    // низкоуровневый механизм показа картинки с подписями (вызывается только из this.show)
+    var _fShow = function ($div, url, props) {
+        console.log("<shower2._fShow>\t div class:" + $div.attr('class') + ", url: " + url);
+
+        // убираем плавность, возвращаем в начальное состояние
+        $div.removeClass('eased').css('opacity', '0');
+
+        // помещаем в него картинку
+        $div.css('background-image', 'url(' + url + ')');
+
+        // плавно проявляем фрейм
+        $div.addClass('eased').css('opacity','1');
+
+        // помечаем его как "показанный сейчас"
+        $div.addClass('shown_right_now');
+
+        // подставляем текст во фрейм
+        _fPutTextInFrame($div,props);
+
+    };
+
+    // низкоуровневый механизм плавного сокрытия картинки (вызывается только из this.hide)
+    var _fHide = function ($div) {
+        console.log("<shower2._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("<shower2.show>\t Первый вызов.");
+
+            _mark_first_call = false;
+
+            // фиксируем видимый фрейм слайдера (он один из двух имеющихся)
+            //var $fi = $(_$wimages[0]);
+            var $fi = _$wimages.filter('.shown_right_now');
+
+            // покажем картинку с подписями
+            _fShow($fi, url, props);
+
+        }
+
+        // если это не первый вызов show() - значит какой-то фрейм уже показан
+        //
+        else {
+            console.log("<shower2.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);
+
+        }
+
+    };
+
+    _fInit($wimages);
+
+};

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

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

data/app/assets/javascripts/c80_wslider2/wslider2.js

@@ -0,0 +1,103 @@
+'use strict';
+
+var Wslider2 = function (options) {
+
+    //---[ VARS ]-------------------------------------------------------------------------------------------------------
+
+    // добавлена для того, чтобы передавать ссылку на wslider находясь внутри вложенных функций
+    var _this = this;
+
+    // по этим параметрам отрисован слайдер
+    var _options = {
+        parent_node: 'body',
+        height: 100
+    };
+
+    // MODEL: здесь содержится список урлов картинок, которые надо отобразить в слайдере
+    var _images = null;
+
+    // MODEL: здесь содержится список описаний каждой картинки: h4 - крупный текст и p - мелкий
+    var _frames_props = null;
+
+    // 2 дива, в которых отрисовываются картинки (они сменяют друг друга)
+    var _$wimages = null;
+
+    // указатель на текущий фрейм
+    var _current_frame = 0;
+
+    // контейнер, в который упакован слайдер
+    var _$wrapper = null;
+
+    // в ответе за загрузку и показ картинок фрейма (во время загрузки покажет прелодаер)
+    var _wloader = null;
+
+    // добавляет параллакс при скролле
+    var _parallaxer = null;
+
+    // если картинок более 1 - добавляем иконку мышки
+    var _left_click_icon = null;
+
+    //---[ FUNCTIONS ]--------------------------------------------------------------------------------------------------
+
+    // микро-контроллер: меняет переменную _current_frame, управляет Wloader
+    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);
+    };
+
+    // инициализация
+    var _fInit = function (options) {
+
+        // акуализируем параметры слайдера
+        _options = $.extend(_options, options);
+
+        // зафиксируем VIEW: контейнер и дивы, в которых будут жить картинки
+        _$wrapper = $(_options.parent_node).find('.wslider2');
+        _$wimages = _$wrapper.find('div.frame');
+
+        // зафиксируем MODEL: список картинок для отображения
+        _images = _$wrapper.data('images');
+
+        // зафиксируем MODEL: массив свойств картинок (текстовые подписи фреймов), разложенные в том же порядке что и _images
+        _frames_props = _$wrapper.data('props');
+
+        // инициализация механизма загрузки и показа картинок
+        _wloader = new Wloader(
+            _images,
+            _frames_props,
+            _$wimages,
+            _$wrapper
+        );
+
+        // добавляем параллакс
+        _parallaxer = new Paralaxer(_$wimages);
+
+        // если фреймов более 1 - добавляем иконку "кликните левой мышкой для смены кадра"
+        if (_images.length > 1) {
+            _left_click_icon = new LeftClickIcon(_$wrapper, _fNextFrame);
+        }
+
+    };
+
+    var _fStart = function () {
+        _wloader.checkAndShowFrame(_current_frame);
+    };
+
+    //---[ RUN ]--------------------------------------------------------------------------------------------------
+
+    _fInit(options);
+    _fStart();
+
+};

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

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

data/app/assets/stylesheets/c80_wslider2/wslider2.scss

@@ -0,0 +1,85 @@
+div.wslider2 {
+  position: relative;
+
+  div.frame {
+    display: none;
+    position: relative;
+
+    &.shown_right_now {
+
+      position: relative;
+
+      background-repeat: no-repeat;
+      background-position: center center;
+
+      background-size: 100% 100%;
+      background-size: cover;
+
+      height: 100%;
+      height: 100vh;
+
+      width: 100%;
+      display: -ms-flexbox;
+      display: flex;
+      z-index: 1;
+      overflow: hidden;
+
+      align-items: center;
+      justify-content: center;
+      text-align: center;
+
+      -ms-flex-align: center;
+      -ms-flex-pack: center;
+    }
+
+    h1 {
+      position: relative;
+      width: 100%;
+      /*text-shadow: 0 0 5px rgba(0, 0, 0, 0.8);*/
+      z-index: 7;
+    }
+
+    div.fadee {
+      position: absolute;
+      top:0;
+      left:0;
+      bottom:0;
+      right:0;
+      background-color: rgba(0,0,0,0.3);
+      z-index: 6;
+    }
+
+  }
+
+  div.preloader {
+
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    text-align: center;
+    font-size: 20px;
+    background: rgba(0, 0, 0, .4);
+    opacity: 0;
+    display: none;
+    z-index: 2;
+
+    // NOTE:: время синхронизировано с js [preloader.js, qweqwe]
+    -webkit-transition: opacity 1s ease-out;
+    -moz-transition: opacity 1s ease-out;
+    -ms-transition: opacity 1s ease-out;
+    -o-transition: opacity 1s ease-out;
+    transition: opacity 1s ease-out;
+
+    // дополнения к библиотечному, каноничному стилю
+    .spinner {
+      margin: 0 auto;
+      /*width: 35px;
+      height: 35px;*/
+      position: relative;
+    }
+
+  }
+
+}

data/app/assets/stylesheets/c80_wslider2.scss

@@ -0,0 +1,2 @@
+@import "lib/**/*";
+@import "c80_wslider2/**/*";

data/app/assets/stylesheets/lib/spinner_pulse.scss

@@ -0,0 +1,71 @@
+$base-line-height: 24px;
+$white: rgb(255,255,255);
+$off-white: rgba($white, 0.2);
+$spin-duration: 1s;
+$pulse-duration: 750ms;
+
+@keyframes spin {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+@keyframes pulse {
+  50% {
+    background: $white;
+  }
+}
+
+/*html {
+  height: 100%;
+}
+body {
+  @extend html;
+  display: flex;
+  justify-content: space-around;
+  align-items: center;
+  background: #333333;
+}*/
+
+.loading {
+  border-radius: 50%;
+  width: $base-line-height;
+  height: $base-line-height;
+  border: .25rem solid $off-white;
+  border-top-color: $white;
+  animation: spin $spin-duration infinite linear;
+  &--double {
+    border-style: double;
+    border-width: .5rem;
+  }
+}
+
+.loading-pulse {
+  position: relative;
+  width: ($base-line-height / 4);
+  height: $base-line-height;
+  background: $off-white;
+  animation: pulse $pulse-duration infinite;
+  animation-delay: ($pulse-duration / 3);
+  &:before, &:after {
+    content: '';
+    position: absolute;
+    display: block;
+    height: ($base-line-height / 1.5);
+    width: ($base-line-height / 4);
+    background: $off-white;
+    top: 50%;
+    transform: translateY(-50%);
+    animation: pulse $pulse-duration infinite;
+  }
+  &:before {
+    left: -($base-line-height / 2);
+  }
+  &:after {
+    left: ($base-line-height / 2);
+    animation-delay: ($pulse-duration / 1.5);
+  }
+}

data/app/assets/stylesheets/lib/with_left_click_icon.scss

@@ -0,0 +1,59 @@
+@mixin _after {
+  content: "";
+  display: block;
+  position: absolute;
+  width: 50px;
+  height: 50px;
+  z-index: 556;
+
+  opacity: 0.0;
+  -webkit-transition: all 0.8s cubic-bezier(.25,.8,.25,1);
+  -moz-transition: all 0.8s cubic-bezier(.25,.8,.25,1);
+  -ms-transition: all 0.8s cubic-bezier(.25,.8,.25,1);
+  -o-transition: all 0.8s cubic-bezier(.25,.8,.25,1);
+  transition: all 0.8s cubic-bezier(.25,.8,.25,1);
+
+}
+
+.with_left_click_icon {
+  height: 0;
+
+  > div {
+    /*height: 100%;*/ /* NOTE:: рекомендуется устанавливать позицию в custom классах хост приложения */
+    /*top: 67px;*/ /* NOTE:: рекомендуется устанавливать позицию в custom классах хост приложения */
+    
+    width: 80%;
+    z-index: 5556;
+    background-color: rgba(0,0,0,0);
+    cursor: pointer;
+    position: absolute;
+
+    &:after {
+      /*bottom: 0;*/ /* NOTE:: рекомендуется устанавливать позицию в custom классах хост приложения */
+      @include _after;
+      background: transparent url(image_path('left_click_icon.png')) no-repeat 0 0;
+    }
+    
+    &:hover {
+      
+      &:after {
+        opacity: 0.8;
+      }
+      
+    }
+    
+  }
+
+  &.white_icon {
+
+    > div {
+
+      &:after {
+        background: transparent url(image_path('left_click_icon_white.png')) no-repeat 0 0;
+      }
+
+    }
+
+  }
+
+}

data/app/helpers/c80_wslider2/app_helper.rb

@@ -0,0 +1,31 @@
+module C80Wslider2
+  module AppHelper
+
+    def render_wslider2
+
+      # извлечём фреймы
+      frames = C80Wslider2::Frame.all.order('rand()')
+
+      # пути до картинок соберём сюда
+      images = []
+
+      # свойства фреймов (подписи, текст) соберём тут
+      props = []
+
+      # соберём пути
+      frames.each do |frame|
+        images << image_path(frame.image.thumb_big)
+        props << { title: frame.title }
+      end
+      #Rails.logger.debug "[TRACE] <render_wslider2> images: #{images}"
+
+      render :partial => 'c80_wslider2/wslider2',
+             :locals => {
+                 images: images,# ["/uploads/wslider2/thumb_big_photo_23bd.jpg"]
+                 props: props
+             }
+
+    end
+
+  end
+end

data/app/models/c80_wslider2/frame.rb

@@ -0,0 +1,5 @@
+module C80Wslider2
+  class Frame < ActiveRecord::Base
+    mount_uploader :image, FrameUploader
+  end
+end

data/app/models/c80_wslider2/prop.rb

@@ -0,0 +1,4 @@
+module C80Wslider2
+  class Prop < ActiveRecord::Base
+  end
+end

data/app/uploaders/c80_wslider2/frame_uploader.rb

@@ -0,0 +1,85 @@
+module C80Wslider2
+
+  # грузит картинку слайдера
+  class FrameUploader < CarrierWave::Uploader::Base
+
+    include CarrierWave::MiniMagick
+
+    storage :file
+
+    process :resize_to_limit => [1600, 1600]
+
+    version :thumb_big do
+      process :resize_to_big_by_width
+    end
+
+    version :thumb_preview do
+      process :resize_to_preview
+    end
+
+    def store_dir
+      'uploads/wslider2'
+    end
+
+    def filename
+      if original_filename
+        "photo_#{secure_token(4)}.#{file.extension}"
+      end
+    end
+
+    # меням размер оригинальной картинки, подгоняя её к требуемой ширине (высота рассчитается автоматом)
+    def resize_to_big_by_width
+
+      manipulate! do |img|
+
+        # извлекаем ширину и подгоняем высоту
+        w = C80Wslider2::Prop.first.big_width
+        h = calc_height_of_image(w)
+
+        # меняем размер
+        img.resize "#{w}x#{h}<"
+        img = yield(img) if block_given?
+        img
+
+      end
+
+    end
+
+    # пока используется только для показа картинки в админке
+    def resize_to_preview
+      manipulate! do |img|
+
+        w = C80Wslider2::Prop.first.preview_width
+        h = C80Wslider2::Prop.first.preview_height
+
+        img.resize "#{w}x#{h}>"
+        img = yield(img) if block_given?
+        img
+
+      end
+    end
+
+    protected
+
+    def secure_token(length=16)
+      var = :"@#{mounted_as}_secure_token"
+      model.instance_variable_get(var) or model.instance_variable_set(var, SecureRandom.hex(length/2))
+    end
+
+    private
+
+    # рассчитаем высоту картинки, которая получится, когда подгоняем картинку по ширине w
+    def calc_height_of_image(w)
+      model_image = ::MiniMagick::Image.open(model.image.current_path)
+      calc_height(w, model_image["width"], model_image["height"])
+    end
+
+    # подгоняем по ширине, рассчитываем высоту
+    def calc_height(width, original_w, original_h)
+      k = width.to_f/original_w
+      original_h * k
+    end
+
+  end
+
+end

data/app/views/c80_wslider2/_wslider2.html.erb

@@ -0,0 +1,18 @@
+<div class="wslider2" data-images='<%= images.to_json.html_safe %>' data-props='<%= props.to_json.html_safe %>'>
+
+  <div class="frame shown_right_now">
+    <h1></h1>
+    <div class="fadee"></div>
+  </div>
+  <div class="frame">
+    <h1></h1>
+    <div class="fadee"></div>
+  </div>
+
+  <div class="preloader">
+
+    <div class="spinner loading"></div>
+
+  </div>
+
+</div>

data/bin/console

@@ -0,0 +1,14 @@
+#!/usr/bin/env ruby
+
+require "bundler/setup"
+require "c80_wslider2"
+
+# 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_wslider2.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_wslider2/version'
+
+Gem::Specification.new do |spec|
+  spec.name          = "c80_wslider2"
+  spec.version       = C80Wslider2::VERSION
+  spec.authors       = ["C80609A"]
+  spec.email         = ["c080609a@gmail.com"]
+
+  spec.summary       = "Wide screen slider gem, ver 2"
+  spec.description   = "Gem adds wide screen slider to site"
+  spec.homepage      = "https://github.com/c080609a/c80_wslider2"
+  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/db/migrate/20160927090909_c80_wslider2_create_props.rb

@@ -0,0 +1,10 @@
+class C80Wslider2CreateProps < ActiveRecord::Migration
+  def change
+    create_table :c80_wslider2_props, :options => 'COLLATE=utf8_unicode_ci' do |t|
+      t.integer :big_width     # под эту ширину подгоняется картинка, вставляемая в слайдер (высота рассчитаеся автоматом)
+      t.integer :preview_width  # пока используется только для показа картинки в админке
+      t.integer :preview_height # пока используется только для показа картинки в админке
+      t.timestamps null: false
+    end
+  end
+end

data/db/migrate/20160927091010_c80_wslider2_create_frames.rb

@@ -0,0 +1,9 @@
+class C80Wslider2CreateFrames < ActiveRecord::Migration
+  def change
+    create_table :c80_wslider2_frames, :options => 'COLLATE=utf8_unicode_ci' do |t|
+      t.string :image
+      t.string :title
+      t.timestamps null: false
+    end
+  end
+end

data/db/seeds/c80_wslider2_01_fill_props.rb

@@ -0,0 +1,8 @@
+# rake db:seed:c80_wslider2_01_fill_props
+
+C80Wslider2::Prop.delete_all
+C80Wslider2::Prop.create!({
+                               preview_width:250,   # пока используется только для показа картинки в админке
+                               preview_height:164,  # пока используется только для показа картинки в админке
+                               big_width:1600       # под эту ширину подгоняется картинка, вставляемая в слайдер
+                           })

data/lib/c80_wslider2/engine.rb

@@ -0,0 +1,23 @@
+module C80Wslider2
+  class Engine < ::Rails::Engine
+    isolate_namespace C80Wslider2
+
+    initializer :c80_wslider2_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_wslider2/**/"]
+        # 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_wslider2/version.rb

@@ -0,0 +1,3 @@
+module C80Wslider2
+  VERSION = "0.1.0.1"
+end

data/lib/c80_wslider2.rb

@@ -0,0 +1,8 @@
+require "c80_wslider2/version"
+require "c80_wslider2/engine"
+
+module C80Wslider2
+  def self.table_name_prefix
+    'c80_wslider2_'
+  end
+end

metadata

@@ -0,0 +1,120 @@
+--- !ruby/object:Gem::Specification
+name: c80_wslider2
+version: !ruby/object:Gem::Version
+  version: 0.1.0.1
+platform: ruby
+authors:
+- C80609A
+autorequire: 
+bindir: exe
+cert_chain: []
+date: 2016-10-02 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: Gem adds wide screen slider to site
+email:
+- c080609a@gmail.com
+executables: []
+extensions: []
+extra_rdoc_files: []
+files:
+- ".gitignore"
+- CODE_OF_CONDUCT.md
+- Gemfile
+- LICENSE.txt
+- README.md
+- Rakefile
+- app/admin/c80_wslider2/frames.rb
+- app/assets/images/left_click_icon.png
+- app/assets/images/left_click_icon_white.png
+- app/assets/javascripts/c80_wslider2.js.coffee
+- app/assets/javascripts/c80_wslider2/components/wloader.js
+- app/assets/javascripts/c80_wslider2/components/wloader/left_click_icon.js
+- app/assets/javascripts/c80_wslider2/components/wloader/paralaxer.js
+- app/assets/javascripts/c80_wslider2/components/wloader/preloader.js
+- app/assets/javascripts/c80_wslider2/components/wloader/shower.js
+- app/assets/javascripts/c80_wslider2/wslider2.js
+- app/assets/stylesheets/c80_wslider2.scss
+- app/assets/stylesheets/c80_wslider2/wslider2.scss
+- app/assets/stylesheets/lib/spinner_pulse.scss
+- app/assets/stylesheets/lib/with_left_click_icon.scss
+- app/helpers/c80_wslider2/app_helper.rb
+- app/models/c80_wslider2/frame.rb
+- app/models/c80_wslider2/prop.rb
+- app/uploaders/c80_wslider2/frame_uploader.rb
+- app/views/c80_wslider2/_wslider2.html.erb
+- bin/console
+- bin/setup
+- c80_wslider2.gemspec
+- db/migrate/20160927090909_c80_wslider2_create_props.rb
+- db/migrate/20160927091010_c80_wslider2_create_frames.rb
+- db/seeds/c80_wslider2_01_fill_props.rb
+- lib/c80_wslider2.rb
+- lib/c80_wslider2/engine.rb
+- lib/c80_wslider2/version.rb
+homepage: https://github.com/c080609a/c80_wslider2
+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: Wide screen slider gem, ver 2
+test_files: []