blueimp-gallery 0.0.1

checksums.yaml

@@ -0,0 +1,7 @@
+---
+SHA1:
+  metadata.gz: e5a0d430a28bef2ceb7b9240a24437aa1cbcbc3d
+  data.tar.gz: 1f53e45fb498800372c531450f126ae09b34a5b9
+SHA512:
+  metadata.gz: 0a2d5280fcd938595ae29f0b107aaa3ef3ab2715ec8836caffc111f96463dc48492fe44f5d57d198246690753a7a6d196d1b9545f00bbb25d97346ec25f01e7a
+  data.tar.gz: 7a10b4dfd24dcfab97bdcf5fb5538f1e5e633b46fe07b84409db447241e952bb8397b1451cec679a365efe5f3af86f973dfe07dcaf64f69b28d6ca02b3e324c8

data/.gitignore

@@ -0,0 +1,17 @@
+*.gem
+*.rbc
+.bundle
+.config
+.yardoc
+Gemfile.lock
+InstalledFiles
+_yardoc
+coverage
+doc/
+lib/bundler/man
+pkg
+rdoc
+spec/reports
+test/tmp
+test/version_tmp
+tmp

data/CHANGELOG.md

@@ -0,0 +1,3 @@
+## v0.0.1
+
+* Initial release

data/Gemfile

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

data/LICENSE.txt

