aightbox-rails 0.1.1

checksums.yaml

@@ -0,0 +1,7 @@
+---
+SHA1:
+  metadata.gz: 293c0eabcda691b9ecf107083e9fcf46df090087
+  data.tar.gz: 00d3087134534f0ca0f3e419d1a2595c2a7e174f
+SHA512:
+  metadata.gz: 9ca41d19ceaa7745a6c288c199b67f01563f2ab65a120d706b27e04b04d984b69217ffcdf45226fe9ef8349085a4ecde9a659f57d2aa4491b9dfde5e7ed3fb2e
+  data.tar.gz: 2e45fcf567971f11f527c9a376ff197db9dc8728c7e27a87bc44e9027663172f763effba41e82089d46d0830a2c0688a2ea446be34c909201c397925fc5fc9d2

data/Gemfile

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

data/LICENSE.txt

@@ -0,0 +1,8 @@
+/*
+  ----------------------------------------------------------------------------
+  "THE BEER-WARE LICENSE" (Revision 42):
+  <axlwaii@gmail.com> wrote this file. As long as you retain this notice you
+  can do whatever you want with this stuff. If we meet some day, and you think
+  this stuff is worth it, you can buy me a beer in return.
+  ----------------------------------------------------------------------------
+*/

data/README.md

@@ -0,0 +1,62 @@
+# AIGHTbox::Rails
+
+This is a gemified version of https://github.com/axlwaii/jquery.aightbox
+
+![alt tag](http://oi62.tinypic.com/2qtx16q.jpg)
+
+## Installation
+
+Add this line to your application's Gemfile:
+
+    gem 'aightbox-rails', :git => 'git://github.com/axlwaii/aightbox-rails'
+
+And then execute:
+
+    $ bundle install
+
+You need to edit your `app/assets/javascripts/application.js`:
+
+```javascript
+//= require jquery
+//= require aightbox
+```
+
+And your `app/assets/stylesheets/application.css`:
+
+```css
+/*
+ *= require aightbox
+*/
+```
+
+## Usage
+
+Basic html
+```html
+
+<ul>
+  <li><a class="aight" href="big_picture_1.jpg"><img src="thumb_picture_1.jpg"/></a></li>
+  <li><a class="aight" href="big_picture_2.jpg"><img src="thumb_picture_1.jpg"/></a></li>
+  <li><a class="aight" href="big_picture_3.jpg"><img src="thumb_picture_1.jpg"/></a></li>
+  <li><a class="aight" href="big_picture_4.jpg"><img src="thumb_picture_1.jpg"/></a></li>
+</ul>
+
+```
+
+initialize with
+```javascript
+$('.aight').aightbox();
+```
+
+## Further Documention
+Go to https://github.com/axlwaii/jquery.aightbox to get more information 
+
+## Contributing
+
+1. Fork the jquery plugin ( https://github.com/axlwaii/jquery.aightbox )
+2. Create your feature branch (`git checkout -b my-new-feature`)
+3. Commit your changes (`git commit -am 'Add some feature'`)
+4. Push to the branch (`git push origin my-new-feature`)
+5. Create new Pull Request
+
+Changes will go from there to the gem version as soon as possible.

data/Rakefile

@@ -0,0 +1 @@
+require "bundler/gem_tasks"

data/lib/aightbox/rails/version.rb

@@ -0,0 +1,5 @@
+module Aightbox
+  module Rails
+    VERSION = "0.1.1"
+  end
+end

data/lib/aightbox/rails.rb

@@ -0,0 +1,8 @@
+require "aightbox/rails/version"
+
+module Aightbox
+  module Rails
+    class Engine < ::Rails::Engine
+    end
+  end
+end

data/vendor/assets/javascripts/aightbox.js

@@ -0,0 +1,285 @@
+(function($, window, document, undefined) {
+
+    'use strict';
+
+    $.fn.aightbox = function(options) {
+
+        var init,
+            index,
+            setNextImage,
+            setNextGroupImage,
+            getGroupList,
+            firstSetup,
+            $imageLinks,
+            $imageDesc,
+            $backdrop,
+            $wrapper,
+            $container,
+            $currentImage,
+            bindEvents,
+            bindControls,
+            createImageContainer,
+            that,
+            config,
+            template,
+            singleImage = false;
+
+        that = this;
+
+        config = $.extend({
+
+            backdrop: 'aight-backdrop',
+            closeButton: 'aight-close',
+            carousel: false,
+            carouselGroup: true,
+            imageContainer: 'aight-container',
+            imageDescription: 'aight-description',
+            nextButton: 'aight-next',
+            nextCharacter: '>',
+            prevCharacter: '<',
+            prevButton: 'aight-prev',
+            wrapper: 'aight-wrapper'
+
+        }, options);
+
+
+        // @desc basic html structure of the lightbox
+        //       id's are generated from the config data
+
+        template =  '<div id="' + config.backdrop + '"></div>'+
+                    '<div id="' + config.wrapper + '">'+
+                    '<div id="' + config.imageContainer + '">' +
+                    '<a id="' + config.nextButton + '" href="#">'+ config.nextCharacter +'</a>'+
+                    '<a id="' + config.prevButton + '" href="#">' + config.prevCharacter +'</a>'+
+                    '<a id="' + config.closeButton + '" href="#">x</a>'+
+                    '<img src="" alt=""/>' +
+                    '<p id="' + config.imageDescription + '"></p>'+
+                    '</div>' +
+                    '</div>';
+
+
+        // @desc finds the closest 'ul' node to the current image
+        //       returns an array of all link elements inside this node
+        //       returns an empty array if the current image is not in the list clostest to it
+
+        getGroupList = function() {
+            var list = $currentImage.closest('ul').find('a');
+
+            if(list.length > 1 && list.index($currentImage) >= 0) {
+                return list;
+            } else {
+                return [];
+            }
+
+        };
+
+        // @desc sets the next image
+        // @param dir - 'prev' dicreases the index anything else increases it
+
+        setNextImage = function(dir) {
+
+            if(dir === 'prev') {
+                index = index > 0 ? index - 1 : $imageLinks.length - 1;
+            } else {
+                index = index < $imageLinks.length-1 ? index + 1 : 0;
+            }
+
+            $currentImage = $($imageLinks[index]);
+
+        };
+
+        // @desc sets the next image of a group
+        // @param dir - 'prev' dicreases the index anything else increases it
+
+        setNextGroupImage = function(dir) {
+
+            var groupIndex,
+                groupList;
+
+            groupList = getGroupList();
+
+            if(groupList.length > 0) {
+
+                groupIndex = groupList.index($currentImage);
+
+                if(dir === 'prev') {
+                    groupIndex = groupIndex > 0 ? groupIndex - 1 : groupList.length -1;
+                } else {
+                    groupIndex = groupIndex < groupList.length - 1 ? groupIndex + 1 : 0;
+                }
+
+                $currentImage = $(groupList[groupIndex]);
+
+            }
+
+            return $currentImage;
+
+        };
+
+        // @desc sets click events for the lightbox
+        //       get initiated after the first time a link is clicked
+
+        bindControls = function() {
+
+            if(!singleImage) {
+
+                $('#' + config.prevButton).unbind('click').click(function(e){
+                    e.preventDefault();
+
+                    if(config.carouselGroup){
+                        setNextGroupImage('prev');
+                    } else if (config.carousel) {
+                        setNextImage('prev');
+                    }
+
+                    createImageContainer();
+                });
+
+                $('#' + config.nextButton).unbind('click').click(function(e){
+                    e.preventDefault();
+
+                    if(config.carouselGroup){
+                        setNextGroupImage('next');
+                    } else if (config.carousel) {
+                        setNextImage('next');
+                    }
+
+                    createImageContainer();
+
+                });
+
+            }
+
+
+            $('#' + config.closeButton).on('click', function(e){
+
+                e.preventDefault();
+                $wrapper.fadeOut('slow');
+                $backdrop.hide();
+
+            });
+
+
+            $('#' + config.backdrop).unbind('click').click(function(e){
+                e.preventDefault();
+                $wrapper.fadeOut('slow');
+                $backdrop.hide();
+            });
+
+        };
+
+
+        firstSetup = function() {
+
+            $('body').append(template);
+
+            $backdrop  = $('#' + config.backdrop);
+            $wrapper   = $('#' + config.wrapper);
+            $container = $('#' + config.imageContainer);
+            $imageDesc = $('#' + config.imageDescription);
+
+            if($imageLinks.length === 1) {
+                $('#' + config.prevButton).hide();
+                $('#' + config.nextButton).hide();
+                singleImage = true;
+            }
+
+        };
+
+
+        bindEvents = function() {
+
+            $imageLinks.on('click', function(e){
+
+                e.preventDefault();
+
+                var list;
+
+                $currentImage = $(this);
+
+                list = getGroupList();
+
+                if(list.length > 1 ){
+                    $('#' + config.prevButton).show();
+                    $('#' + config.nextButton).show();
+                } else {
+                    $('#' + config.prevButton).hide();
+                    $('#' + config.nextButton).hide();
+                }
+
+                index = $imageLinks.index($currentImage);
+                createImageContainer();
+            });
+
+        };
+
+        createImageContainer = function() {
+
+            var $containerImage = $('#' + config.imageContainer + ' img'),
+                firstRun = false,
+                imgUrl = $currentImage.prop('href'),
+                imgDescription = $currentImage.find('img').prop('alt');
+
+            if($containerImage.length === 0){
+                firstSetup();
+                $('#' + config.imageContainer + ' img').prop('src', imgUrl);
+                $('#' + config.imageContainer + ' img').prop('alt', imgDescription);
+                $('#aight-description').text(imgDescription);
+                firstRun = true;
+            } else {
+                $containerImage.prop('src', imgUrl);
+                $containerImage.prop('alt', imgDescription);
+                $('#aight-description').text(imgDescription);
+            }
+
+            $containerImage = $('#' + config.imageContainer + ' img');
+            $container = $('#' + config.imageContainer);
+
+            if(firstRun){
+
+                bindControls();
+
+                if(getGroupList() <= 1){
+                    $('#' + config.prevButton).hide();
+                    $('#' + config.nextButton).hide();
+                }
+
+            }
+
+            $imageDesc.hide();
+
+            $containerImage.hide();
+            $wrapper.fadeIn('slow');
+            $container.append('<div class="aight-progress small"><div>Loading…</div></div>');
+
+            $containerImage.one('load',function(){
+
+                $('.aight-progress.small').remove();
+                $containerImage.show();
+
+                if(imgDescription !== ''){
+                    $imageDesc.show();
+                }
+
+                $container.animate({
+                    'margin-left':-($containerImage.width()/2),
+                    'margin-top': -($containerImage.height()/2)
+                });
+
+            });
+
+            $backdrop.fadeIn(200);
+
+        };
+
+        init = function() {
+            $imageLinks = $(that.selector);
+            bindEvents();
+        };
+
+        init();
+        return that;
+
+    };
+
+} (jQuery, window, document));

data/vendor/assets/stylesheets/aightbox.css

@@ -0,0 +1,160 @@
+#aight-backdrop {
+  position: fixed;
+  height: 100%;
+  width: 100%;
+  top: 0;
+  left: 0;
+  z-index: 777;
+  display: none;
+  background: rgba(0, 0, 0, 0.4); }
+
+#aight-wrapper {
+  position: relative;
+  top: 0;
+  left: 0;
+  display: none;
+  z-index: 999; }
+  #aight-wrapper * {
+    -webkit-backface-visibility: hidden; }
+
+#aight-container {
+  background: #fff;
+  border: 2px solid #888;
+  padding: 15px;
+  display: block;
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  -moz-box-shadow: 0 0 15px 0px #eee;
+  -webkit-box-shadow: 0 0 15px 0px #eee;
+  box-shadow: 0 0 15px 0px #eee; }
+  #aight-container img {
+    max-height: 100%;
+    max-width: 100%; }
+
+#aight-description {
+  margin: 10px 0 0 0;
+  padding: 0; }
+
+#aight-next, #aight-prev, #aight-close {
+  position: absolute;
+  font-family: 'Helvetica';
+  font-weight: bold;
+  color: #ddd;
+  text-decoration: none; }
+  #aight-next:hover, #aight-prev:hover, #aight-close:hover {
+    color: #fff; }
+
+#aight-next, #aight-prev {
+  font-size: 35px;
+  margin-top: -25px; }
+
+#aight-close {
+  font-size: 25px; }
+
+#aight-next {
+  top: 50%;
+  right: 0;
+  margin-right: -35px; }
+
+#aight-prev {
+  top: 50%;
+  left: 0;
+  margin-left: -35px; }
+
+#aight-close {
+  top: 0;
+  right: 0;
+  margin-right: -25px;
+  margin-top: -25px; }
+
+#aight-preload {
+  display: none; }
+
+@-o-keyframes spin {
+  to {
+    transform: rotate(1turn);
+    -o-transform: rotate(1turn); } }
+
+@-moz-keyframes spin {
+  to {
+    transform: rotate(1turn);
+    -moz-transform: rotate(1turn); } }
+
+@-webkit-keyframes spin {
+  to {
+    transform: rotate(1turn);
+    -webkit-transform: rotate(1turn); } }
+
+@keyframes spin {
+  to {
+    transform: rotate(1turn); } }
+
+.aight-progress {
+  position: relative;
+  display: inline-block;
+  width: 5em;
+  height: 5em;
+  margin: 0 .5em;
+  font-size: 12px;
+  text-indent: 999em;
+  overflow: hidden;
+  animation: spin 1s infinite steps(8);
+  -webkit-animation: spin 1s infinite steps(8);
+  -moz-animation: spin 1s infinite steps(8);
+  -o-animation: spin 1s infinite steps(8); }
+
+.small.aight-progress {
+  font-size: 6px; }
+
+.large.aight-progress {
+  font-size: 24px; }
+
+.aight-progress:before,
+.aight-progress:after,
+.aight-progress > div:before,
+.aight-progress > div:after {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 2.25em;
+  /* (container width - part width)/2  */
+  width: .5em;
+  height: 1.5em;
+  border-radius: .2em;
+  background: #eee;
+  box-shadow: 0 3.5em #eee;
+  /* container height - part height */
+  transform-origin: 50% 2.5em;
+  /* container height / 2 */
+  -moz-transform-origin: 50% 2.5em;
+  /* container height / 2 */
+  -webkit-transform-origin: 50% 2.5em;
+  /* container height / 2 */
+  -o-transform-origin: 50% 2.5em;
+  /* container height / 2 */ }
+
+.aight-progress:before {
+  background: #555; }
+
+.aight-progress:after {
+  transform: rotate(-45deg);
+  -o-transform: rotate(-45deg);
+  -ms-transform: rotate(-45deg);
+  -moz-transform: rotate(-45deg);
+  -webkit-transform: rotate(-45deg);
+  background: #777; }
+
+.aight-progress > div:before {
+  transform: rotate(-90deg);
+  -o-transform: rotate(-90deg);
+  -moz-transform: rotate(-90deg);
+  -webkit-transform: rotate(-90deg);
+  background: #999; }
+
+.aight-progress > div:after {
+  transform: rotate(-135deg);
+  -o-transform: rotate(-135deg);
+  -moz-transform: rotate(-135deg);
+  -webkit-transform: rotate(-135deg);
+  background: #bbb; }

metadata

@@ -0,0 +1,122 @@
+--- !ruby/object:Gem::Specification
+name: aightbox-rails
+version: !ruby/object:Gem::Version
+  version: 0.1.1
+platform: ruby
+authors:
+- Markus Waitl
+autorequire: 
+bindir: bin
+cert_chain: []
+date: 2014-03-18 00:00:00.000000000 Z
+dependencies:
+- !ruby/object:Gem::Dependency
+  name: bundler
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - ~>
+      - !ruby/object:Gem::Version
+        version: '1.5'
+  type: :development
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - ~>
+      - !ruby/object:Gem::Version
+        version: '1.5'
+- !ruby/object:Gem::Dependency
+  name: rake
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - '>='
+      - !ruby/object:Gem::Version
+        version: '0'
+  type: :development
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - '>='
+      - !ruby/object:Gem::Version
+        version: '0'
+- !ruby/object:Gem::Dependency
+  name: rails
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - ~>
+      - !ruby/object:Gem::Version
+        version: '4.0'
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - ~>
+      - !ruby/object:Gem::Version
+        version: '4.0'
+- !ruby/object:Gem::Dependency
+  name: jquery-rails
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - '>='
+      - !ruby/object:Gem::Version
+        version: '0'
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - '>='
+      - !ruby/object:Gem::Version
+        version: '0'
+- !ruby/object:Gem::Dependency
+  name: railties
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - ~>
+      - !ruby/object:Gem::Version
+        version: '4.0'
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - ~>
+      - !ruby/object:Gem::Version
+        version: '4.0'
+description: Display single or group images.
+email:
+- axlwaii@gmail.com
+executables: []
+extensions: []
+extra_rdoc_files: []
+files:
+- Gemfile
+- LICENSE.txt
+- README.md
+- Rakefile
+- lib/aightbox/rails.rb
+- lib/aightbox/rails/version.rb
+- vendor/assets/javascripts/aightbox.js
+- vendor/assets/stylesheets/aightbox.css
+homepage: ''
+licenses:
+- BEERWARE
+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.2.1
+signing_key: 
+specification_version: 4
+summary: Another jQuery Image Gallery Plugin
+test_files: []