@@ -0,0 +1,22 @@
+Copyright (c) 2013 Christopher Fernández
+
+MIT License
+
+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,137 @@
+# blueimp Gallery for Rails
+
+blueimp Gallery is an image and video gallery featuring carousel and lightbox gallery with mouse and keyboard navigation, transition effects and more. This amazing plugin was created by [Sebastian Tschan](https://github.com/blueimp).
+
+* blueimp Gallery version 2.7.3
+* Official Website: http://blueimp.github.io/Gallery/
+
+
+## Installation
+
+Add this line to your application's Gemfile:
+
+    gem 'blueimp-gallery'
+
+And then execute:
+
+    $ bundle
+
+Or install it yourself as:
+
+    $ gem install blueimp-gallery
+
+Add this line to your `app/assets/javascripts/application.js`
+
+    //= require blueimp-gallery-all
+
+Add this line to your `app/assets/stylesheets/application.css`
+
+    *= require blueimp-gallery-all
+
+## Usage
+
+### Lightbox
+
+This is a basic example how create a lightbox.
+
+Add the following HTML snippet to your view:
+
+```html
+<div id="blueimp-gallery" class="blueimp-gallery">
+  <div class="slides"></div>
+  <h3 class="title"></h3>
+  <a class="prev">‹</a>
+  <a class="next">›</a>
+  <a class="close">×</a>
+  <a class="play-pause"></a>
+  <ol class="indicator"></ol>
+</div>
+```
+
+Add a list of image links you want to show into your gallery:
+
+
+```html
+<div id="links">
+  <a href="images/photo1.jpg" title="Photo 1">
+      <img src="images/thumb_photo1.jpg" alt="Photo 1">
+  </a>
+  <a href="images/photo2.jpg" title="Photo 2">
+      <img src="images/thumb_photo2.jpg" alt="Photo 2">
+  </a>
+  <a href="images/photo3.jpg" title="Photo 3">
+      <img src="images/thumb_photo3.jpg" alt="Photo 3">
+  </a>
+</div>
+```
+
+Finally add this JavaScript to display the images in your beautiful gallery:
+
+```html
+<script>
+document.getElementById('links').onclick = function (event) {
+  event = event || window.event;
+  var target = event.target || event.srcElement,
+    link = target.src ? target.parentNode : target,
+    options = {index: link, event: event},
+    links = this.getElementsByTagName('a');
+  blueimp.Gallery(links, options);
+};
+</script>
+```
+
+or CoffeeScript if you want to add the script as an asset:
+
+```coffeescript
+document.getElementById("links").onclick = (event) ->
+  event = event or window.event
+  target = event.target or event.srcElement
+  link = (if target.src then target.parentNode else target)
+  options =
+    index: link
+    event: event
+
+  links = @getElementsByTagName("a")
+  blueimp.Gallery links, options
+```
+
+### Carousel
+
+If you want a Carousel gallery, replace the html snippet with:
+
+```html
+<div id="blueimp-gallery-carousel" class="blueimp-gallery blueimp-gallery-carousel">
+    <div class="slides"></div>
+    <h3 class="title"></h3>
+    <a class="prev">‹</a>
+    <a class="next">›</a>
+    <a class="play-pause"></a>
+    <ol class="indicator"></ol>
+</div>
+```
+
+And add this JavaScript:
+
+```html
+<script>
+blueimp.Gallery(
+  document.getElementById('links').getElementsByTagName('a'),
+  {
+    container: '#blueimp-gallery-carousel',
+    carousel: true
+  }
+);
+</script>
+```
+
+## More Features
+
+blueimp Gallery has a lot more features and options as adding control keys, fullscreen, slide interval, etc. The complete documentation is on the [blueimp Gallery site](https://github.com/blueimp/Gallery).
+
+## Contributing
+
+1. Fork it
+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

data/Rakefile

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

data/blueimp-gallery.gemspec

@@ -0,0 +1,24 @@
+# coding: utf-8
+lib = File.expand_path('../lib', __FILE__)
+$LOAD_PATH.unshift(lib) unless $LOAD_PATH.include?(lib)
+require 'blueimp/gallery/version'
+
+Gem::Specification.new do |spec|
+  spec.name          = "blueimp-gallery"
+  spec.version       = Blueimp::Gallery::VERSION
+  spec.authors       = ["Christopher Fernández"]
+  spec.email         = ["fernandez.chl@gmail.com"]
+  spec.description   = %q{blueimp Gallery for Rails}
+  spec.summary       = %q{blueimp Gallery for Rails}
+  spec.homepage      = "https://github.com/Phifo/blueimp-gallery"
+  spec.license       = "MIT"
+
+  spec.files         = `git ls-files`.split($/)
+  spec.executables   = spec.files.grep(%r{^bin/}) { |f| File.basename(f) }
+  spec.test_files    = spec.files.grep(%r{^(test|spec|features)/})
+  spec.require_paths = ["lib"]
+
+  spec.add_development_dependency "bundler", "~> 1.3"
+  spec.add_development_dependency "rake"
+  spec.add_development_dependency "rspec"
+end

data/lib/blueimp/gallery/engine.rb

@@ -0,0 +1,7 @@
+module StaticAssets
+  class Engine < ::Rails::Engine
+    initializer 'blueimp-gallery.load_static_assets' do |app|
+      app.middleware.use ::ActionDispatch::Static, "#{root}/vendor"
+    end
+  end
+end

data/lib/blueimp/gallery/version.rb

@@ -0,0 +1,5 @@
+module Blueimp
+  module Gallery
+    VERSION = "0.0.1"
+  end
+end

data/lib/blueimp/gallery.rb

@@ -0,0 +1,8 @@
+require "blueimp/gallery/version"
+require "blueimp/gallery/engine"
+
+module Blueimp
+  module Gallery
+    
+  end
+end

data/vendor/assets/images/error.svg

@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="64" height="64">
+	<circle cx="32" cy="32" r="25" stroke="red" stroke-width="7" fill="black" fill-opacity="0.2"/>
+	<rect x="28" y="7" width="8" height="50" fill="red" transform="rotate(45, 32, 32)"/>
+</svg>

data/vendor/assets/images/play-pause.svg

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="30" height="15">
+	<polygon points="2,1 2,14 13,7" stroke="black" stroke-width="1" fill="white"/>
+	<rect x="17" y="2" width="4" height="11" stroke="black" stroke-width="1" fill="white"/>
+	<rect x="24" y="2" width="4" height="11" stroke="black" stroke-width="1" fill="white"/>
+</svg>

data/vendor/assets/images/video-play.svg

@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="64" height="64">
+	<circle cx="32" cy="32" r="25" stroke="white" stroke-width="7" fill="black" fill-opacity="0.2"/>
+	<polygon points="26,22 26,42 43,32" fill="white"/>
+</svg>

data/vendor/assets/javascripts/blueimp-gallery-all.js

@@ -0,0 +1,5 @@
+//= require blueimp-gallery
+//= require blueimp-gallery-fullscreen
+//= require blueimp-gallery-indicator
+//= require blueimp-gallery-video
+//= require jquery.blueimp-gallery

data/vendor/assets/javascripts/blueimp-gallery-fullscreen.js

@@ -0,0 +1,85 @@
+/*
+ * blueimp Gallery Fullscreen JS 1.0.0
+ * https://github.com/blueimp/Gallery
+ *
+ * Copyright 2013, Sebastian Tschan
+ * https://blueimp.net
+ *
+ * Licensed under the MIT license:
+ * http://www.opensource.org/licenses/MIT
+ */
+
+/*global define, window, document */
+
+(function (factory) {
+    'use strict';
+    if (typeof define === 'function' && define.amd) {
+        // Register as an anonymous AMD module:
+        define([
+            './blueimp-helper',
+            './blueimp-gallery'
+        ], factory);
+    } else {
+        // Browser globals:
+        factory(
+            window.blueimp.helper || window.jQuery,
+            window.blueimp.Gallery
+        );
+    }
+}(function ($, Gallery) {
+    'use strict';
+
+    $.extend(Gallery.prototype.options, {
+        // Defines if the gallery should open in fullscreen mode:
+        fullScreen: false
+    });
+
+    var initialize = Gallery.prototype.initialize,
+        close = Gallery.prototype.close;
+
+    $.extend(Gallery.prototype, {
+
+        getFullScreenElement: function () {
+            return document.fullscreenElement ||
+                document.webkitFullscreenElement ||
+                document.mozFullScreenElement;
+        },
+
+        requestFullScreen: function (element) {
+            if (element.requestFullscreen) {
+                element.requestFullscreen();
+            } else if (element.webkitRequestFullscreen) {
+                element.webkitRequestFullscreen();
+            } else if (element.mozRequestFullScreen) {
+                element.mozRequestFullScreen();
+            }
+        },
+
+        exitFullScreen: function () {
+            if (document.exitFullscreen) {
+                document.exitFullscreen();
+            } else if (document.webkitCancelFullScreen) {
+                document.webkitCancelFullScreen();
+            } else if (document.mozCancelFullScreen) {
+                document.mozCancelFullScreen();
+            }
+        },
+
+        initialize: function () {
+            initialize.call(this);
+            if (this.options.fullScreen && !this.getFullScreenElement()) {
+                this.requestFullScreen(this.container[0]);
+            }
+        },
+
+        close: function () {
+            if (this.getFullScreenElement() === this.container[0]) {
+                this.exitFullScreen();
+            }
+            close.call(this);
+        }
+
+    });
+
+    return Gallery;
+}));

data/vendor/assets/javascripts/blueimp-gallery-indicator.js

@@ -0,0 +1,153 @@
+/*
+ * blueimp Gallery Indicator JS 1.0.0
+ * https://github.com/blueimp/Gallery
+ *
+ * Copyright 2013, Sebastian Tschan
+ * https://blueimp.net
+ *
+ * Licensed under the MIT license:
+ * http://www.opensource.org/licenses/MIT
+ */
+
+/*global define, window, document */
+
+(function (factory) {
+    'use strict';
+    if (typeof define === 'function' && define.amd) {
+        // Register as an anonymous AMD module:
+        define([
+            './blueimp-helper',
+            './blueimp-gallery'
+        ], factory);
+    } else {
+        // Browser globals:
+        factory(
+            window.blueimp.helper || window.jQuery,
+            window.blueimp.Gallery
+        );
+    }
+}(function ($, Gallery) {
+    'use strict';
+
+    $.extend(Gallery.prototype.options, {
+        // The tag name, Id, element or querySelector of the indicator container:
+        indicatorContainer: 'ol',
+        // The class for the active indicator:
+        activeIndicatorClass: 'active',
+        // The list object property (or data attribute) with the thumbnail URL,
+        // used as alternative to a thumbnail child element:
+        thumbnailProperty: 'thumbnail',
+        // Defines if the gallery indicators should display a thumbnail:
+        thumbnailIndicators: true
+    });
+
+    var initSlides = Gallery.prototype.initSlides,
+        addSlide = Gallery.prototype.addSlide,
+        resetSlides = Gallery.prototype.resetSlides,
+        handleClick = Gallery.prototype.handleClick,
+        handleSlide = Gallery.prototype.handleSlide,
+        close = Gallery.prototype.close;
+
+    $.extend(Gallery.prototype, {
+
+        createIndicator: function (obj) {
+            var indicator = this.indicatorPrototype.cloneNode(false),
+                title = this.getItemProperty(obj, this.options.titleProperty),
+                thumbnailProperty = this.options.thumbnailProperty,
+                thumbnailUrl,
+                thumbnail;
+            if (this.options.thumbnailIndicators) {
+                thumbnail = obj.getElementsByTagName && $(obj).find('img')[0];
+                if (thumbnail) {
+                    thumbnailUrl = thumbnail.src;
+                } else if (thumbnailProperty) {
+                    thumbnailUrl = this.getItemProperty(obj, thumbnailProperty);
+                }
+                if (thumbnailUrl) {
+                    indicator.style.backgroundImage = 'url("' + thumbnailUrl + '")';
+                }
+            }
+            if (title) {
+                indicator.title = title;
+            }
+            return indicator;
+        },
+
+        addIndicator: function (index) {
+            if (this.indicatorContainer.length) {
+                var indicator = this.createIndicator(this.list[index]);
+                indicator.setAttribute('data-index', index);
+                this.indicatorContainer[0].appendChild(indicator);
+                this.indicators.push(indicator);
+            }
+        },
+
+        setActiveIndicator: function (index) {
+            if (this.indicators) {
+                if (this.activeIndicator) {
+                    this.activeIndicator
+                        .removeClass(this.options.activeIndicatorClass);
+                }
+                this.activeIndicator = $(this.indicators[index]);
+                this.activeIndicator
+                    .addClass(this.options.activeIndicatorClass);
+            }
+        },
+
+        initSlides: function (reload) {
+            if (!reload) {
+                this.indicatorContainer = this.container.find(
+                    this.options.indicatorContainer
+                );
+                if (this.indicatorContainer.length) {
+                    this.indicatorPrototype = document.createElement('li');
+                    this.indicators = this.indicatorContainer[0].children;
+                }
+            }
+            initSlides.call(this, reload);
+        },
+
+        addSlide: function (index) {
+            addSlide.call(this, index);
+            this.addIndicator(index);
+        },
+
+        resetSlides: function () {
+            resetSlides.call(this);
+            this.indicatorContainer.empty();
+            this.indicators = [];
+        },
+
+        handleClick: function (event) {
+            var target = event.target || event.srcElement,
+                parent = target.parentNode;
+            if (parent === this.indicatorContainer[0]) {
+                // Click on indicator element
+                this.preventDefault(event);
+                this.slide(this.getNodeIndex(target));
+            } else if (parent.parentNode === this.indicatorContainer[0]) {
+                // Click on indicator child element
+                this.preventDefault(event);
+                this.slide(this.getNodeIndex(parent));
+            } else {
+                return handleClick.call(this, event);
+            }
+        },
+
+        handleSlide: function (index) {
+            handleSlide.call(this, index);
+            this.setActiveIndicator(index);
+        },
+
+        close: function () {
+            if (this.activeIndicator) {
+                this.activeIndicator
+                    .removeClass(this.options.activeIndicatorClass);
+            }
+            close.call(this);
+        }
+
+    });
+
+    return Gallery;
+}));

data/vendor/assets/javascripts/blueimp-gallery-video.js

@@ -0,0 +1,156 @@
+/*
+ * blueimp Gallery Video Factory JS 1.0.0
+ * https://github.com/blueimp/Gallery
+ *
+ * Copyright 2013, Sebastian Tschan
+ * https://blueimp.net
+ *
+ * Licensed under the MIT license:
+ * http://www.opensource.org/licenses/MIT
+ */
+
+/*global define, window, document */
+
+(function (factory) {
+    'use strict';
+    if (typeof define === 'function' && define.amd) {
+        // Register as an anonymous AMD module:
+        define([
+            './blueimp-helper',
+            './blueimp-gallery'
+        ], factory);
+    } else {
+        // Browser globals:
+        factory(
+            window.blueimp.helper || window.jQuery,
+            window.blueimp.Gallery
+        );
+    }
+}(function ($, Gallery) {
+    'use strict';
+
+    $.extend(Gallery.prototype.options, {
+        // The class for video content elements:
+        videoContentClass: 'video-content',
+        // The class for video when it is loading:
+        videoLoadingClass: 'video-loading',
+        // The class for video when it is playing:
+        videoPlayingClass: 'video-playing',
+        // The list object property (or data attribute) for the video poster URL:
+        videoPosterProperty: 'poster',
+        // The list object property (or data attribute) for the video sources array:
+        videoSourcesProperty: 'sources'
+    });
+
+    Gallery.prototype.videoFactory = function (obj, callback) {
+        var that = this,
+            options = this.options,
+            videoContainerNode = this.elementPrototype.cloneNode(false),
+            videoContainer = $(videoContainerNode),
+            errorArgs = [{
+                type: 'error',
+                target: videoContainerNode
+            }],
+            video = document.createElement('video'),
+            url = this.getItemProperty(obj, options.urlProperty),
+            type = this.getItemProperty(obj, options.typeProperty),
+            title = this.getItemProperty(obj, options.titleProperty),
+            posterUrl = this.getItemProperty(obj, options.videoPosterProperty),
+            posterImage,
+            sources = this.getItemProperty(
+                obj,
+                options.videoSourcesProperty
+            ),
+            source,
+            playMediaControl,
+            isLoading,
+            hasControls;
+        videoContainer.addClass(options.videoContentClass);
+        if (title) {
+            videoContainerNode.title = title;
+        }
+        if (video.canPlayType) {
+            if (url && type && video.canPlayType(type)) {
+                video.src = url;
+            } else if (sources) {
+                if (typeof sources === 'string') {
+                    sources = $.parseJSON(sources);
+                }
+                while (sources && sources.length) {
+                    source = sources.shift();
+                    url = this.getItemProperty(source, options.urlProperty);
+                    type = this.getItemProperty(source, options.typeProperty);
+                    if (url && type && video.canPlayType(type)) {
+                        video.src = url;
+                        break;
+                    }
+                }
+            }
+        }
+        if (posterUrl) {
+            video.setAttribute('poster', posterUrl);
+            posterImage = this.imagePrototype.cloneNode(false);
+            $(posterImage).addClass(options.toggleClass);
+            posterImage.src = posterUrl;
+            posterImage.draggable = false;
+            videoContainerNode.appendChild(posterImage);
+        }
+        playMediaControl = document.createElement('a');
+        playMediaControl.setAttribute('target', '_blank');
+        playMediaControl.setAttribute('download', title);
+        playMediaControl.href = url;
+        if (video.src) {
+            video.controls = true;
+            $(video)
+                .on('error', function () {
+                    that.setTimeout(callback, errorArgs);
+                })
+                .on('pause', function () {
+                    isLoading = false;
+                    videoContainer
+                        .removeClass(that.options.videoLoadingClass)
+                        .removeClass(that.options.videoPlayingClass);
+                    if (hasControls) {
+                        that.container.addClass(that.options.controlsClass);
+                    }
+                    if (that.interval) {
+                        that.play();
+                    }
+                })
+                .on('playing', function () {
+                    isLoading = false;
+                    videoContainer
+                        .removeClass(that.options.videoLoadingClass)
+                        .addClass(that.options.videoPlayingClass);
+                    if (that.container.hasClass(that.options.controlsClass)) {
+                        hasControls = true;
+                        that.container.removeClass(that.options.controlsClass);
+                    } else {
+                        hasControls = false;
+                    }
+                })
+                .on('play', function () {
+                    window.clearTimeout(that.timeout);
+                    isLoading = true;
+                    videoContainer.addClass(that.options.videoLoadingClass);
+                });
+            $(playMediaControl).on('click', function (event) {
+                event.preventDefault();
+                if (isLoading) {
+                    video.pause();
+                } else {
+                    video.play();
+                }
+            });
+            videoContainerNode.appendChild(video);
+        }
+        videoContainerNode.appendChild(playMediaControl);
+        this.setTimeout(callback, [{
+            type: 'load',
+            target: videoContainerNode
+        }]);
+        return videoContainerNode;
+    };
+
+    return Gallery;
+}));