commit 977cf087247601566fc3ca55e4c2b8d70d5f2337 Author: Bohung Date: Thu Jun 17 23:45:19 2021 +0800 Create Custom gallery plugin. diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..de5d954 --- /dev/null +++ b/.gitignore @@ -0,0 +1,8 @@ +.bundle/ +log/*.log +pkg/ +test/dummy/db/*.sqlite3 +test/dummy/db/*.sqlite3-journal +test/dummy/log/*.log +test/dummy/tmp/ +test/dummy/.sass-cache diff --git a/Gemfile b/Gemfile new file mode 100644 index 0000000..a5fcaa2 --- /dev/null +++ b/Gemfile @@ -0,0 +1,14 @@ +source "https://rubygems.org" + +# Declare your gem's dependencies in custom_gallery.gemspec. +# Bundler will treat runtime dependencies like base dependencies, and +# development dependencies will be added by default to the :development group. +gemspec + +# Declare any dependencies that are still in development here instead of in +# your gemspec. These might include edge Rails or gems from your path or +# Git. Remember to move these dependencies to your gemspec before releasing +# your gem to rubygems.org. + +# To use debugger +# gem 'debugger' diff --git a/Gemfile.lock b/Gemfile.lock new file mode 100644 index 0000000..2e7e0cd --- /dev/null +++ b/Gemfile.lock @@ -0,0 +1,104 @@ +PATH + remote: . + specs: + custom_gallery (0.0.1) + mongoid (= 4.0.0.beta1) + rails (~> 4.1.0.rc2) + +GEM + remote: https://rubygems.org/ + specs: + actionmailer (4.1.0) + actionpack (= 4.1.0) + actionview (= 4.1.0) + mail (~> 2.5.4) + actionpack (4.1.0) + actionview (= 4.1.0) + activesupport (= 4.1.0) + rack (~> 1.5.2) + rack-test (~> 0.6.2) + actionview (4.1.0) + activesupport (= 4.1.0) + builder (~> 3.1) + erubis (~> 2.7.0) + activemodel (4.1.0) + activesupport (= 4.1.0) + builder (~> 3.1) + activerecord (4.1.0) + activemodel (= 4.1.0) + activesupport (= 4.1.0) + arel (~> 5.0.0) + activesupport (4.1.0) + i18n (~> 0.6, >= 0.6.9) + json (~> 1.7, >= 1.7.7) + minitest (~> 5.1) + thread_safe (~> 0.1) + tzinfo (~> 1.1) + arel (5.0.1.20140414130214) + bson (2.2.2) + builder (3.2.2) + connection_pool (2.0.0) + erubis (2.7.0) + hike (1.2.3) + i18n (0.6.9) + json (1.8.1) + mail (2.5.4) + mime-types (~> 1.16) + treetop (~> 1.4.8) + mime-types (1.25.1) + minitest (5.3.3) + mongoid (4.0.0.beta1) + activemodel (>= 4.0.0) + moped (~> 2.0.beta6) + origin (~> 2.1) + tzinfo (>= 0.3.37) + moped (2.0.0.rc1) + bson (~> 2.2) + connection_pool (~> 2.0) + optionable (~> 0.2.0) + multi_json (1.9.3) + optionable (0.2.0) + origin (2.1.1) + polyglot (0.3.4) + rack (1.5.2) + rack-test (0.6.2) + rack (>= 1.0) + rails (4.1.0) + actionmailer (= 4.1.0) + actionpack (= 4.1.0) + actionview (= 4.1.0) + activemodel (= 4.1.0) + activerecord (= 4.1.0) + activesupport (= 4.1.0) + bundler (>= 1.3.0, < 2.0) + railties (= 4.1.0) + sprockets-rails (~> 2.0) + railties (4.1.0) + actionpack (= 4.1.0) + activesupport (= 4.1.0) + rake (>= 0.8.7) + thor (>= 0.18.1, < 2.0) + rake (10.3.1) + sprockets (2.12.1) + hike (~> 1.2) + multi_json (~> 1.0) + rack (~> 1.0) + tilt (~> 1.1, != 1.3.0) + sprockets-rails (2.1.3) + actionpack (>= 3.0) + activesupport (>= 3.0) + sprockets (~> 2.8) + thor (0.19.1) + thread_safe (0.3.3) + tilt (1.4.1) + treetop (1.4.15) + polyglot + polyglot (>= 0.3.1) + tzinfo (1.1.0) + thread_safe (~> 0.1) + +PLATFORMS + ruby + +DEPENDENCIES + custom_gallery! diff --git a/MIT-LICENSE b/MIT-LICENSE new file mode 100644 index 0000000..ea966ec --- /dev/null +++ b/MIT-LICENSE @@ -0,0 +1,20 @@ +Copyright 2014 YOURNAME + +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. diff --git a/README.rdoc b/README.rdoc new file mode 100644 index 0000000..c0009f6 --- /dev/null +++ b/README.rdoc @@ -0,0 +1,6 @@ += CustomGallery + +This project rocks and uses MIT-LICENSE. + + +### 20190116 jason Join edit \ No newline at end of file diff --git a/Rakefile b/Rakefile new file mode 100644 index 0000000..0ddcc68 --- /dev/null +++ b/Rakefile @@ -0,0 +1,32 @@ +begin + require 'bundler/setup' +rescue LoadError + puts 'You must `gem install bundler` and `bundle install` to run rake tasks' +end + +require 'rdoc/task' + +RDoc::Task.new(:rdoc) do |rdoc| + rdoc.rdoc_dir = 'rdoc' + rdoc.title = 'CustomGallery' + rdoc.options << '--line-numbers' + rdoc.rdoc_files.include('README.rdoc') + rdoc.rdoc_files.include('lib/**/*.rb') +end + + + + +Bundler::GemHelper.install_tasks + +require 'rake/testtask' + +Rake::TestTask.new(:test) do |t| + t.libs << 'lib' + t.libs << 'test' + t.pattern = 'test/**/*_test.rb' + t.verbose = false +end + + +task default: :test diff --git a/app/assets/images/custom_gallery/.gitkeep b/app/assets/images/custom_gallery/.gitkeep new file mode 100644 index 0000000..e69de29 diff --git a/app/assets/images/custom_gallery/.keep b/app/assets/images/custom_gallery/.keep new file mode 100644 index 0000000..e69de29 diff --git a/app/assets/images/custom_gallery/default.jpg b/app/assets/images/custom_gallery/default.jpg new file mode 100644 index 0000000..1a90afb Binary files /dev/null and b/app/assets/images/custom_gallery/default.jpg differ diff --git a/app/assets/images/custom_gallery/nodata.jpg b/app/assets/images/custom_gallery/nodata.jpg new file mode 100644 index 0000000..d3c857b Binary files /dev/null and b/app/assets/images/custom_gallery/nodata.jpg differ diff --git a/app/assets/images/custom_gallery/pbar-ani.gif b/app/assets/images/custom_gallery/pbar-ani.gif new file mode 100644 index 0000000..6edd174 Binary files /dev/null and b/app/assets/images/custom_gallery/pbar-ani.gif differ diff --git a/app/assets/images/custom_gallery/slidelistbg.png b/app/assets/images/custom_gallery/slidelistbg.png new file mode 100644 index 0000000..8d468d0 Binary files /dev/null and b/app/assets/images/custom_gallery/slidelistbg.png differ diff --git a/app/assets/images/custom_gallery/slidenav.png b/app/assets/images/custom_gallery/slidenav.png new file mode 100644 index 0000000..79fd32e Binary files /dev/null and b/app/assets/images/custom_gallery/slidenav.png differ diff --git a/app/assets/images/custom_gallery/slidetitlebg.png b/app/assets/images/custom_gallery/slidetitlebg.png new file mode 100644 index 0000000..f6de34e Binary files /dev/null and b/app/assets/images/custom_gallery/slidetitlebg.png differ diff --git a/app/assets/images/custom_gallery/slideui.gif b/app/assets/images/custom_gallery/slideui.gif new file mode 100644 index 0000000..8d16d90 Binary files /dev/null and b/app/assets/images/custom_gallery/slideui.gif differ diff --git a/app/assets/images/custom_gallery/upicon.png b/app/assets/images/custom_gallery/upicon.png new file mode 100644 index 0000000..0a16ebe Binary files /dev/null and b/app/assets/images/custom_gallery/upicon.png differ diff --git a/app/assets/images/custom_gallery/uploadbg.gif b/app/assets/images/custom_gallery/uploadbg.gif new file mode 100644 index 0000000..e5fac42 Binary files /dev/null and b/app/assets/images/custom_gallery/uploadbg.gif differ diff --git a/app/assets/images/custom_gallery/uppt.png b/app/assets/images/custom_gallery/uppt.png new file mode 100644 index 0000000..b1c0db0 Binary files /dev/null and b/app/assets/images/custom_gallery/uppt.png differ diff --git a/app/assets/images/custom_gallery/upsep.png b/app/assets/images/custom_gallery/upsep.png new file mode 100644 index 0000000..314f8ac Binary files /dev/null and b/app/assets/images/custom_gallery/upsep.png differ diff --git a/app/assets/images/jquery.minicolors.png b/app/assets/images/jquery.minicolors.png new file mode 100644 index 0000000..bccc201 Binary files /dev/null and b/app/assets/images/jquery.minicolors.png differ diff --git a/app/assets/javascripts/cropper.js b/app/assets/javascripts/cropper.js new file mode 100644 index 0000000..b449513 --- /dev/null +++ b/app/assets/javascripts/cropper.js @@ -0,0 +1,3566 @@ +/*! + * Cropper.js v1.5.5 + * https://fengyuanchen.github.io/cropperjs + * + * Copyright 2015-present Chen Fengyuan + * Released under the MIT license + * + * Date: 2019-08-04T02:26:31.160Z + */ + +(function (global, factory) { + typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() : + typeof define === 'function' && define.amd ? define(factory) : + (global = global || self, global.Cropper = factory()); +}(this, function () { 'use strict'; + + function _typeof(obj) { + if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { + _typeof = function (obj) { + return typeof obj; + }; + } else { + _typeof = function (obj) { + return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; + }; + } + + return _typeof(obj); + } + + function _classCallCheck(instance, Constructor) { + if (!(instance instanceof Constructor)) { + throw new TypeError("Cannot call a class as a function"); + } + } + + function _defineProperties(target, props) { + for (var i = 0; i < props.length; i++) { + var descriptor = props[i]; + descriptor.enumerable = descriptor.enumerable || false; + descriptor.configurable = true; + if ("value" in descriptor) descriptor.writable = true; + Object.defineProperty(target, descriptor.key, descriptor); + } + } + + function _createClass(Constructor, protoProps, staticProps) { + if (protoProps) _defineProperties(Constructor.prototype, protoProps); + if (staticProps) _defineProperties(Constructor, staticProps); + return Constructor; + } + + function _toConsumableArray(arr) { + return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _nonIterableSpread(); + } + + function _arrayWithoutHoles(arr) { + if (Array.isArray(arr)) { + for (var i = 0, arr2 = new Array(arr.length); i < arr.length; i++) arr2[i] = arr[i]; + + return arr2; + } + } + + function _iterableToArray(iter) { + if (Symbol.iterator in Object(iter) || Object.prototype.toString.call(iter) === "[object Arguments]") return Array.from(iter); + } + + function _nonIterableSpread() { + throw new TypeError("Invalid attempt to spread non-iterable instance"); + } + + var IS_BROWSER = typeof window !== 'undefined' && typeof window.document !== 'undefined'; + var WINDOW = IS_BROWSER ? window : {}; + var IS_TOUCH_DEVICE = IS_BROWSER ? 'ontouchstart' in WINDOW.document.documentElement : false; + var HAS_POINTER_EVENT = IS_BROWSER ? 'PointerEvent' in WINDOW : false; + var NAMESPACE = 'cropper'; // Actions + + var ACTION_ALL = 'all'; + var ACTION_CROP = 'crop'; + var ACTION_MOVE = 'move'; + var ACTION_ZOOM = 'zoom'; + var ACTION_EAST = 'e'; + var ACTION_WEST = 'w'; + var ACTION_SOUTH = 's'; + var ACTION_NORTH = 'n'; + var ACTION_NORTH_EAST = 'ne'; + var ACTION_NORTH_WEST = 'nw'; + var ACTION_SOUTH_EAST = 'se'; + var ACTION_SOUTH_WEST = 'sw'; // Classes + + var CLASS_CROP = "".concat(NAMESPACE, "-crop"); + var CLASS_DISABLED = "".concat(NAMESPACE, "-disabled"); + var CLASS_HIDDEN = "".concat(NAMESPACE, "-hidden"); + var CLASS_HIDE = "".concat(NAMESPACE, "-hide"); + var CLASS_INVISIBLE = "".concat(NAMESPACE, "-invisible"); + var CLASS_MODAL = "".concat(NAMESPACE, "-modal"); + var CLASS_MOVE = "".concat(NAMESPACE, "-move"); // Data keys + + var DATA_ACTION = "".concat(NAMESPACE, "Action"); + var DATA_PREVIEW = "".concat(NAMESPACE, "Preview"); // Drag modes + + var DRAG_MODE_CROP = 'crop'; + var DRAG_MODE_MOVE = 'move'; + var DRAG_MODE_NONE = 'none'; // Events + + var EVENT_CROP = 'crop'; + var EVENT_CROP_END = 'cropend'; + var EVENT_CROP_MOVE = 'cropmove'; + var EVENT_CROP_START = 'cropstart'; + var EVENT_DBLCLICK = 'dblclick'; + var EVENT_TOUCH_START = IS_TOUCH_DEVICE ? 'touchstart' : 'mousedown'; + var EVENT_TOUCH_MOVE = IS_TOUCH_DEVICE ? 'touchmove' : 'mousemove'; + var EVENT_TOUCH_END = IS_TOUCH_DEVICE ? 'touchend touchcancel' : 'mouseup'; + var EVENT_POINTER_DOWN = HAS_POINTER_EVENT ? 'pointerdown' : EVENT_TOUCH_START; + var EVENT_POINTER_MOVE = HAS_POINTER_EVENT ? 'pointermove' : EVENT_TOUCH_MOVE; + var EVENT_POINTER_UP = HAS_POINTER_EVENT ? 'pointerup pointercancel' : EVENT_TOUCH_END; + var EVENT_READY = 'ready'; + var EVENT_RESIZE = 'resize'; + var EVENT_WHEEL = 'wheel'; + var EVENT_ZOOM = 'zoom'; // Mime types + + var MIME_TYPE_JPEG = 'image/jpeg'; // RegExps + + var REGEXP_ACTIONS = /^e|w|s|n|se|sw|ne|nw|all|crop|move|zoom$/; + var REGEXP_DATA_URL = /^data:/; + var REGEXP_DATA_URL_JPEG = /^data:image\/jpeg;base64,/; + var REGEXP_TAG_NAME = /^img|canvas$/i; // Misc + // Inspired by the default width and height of a canvas element. + + var MIN_CONTAINER_WIDTH = 200; + var MIN_CONTAINER_HEIGHT = 100; + + var DEFAULTS = { + // Define the view mode of the cropper + viewMode: 0, + // 0, 1, 2, 3 + // Define the dragging mode of the cropper + dragMode: DRAG_MODE_CROP, + // 'crop', 'move' or 'none' + // Define the initial aspect ratio of the crop box + initialAspectRatio: NaN, + // Define the aspect ratio of the crop box + aspectRatio: NaN, + // An object with the previous cropping result data + data: null, + // A selector for adding extra containers to preview + preview: '', + // Re-render the cropper when resize the window + responsive: true, + // Restore the cropped area after resize the window + restore: true, + // Check if the current image is a cross-origin image + checkCrossOrigin: true, + // Check the current image's Exif Orientation information + checkOrientation: true, + // Show the black modal + modal: true, + // Show the dashed lines for guiding + guides: true, + // Show the center indicator for guiding + center: true, + // Show the white modal to highlight the crop box + highlight: true, + // Show the grid background + background: true, + // Enable to crop the image automatically when initialize + autoCrop: true, + // Define the percentage of automatic cropping area when initializes + autoCropArea: 0.8, + // Enable to move the image + movable: true, + // Enable to rotate the image + rotatable: true, + // Enable to scale the image + scalable: true, + // Enable to zoom the image + zoomable: true, + // Enable to zoom the image by dragging touch + zoomOnTouch: true, + // Enable to zoom the image by wheeling mouse + zoomOnWheel: true, + // Define zoom ratio when zoom the image by wheeling mouse + wheelZoomRatio: 0.1, + // Enable to move the crop box + cropBoxMovable: true, + // Enable to resize the crop box + cropBoxResizable: true, + // Toggle drag mode between "crop" and "move" when click twice on the cropper + toggleDragModeOnDblclick: true, + // Size limitation + minCanvasWidth: 0, + minCanvasHeight: 0, + minCropBoxWidth: 0, + minCropBoxHeight: 0, + minContainerWidth: 200, + minContainerHeight: 100, + // Shortcuts of events + ready: null, + cropstart: null, + cropmove: null, + cropend: null, + crop: null, + zoom: null + }; + + var TEMPLATE = '
' + '
' + '
' + '
' + '
' + '
' + '' + '' + '' + '' + '' + '' + '' + '' + '' + '' + '' + '' + '' + '' + '' + '' + '' + '
' + '
'; + + /** + * Check if the given value is not a number. + */ + + var isNaN = Number.isNaN || WINDOW.isNaN; + /** + * Check if the given value is a number. + * @param {*} value - The value to check. + * @returns {boolean} Returns `true` if the given value is a number, else `false`. + */ + + function isNumber(value) { + return typeof value === 'number' && !isNaN(value); + } + /** + * Check if the given value is a positive number. + * @param {*} value - The value to check. + * @returns {boolean} Returns `true` if the given value is a positive number, else `false`. + */ + + var isPositiveNumber = function isPositiveNumber(value) { + return value > 0 && value < Infinity; + }; + /** + * Check if the given value is undefined. + * @param {*} value - The value to check. + * @returns {boolean} Returns `true` if the given value is undefined, else `false`. + */ + + function isUndefined(value) { + return typeof value === 'undefined'; + } + /** + * Check if the given value is an object. + * @param {*} value - The value to check. + * @returns {boolean} Returns `true` if the given value is an object, else `false`. + */ + + function isObject(value) { + return _typeof(value) === 'object' && value !== null; + } + var hasOwnProperty = Object.prototype.hasOwnProperty; + /** + * Check if the given value is a plain object. + * @param {*} value - The value to check. + * @returns {boolean} Returns `true` if the given value is a plain object, else `false`. + */ + + function isPlainObject(value) { + if (!isObject(value)) { + return false; + } + + try { + var _constructor = value.constructor; + var prototype = _constructor.prototype; + return _constructor && prototype && hasOwnProperty.call(prototype, 'isPrototypeOf'); + } catch (error) { + return false; + } + } + /** + * Check if the given value is a function. + * @param {*} value - The value to check. + * @returns {boolean} Returns `true` if the given value is a function, else `false`. + */ + + function isFunction(value) { + return typeof value === 'function'; + } + var slice = Array.prototype.slice; + /** + * Convert array-like or iterable object to an array. + * @param {*} value - The value to convert. + * @returns {Array} Returns a new array. + */ + + function toArray(value) { + return Array.from ? Array.from(value) : slice.call(value); + } + /** + * Iterate the given data. + * @param {*} data - The data to iterate. + * @param {Function} callback - The process function for each element. + * @returns {*} The original data. + */ + + function forEach(data, callback) { + if (data && isFunction(callback)) { + if (Array.isArray(data) || isNumber(data.length) + /* array-like */ + ) { + toArray(data).forEach(function (value, key) { + callback.call(data, value, key, data); + }); + } else if (isObject(data)) { + Object.keys(data).forEach(function (key) { + callback.call(data, data[key], key, data); + }); + } + } + + return data; + } + /** + * Extend the given object. + * @param {*} target - The target object to extend. + * @param {*} args - The rest objects for merging to the target object. + * @returns {Object} The extended object. + */ + + var assign = Object.assign || function assign(target) { + for (var _len = arguments.length, args = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) { + args[_key - 1] = arguments[_key]; + } + + if (isObject(target) && args.length > 0) { + args.forEach(function (arg) { + if (isObject(arg)) { + Object.keys(arg).forEach(function (key) { + target[key] = arg[key]; + }); + } + }); + } + + return target; + }; + var REGEXP_DECIMALS = /\.\d*(?:0|9){12}\d*$/; + /** + * Normalize decimal number. + * Check out {@link http://0.30000000000000004.com/} + * @param {number} value - The value to normalize. + * @param {number} [times=100000000000] - The times for normalizing. + * @returns {number} Returns the normalized number. + */ + + function normalizeDecimalNumber(value) { + var times = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 100000000000; + return REGEXP_DECIMALS.test(value) ? Math.round(value * times) / times : value; + } + var REGEXP_SUFFIX = /^width|height|left|top|marginLeft|marginTop$/; + /** + * Apply styles to the given element. + * @param {Element} element - The target element. + * @param {Object} styles - The styles for applying. + */ + + function setStyle(element, styles) { + var style = element.style; + forEach(styles, function (value, property) { + if (REGEXP_SUFFIX.test(property) && isNumber(value)) { + value = "".concat(value, "px"); + } + + style[property] = value; + }); + } + /** + * Check if the given element has a special class. + * @param {Element} element - The element to check. + * @param {string} value - The class to search. + * @returns {boolean} Returns `true` if the special class was found. + */ + + function hasClass(element, value) { + return element.classList ? element.classList.contains(value) : element.className.indexOf(value) > -1; + } + /** + * Add classes to the given element. + * @param {Element} element - The target element. + * @param {string} value - The classes to be added. + */ + + function addClass(element, value) { + if (!value) { + return; + } + + if (isNumber(element.length)) { + forEach(element, function (elem) { + addClass(elem, value); + }); + return; + } + + if (element.classList) { + element.classList.add(value); + return; + } + + var className = element.className.trim(); + + if (!className) { + element.className = value; + } else if (className.indexOf(value) < 0) { + element.className = "".concat(className, " ").concat(value); + } + } + /** + * Remove classes from the given element. + * @param {Element} element - The target element. + * @param {string} value - The classes to be removed. + */ + + function removeClass(element, value) { + if (!value) { + return; + } + + if (isNumber(element.length)) { + forEach(element, function (elem) { + removeClass(elem, value); + }); + return; + } + + if (element.classList) { + element.classList.remove(value); + return; + } + + if (element.className.indexOf(value) >= 0) { + element.className = element.className.replace(value, ''); + } + } + /** + * Add or remove classes from the given element. + * @param {Element} element - The target element. + * @param {string} value - The classes to be toggled. + * @param {boolean} added - Add only. + */ + + function toggleClass(element, value, added) { + if (!value) { + return; + } + + if (isNumber(element.length)) { + forEach(element, function (elem) { + toggleClass(elem, value, added); + }); + return; + } // IE10-11 doesn't support the second parameter of `classList.toggle` + + + if (added) { + addClass(element, value); + } else { + removeClass(element, value); + } + } + var REGEXP_CAMEL_CASE = /([a-z\d])([A-Z])/g; + /** + * Transform the given string from camelCase to kebab-case + * @param {string} value - The value to transform. + * @returns {string} The transformed value. + */ + + function toParamCase(value) { + return value.replace(REGEXP_CAMEL_CASE, '$1-$2').toLowerCase(); + } + /** + * Get data from the given element. + * @param {Element} element - The target element. + * @param {string} name - The data key to get. + * @returns {string} The data value. + */ + + function getData(element, name) { + if (isObject(element[name])) { + return element[name]; + } + + if (element.dataset) { + return element.dataset[name]; + } + + return element.getAttribute("data-".concat(toParamCase(name))); + } + /** + * Set data to the given element. + * @param {Element} element - The target element. + * @param {string} name - The data key to set. + * @param {string} data - The data value. + */ + + function setData(element, name, data) { + if (isObject(data)) { + element[name] = data; + } else if (element.dataset) { + element.dataset[name] = data; + } else { + element.setAttribute("data-".concat(toParamCase(name)), data); + } + } + /** + * Remove data from the given element. + * @param {Element} element - The target element. + * @param {string} name - The data key to remove. + */ + + function removeData(element, name) { + if (isObject(element[name])) { + try { + delete element[name]; + } catch (error) { + element[name] = undefined; + } + } else if (element.dataset) { + // #128 Safari not allows to delete dataset property + try { + delete element.dataset[name]; + } catch (error) { + element.dataset[name] = undefined; + } + } else { + element.removeAttribute("data-".concat(toParamCase(name))); + } + } + var REGEXP_SPACES = /\s\s*/; + + var onceSupported = function () { + var supported = false; + + if (IS_BROWSER) { + var once = false; + + var listener = function listener() {}; + + var options = Object.defineProperty({}, 'once', { + get: function get() { + supported = true; + return once; + }, + + /** + * This setter can fix a `TypeError` in strict mode + * {@link https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Errors/Getter_only} + * @param {boolean} value - The value to set + */ + set: function set(value) { + once = value; + } + }); + WINDOW.addEventListener('test', listener, options); + WINDOW.removeEventListener('test', listener, options); + } + + return supported; + }(); + /** + * Remove event listener from the target element. + * @param {Element} element - The event target. + * @param {string} type - The event type(s). + * @param {Function} listener - The event listener. + * @param {Object} options - The event options. + */ + + + function removeListener(element, type, listener) { + var options = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : {}; + var handler = listener; + type.trim().split(REGEXP_SPACES).forEach(function (event) { + if (!onceSupported) { + var listeners = element.listeners; + + if (listeners && listeners[event] && listeners[event][listener]) { + handler = listeners[event][listener]; + delete listeners[event][listener]; + + if (Object.keys(listeners[event]).length === 0) { + delete listeners[event]; + } + + if (Object.keys(listeners).length === 0) { + delete element.listeners; + } + } + } + + element.removeEventListener(event, handler, options); + }); + } + /** + * Add event listener to the target element. + * @param {Element} element - The event target. + * @param {string} type - The event type(s). + * @param {Function} listener - The event listener. + * @param {Object} options - The event options. + */ + + function addListener(element, type, listener) { + var options = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : {}; + var _handler = listener; + type.trim().split(REGEXP_SPACES).forEach(function (event) { + if (options.once && !onceSupported) { + var _element$listeners = element.listeners, + listeners = _element$listeners === void 0 ? {} : _element$listeners; + + _handler = function handler() { + delete listeners[event][listener]; + element.removeEventListener(event, _handler, options); + + for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) { + args[_key2] = arguments[_key2]; + } + + listener.apply(element, args); + }; + + if (!listeners[event]) { + listeners[event] = {}; + } + + if (listeners[event][listener]) { + element.removeEventListener(event, listeners[event][listener], options); + } + + listeners[event][listener] = _handler; + element.listeners = listeners; + } + + element.addEventListener(event, _handler, options); + }); + } + /** + * Dispatch event on the target element. + * @param {Element} element - The event target. + * @param {string} type - The event type(s). + * @param {Object} data - The additional event data. + * @returns {boolean} Indicate if the event is default prevented or not. + */ + + function dispatchEvent(element, type, data) { + var event; // Event and CustomEvent on IE9-11 are global objects, not constructors + + if (isFunction(Event) && isFunction(CustomEvent)) { + event = new CustomEvent(type, { + detail: data, + bubbles: true, + cancelable: true + }); + } else { + event = document.createEvent('CustomEvent'); + event.initCustomEvent(type, true, true, data); + } + + return element.dispatchEvent(event); + } + /** + * Get the offset base on the document. + * @param {Element} element - The target element. + * @returns {Object} The offset data. + */ + + function getOffset(element) { + var box = element.getBoundingClientRect(); + return { + left: box.left + (window.pageXOffset - document.documentElement.clientLeft), + top: box.top + (window.pageYOffset - document.documentElement.clientTop) + }; + } + var location = WINDOW.location; + var REGEXP_ORIGINS = /^(\w+:)\/\/([^:/?#]*):?(\d*)/i; + /** + * Check if the given URL is a cross origin URL. + * @param {string} url - The target URL. + * @returns {boolean} Returns `true` if the given URL is a cross origin URL, else `false`. + */ + + function isCrossOriginURL(url) { + var parts = url.match(REGEXP_ORIGINS); + return parts !== null && (parts[1] !== location.protocol || parts[2] !== location.hostname || parts[3] !== location.port); + } + /** + * Add timestamp to the given URL. + * @param {string} url - The target URL. + * @returns {string} The result URL. + */ + + function addTimestamp(url) { + var timestamp = "timestamp=".concat(new Date().getTime()); + return url + (url.indexOf('?') === -1 ? '?' : '&') + timestamp; + } + /** + * Get transforms base on the given object. + * @param {Object} obj - The target object. + * @returns {string} A string contains transform values. + */ + + function getTransforms(_ref) { + var rotate = _ref.rotate, + scaleX = _ref.scaleX, + scaleY = _ref.scaleY, + translateX = _ref.translateX, + translateY = _ref.translateY; + var values = []; + + if (isNumber(translateX) && translateX !== 0) { + values.push("translateX(".concat(translateX, "px)")); + } + + if (isNumber(translateY) && translateY !== 0) { + values.push("translateY(".concat(translateY, "px)")); + } // Rotate should come first before scale to match orientation transform + + + if (isNumber(rotate) && rotate !== 0) { + values.push("rotate(".concat(rotate, "deg)")); + } + + if (isNumber(scaleX) && scaleX !== 1) { + values.push("scaleX(".concat(scaleX, ")")); + } + + if (isNumber(scaleY) && scaleY !== 1) { + values.push("scaleY(".concat(scaleY, ")")); + } + + var transform = values.length ? values.join(' ') : 'none'; + return { + WebkitTransform: transform, + msTransform: transform, + transform: transform + }; + } + /** + * Get the max ratio of a group of pointers. + * @param {string} pointers - The target pointers. + * @returns {number} The result ratio. + */ + + function getMaxZoomRatio(pointers) { + var pointers2 = assign({}, pointers); + var ratios = []; + forEach(pointers, function (pointer, pointerId) { + delete pointers2[pointerId]; + forEach(pointers2, function (pointer2) { + var x1 = Math.abs(pointer.startX - pointer2.startX); + var y1 = Math.abs(pointer.startY - pointer2.startY); + var x2 = Math.abs(pointer.endX - pointer2.endX); + var y2 = Math.abs(pointer.endY - pointer2.endY); + var z1 = Math.sqrt(x1 * x1 + y1 * y1); + var z2 = Math.sqrt(x2 * x2 + y2 * y2); + var ratio = (z2 - z1) / z1; + ratios.push(ratio); + }); + }); + ratios.sort(function (a, b) { + return Math.abs(a) < Math.abs(b); + }); + return ratios[0]; + } + /** + * Get a pointer from an event object. + * @param {Object} event - The target event object. + * @param {boolean} endOnly - Indicates if only returns the end point coordinate or not. + * @returns {Object} The result pointer contains start and/or end point coordinates. + */ + + function getPointer(_ref2, endOnly) { + var pageX = _ref2.pageX, + pageY = _ref2.pageY; + var end = { + endX: pageX, + endY: pageY + }; + return endOnly ? end : assign({ + startX: pageX, + startY: pageY + }, end); + } + /** + * Get the center point coordinate of a group of pointers. + * @param {Object} pointers - The target pointers. + * @returns {Object} The center point coordinate. + */ + + function getPointersCenter(pointers) { + var pageX = 0; + var pageY = 0; + var count = 0; + forEach(pointers, function (_ref3) { + var startX = _ref3.startX, + startY = _ref3.startY; + pageX += startX; + pageY += startY; + count += 1; + }); + pageX /= count; + pageY /= count; + return { + pageX: pageX, + pageY: pageY + }; + } + /** + * Get the max sizes in a rectangle under the given aspect ratio. + * @param {Object} data - The original sizes. + * @param {string} [type='contain'] - The adjust type. + * @returns {Object} The result sizes. + */ + + function getAdjustedSizes(_ref4) // or 'cover' + { + var aspectRatio = _ref4.aspectRatio, + height = _ref4.height, + width = _ref4.width; + var type = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'contain'; + var isValidWidth = isPositiveNumber(width); + var isValidHeight = isPositiveNumber(height); + + if (isValidWidth && isValidHeight) { + var adjustedWidth = height * aspectRatio; + + if (type === 'contain' && adjustedWidth > width || type === 'cover' && adjustedWidth < width) { + height = width / aspectRatio; + } else { + width = height * aspectRatio; + } + } else if (isValidWidth) { + height = width / aspectRatio; + } else if (isValidHeight) { + width = height * aspectRatio; + } + + return { + width: width, + height: height + }; + } + /** + * Get the new sizes of a rectangle after rotated. + * @param {Object} data - The original sizes. + * @returns {Object} The result sizes. + */ + + function getRotatedSizes(_ref5) { + var width = _ref5.width, + height = _ref5.height, + degree = _ref5.degree; + degree = Math.abs(degree) % 180; + + if (degree === 90) { + return { + width: height, + height: width + }; + } + + var arc = degree % 90 * Math.PI / 180; + var sinArc = Math.sin(arc); + var cosArc = Math.cos(arc); + var newWidth = width * cosArc + height * sinArc; + var newHeight = width * sinArc + height * cosArc; + return degree > 90 ? { + width: newHeight, + height: newWidth + } : { + width: newWidth, + height: newHeight + }; + } + /** + * Get a canvas which drew the given image. + * @param {HTMLImageElement} image - The image for drawing. + * @param {Object} imageData - The image data. + * @param {Object} canvasData - The canvas data. + * @param {Object} options - The options. + * @returns {HTMLCanvasElement} The result canvas. + */ + + function getSourceCanvas(image, _ref6, _ref7, _ref8) { + var imageAspectRatio = _ref6.aspectRatio, + imageNaturalWidth = _ref6.naturalWidth, + imageNaturalHeight = _ref6.naturalHeight, + _ref6$rotate = _ref6.rotate, + rotate = _ref6$rotate === void 0 ? 0 : _ref6$rotate, + _ref6$scaleX = _ref6.scaleX, + scaleX = _ref6$scaleX === void 0 ? 1 : _ref6$scaleX, + _ref6$scaleY = _ref6.scaleY, + scaleY = _ref6$scaleY === void 0 ? 1 : _ref6$scaleY; + var aspectRatio = _ref7.aspectRatio, + naturalWidth = _ref7.naturalWidth, + naturalHeight = _ref7.naturalHeight; + var _ref8$fillColor = _ref8.fillColor, + fillColor = _ref8$fillColor === void 0 ? 'transparent' : _ref8$fillColor, + _ref8$imageSmoothingE = _ref8.imageSmoothingEnabled, + imageSmoothingEnabled = _ref8$imageSmoothingE === void 0 ? true : _ref8$imageSmoothingE, + _ref8$imageSmoothingQ = _ref8.imageSmoothingQuality, + imageSmoothingQuality = _ref8$imageSmoothingQ === void 0 ? 'low' : _ref8$imageSmoothingQ, + _ref8$maxWidth = _ref8.maxWidth, + maxWidth = _ref8$maxWidth === void 0 ? Infinity : _ref8$maxWidth, + _ref8$maxHeight = _ref8.maxHeight, + maxHeight = _ref8$maxHeight === void 0 ? Infinity : _ref8$maxHeight, + _ref8$minWidth = _ref8.minWidth, + minWidth = _ref8$minWidth === void 0 ? 0 : _ref8$minWidth, + _ref8$minHeight = _ref8.minHeight, + minHeight = _ref8$minHeight === void 0 ? 0 : _ref8$minHeight; + var canvas = document.createElement('canvas'); + var context = canvas.getContext('2d'); + var maxSizes = getAdjustedSizes({ + aspectRatio: aspectRatio, + width: maxWidth, + height: maxHeight + }); + var minSizes = getAdjustedSizes({ + aspectRatio: aspectRatio, + width: minWidth, + height: minHeight + }, 'cover'); + var width = Math.min(maxSizes.width, Math.max(minSizes.width, naturalWidth)); + var height = Math.min(maxSizes.height, Math.max(minSizes.height, naturalHeight)); // Note: should always use image's natural sizes for drawing as + // imageData.naturalWidth === canvasData.naturalHeight when rotate % 180 === 90 + + var destMaxSizes = getAdjustedSizes({ + aspectRatio: imageAspectRatio, + width: maxWidth, + height: maxHeight + }); + var destMinSizes = getAdjustedSizes({ + aspectRatio: imageAspectRatio, + width: minWidth, + height: minHeight + }, 'cover'); + var destWidth = Math.min(destMaxSizes.width, Math.max(destMinSizes.width, imageNaturalWidth)); + var destHeight = Math.min(destMaxSizes.height, Math.max(destMinSizes.height, imageNaturalHeight)); + var params = [-destWidth / 2, -destHeight / 2, destWidth, destHeight]; + canvas.width = normalizeDecimalNumber(width); + canvas.height = normalizeDecimalNumber(height); + context.fillStyle = fillColor; + context.fillRect(0, 0, width, height); + context.save(); + context.translate(width / 2, height / 2); + context.rotate(rotate * Math.PI / 180); + context.scale(scaleX, scaleY); + context.imageSmoothingEnabled = imageSmoothingEnabled; + context.imageSmoothingQuality = imageSmoothingQuality; + context.drawImage.apply(context, [image].concat(_toConsumableArray(params.map(function (param) { + return Math.floor(normalizeDecimalNumber(param)); + })))); + context.restore(); + return canvas; + } + var fromCharCode = String.fromCharCode; + /** + * Get string from char code in data view. + * @param {DataView} dataView - The data view for read. + * @param {number} start - The start index. + * @param {number} length - The read length. + * @returns {string} The read result. + */ + + function getStringFromCharCode(dataView, start, length) { + var str = ''; + length += start; + + for (var i = start; i < length; i += 1) { + str += fromCharCode(dataView.getUint8(i)); + } + + return str; + } + var REGEXP_DATA_URL_HEAD = /^data:.*,/; + /** + * Transform Data URL to array buffer. + * @param {string} dataURL - The Data URL to transform. + * @returns {ArrayBuffer} The result array buffer. + */ + + function dataURLToArrayBuffer(dataURL) { + var base64 = dataURL.replace(REGEXP_DATA_URL_HEAD, ''); + var binary = atob(base64); + var arrayBuffer = new ArrayBuffer(binary.length); + var uint8 = new Uint8Array(arrayBuffer); + forEach(uint8, function (value, i) { + uint8[i] = binary.charCodeAt(i); + }); + return arrayBuffer; + } + /** + * Transform array buffer to Data URL. + * @param {ArrayBuffer} arrayBuffer - The array buffer to transform. + * @param {string} mimeType - The mime type of the Data URL. + * @returns {string} The result Data URL. + */ + + function arrayBufferToDataURL(arrayBuffer, mimeType) { + var chunks = []; // Chunk Typed Array for better performance (#435) + + var chunkSize = 8192; + var uint8 = new Uint8Array(arrayBuffer); + + while (uint8.length > 0) { + // XXX: Babel's `toConsumableArray` helper will throw error in IE or Safari 9 + // eslint-disable-next-line prefer-spread + chunks.push(fromCharCode.apply(null, toArray(uint8.subarray(0, chunkSize)))); + uint8 = uint8.subarray(chunkSize); + } + + return "data:".concat(mimeType, ";base64,").concat(btoa(chunks.join(''))); + } + /** + * Get orientation value from given array buffer. + * @param {ArrayBuffer} arrayBuffer - The array buffer to read. + * @returns {number} The read orientation value. + */ + + function resetAndGetOrientation(arrayBuffer) { + var dataView = new DataView(arrayBuffer); + var orientation; // Ignores range error when the image does not have correct Exif information + + try { + var littleEndian; + var app1Start; + var ifdStart; // Only handle JPEG image (start by 0xFFD8) + + if (dataView.getUint8(0) === 0xFF && dataView.getUint8(1) === 0xD8) { + var length = dataView.byteLength; + var offset = 2; + + while (offset + 1 < length) { + if (dataView.getUint8(offset) === 0xFF && dataView.getUint8(offset + 1) === 0xE1) { + app1Start = offset; + break; + } + + offset += 1; + } + } + + if (app1Start) { + var exifIDCode = app1Start + 4; + var tiffOffset = app1Start + 10; + + if (getStringFromCharCode(dataView, exifIDCode, 4) === 'Exif') { + var endianness = dataView.getUint16(tiffOffset); + littleEndian = endianness === 0x4949; + + if (littleEndian || endianness === 0x4D4D + /* bigEndian */ + ) { + if (dataView.getUint16(tiffOffset + 2, littleEndian) === 0x002A) { + var firstIFDOffset = dataView.getUint32(tiffOffset + 4, littleEndian); + + if (firstIFDOffset >= 0x00000008) { + ifdStart = tiffOffset + firstIFDOffset; + } + } + } + } + } + + if (ifdStart) { + var _length = dataView.getUint16(ifdStart, littleEndian); + + var _offset; + + var i; + + for (i = 0; i < _length; i += 1) { + _offset = ifdStart + i * 12 + 2; + + if (dataView.getUint16(_offset, littleEndian) === 0x0112 + /* Orientation */ + ) { + // 8 is the offset of the current tag's value + _offset += 8; // Get the original orientation value + + orientation = dataView.getUint16(_offset, littleEndian); // Override the orientation with its default value + + dataView.setUint16(_offset, 1, littleEndian); + break; + } + } + } + } catch (error) { + orientation = 1; + } + + return orientation; + } + /** + * Parse Exif Orientation value. + * @param {number} orientation - The orientation to parse. + * @returns {Object} The parsed result. + */ + + function parseOrientation(orientation) { + var rotate = 0; + var scaleX = 1; + var scaleY = 1; + + switch (orientation) { + // Flip horizontal + case 2: + scaleX = -1; + break; + // Rotate left 180° + + case 3: + rotate = -180; + break; + // Flip vertical + + case 4: + scaleY = -1; + break; + // Flip vertical and rotate right 90° + + case 5: + rotate = 90; + scaleY = -1; + break; + // Rotate right 90° + + case 6: + rotate = 90; + break; + // Flip horizontal and rotate right 90° + + case 7: + rotate = 90; + scaleX = -1; + break; + // Rotate left 90° + + case 8: + rotate = -90; + break; + + default: + } + + return { + rotate: rotate, + scaleX: scaleX, + scaleY: scaleY + }; + } + + var render = { + render: function render() { + this.initContainer(); + this.initCanvas(); + this.initCropBox(); + this.renderCanvas(); + + if (this.cropped) { + this.renderCropBox(); + } + }, + initContainer: function initContainer() { + var element = this.element, + options = this.options, + container = this.container, + cropper = this.cropper; + addClass(cropper, CLASS_HIDDEN); + removeClass(element, CLASS_HIDDEN); + var containerData = { + width: Math.max(container.offsetWidth, Number(options.minContainerWidth) || 200), + height: Math.max(container.offsetHeight, Number(options.minContainerHeight) || 100) + }; + this.containerData = containerData; + setStyle(cropper, { + width: containerData.width, + height: containerData.height + }); + addClass(element, CLASS_HIDDEN); + removeClass(cropper, CLASS_HIDDEN); + }, + // Canvas (image wrapper) + initCanvas: function initCanvas() { + var containerData = this.containerData, + imageData = this.imageData; + var viewMode = this.options.viewMode; + var rotated = Math.abs(imageData.rotate) % 180 === 90; + var naturalWidth = rotated ? imageData.naturalHeight : imageData.naturalWidth; + var naturalHeight = rotated ? imageData.naturalWidth : imageData.naturalHeight; + var aspectRatio = naturalWidth / naturalHeight; + var canvasWidth = containerData.width; + var canvasHeight = containerData.height; + + if (containerData.height * aspectRatio > containerData.width) { + if (viewMode === 3) { + canvasWidth = containerData.height * aspectRatio; + } else { + canvasHeight = containerData.width / aspectRatio; + } + } else if (viewMode === 3) { + canvasHeight = containerData.width / aspectRatio; + } else { + canvasWidth = containerData.height * aspectRatio; + } + + var canvasData = { + aspectRatio: aspectRatio, + naturalWidth: naturalWidth, + naturalHeight: naturalHeight, + width: canvasWidth, + height: canvasHeight + }; + canvasData.left = (containerData.width - canvasWidth) / 2; + canvasData.top = (containerData.height - canvasHeight) / 2; + canvasData.oldLeft = canvasData.left; + canvasData.oldTop = canvasData.top; + this.canvasData = canvasData; + this.limited = viewMode === 1 || viewMode === 2; + this.limitCanvas(true, true); + this.initialImageData = assign({}, imageData); + this.initialCanvasData = assign({}, canvasData); + }, + limitCanvas: function limitCanvas(sizeLimited, positionLimited) { + var options = this.options, + containerData = this.containerData, + canvasData = this.canvasData, + cropBoxData = this.cropBoxData; + var viewMode = options.viewMode; + var aspectRatio = canvasData.aspectRatio; + var cropped = this.cropped && cropBoxData; + + if (sizeLimited) { + var minCanvasWidth = Number(options.minCanvasWidth) || 0; + var minCanvasHeight = Number(options.minCanvasHeight) || 0; + + if (viewMode > 1) { + minCanvasWidth = Math.max(minCanvasWidth, containerData.width); + minCanvasHeight = Math.max(minCanvasHeight, containerData.height); + + if (viewMode === 3) { + if (minCanvasHeight * aspectRatio > minCanvasWidth) { + minCanvasWidth = minCanvasHeight * aspectRatio; + } else { + minCanvasHeight = minCanvasWidth / aspectRatio; + } + } + } else if (viewMode > 0) { + if (minCanvasWidth) { + minCanvasWidth = Math.max(minCanvasWidth, cropped ? cropBoxData.width : 0); + } else if (minCanvasHeight) { + minCanvasHeight = Math.max(minCanvasHeight, cropped ? cropBoxData.height : 0); + } else if (cropped) { + minCanvasWidth = cropBoxData.width; + minCanvasHeight = cropBoxData.height; + + if (minCanvasHeight * aspectRatio > minCanvasWidth) { + minCanvasWidth = minCanvasHeight * aspectRatio; + } else { + minCanvasHeight = minCanvasWidth / aspectRatio; + } + } + } + + var _getAdjustedSizes = getAdjustedSizes({ + aspectRatio: aspectRatio, + width: minCanvasWidth, + height: minCanvasHeight + }); + + minCanvasWidth = _getAdjustedSizes.width; + minCanvasHeight = _getAdjustedSizes.height; + canvasData.minWidth = minCanvasWidth; + canvasData.minHeight = minCanvasHeight; + canvasData.maxWidth = Infinity; + canvasData.maxHeight = Infinity; + } + + if (positionLimited) { + if (viewMode > (cropped ? 0 : 1)) { + var newCanvasLeft = containerData.width - canvasData.width; + var newCanvasTop = containerData.height - canvasData.height; + canvasData.minLeft = Math.min(0, newCanvasLeft); + canvasData.minTop = Math.min(0, newCanvasTop); + canvasData.maxLeft = Math.max(0, newCanvasLeft); + canvasData.maxTop = Math.max(0, newCanvasTop); + + if (cropped && this.limited) { + canvasData.minLeft = Math.min(cropBoxData.left, cropBoxData.left + (cropBoxData.width - canvasData.width)); + canvasData.minTop = Math.min(cropBoxData.top, cropBoxData.top + (cropBoxData.height - canvasData.height)); + canvasData.maxLeft = cropBoxData.left; + canvasData.maxTop = cropBoxData.top; + + if (viewMode === 2) { + if (canvasData.width >= containerData.width) { + canvasData.minLeft = Math.min(0, newCanvasLeft); + canvasData.maxLeft = Math.max(0, newCanvasLeft); + } + + if (canvasData.height >= containerData.height) { + canvasData.minTop = Math.min(0, newCanvasTop); + canvasData.maxTop = Math.max(0, newCanvasTop); + } + } + } + } else { + canvasData.minLeft = -canvasData.width; + canvasData.minTop = -canvasData.height; + canvasData.maxLeft = containerData.width; + canvasData.maxTop = containerData.height; + } + } + }, + renderCanvas: function renderCanvas(changed, transformed) { + var canvasData = this.canvasData, + imageData = this.imageData; + + if (transformed) { + var _getRotatedSizes = getRotatedSizes({ + width: imageData.naturalWidth * Math.abs(imageData.scaleX || 1), + height: imageData.naturalHeight * Math.abs(imageData.scaleY || 1), + degree: imageData.rotate || 0 + }), + naturalWidth = _getRotatedSizes.width, + naturalHeight = _getRotatedSizes.height; + + var width = canvasData.width * (naturalWidth / canvasData.naturalWidth); + var height = canvasData.height * (naturalHeight / canvasData.naturalHeight); + canvasData.left -= (width - canvasData.width) / 2; + canvasData.top -= (height - canvasData.height) / 2; + canvasData.width = width; + canvasData.height = height; + canvasData.aspectRatio = naturalWidth / naturalHeight; + canvasData.naturalWidth = naturalWidth; + canvasData.naturalHeight = naturalHeight; + this.limitCanvas(true, false); + } + + if (canvasData.width > canvasData.maxWidth || canvasData.width < canvasData.minWidth) { + canvasData.left = canvasData.oldLeft; + } + + if (canvasData.height > canvasData.maxHeight || canvasData.height < canvasData.minHeight) { + canvasData.top = canvasData.oldTop; + } + + canvasData.width = Math.min(Math.max(canvasData.width, canvasData.minWidth), canvasData.maxWidth); + canvasData.height = Math.min(Math.max(canvasData.height, canvasData.minHeight), canvasData.maxHeight); + this.limitCanvas(false, true); + canvasData.left = Math.min(Math.max(canvasData.left, canvasData.minLeft), canvasData.maxLeft); + canvasData.top = Math.min(Math.max(canvasData.top, canvasData.minTop), canvasData.maxTop); + canvasData.oldLeft = canvasData.left; + canvasData.oldTop = canvasData.top; + setStyle(this.canvas, assign({ + width: canvasData.width, + height: canvasData.height + }, getTransforms({ + translateX: canvasData.left, + translateY: canvasData.top + }))); + this.renderImage(changed); + + if (this.cropped && this.limited) { + this.limitCropBox(true, true); + } + }, + renderImage: function renderImage(changed) { + var canvasData = this.canvasData, + imageData = this.imageData; + var width = imageData.naturalWidth * (canvasData.width / canvasData.naturalWidth); + var height = imageData.naturalHeight * (canvasData.height / canvasData.naturalHeight); + assign(imageData, { + width: width, + height: height, + left: (canvasData.width - width) / 2, + top: (canvasData.height - height) / 2 + }); + setStyle(this.image, assign({ + width: imageData.width, + height: imageData.height + }, getTransforms(assign({ + translateX: imageData.left, + translateY: imageData.top + }, imageData)))); + + if (changed) { + this.output(); + } + }, + initCropBox: function initCropBox() { + var options = this.options, + canvasData = this.canvasData; + var aspectRatio = options.aspectRatio || options.initialAspectRatio; + var autoCropArea = Number(options.autoCropArea) || 0.8; + var cropBoxData = { + width: canvasData.width, + height: canvasData.height + }; + + if (aspectRatio) { + if (canvasData.height * aspectRatio > canvasData.width) { + cropBoxData.height = cropBoxData.width / aspectRatio; + } else { + cropBoxData.width = cropBoxData.height * aspectRatio; + } + } + + this.cropBoxData = cropBoxData; + this.limitCropBox(true, true); // Initialize auto crop area + + cropBoxData.width = Math.min(Math.max(cropBoxData.width, cropBoxData.minWidth), cropBoxData.maxWidth); + cropBoxData.height = Math.min(Math.max(cropBoxData.height, cropBoxData.minHeight), cropBoxData.maxHeight); // The width/height of auto crop area must large than "minWidth/Height" + + cropBoxData.width = Math.max(cropBoxData.minWidth, cropBoxData.width * autoCropArea); + cropBoxData.height = Math.max(cropBoxData.minHeight, cropBoxData.height * autoCropArea); + cropBoxData.left = canvasData.left + (canvasData.width - cropBoxData.width) / 2; + cropBoxData.top = canvasData.top + (canvasData.height - cropBoxData.height) / 2; + cropBoxData.oldLeft = cropBoxData.left; + cropBoxData.oldTop = cropBoxData.top; + this.initialCropBoxData = assign({}, cropBoxData); + }, + limitCropBox: function limitCropBox(sizeLimited, positionLimited) { + var options = this.options, + containerData = this.containerData, + canvasData = this.canvasData, + cropBoxData = this.cropBoxData, + limited = this.limited; + var aspectRatio = options.aspectRatio; + + if (sizeLimited) { + var minCropBoxWidth = Number(options.minCropBoxWidth) || 0; + var minCropBoxHeight = Number(options.minCropBoxHeight) || 0; + var maxCropBoxWidth = limited ? Math.min(containerData.width, canvasData.width, canvasData.width + canvasData.left, containerData.width - canvasData.left) : containerData.width; + var maxCropBoxHeight = limited ? Math.min(containerData.height, canvasData.height, canvasData.height + canvasData.top, containerData.height - canvasData.top) : containerData.height; // The min/maxCropBoxWidth/Height must be less than container's width/height + + minCropBoxWidth = Math.min(minCropBoxWidth, containerData.width); + minCropBoxHeight = Math.min(minCropBoxHeight, containerData.height); + + if (aspectRatio) { + if (minCropBoxWidth && minCropBoxHeight) { + if (minCropBoxHeight * aspectRatio > minCropBoxWidth) { + minCropBoxHeight = minCropBoxWidth / aspectRatio; + } else { + minCropBoxWidth = minCropBoxHeight * aspectRatio; + } + } else if (minCropBoxWidth) { + minCropBoxHeight = minCropBoxWidth / aspectRatio; + } else if (minCropBoxHeight) { + minCropBoxWidth = minCropBoxHeight * aspectRatio; + } + + if (maxCropBoxHeight * aspectRatio > maxCropBoxWidth) { + maxCropBoxHeight = maxCropBoxWidth / aspectRatio; + } else { + maxCropBoxWidth = maxCropBoxHeight * aspectRatio; + } + } // The minWidth/Height must be less than maxWidth/Height + + + cropBoxData.minWidth = Math.min(minCropBoxWidth, maxCropBoxWidth); + cropBoxData.minHeight = Math.min(minCropBoxHeight, maxCropBoxHeight); + cropBoxData.maxWidth = maxCropBoxWidth; + cropBoxData.maxHeight = maxCropBoxHeight; + } + + if (positionLimited) { + if (limited) { + cropBoxData.minLeft = Math.max(0, canvasData.left); + cropBoxData.minTop = Math.max(0, canvasData.top); + cropBoxData.maxLeft = Math.min(containerData.width, canvasData.left + canvasData.width) - cropBoxData.width; + cropBoxData.maxTop = Math.min(containerData.height, canvasData.top + canvasData.height) - cropBoxData.height; + } else { + cropBoxData.minLeft = 0; + cropBoxData.minTop = 0; + cropBoxData.maxLeft = containerData.width - cropBoxData.width; + cropBoxData.maxTop = containerData.height - cropBoxData.height; + } + } + }, + renderCropBox: function renderCropBox() { + var options = this.options, + containerData = this.containerData, + cropBoxData = this.cropBoxData; + + if (cropBoxData.width > cropBoxData.maxWidth || cropBoxData.width < cropBoxData.minWidth) { + cropBoxData.left = cropBoxData.oldLeft; + } + + if (cropBoxData.height > cropBoxData.maxHeight || cropBoxData.height < cropBoxData.minHeight) { + cropBoxData.top = cropBoxData.oldTop; + } + + cropBoxData.width = Math.min(Math.max(cropBoxData.width, cropBoxData.minWidth), cropBoxData.maxWidth); + cropBoxData.height = Math.min(Math.max(cropBoxData.height, cropBoxData.minHeight), cropBoxData.maxHeight); + this.limitCropBox(false, true); + cropBoxData.left = Math.min(Math.max(cropBoxData.left, cropBoxData.minLeft), cropBoxData.maxLeft); + cropBoxData.top = Math.min(Math.max(cropBoxData.top, cropBoxData.minTop), cropBoxData.maxTop); + cropBoxData.oldLeft = cropBoxData.left; + cropBoxData.oldTop = cropBoxData.top; + + if (options.movable && options.cropBoxMovable) { + // Turn to move the canvas when the crop box is equal to the container + setData(this.face, DATA_ACTION, cropBoxData.width >= containerData.width && cropBoxData.height >= containerData.height ? ACTION_MOVE : ACTION_ALL); + } + + setStyle(this.cropBox, assign({ + width: cropBoxData.width, + height: cropBoxData.height + }, getTransforms({ + translateX: cropBoxData.left, + translateY: cropBoxData.top + }))); + + if (this.cropped && this.limited) { + this.limitCanvas(true, true); + } + + if (!this.disabled) { + this.output(); + } + }, + output: function output() { + this.preview(); + dispatchEvent(this.element, EVENT_CROP, this.getData()); + } + }; + + var preview = { + initPreview: function initPreview() { + var element = this.element, + crossOrigin = this.crossOrigin; + var preview = this.options.preview; + var url = crossOrigin ? this.crossOriginUrl : this.url; + var alt = element.alt || 'The image to preview'; + var image = document.createElement('img'); + + if (crossOrigin) { + image.crossOrigin = crossOrigin; + } + + image.src = url; + image.alt = alt; + this.viewBox.appendChild(image); + this.viewBoxImage = image; + + if (!preview) { + return; + } + + var previews = preview; + + if (typeof preview === 'string') { + previews = element.ownerDocument.querySelectorAll(preview); + } else if (preview.querySelector) { + previews = [preview]; + } + + this.previews = previews; + forEach(previews, function (el) { + var img = document.createElement('img'); // Save the original size for recover + + setData(el, DATA_PREVIEW, { + width: el.offsetWidth, + height: el.offsetHeight, + html: el.innerHTML + }); + + if (crossOrigin) { + img.crossOrigin = crossOrigin; + } + + img.src = url; + img.alt = alt; + /** + * Override img element styles + * Add `display:block` to avoid margin top issue + * Add `height:auto` to override `height` attribute on IE8 + * (Occur only when margin-top <= -height) + */ + + img.style.cssText = 'display:block;' + 'width:100%;' + 'height:auto;' + 'min-width:0!important;' + 'min-height:0!important;' + 'max-width:none!important;' + 'max-height:none!important;' + 'image-orientation:0deg!important;"'; + el.innerHTML = ''; + el.appendChild(img); + }); + }, + resetPreview: function resetPreview() { + forEach(this.previews, function (element) { + var data = getData(element, DATA_PREVIEW); + setStyle(element, { + width: data.width, + height: data.height + }); + element.innerHTML = data.html; + removeData(element, DATA_PREVIEW); + }); + }, + preview: function preview() { + var imageData = this.imageData, + canvasData = this.canvasData, + cropBoxData = this.cropBoxData; + var cropBoxWidth = cropBoxData.width, + cropBoxHeight = cropBoxData.height; + var width = imageData.width, + height = imageData.height; + var left = cropBoxData.left - canvasData.left - imageData.left; + var top = cropBoxData.top - canvasData.top - imageData.top; + + if (!this.cropped || this.disabled) { + return; + } + + setStyle(this.viewBoxImage, assign({ + width: width, + height: height + }, getTransforms(assign({ + translateX: -left, + translateY: -top + }, imageData)))); + forEach(this.previews, function (element) { + var data = getData(element, DATA_PREVIEW); + var originalWidth = data.width; + var originalHeight = data.height; + var newWidth = originalWidth; + var newHeight = originalHeight; + var ratio = 1; + + if (cropBoxWidth) { + ratio = originalWidth / cropBoxWidth; + newHeight = cropBoxHeight * ratio; + } + + if (cropBoxHeight && newHeight > originalHeight) { + ratio = originalHeight / cropBoxHeight; + newWidth = cropBoxWidth * ratio; + newHeight = originalHeight; + } + + setStyle(element, { + width: newWidth, + height: newHeight + }); + setStyle(element.getElementsByTagName('img')[0], assign({ + width: width * ratio, + height: height * ratio + }, getTransforms(assign({ + translateX: -left * ratio, + translateY: -top * ratio + }, imageData)))); + }); + } + }; + + var events = { + bind: function bind() { + var element = this.element, + options = this.options, + cropper = this.cropper; + + if (isFunction(options.cropstart)) { + addListener(element, EVENT_CROP_START, options.cropstart); + } + + if (isFunction(options.cropmove)) { + addListener(element, EVENT_CROP_MOVE, options.cropmove); + } + + if (isFunction(options.cropend)) { + addListener(element, EVENT_CROP_END, options.cropend); + } + + if (isFunction(options.crop)) { + addListener(element, EVENT_CROP, options.crop); + } + + if (isFunction(options.zoom)) { + addListener(element, EVENT_ZOOM, options.zoom); + } + + addListener(cropper, EVENT_POINTER_DOWN, this.onCropStart = this.cropStart.bind(this)); + + if (options.zoomable && options.zoomOnWheel) { + addListener(cropper, EVENT_WHEEL, this.onWheel = this.wheel.bind(this), { + passive: false, + capture: true + }); + } + + if (options.toggleDragModeOnDblclick) { + addListener(cropper, EVENT_DBLCLICK, this.onDblclick = this.dblclick.bind(this)); + } + + addListener(element.ownerDocument, EVENT_POINTER_MOVE, this.onCropMove = this.cropMove.bind(this)); + addListener(element.ownerDocument, EVENT_POINTER_UP, this.onCropEnd = this.cropEnd.bind(this)); + + if (options.responsive) { + addListener(window, EVENT_RESIZE, this.onResize = this.resize.bind(this)); + } + }, + unbind: function unbind() { + var element = this.element, + options = this.options, + cropper = this.cropper; + + if (isFunction(options.cropstart)) { + removeListener(element, EVENT_CROP_START, options.cropstart); + } + + if (isFunction(options.cropmove)) { + removeListener(element, EVENT_CROP_MOVE, options.cropmove); + } + + if (isFunction(options.cropend)) { + removeListener(element, EVENT_CROP_END, options.cropend); + } + + if (isFunction(options.crop)) { + removeListener(element, EVENT_CROP, options.crop); + } + + if (isFunction(options.zoom)) { + removeListener(element, EVENT_ZOOM, options.zoom); + } + + removeListener(cropper, EVENT_POINTER_DOWN, this.onCropStart); + + if (options.zoomable && options.zoomOnWheel) { + removeListener(cropper, EVENT_WHEEL, this.onWheel, { + passive: false, + capture: true + }); + } + + if (options.toggleDragModeOnDblclick) { + removeListener(cropper, EVENT_DBLCLICK, this.onDblclick); + } + + removeListener(element.ownerDocument, EVENT_POINTER_MOVE, this.onCropMove); + removeListener(element.ownerDocument, EVENT_POINTER_UP, this.onCropEnd); + + if (options.responsive) { + removeListener(window, EVENT_RESIZE, this.onResize); + } + } + }; + + var handlers = { + resize: function resize() { + var options = this.options, + container = this.container, + containerData = this.containerData; + var minContainerWidth = Number(options.minContainerWidth) || MIN_CONTAINER_WIDTH; + var minContainerHeight = Number(options.minContainerHeight) || MIN_CONTAINER_HEIGHT; + + if (this.disabled || containerData.width <= minContainerWidth || containerData.height <= minContainerHeight) { + return; + } + + var ratio = container.offsetWidth / containerData.width; // Resize when width changed or height changed + + if (ratio !== 1 || container.offsetHeight !== containerData.height) { + var canvasData; + var cropBoxData; + + if (options.restore) { + canvasData = this.getCanvasData(); + cropBoxData = this.getCropBoxData(); + } + + this.render(); + + if (options.restore) { + this.setCanvasData(forEach(canvasData, function (n, i) { + canvasData[i] = n * ratio; + })); + this.setCropBoxData(forEach(cropBoxData, function (n, i) { + cropBoxData[i] = n * ratio; + })); + } + } + }, + dblclick: function dblclick() { + if (this.disabled || this.options.dragMode === DRAG_MODE_NONE) { + return; + } + + this.setDragMode(hasClass(this.dragBox, CLASS_CROP) ? DRAG_MODE_MOVE : DRAG_MODE_CROP); + }, + wheel: function wheel(event) { + var _this = this; + + var ratio = Number(this.options.wheelZoomRatio) || 0.1; + var delta = 1; + + if (this.disabled) { + return; + } + + event.preventDefault(); // Limit wheel speed to prevent zoom too fast (#21) + + if (this.wheeling) { + return; + } + + this.wheeling = true; + setTimeout(function () { + _this.wheeling = false; + }, 50); + + if (event.deltaY) { + delta = event.deltaY > 0 ? 1 : -1; + } else if (event.wheelDelta) { + delta = -event.wheelDelta / 120; + } else if (event.detail) { + delta = event.detail > 0 ? 1 : -1; + } + + this.zoom(-delta * ratio, event); + }, + cropStart: function cropStart(event) { + var buttons = event.buttons, + button = event.button; + + if (this.disabled // No primary button (Usually the left button) + // Note that touch events have no `buttons` or `button` property + || isNumber(buttons) && buttons !== 1 || isNumber(button) && button !== 0 // Open context menu + || event.ctrlKey) { + return; + } + + var options = this.options, + pointers = this.pointers; + var action; + + if (event.changedTouches) { + // Handle touch event + forEach(event.changedTouches, function (touch) { + pointers[touch.identifier] = getPointer(touch); + }); + } else { + // Handle mouse event and pointer event + pointers[event.pointerId || 0] = getPointer(event); + } + + if (Object.keys(pointers).length > 1 && options.zoomable && options.zoomOnTouch) { + action = ACTION_ZOOM; + } else { + action = getData(event.target, DATA_ACTION); + } + + if (!REGEXP_ACTIONS.test(action)) { + return; + } + + if (dispatchEvent(this.element, EVENT_CROP_START, { + originalEvent: event, + action: action + }) === false) { + return; + } // This line is required for preventing page zooming in iOS browsers + + + event.preventDefault(); + this.action = action; + this.cropping = false; + + if (action === ACTION_CROP) { + this.cropping = true; + addClass(this.dragBox, CLASS_MODAL); + } + }, + cropMove: function cropMove(event) { + var action = this.action; + + if (this.disabled || !action) { + return; + } + + var pointers = this.pointers; + event.preventDefault(); + + if (dispatchEvent(this.element, EVENT_CROP_MOVE, { + originalEvent: event, + action: action + }) === false) { + return; + } + + if (event.changedTouches) { + forEach(event.changedTouches, function (touch) { + // The first parameter should not be undefined (#432) + assign(pointers[touch.identifier] || {}, getPointer(touch, true)); + }); + } else { + assign(pointers[event.pointerId || 0] || {}, getPointer(event, true)); + } + + this.change(event); + }, + cropEnd: function cropEnd(event) { + if (this.disabled) { + return; + } + + var action = this.action, + pointers = this.pointers; + + if (event.changedTouches) { + forEach(event.changedTouches, function (touch) { + delete pointers[touch.identifier]; + }); + } else { + delete pointers[event.pointerId || 0]; + } + + if (!action) { + return; + } + + event.preventDefault(); + + if (!Object.keys(pointers).length) { + this.action = ''; + } + + if (this.cropping) { + this.cropping = false; + toggleClass(this.dragBox, CLASS_MODAL, this.cropped && this.options.modal); + } + + dispatchEvent(this.element, EVENT_CROP_END, { + originalEvent: event, + action: action + }); + } + }; + + var change = { + change: function change(event) { + var options = this.options, + canvasData = this.canvasData, + containerData = this.containerData, + cropBoxData = this.cropBoxData, + pointers = this.pointers; + var action = this.action; + var aspectRatio = options.aspectRatio; + var left = cropBoxData.left, + top = cropBoxData.top, + width = cropBoxData.width, + height = cropBoxData.height; + var right = left + width; + var bottom = top + height; + var minLeft = 0; + var minTop = 0; + var maxWidth = containerData.width; + var maxHeight = containerData.height; + var renderable = true; + var offset; // Locking aspect ratio in "free mode" by holding shift key + + if (!aspectRatio && event.shiftKey) { + aspectRatio = width && height ? width / height : 1; + } + + if (this.limited) { + minLeft = cropBoxData.minLeft; + minTop = cropBoxData.minTop; + maxWidth = minLeft + Math.min(containerData.width, canvasData.width, canvasData.left + canvasData.width); + maxHeight = minTop + Math.min(containerData.height, canvasData.height, canvasData.top + canvasData.height); + } + + var pointer = pointers[Object.keys(pointers)[0]]; + var range = { + x: pointer.endX - pointer.startX, + y: pointer.endY - pointer.startY + }; + + var check = function check(side) { + switch (side) { + case ACTION_EAST: + if (right + range.x > maxWidth) { + range.x = maxWidth - right; + } + + break; + + case ACTION_WEST: + if (left + range.x < minLeft) { + range.x = minLeft - left; + } + + break; + + case ACTION_NORTH: + if (top + range.y < minTop) { + range.y = minTop - top; + } + + break; + + case ACTION_SOUTH: + if (bottom + range.y > maxHeight) { + range.y = maxHeight - bottom; + } + + break; + + default: + } + }; + + switch (action) { + // Move crop box + case ACTION_ALL: + left += range.x; + top += range.y; + break; + // Resize crop box + + case ACTION_EAST: + if (range.x >= 0 && (right >= maxWidth || aspectRatio && (top <= minTop || bottom >= maxHeight))) { + renderable = false; + break; + } + + check(ACTION_EAST); + width += range.x; + + if (width < 0) { + action = ACTION_WEST; + width = -width; + left -= width; + } + + if (aspectRatio) { + height = width / aspectRatio; + top += (cropBoxData.height - height) / 2; + } + + break; + + case ACTION_NORTH: + if (range.y <= 0 && (top <= minTop || aspectRatio && (left <= minLeft || right >= maxWidth))) { + renderable = false; + break; + } + + check(ACTION_NORTH); + height -= range.y; + top += range.y; + + if (height < 0) { + action = ACTION_SOUTH; + height = -height; + top -= height; + } + + if (aspectRatio) { + width = height * aspectRatio; + left += (cropBoxData.width - width) / 2; + } + + break; + + case ACTION_WEST: + if (range.x <= 0 && (left <= minLeft || aspectRatio && (top <= minTop || bottom >= maxHeight))) { + renderable = false; + break; + } + + check(ACTION_WEST); + width -= range.x; + left += range.x; + + if (width < 0) { + action = ACTION_EAST; + width = -width; + left -= width; + } + + if (aspectRatio) { + height = width / aspectRatio; + top += (cropBoxData.height - height) / 2; + } + + break; + + case ACTION_SOUTH: + if (range.y >= 0 && (bottom >= maxHeight || aspectRatio && (left <= minLeft || right >= maxWidth))) { + renderable = false; + break; + } + + check(ACTION_SOUTH); + height += range.y; + + if (height < 0) { + action = ACTION_NORTH; + height = -height; + top -= height; + } + + if (aspectRatio) { + width = height * aspectRatio; + left += (cropBoxData.width - width) / 2; + } + + break; + + case ACTION_NORTH_EAST: + if (aspectRatio) { + if (range.y <= 0 && (top <= minTop || right >= maxWidth)) { + renderable = false; + break; + } + + check(ACTION_NORTH); + height -= range.y; + top += range.y; + width = height * aspectRatio; + } else { + check(ACTION_NORTH); + check(ACTION_EAST); + + if (range.x >= 0) { + if (right < maxWidth) { + width += range.x; + } else if (range.y <= 0 && top <= minTop) { + renderable = false; + } + } else { + width += range.x; + } + + if (range.y <= 0) { + if (top > minTop) { + height -= range.y; + top += range.y; + } + } else { + height -= range.y; + top += range.y; + } + } + + if (width < 0 && height < 0) { + action = ACTION_SOUTH_WEST; + height = -height; + width = -width; + top -= height; + left -= width; + } else if (width < 0) { + action = ACTION_NORTH_WEST; + width = -width; + left -= width; + } else if (height < 0) { + action = ACTION_SOUTH_EAST; + height = -height; + top -= height; + } + + break; + + case ACTION_NORTH_WEST: + if (aspectRatio) { + if (range.y <= 0 && (top <= minTop || left <= minLeft)) { + renderable = false; + break; + } + + check(ACTION_NORTH); + height -= range.y; + top += range.y; + width = height * aspectRatio; + left += cropBoxData.width - width; + } else { + check(ACTION_NORTH); + check(ACTION_WEST); + + if (range.x <= 0) { + if (left > minLeft) { + width -= range.x; + left += range.x; + } else if (range.y <= 0 && top <= minTop) { + renderable = false; + } + } else { + width -= range.x; + left += range.x; + } + + if (range.y <= 0) { + if (top > minTop) { + height -= range.y; + top += range.y; + } + } else { + height -= range.y; + top += range.y; + } + } + + if (width < 0 && height < 0) { + action = ACTION_SOUTH_EAST; + height = -height; + width = -width; + top -= height; + left -= width; + } else if (width < 0) { + action = ACTION_NORTH_EAST; + width = -width; + left -= width; + } else if (height < 0) { + action = ACTION_SOUTH_WEST; + height = -height; + top -= height; + } + + break; + + case ACTION_SOUTH_WEST: + if (aspectRatio) { + if (range.x <= 0 && (left <= minLeft || bottom >= maxHeight)) { + renderable = false; + break; + } + + check(ACTION_WEST); + width -= range.x; + left += range.x; + height = width / aspectRatio; + } else { + check(ACTION_SOUTH); + check(ACTION_WEST); + + if (range.x <= 0) { + if (left > minLeft) { + width -= range.x; + left += range.x; + } else if (range.y >= 0 && bottom >= maxHeight) { + renderable = false; + } + } else { + width -= range.x; + left += range.x; + } + + if (range.y >= 0) { + if (bottom < maxHeight) { + height += range.y; + } + } else { + height += range.y; + } + } + + if (width < 0 && height < 0) { + action = ACTION_NORTH_EAST; + height = -height; + width = -width; + top -= height; + left -= width; + } else if (width < 0) { + action = ACTION_SOUTH_EAST; + width = -width; + left -= width; + } else if (height < 0) { + action = ACTION_NORTH_WEST; + height = -height; + top -= height; + } + + break; + + case ACTION_SOUTH_EAST: + if (aspectRatio) { + if (range.x >= 0 && (right >= maxWidth || bottom >= maxHeight)) { + renderable = false; + break; + } + + check(ACTION_EAST); + width += range.x; + height = width / aspectRatio; + } else { + check(ACTION_SOUTH); + check(ACTION_EAST); + + if (range.x >= 0) { + if (right < maxWidth) { + width += range.x; + } else if (range.y >= 0 && bottom >= maxHeight) { + renderable = false; + } + } else { + width += range.x; + } + + if (range.y >= 0) { + if (bottom < maxHeight) { + height += range.y; + } + } else { + height += range.y; + } + } + + if (width < 0 && height < 0) { + action = ACTION_NORTH_WEST; + height = -height; + width = -width; + top -= height; + left -= width; + } else if (width < 0) { + action = ACTION_SOUTH_WEST; + width = -width; + left -= width; + } else if (height < 0) { + action = ACTION_NORTH_EAST; + height = -height; + top -= height; + } + + break; + // Move canvas + + case ACTION_MOVE: + this.move(range.x, range.y); + renderable = false; + break; + // Zoom canvas + + case ACTION_ZOOM: + this.zoom(getMaxZoomRatio(pointers), event); + renderable = false; + break; + // Create crop box + + case ACTION_CROP: + if (!range.x || !range.y) { + renderable = false; + break; + } + + offset = getOffset(this.cropper); + left = pointer.startX - offset.left; + top = pointer.startY - offset.top; + width = cropBoxData.minWidth; + height = cropBoxData.minHeight; + + if (range.x > 0) { + action = range.y > 0 ? ACTION_SOUTH_EAST : ACTION_NORTH_EAST; + } else if (range.x < 0) { + left -= width; + action = range.y > 0 ? ACTION_SOUTH_WEST : ACTION_NORTH_WEST; + } + + if (range.y < 0) { + top -= height; + } // Show the crop box if is hidden + + + if (!this.cropped) { + removeClass(this.cropBox, CLASS_HIDDEN); + this.cropped = true; + + if (this.limited) { + this.limitCropBox(true, true); + } + } + + break; + + default: + } + + if (renderable) { + cropBoxData.width = width; + cropBoxData.height = height; + cropBoxData.left = left; + cropBoxData.top = top; + this.action = action; + this.renderCropBox(); + } // Override + + + forEach(pointers, function (p) { + p.startX = p.endX; + p.startY = p.endY; + }); + } + }; + + var methods = { + // Show the crop box manually + crop: function crop() { + if (this.ready && !this.cropped && !this.disabled) { + this.cropped = true; + this.limitCropBox(true, true); + + if (this.options.modal) { + addClass(this.dragBox, CLASS_MODAL); + } + + removeClass(this.cropBox, CLASS_HIDDEN); + this.setCropBoxData(this.initialCropBoxData); + } + + return this; + }, + // Reset the image and crop box to their initial states + reset: function reset() { + if (this.ready && !this.disabled) { + this.imageData = assign({}, this.initialImageData); + this.canvasData = assign({}, this.initialCanvasData); + this.cropBoxData = assign({}, this.initialCropBoxData); + this.renderCanvas(); + + if (this.cropped) { + this.renderCropBox(); + } + } + + return this; + }, + // Clear the crop box + clear: function clear() { + if (this.cropped && !this.disabled) { + assign(this.cropBoxData, { + left: 0, + top: 0, + width: 0, + height: 0 + }); + this.cropped = false; + this.renderCropBox(); + this.limitCanvas(true, true); // Render canvas after crop box rendered + + this.renderCanvas(); + removeClass(this.dragBox, CLASS_MODAL); + addClass(this.cropBox, CLASS_HIDDEN); + } + + return this; + }, + + /** + * Replace the image's src and rebuild the cropper + * @param {string} url - The new URL. + * @param {boolean} [hasSameSize] - Indicate if the new image has the same size as the old one. + * @returns {Cropper} this + */ + replace: function replace(url) { + var hasSameSize = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false; + + if (!this.disabled && url) { + if (this.isImg) { + this.element.src = url; + } + + if (hasSameSize) { + this.url = url; + this.image.src = url; + + if (this.ready) { + this.viewBoxImage.src = url; + forEach(this.previews, function (element) { + element.getElementsByTagName('img')[0].src = url; + }); + } + } else { + if (this.isImg) { + this.replaced = true; + } + + this.options.data = null; + this.uncreate(); + this.load(url); + } + } + + return this; + }, + // Enable (unfreeze) the cropper + enable: function enable() { + if (this.ready && this.disabled) { + this.disabled = false; + removeClass(this.cropper, CLASS_DISABLED); + } + + return this; + }, + // Disable (freeze) the cropper + disable: function disable() { + if (this.ready && !this.disabled) { + this.disabled = true; + addClass(this.cropper, CLASS_DISABLED); + } + + return this; + }, + + /** + * Destroy the cropper and remove the instance from the image + * @returns {Cropper} this + */ + destroy: function destroy() { + var element = this.element; + + if (!element[NAMESPACE]) { + return this; + } + + element[NAMESPACE] = undefined; + + if (this.isImg && this.replaced) { + element.src = this.originalUrl; + } + + this.uncreate(); + return this; + }, + + /** + * Move the canvas with relative offsets + * @param {number} offsetX - The relative offset distance on the x-axis. + * @param {number} [offsetY=offsetX] - The relative offset distance on the y-axis. + * @returns {Cropper} this + */ + move: function move(offsetX) { + var offsetY = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : offsetX; + var _this$canvasData = this.canvasData, + left = _this$canvasData.left, + top = _this$canvasData.top; + return this.moveTo(isUndefined(offsetX) ? offsetX : left + Number(offsetX), isUndefined(offsetY) ? offsetY : top + Number(offsetY)); + }, + + /** + * Move the canvas to an absolute point + * @param {number} x - The x-axis coordinate. + * @param {number} [y=x] - The y-axis coordinate. + * @returns {Cropper} this + */ + moveTo: function moveTo(x) { + var y = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : x; + var canvasData = this.canvasData; + var changed = false; + x = Number(x); + y = Number(y); + + if (this.ready && !this.disabled && this.options.movable) { + if (isNumber(x)) { + canvasData.left = x; + changed = true; + } + + if (isNumber(y)) { + canvasData.top = y; + changed = true; + } + + if (changed) { + this.renderCanvas(true); + } + } + + return this; + }, + + /** + * Zoom the canvas with a relative ratio + * @param {number} ratio - The target ratio. + * @param {Event} _originalEvent - The original event if any. + * @returns {Cropper} this + */ + zoom: function zoom(ratio, _originalEvent) { + var canvasData = this.canvasData; + ratio = Number(ratio); + + if (ratio < 0) { + ratio = 1 / (1 - ratio); + } else { + ratio = 1 + ratio; + } + + return this.zoomTo(canvasData.width * ratio / canvasData.naturalWidth, null, _originalEvent); + }, + + /** + * Zoom the canvas to an absolute ratio + * @param {number} ratio - The target ratio. + * @param {Object} pivot - The zoom pivot point coordinate. + * @param {Event} _originalEvent - The original event if any. + * @returns {Cropper} this + */ + zoomTo: function zoomTo(ratio, pivot, _originalEvent) { + var options = this.options, + canvasData = this.canvasData; + var width = canvasData.width, + height = canvasData.height, + naturalWidth = canvasData.naturalWidth, + naturalHeight = canvasData.naturalHeight; + ratio = Number(ratio); + + if (ratio >= 0 && this.ready && !this.disabled && options.zoomable) { + var newWidth = naturalWidth * ratio; + var newHeight = naturalHeight * ratio; + + if (dispatchEvent(this.element, EVENT_ZOOM, { + ratio: ratio, + oldRatio: width / naturalWidth, + originalEvent: _originalEvent + }) === false) { + return this; + } + + if (_originalEvent) { + var pointers = this.pointers; + var offset = getOffset(this.cropper); + var center = pointers && Object.keys(pointers).length ? getPointersCenter(pointers) : { + pageX: _originalEvent.pageX, + pageY: _originalEvent.pageY + }; // Zoom from the triggering point of the event + + canvasData.left -= (newWidth - width) * ((center.pageX - offset.left - canvasData.left) / width); + canvasData.top -= (newHeight - height) * ((center.pageY - offset.top - canvasData.top) / height); + } else if (isPlainObject(pivot) && isNumber(pivot.x) && isNumber(pivot.y)) { + canvasData.left -= (newWidth - width) * ((pivot.x - canvasData.left) / width); + canvasData.top -= (newHeight - height) * ((pivot.y - canvasData.top) / height); + } else { + // Zoom from the center of the canvas + canvasData.left -= (newWidth - width) / 2; + canvasData.top -= (newHeight - height) / 2; + } + + canvasData.width = newWidth; + canvasData.height = newHeight; + this.renderCanvas(true); + } + + return this; + }, + + /** + * Rotate the canvas with a relative degree + * @param {number} degree - The rotate degree. + * @returns {Cropper} this + */ + rotate: function rotate(degree) { + return this.rotateTo((this.imageData.rotate || 0) + Number(degree)); + }, + + /** + * Rotate the canvas to an absolute degree + * @param {number} degree - The rotate degree. + * @returns {Cropper} this + */ + rotateTo: function rotateTo(degree) { + degree = Number(degree); + + if (isNumber(degree) && this.ready && !this.disabled && this.options.rotatable) { + this.imageData.rotate = degree % 360; + this.renderCanvas(true, true); + } + + return this; + }, + + /** + * Scale the image on the x-axis. + * @param {number} scaleX - The scale ratio on the x-axis. + * @returns {Cropper} this + */ + scaleX: function scaleX(_scaleX) { + var scaleY = this.imageData.scaleY; + return this.scale(_scaleX, isNumber(scaleY) ? scaleY : 1); + }, + + /** + * Scale the image on the y-axis. + * @param {number} scaleY - The scale ratio on the y-axis. + * @returns {Cropper} this + */ + scaleY: function scaleY(_scaleY) { + var scaleX = this.imageData.scaleX; + return this.scale(isNumber(scaleX) ? scaleX : 1, _scaleY); + }, + + /** + * Scale the image + * @param {number} scaleX - The scale ratio on the x-axis. + * @param {number} [scaleY=scaleX] - The scale ratio on the y-axis. + * @returns {Cropper} this + */ + scale: function scale(scaleX) { + var scaleY = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : scaleX; + var imageData = this.imageData; + var transformed = false; + scaleX = Number(scaleX); + scaleY = Number(scaleY); + + if (this.ready && !this.disabled && this.options.scalable) { + if (isNumber(scaleX)) { + imageData.scaleX = scaleX; + transformed = true; + } + + if (isNumber(scaleY)) { + imageData.scaleY = scaleY; + transformed = true; + } + + if (transformed) { + this.renderCanvas(true, true); + } + } + + return this; + }, + + /** + * Get the cropped area position and size data (base on the original image) + * @param {boolean} [rounded=false] - Indicate if round the data values or not. + * @returns {Object} The result cropped data. + */ + getData: function getData() { + var rounded = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false; + var options = this.options, + imageData = this.imageData, + canvasData = this.canvasData, + cropBoxData = this.cropBoxData; + var data; + + if (this.ready && this.cropped) { + data = { + x: cropBoxData.left - canvasData.left, + y: cropBoxData.top - canvasData.top, + width: cropBoxData.width, + height: cropBoxData.height + }; + var ratio = imageData.width / imageData.naturalWidth; + forEach(data, function (n, i) { + data[i] = n / ratio; + }); + + if (rounded) { + // In case rounding off leads to extra 1px in right or bottom border + // we should round the top-left corner and the dimension (#343). + var bottom = Math.round(data.y + data.height); + var right = Math.round(data.x + data.width); + data.x = Math.round(data.x); + data.y = Math.round(data.y); + data.width = right - data.x; + data.height = bottom - data.y; + } + } else { + data = { + x: 0, + y: 0, + width: 0, + height: 0 + }; + } + + if (options.rotatable) { + data.rotate = imageData.rotate || 0; + } + + if (options.scalable) { + data.scaleX = imageData.scaleX || 1; + data.scaleY = imageData.scaleY || 1; + } + + return data; + }, + + /** + * Set the cropped area position and size with new data + * @param {Object} data - The new data. + * @returns {Cropper} this + */ + setData: function setData(data) { + var options = this.options, + imageData = this.imageData, + canvasData = this.canvasData; + var cropBoxData = {}; + + if (this.ready && !this.disabled && isPlainObject(data)) { + var transformed = false; + + if (options.rotatable) { + if (isNumber(data.rotate) && data.rotate !== imageData.rotate) { + imageData.rotate = data.rotate; + transformed = true; + } + } + + if (options.scalable) { + if (isNumber(data.scaleX) && data.scaleX !== imageData.scaleX) { + imageData.scaleX = data.scaleX; + transformed = true; + } + + if (isNumber(data.scaleY) && data.scaleY !== imageData.scaleY) { + imageData.scaleY = data.scaleY; + transformed = true; + } + } + + if (transformed) { + this.renderCanvas(true, true); + } + + var ratio = imageData.width / imageData.naturalWidth; + + if (isNumber(data.x)) { + cropBoxData.left = data.x * ratio + canvasData.left; + } + + if (isNumber(data.y)) { + cropBoxData.top = data.y * ratio + canvasData.top; + } + + if (isNumber(data.width)) { + cropBoxData.width = data.width * ratio; + } + + if (isNumber(data.height)) { + cropBoxData.height = data.height * ratio; + } + + this.setCropBoxData(cropBoxData); + } + + return this; + }, + + /** + * Get the container size data. + * @returns {Object} The result container data. + */ + getContainerData: function getContainerData() { + return this.ready ? assign({}, this.containerData) : {}; + }, + + /** + * Get the image position and size data. + * @returns {Object} The result image data. + */ + getImageData: function getImageData() { + return this.sized ? assign({}, this.imageData) : {}; + }, + + /** + * Get the canvas position and size data. + * @returns {Object} The result canvas data. + */ + getCanvasData: function getCanvasData() { + var canvasData = this.canvasData; + var data = {}; + + if (this.ready) { + forEach(['left', 'top', 'width', 'height', 'naturalWidth', 'naturalHeight'], function (n) { + data[n] = canvasData[n]; + }); + } + + return data; + }, + + /** + * Set the canvas position and size with new data. + * @param {Object} data - The new canvas data. + * @returns {Cropper} this + */ + setCanvasData: function setCanvasData(data) { + var canvasData = this.canvasData; + var aspectRatio = canvasData.aspectRatio; + + if (this.ready && !this.disabled && isPlainObject(data)) { + if (isNumber(data.left)) { + canvasData.left = data.left; + } + + if (isNumber(data.top)) { + canvasData.top = data.top; + } + + if (isNumber(data.width)) { + canvasData.width = data.width; + canvasData.height = data.width / aspectRatio; + } else if (isNumber(data.height)) { + canvasData.height = data.height; + canvasData.width = data.height * aspectRatio; + } + + this.renderCanvas(true); + } + + return this; + }, + + /** + * Get the crop box position and size data. + * @returns {Object} The result crop box data. + */ + getCropBoxData: function getCropBoxData() { + var cropBoxData = this.cropBoxData; + var data; + + if (this.ready && this.cropped) { + data = { + left: cropBoxData.left, + top: cropBoxData.top, + width: cropBoxData.width, + height: cropBoxData.height + }; + } + + return data || {}; + }, + + /** + * Set the crop box position and size with new data. + * @param {Object} data - The new crop box data. + * @returns {Cropper} this + */ + setCropBoxData: function setCropBoxData(data) { + var cropBoxData = this.cropBoxData; + var aspectRatio = this.options.aspectRatio; + var widthChanged; + var heightChanged; + + if (this.ready && this.cropped && !this.disabled && isPlainObject(data)) { + if (isNumber(data.left)) { + cropBoxData.left = data.left; + } + + if (isNumber(data.top)) { + cropBoxData.top = data.top; + } + + if (isNumber(data.width) && data.width !== cropBoxData.width) { + widthChanged = true; + cropBoxData.width = data.width; + } + + if (isNumber(data.height) && data.height !== cropBoxData.height) { + heightChanged = true; + cropBoxData.height = data.height; + } + + if (aspectRatio) { + if (widthChanged) { + cropBoxData.height = cropBoxData.width / aspectRatio; + } else if (heightChanged) { + cropBoxData.width = cropBoxData.height * aspectRatio; + } + } + + this.renderCropBox(); + } + + return this; + }, + + /** + * Get a canvas drawn the cropped image. + * @param {Object} [options={}] - The config options. + * @returns {HTMLCanvasElement} - The result canvas. + */ + getCroppedCanvas: function getCroppedCanvas() { + var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {}; + + if (!this.ready || !window.HTMLCanvasElement) { + return null; + } + + var canvasData = this.canvasData; + var source = getSourceCanvas(this.image, this.imageData, canvasData, options); // Returns the source canvas if it is not cropped. + + if (!this.cropped) { + return source; + } + + var _this$getData = this.getData(), + initialX = _this$getData.x, + initialY = _this$getData.y, + initialWidth = _this$getData.width, + initialHeight = _this$getData.height; + + var ratio = source.width / Math.floor(canvasData.naturalWidth); + + if (ratio !== 1) { + initialX *= ratio; + initialY *= ratio; + initialWidth *= ratio; + initialHeight *= ratio; + } + + var aspectRatio = initialWidth / initialHeight; + var maxSizes = getAdjustedSizes({ + aspectRatio: aspectRatio, + width: options.maxWidth || Infinity, + height: options.maxHeight || Infinity + }); + var minSizes = getAdjustedSizes({ + aspectRatio: aspectRatio, + width: options.minWidth || 0, + height: options.minHeight || 0 + }, 'cover'); + + var _getAdjustedSizes = getAdjustedSizes({ + aspectRatio: aspectRatio, + width: options.width || (ratio !== 1 ? source.width : initialWidth), + height: options.height || (ratio !== 1 ? source.height : initialHeight) + }), + width = _getAdjustedSizes.width, + height = _getAdjustedSizes.height; + + width = Math.min(maxSizes.width, Math.max(minSizes.width, width)); + height = Math.min(maxSizes.height, Math.max(minSizes.height, height)); + var canvas = document.createElement('canvas'); + var context = canvas.getContext('2d'); + canvas.width = normalizeDecimalNumber(width); + canvas.height = normalizeDecimalNumber(height); + context.fillStyle = options.fillColor || 'transparent'; + context.fillRect(0, 0, width, height); + var _options$imageSmoothi = options.imageSmoothingEnabled, + imageSmoothingEnabled = _options$imageSmoothi === void 0 ? true : _options$imageSmoothi, + imageSmoothingQuality = options.imageSmoothingQuality; + context.imageSmoothingEnabled = imageSmoothingEnabled; + + if (imageSmoothingQuality) { + context.imageSmoothingQuality = imageSmoothingQuality; + } // https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D.drawImage + + + var sourceWidth = source.width; + var sourceHeight = source.height; // Source canvas parameters + + var srcX = initialX; + var srcY = initialY; + var srcWidth; + var srcHeight; // Destination canvas parameters + + var dstX; + var dstY; + var dstWidth; + var dstHeight; + + if (srcX <= -initialWidth || srcX > sourceWidth) { + srcX = 0; + srcWidth = 0; + dstX = 0; + dstWidth = 0; + } else if (srcX <= 0) { + dstX = -srcX; + srcX = 0; + srcWidth = Math.min(sourceWidth, initialWidth + srcX); + dstWidth = srcWidth; + } else if (srcX <= sourceWidth) { + dstX = 0; + srcWidth = Math.min(initialWidth, sourceWidth - srcX); + dstWidth = srcWidth; + } + + if (srcWidth <= 0 || srcY <= -initialHeight || srcY > sourceHeight) { + srcY = 0; + srcHeight = 0; + dstY = 0; + dstHeight = 0; + } else if (srcY <= 0) { + dstY = -srcY; + srcY = 0; + srcHeight = Math.min(sourceHeight, initialHeight + srcY); + dstHeight = srcHeight; + } else if (srcY <= sourceHeight) { + dstY = 0; + srcHeight = Math.min(initialHeight, sourceHeight - srcY); + dstHeight = srcHeight; + } + + var params = [srcX, srcY, srcWidth, srcHeight]; // Avoid "IndexSizeError" + + if (dstWidth > 0 && dstHeight > 0) { + var scale = width / initialWidth; + params.push(dstX * scale, dstY * scale, dstWidth * scale, dstHeight * scale); + } // All the numerical parameters should be integer for `drawImage` + // https://github.com/fengyuanchen/cropper/issues/476 + + + context.drawImage.apply(context, [source].concat(_toConsumableArray(params.map(function (param) { + return Math.floor(normalizeDecimalNumber(param)); + })))); + return canvas; + }, + + /** + * Change the aspect ratio of the crop box. + * @param {number} aspectRatio - The new aspect ratio. + * @returns {Cropper} this + */ + setAspectRatio: function setAspectRatio(aspectRatio) { + var options = this.options; + + if (!this.disabled && !isUndefined(aspectRatio)) { + // 0 -> NaN + options.aspectRatio = Math.max(0, aspectRatio) || NaN; + + if (this.ready) { + this.initCropBox(); + + if (this.cropped) { + this.renderCropBox(); + } + } + } + + return this; + }, + + /** + * Change the drag mode. + * @param {string} mode - The new drag mode. + * @returns {Cropper} this + */ + setDragMode: function setDragMode(mode) { + var options = this.options, + dragBox = this.dragBox, + face = this.face; + + if (this.ready && !this.disabled) { + var croppable = mode === DRAG_MODE_CROP; + var movable = options.movable && mode === DRAG_MODE_MOVE; + mode = croppable || movable ? mode : DRAG_MODE_NONE; + options.dragMode = mode; + setData(dragBox, DATA_ACTION, mode); + toggleClass(dragBox, CLASS_CROP, croppable); + toggleClass(dragBox, CLASS_MOVE, movable); + + if (!options.cropBoxMovable) { + // Sync drag mode to crop box when it is not movable + setData(face, DATA_ACTION, mode); + toggleClass(face, CLASS_CROP, croppable); + toggleClass(face, CLASS_MOVE, movable); + } + } + + return this; + } + }; + + var AnotherCropper = WINDOW.Cropper; + + var Cropper = + /*#__PURE__*/ + function () { + /** + * Create a new Cropper. + * @param {Element} element - The target element for cropping. + * @param {Object} [options={}] - The configuration options. + */ + function Cropper(element) { + var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {}; + + _classCallCheck(this, Cropper); + + if (!element || !REGEXP_TAG_NAME.test(element.tagName)) { + throw new Error('The first argument is required and must be an or element.'); + } + + this.element = element; + this.options = assign({}, DEFAULTS, isPlainObject(options) && options); + this.cropped = false; + this.disabled = false; + this.pointers = {}; + this.ready = false; + this.reloading = false; + this.replaced = false; + this.sized = false; + this.sizing = false; + this.init(); + } + + _createClass(Cropper, [{ + key: "init", + value: function init() { + var element = this.element; + var tagName = element.tagName.toLowerCase(); + var url; + + if (element[NAMESPACE]) { + return; + } + + element[NAMESPACE] = this; + + if (tagName === 'img') { + this.isImg = true; // e.g.: "img/picture.jpg" + + url = element.getAttribute('src') || ''; + this.originalUrl = url; // Stop when it's a blank image + + if (!url) { + return; + } // e.g.: "http://example.com/img/picture.jpg" + + + url = element.src; + } else if (tagName === 'canvas' && window.HTMLCanvasElement) { + url = element.toDataURL(); + } + + this.load(url); + } + }, { + key: "load", + value: function load(url) { + var _this = this; + + if (!url) { + return; + } + + this.url = url; + this.imageData = {}; + var element = this.element, + options = this.options; + + if (!options.rotatable && !options.scalable) { + options.checkOrientation = false; + } // Only IE10+ supports Typed Arrays + + + if (!options.checkOrientation || !window.ArrayBuffer) { + this.clone(); + return; + } // Detect the mime type of the image directly if it is a Data URL + + + if (REGEXP_DATA_URL.test(url)) { + // Read ArrayBuffer from Data URL of JPEG images directly for better performance + if (REGEXP_DATA_URL_JPEG.test(url)) { + this.read(dataURLToArrayBuffer(url)); + } else { + // Only a JPEG image may contains Exif Orientation information, + // the rest types of Data URLs are not necessary to check orientation at all. + this.clone(); + } + + return; + } // 1. Detect the mime type of the image by a XMLHttpRequest. + // 2. Load the image as ArrayBuffer for reading orientation if its a JPEG image. + + + var xhr = new XMLHttpRequest(); + var clone = this.clone.bind(this); + this.reloading = true; + this.xhr = xhr; // 1. Cross origin requests are only supported for protocol schemes: + // http, https, data, chrome, chrome-extension. + // 2. Access to XMLHttpRequest from a Data URL will be blocked by CORS policy + // in some browsers as IE11 and Safari. + + xhr.onabort = clone; + xhr.onerror = clone; + xhr.ontimeout = clone; + + xhr.onprogress = function () { + // Abort the request directly if it not a JPEG image for better performance + if (xhr.getResponseHeader('content-type') !== MIME_TYPE_JPEG) { + xhr.abort(); + } + }; + + xhr.onload = function () { + _this.read(xhr.response); + }; + + xhr.onloadend = function () { + _this.reloading = false; + _this.xhr = null; + }; // Bust cache when there is a "crossOrigin" property to avoid browser cache error + + + if (options.checkCrossOrigin && isCrossOriginURL(url) && element.crossOrigin) { + url = addTimestamp(url); + } + + xhr.open('GET', url); + xhr.responseType = 'arraybuffer'; + xhr.withCredentials = element.crossOrigin === 'use-credentials'; + xhr.send(); + } + }, { + key: "read", + value: function read(arrayBuffer) { + var options = this.options, + imageData = this.imageData; // Reset the orientation value to its default value 1 + // as some iOS browsers will render image with its orientation + + var orientation = resetAndGetOrientation(arrayBuffer); + var rotate = 0; + var scaleX = 1; + var scaleY = 1; + + if (orientation > 1) { + // Generate a new URL which has the default orientation value + this.url = arrayBufferToDataURL(arrayBuffer, MIME_TYPE_JPEG); + + var _parseOrientation = parseOrientation(orientation); + + rotate = _parseOrientation.rotate; + scaleX = _parseOrientation.scaleX; + scaleY = _parseOrientation.scaleY; + } + + if (options.rotatable) { + imageData.rotate = rotate; + } + + if (options.scalable) { + imageData.scaleX = scaleX; + imageData.scaleY = scaleY; + } + + this.clone(); + } + }, { + key: "clone", + value: function clone() { + var element = this.element, + url = this.url; + var crossOrigin = element.crossOrigin; + var crossOriginUrl = url; + + if (this.options.checkCrossOrigin && isCrossOriginURL(url)) { + if (!crossOrigin) { + crossOrigin = 'anonymous'; + } // Bust cache when there is not a "crossOrigin" property (#519) + + + crossOriginUrl = addTimestamp(url); + } + + this.crossOrigin = crossOrigin; + this.crossOriginUrl = crossOriginUrl; + var image = document.createElement('img'); + + if (crossOrigin) { + image.crossOrigin = crossOrigin; + } + + image.src = crossOriginUrl || url; + image.alt = element.alt || 'The image to crop'; + this.image = image; + image.onload = this.start.bind(this); + image.onerror = this.stop.bind(this); + addClass(image, CLASS_HIDE); + element.parentNode.insertBefore(image, element.nextSibling); + } + }, { + key: "start", + value: function start() { + var _this2 = this; + + var image = this.image; + image.onload = null; + image.onerror = null; + this.sizing = true; // Match all browsers that use WebKit as the layout engine in iOS devices, + // such as Safari for iOS, Chrome for iOS, and in-app browsers. + + var isIOSWebKit = WINDOW.navigator && /(?:iPad|iPhone|iPod).*?AppleWebKit/i.test(WINDOW.navigator.userAgent); + + var done = function done(naturalWidth, naturalHeight) { + assign(_this2.imageData, { + naturalWidth: naturalWidth, + naturalHeight: naturalHeight, + aspectRatio: naturalWidth / naturalHeight + }); + _this2.sizing = false; + _this2.sized = true; + + _this2.build(); + }; // Most modern browsers (excepts iOS WebKit) + + + if (image.naturalWidth && !isIOSWebKit) { + done(image.naturalWidth, image.naturalHeight); + return; + } + + var sizingImage = document.createElement('img'); + var body = document.body || document.documentElement; + this.sizingImage = sizingImage; + + sizingImage.onload = function () { + done(sizingImage.width, sizingImage.height); + + if (!isIOSWebKit) { + body.removeChild(sizingImage); + } + }; + + sizingImage.src = image.src; // iOS WebKit will convert the image automatically + // with its orientation once append it into DOM (#279) + + if (!isIOSWebKit) { + sizingImage.style.cssText = 'left:0;' + 'max-height:none!important;' + 'max-width:none!important;' + 'min-height:0!important;' + 'min-width:0!important;' + 'opacity:0;' + 'position:absolute;' + 'top:0;' + 'z-index:-1;'; + body.appendChild(sizingImage); + } + } + }, { + key: "stop", + value: function stop() { + var image = this.image; + image.onload = null; + image.onerror = null; + image.parentNode.removeChild(image); + this.image = null; + } + }, { + key: "build", + value: function build() { + if (!this.sized || this.ready) { + return; + } + + var element = this.element, + options = this.options, + image = this.image; // Create cropper elements + + var container = element.parentNode; + var template = document.createElement('div'); + template.innerHTML = TEMPLATE; + var cropper = template.querySelector(".".concat(NAMESPACE, "-container")); + var canvas = cropper.querySelector(".".concat(NAMESPACE, "-canvas")); + var dragBox = cropper.querySelector(".".concat(NAMESPACE, "-drag-box")); + var cropBox = cropper.querySelector(".".concat(NAMESPACE, "-crop-box")); + var face = cropBox.querySelector(".".concat(NAMESPACE, "-face")); + this.container = container; + this.cropper = cropper; + this.canvas = canvas; + this.dragBox = dragBox; + this.cropBox = cropBox; + this.viewBox = cropper.querySelector(".".concat(NAMESPACE, "-view-box")); + this.face = face; + canvas.appendChild(image); // Hide the original image + + addClass(element, CLASS_HIDDEN); // Inserts the cropper after to the current image + + container.insertBefore(cropper, element.nextSibling); // Show the image if is hidden + + if (!this.isImg) { + removeClass(image, CLASS_HIDE); + } + + this.initPreview(); + this.bind(); + options.initialAspectRatio = Math.max(0, options.initialAspectRatio) || NaN; + options.aspectRatio = Math.max(0, options.aspectRatio) || NaN; + options.viewMode = Math.max(0, Math.min(3, Math.round(options.viewMode))) || 0; + addClass(cropBox, CLASS_HIDDEN); + + if (!options.guides) { + addClass(cropBox.getElementsByClassName("".concat(NAMESPACE, "-dashed")), CLASS_HIDDEN); + } + + if (!options.center) { + addClass(cropBox.getElementsByClassName("".concat(NAMESPACE, "-center")), CLASS_HIDDEN); + } + + if (options.background) { + addClass(cropper, "".concat(NAMESPACE, "-bg")); + } + + if (!options.highlight) { + addClass(face, CLASS_INVISIBLE); + } + + if (options.cropBoxMovable) { + addClass(face, CLASS_MOVE); + setData(face, DATA_ACTION, ACTION_ALL); + } + + if (!options.cropBoxResizable) { + addClass(cropBox.getElementsByClassName("".concat(NAMESPACE, "-line")), CLASS_HIDDEN); + addClass(cropBox.getElementsByClassName("".concat(NAMESPACE, "-point")), CLASS_HIDDEN); + } + + this.render(); + this.ready = true; + this.setDragMode(options.dragMode); + + if (options.autoCrop) { + this.crop(); + } + + this.setData(options.data); + + if (isFunction(options.ready)) { + addListener(element, EVENT_READY, options.ready, { + once: true + }); + } + + dispatchEvent(element, EVENT_READY); + } + }, { + key: "unbuild", + value: function unbuild() { + if (!this.ready) { + return; + } + + this.ready = false; + this.unbind(); + this.resetPreview(); + this.cropper.parentNode.removeChild(this.cropper); + removeClass(this.element, CLASS_HIDDEN); + } + }, { + key: "uncreate", + value: function uncreate() { + if (this.ready) { + this.unbuild(); + this.ready = false; + this.cropped = false; + } else if (this.sizing) { + this.sizingImage.onload = null; + this.sizing = false; + this.sized = false; + } else if (this.reloading) { + this.xhr.onabort = null; + this.xhr.abort(); + } else if (this.image) { + this.stop(); + } + } + /** + * Get the no conflict cropper class. + * @returns {Cropper} The cropper class. + */ + + }], [{ + key: "noConflict", + value: function noConflict() { + window.Cropper = AnotherCropper; + return Cropper; + } + /** + * Change the default options. + * @param {Object} options - The new default options. + */ + + }, { + key: "setDefaults", + value: function setDefaults(options) { + assign(DEFAULTS, isPlainObject(options) && options); + } + }]); + + return Cropper; + }(); + + assign(Cropper.prototype, render, preview, events, handlers, change, methods); + + return Cropper; + +})); diff --git a/app/assets/javascripts/custom_gallery.js b/app/assets/javascripts/custom_gallery.js new file mode 100644 index 0000000..5a5d137 --- /dev/null +++ b/app/assets/javascripts/custom_gallery.js @@ -0,0 +1,548 @@ +function rotate(){ + $("#crop_div").dialog("open"); +} +function change_degree(degree_change){ + var degree_org = parseInt($('#show_degree').text()) + degree_org+=degree_change + if (degree_org==360 || degree_org==-360){ + degree_org = 0 + } + $('#show_degree').text(degree_org) +} +function init_upload(temp_length){ + var value = $("input[name='all_upload_length']") + if (value.val()==''){ + value.val(temp_length) + $.ajax({ + type : "post", + url : "/admin/custom_galleries/init_upload", + dataType : "json", + data:{all_length: value.val()}, + async: false, + global:false, + success: function() + { + }, + error : function(data){ + alert('init upload process failed, please try again later.') + } + }); + if (value.val()=='1'){ + value.val('') + } + } +} +function form_submit() { + var temp_length = $('#file-list').find('li.template-upload').length + init_upload(temp_length) + var length_upload + var count_upload + var send_start + if (temp_length>1){ + $( 'form#fileupload' ).ajaxSuccess(function() { + if (typeof length_upload == "undefined"){ + count_upload = 1 + length_upload = $('#file-list').find('li.template-upload').length + } + else{ + count_upload ++ + } + if (count_upload === length_upload){ + send_start = undefined + $.ajax({ + url : "/admin/custom_galleries/start_upload_process", + dataType : "json", + type : "post", + error: function(){ + alert('init upload process failed, please try again later.') + }, + success: function(){ + window.location.href = '/admin/custom_galleries/upload_process' + } + }) + $.ajax({ + url : "/admin/custom_galleries/start_upload_process", + dataType : "json", + type : "post", + error: function(){ + alert('init upload process failed, please try again later.') + }, + success: function(){ + window.location.href = '/admin/custom_galleries/upload_process' + } + }) + } + }); + } +} +function form_only_one_submit() { + var temp_length = 1 + init_upload(temp_length) +} +!function ($) { + $.fn.checkListLength = function (param){ + _defaultSettings = { + onlyOne: null, + }; + _set = $.extend(_defaultSettings, param); + $this = this; + $li = this.children('li'); + $dropzone = $('#dropzone'); + if(($li.length - _set.onlyOne) === 0) { + $('#dropzone').fadeIn(300); + } else { + $('#dropzone').fadeOut(300); + } + $('#file-list').nanoScroller({ scrollTop: 0, iOSNativeScrolling: true }); + }; +}(window.jQuery); + +$(function () { + 'use strict'; + // Initialize the jQuery File Upload widget: + if($('#fileupload').length){ + $('#fileupload').fileupload({ + //maxFileSize: 5000000,= + acceptFileTypes: /(\.|\/)(gif|jpe?g|png)$/i, + dropZone: $('#dropzone'), + headers:{ + 'X-CSRF-Token': $('meta[name="csrf-token"]').attr("content") + } + }); + } +}); +Array.prototype.uniq = function(){ + var attr = this + attr = $.grep(attr, function(v, k){ + return $.inArray(v ,attr) === k; + }); + return attr; +} + +function batch_crop(){ + var check_li = $('#imgholder').find("input[type='checkbox']:checked").parents('li'); + var image_ids =[]; + if (check_li.length>0){ + check_li.each(function(){ + image_ids.push($(this).data('image-id')); + }); + if (navigator.onLine) { + window.location.href = '/admin/custom_galleries/batch_crop?image_ids=' + image_ids.join(',') + } else { + alert('Please connect the network and try again later!') + } + }else{ + alert('Please select at least one') + } +} +function select_all() { + $('#imgholder').find("input[type='checkbox']:not(:checked)").trigger('click') +} +function translate(ele,pretext,text,return_flag){ + var return_value + if (navigator.onLine) { + $.ajax({ + url : "/admin/custom_galleries/translate", + dataType : "json", + type : "post", + async: false, + data:{text:text}, + success:function(data){ + if (return_flag){ + return_value = data.translate + } + else{ + ele.html(pretext + data.translate) + } + }, + error:function(){ + var back = text.split('.')[1].split('_') + var result = [] + for (i=0;i a').rsImg(); + if($containerData.custom_galleryId == 'custom_gallery') { + // $container.masonry({ + // itemSelector : '.rgcustom_album', + // isAnimated: true, + // }); + $custom_albumname.each(function(i) { + var $custom_albumblock = $(this).closest('a').height(), + $H = $(this).outerHeight(true); + if($H > $custom_albumblock) { + $(this).css({ + 'bottom': "auto", + 'top': 0, + }); + $(this).hover(function() { + $(this).stop(true, true).delay(500).animate({ + 'top': '-='+($H-$custom_albumblock), + },($H-$custom_albumblock)*10) + },function() { + $(this).stop(true, true); + $(this).css({ + 'bottom': "auto", + 'top': 0, + }); + }); + }; + }); + $('#orbit_custom_gallery').delegate('.icons-tag', clickEvent, function(){ + var tmp = $(this).parents('.rgcustom_album').eq(0) + var now_this = $(this) + if (tmp.find('.custom_albumtag').eq(0).find('li.label').length == 0){ + var ele_id = tmp.attr('data-image-id') + $.ajax({ + type : "post", + url : "/admin/custom_galleries/get_tag", + dataType : "text", + data:{ele_id: ele_id}, + global:false, + success: function(data) + { + tmp.find('.custom_albumtag').eq(0).html(data) + now_this.parents('.custom_gallery_info').nextAll('.custom_albumtag').slideToggle(300); + }, + error : function(data){ + alert('init process failed, please try again later.') + } + }); + }else{ + $(this).parents('.custom_gallery_info').nextAll('.custom_albumtag').slideToggle(300); + } + }); + }; + }); + + var bindEvent = function(instance,elem){ + var $e = elem, + image_id = $e.closest(".rgcustom_album").data("image-id"); + obj = photosData.custom_galleries.filter(function(a) { + return a.id == image_id; + })[0]; + switch($e.attr("for")){ + case "description": + instance.find(".description-editor").each(function(){ + var locale = $(this).attr("for") + $(this).html(obj.description ? obj.description[locale] : ''); + CKEDITOR.replace(this,config); + }) + + instance.find(".title-editor").each(function(){ + var locale = $(this).attr("for") + $(this).html(obj.title ? obj.title[locale] : ''); + CKEDITOR.replace(this,config); + }) + instance.find("a[data-toggle=\"tab\"],div[role=\"tabpanel\"]").each(function(){ + $(this).attr('id',$(this).attr('id').replace('-fake','')) + }) + instance.find("input[type=hidden]").val(image_id); + instance.find("form").bind("ajax:success",function(evt, data, status){ + $.pageslide.close(); + photosData = data; + }) + instance.find('.btn-group a[data-toggle="tab"]').click(function(){ + $(this).tab('show'); + $(this).parents('.btn-group').eq(0).children('a[data-toggle="tab"]').removeClass('active in'); + $(this).addClass('active in') + var inst = $($(this).attr('href')).find('textarea') + window.setTimeout(function(){ + CKEDITOR.instances[inst.attr('name')].execCommand('autogrow') + },300) + }) + break; + case "tags": + instance.find('.tags-groups').cardCheck({ + item: '.card' + }); + for(i = 0; i < obj.tags.length; i++){ + instance.find("input[value="+obj.tags[i]+"]").parent().addClass('active'); + instance.find("input[value="+obj.tags[i]+"]").prop("checked","checked"); + } + instance.find("form").submit(function(event) { + var checkboxes = $(this).find("input[type=checkbox]:checked"), + tag_ids = [], + image_ids =[image_id]; + + checkboxes.each(function(){ + tag_ids.push($(this).val()); + }) + $.post("/admin/custom_galleries/image_tagging",{"image_ids":image_ids,"tag_ids":tag_ids},function(json){ + $.pageslide.close(); + photosData = json; + }) + return false; + }); + break; + case "batch": + instance.find('.tags-groups').cardCheck({ + item: '.card' + }); + instance.find("form").submit(function(event) { + var checkboxes = $(this).find("input[type=checkbox]:checked"), + tag_ids = [], + image_ids =[], + images = $("#imgholder .rgcustom_album.active"); + checkboxes.each(function(){ + tag_ids.push($(this).val()); + }) + images.each(function(){ + image_ids.push($(this).data("image-id")); + }) + $.post("/admin/custom_galleries/image_tagging",{"image_ids":image_ids,"tag_ids":tag_ids},function(json){ + $.pageslide.close(); + photosData = json; + }) + return false; + }); + break; + } + } + + if($("#imgholder").length){ + $('.open').pageslide({ + W: '40vw', + loadComplete: function(instance,elem) { + bindEvent(instance,elem); + } + }) + } + $("#imgholder").on(clickEvent, '.photo_cover', function(event) { + var image_id = $(this).closest(".rgcustom_album").data("image-id"), + custom_album_id = $("#imgholder").data("custom_gallery-id"), + set_cover = true; + if($(this).children().hasClass("icons-star-2")){ + $(".icons-star").removeClass("icons-star").addClass('icons-star-2'); + $(this).children().removeClass("icons-star-2").addClass("icons-star"); + }else{ + $(this).children().removeClass("icons-star").addClass("icons-star-2"); + set_cover = false; + } + $.post("/admin/custom_galleries/set_cover",{"custom_album_id":custom_album_id,"image_id":image_id,"set_cover":set_cover}); + + }); + + $("#delete_selected_photos_btn").click(function(){ + var photos_to_delete = [], + delete_cover = false, + $photos = $(".rgcustom_album.active"), + custom_album_id = $("#imgholder").data("custom_gallery-id"); + $('.modal-body .spinning').fadeIn('fast'); + $('.modal-body .text-warning').hide(0); + $photos.each(function(){ + photos_to_delete.push($(this).data('image-id')); + if ($(this).find(".icons-star").length) { + delete_cover = true; + }; + }); + $.ajax({ + url : "/admin/custom_galleries/delete_photos", + type : "POST", + data : {"images":photos_to_delete,"delete_cover":delete_cover,"custom_album_id":custom_album_id}, + success : function(){ + $photos.slideUp(300,function() { + $(this).remove(); + }); + $('#dialog').modal('hide'); + $('.modal-body .spinning').hide(); + $('.modal-body .text-warning').show(); + $('.deletephoto, .deselect, .addtags').addClass('hide') + } + }); + }) + + $('#imgholder').on(clickEvent, '.checkbox', function() { + $(this).prop('checked') ? $(this).closest('.rgcustom_album').addClass('active') : $(this).closest('.rgcustom_album').removeClass('active'); + var checkLength = $("#imgholder .rgcustom_album.active"); + checkLength.length ? $('.deletephoto, .deselect, .addtags, .crop').removeClass('hide') : $('.deletephoto, .deselect, .addtags, .crop').addClass('hide'); + }); + $('.deselect').on(clickEvent, function(event) { + $('.rgcustom_album').removeClass('active'); + $('.checkbox').prop('checked', false) + $('.deletephoto, .deselect, .addtags').addClass('hide') + event.preventDefault(); + }); + $('.phtot-action').delegate('li', clickEvent, function(event) { + $('.checkbox').prop('checked', false) + $('.rgcustom_album').removeClass('active'); + $('.deletephoto, .deselect, .addtags').removeClass('hide') + }); + var images_order = []; + $("#edit-order-btn").on("click",function(){ + var el = $(this); + if($container.data("order-edit") == "0"){ + $container.sortable("enable"); + $(".order-edit-notification").slideDown(); + images_order = $container.sortable( "toArray", { attribute: "data-image-id" }); + images_order = images_order.uniq(); + $container.data("order-edit","1"); + translate(el,'','custom_gallery.save_order',false) + }else{ + var temp = $container.sortable( "toArray", { attribute: "data-image-id" }), + type = $container.attr("id"); + temp = temp.uniq() + if(images_order.toString() != temp.toString()){ + $.ajax({ + url : "/admin/custom_galleries/order", + data : {"imageids" : temp, "type" : type}, + type : "post", + dataType : "json" + }) + } + $(".order-edit-notification").slideUp(); + $container.sortable("disable"); + $container.data("order-edit","0"); + translate(el,'','custom_gallery.edit_order',false) + } + return false; + }) + + // + + var last_image_id = null; + $('.add-imgs').on({ + click: function() { + $('#fileupload').slideToggle(300, function() { + if(!$(this).is(':hidden')) { + translate($('.add-imgs'),' ','custom_gallery.close_panel',false) + $('.rgbody').stop(true, false).animate({'padding-bottom': 280}, 300); + $("#edit-order-btn").hide(); + $.ajax({ + url : "/admin/custom_galleries/last_image_id", + data : {"custom_albumid" : $("#fileupload_aid").val()}, + dataType : "json", + type : "get" + }).done(function(d){ + last_image_id = d.last_image_id; + }) + } else { + translate($('.add-imgs'),' ','custom_gallery.add_image',false) + $('.files').empty() + $('#file-list').checkListLength(); + $('.rgbody').stop(true, false).animate({'padding-bottom': 0}, 300); + $("#edit-order-btn").show(); + fetchNewImages(); + }; + }); + return false; + } + }); + var fetchNewImages = function(){ + var custom_albumid = $("#fileupload_aid").val(); + + $.getJSON('/admin/custom_galleries/get_photoData_json?id='+custom_albumid, function(json, textStatus) { + photosData = json; + }); + + $.ajax({ + url : "/admin/custom_galleries/new_images", + data : {"last_image_id" : last_image_id, "custom_album_id" : custom_albumid}, + success : function(data){ + var $e = $(data); + $imgs = $e.find("img"); + $("#imgholder").prepend($e); + $os = $e.find("a.open"); + $os.pageslide({ + W: '40vw', + loadComplete: function(instance,elem) { + bindEvent(instance,elem); + } + }); + } + }) + + } + var buttons_option={} + var op_fn1 = function() { + var check_img = $('#imgholder').find("input[type='checkbox']:checked").parents('li').find('img'); + check_img.each(function(){ + check_img.css('transform','rotate('+$('#show_degree').text()+'deg)'); + }); + } + var op_fn2 = function() { + var confirm_msg = translate('','','custom_gallery.confirm_msg',true) + if ( confirm (confirm_msg) ){ + var check_li = $('#imgholder').find("input[type='checkbox']:checked").parents('li'); + var image_ids =[]; + check_li.each(function(){ + image_ids.push($(this).data('image-id')); + }); + if (navigator.onLine) { + window.location.href = '/admin/custom_galleries/rotate_images?image_ids=' + image_ids.join(',') +'&rotate_angle=' + $('#show_degree').text() + } else { + alert('Please connect the network and try again later!') + } + console.log(image_ids) + $(this).dialog("close"); + } + + } + var op_fn3 = function() { $(this).dialog("close"); } + var op1 = translate('','','custom_gallery.review',true) + var op2 = translate('','','custom_gallery.rotate',true) + var op3 = translate('','','custom_gallery.close_panel',true) + buttons_option[op1] = op_fn1 + buttons_option[op2] = op_fn2 + buttons_option[op3] = op_fn3 + $("#crop_div").dialog({ + autoOpen: false, + show: "blind", + hide: "explode", + buttons: buttons_option + }); +}); + diff --git a/app/assets/javascripts/custom_galleryAPI.js.erb b/app/assets/javascripts/custom_galleryAPI.js.erb new file mode 100644 index 0000000..5ef550f --- /dev/null +++ b/app/assets/javascripts/custom_galleryAPI.js.erb @@ -0,0 +1,297 @@ +<%# encoding: utf-8 %> +$.extend($.expr[':'], { + 'containsi': function (elem, i, match, array) { + return (elem.textContent || elem.innerText || '').toLowerCase().indexOf((match[3] || "").toLowerCase()) >= 0; + } +}); +var custom_galleryAPI = function(){ + g = this; + this.urlVars = rcom.getUrlVars(); + this.custom_albumArea = $("#orbit_custom_gallery"); + this.loadArea = null; + this.tagList = $("ul#custom_gallery_tag_list"); + this.loading = $("#loading"); + + this.fullscreen_mode = false; + + this.loadTheater = function(id){ + + g.loadstart(); + var imageArray = []; + var imagecount = 0; + var picHeight = 0; + var bindHandlers = function(){ + var $slidelist = $('.slidelist'), + $rslide = $('.rslide'), + $rslidenav = $('.rslidenav'), + $img = $("#main_pic img"), + wHeight = $(window).height(); + + $("#main_pic").height(picHeight); + $img.height("100%"); + + $('.bt-tag').click(function(){ + if(!$(this).hasClass("active")) + updatePhotoTag(); + $(this).toggleClass("active"); + var $tag_panel = $('#tag_panel'), + tag_panel_position = 0; + + if( $tag_panel.css('right') == '0px' ){ + tag_panel_position = -200; + } + $tag_panel.animate({'right':tag_panel_position}, 300); + + g.custom_albumArea + .delay(200) + .animate({'margin-right':tag_panel_position+200},300); + return false; + }); + var updatePhotoTag = function(){ + var tags = imageArray[imagecount].tag_ids; + if(tags.length > 0 && g.tagList.find("li").length == 0){ + var tagnames = imageArray[imagecount].tag_names; + g.tagList.empty(); + for(i in tagnames){ + $li = $("
  • "+tagnames[i]+"
  • "); + g.tagList.append($li); + } + }else if(tags.length > 0 && g.tagList.find("li").length > 0) { + g.tagList.find("input").attr("checked",false); + for(tag in tags){ + g.tagList.find("li[data-content="+tags[tag]+"] input").attr("checked",true); + } + }else if(tags.length == 0){ + if(g.tagList.find("input").length == 0) + g.tagList.empty(); + else + g.tagList.find("input").attr("checked",false); + } + } + g.custom_albumArea.find("#tag_search_box").keyup(function(e){ + sval = $(this).val(); + if(sval == "<%= I18n.t('custom_gallery.search_tags') %>") + sval = ""; + sval = sval.replace(/(^\s*)|(\s*$)/g,''); + if(sval){ + var re1 = new RegExp("^[\u4E00-\uFA29]*$"); //Chinese character range + var re2 = new RegExp("^[\uE7C7-\uE7F3]*$"); + if ((re1.test(sval) && (re2.test(sval)))){ + $("#custom_gallery_tag_list li span:not(:contains("+sval+"))").parent().slideUp(); + }else{ + $("#custom_gallery_tag_list li span:not(:containsi("+sval+"))").parent().slideUp(); + } + + }else{ + $("#custom_gallery_tag_list li").slideDown(); + } + }) + g.custom_albumArea.find("#tag_panel .bt-save").click(function(){ + g.saveTags(imageArray[imagecount]._id,"pic",function(tagids){ + imageArray[imagecount].tag_ids = tagids; + }) + }) + $(".slidectrl a.togglelist").click(function(){ + var rslide_h = $rslide.outerHeight(); + if ( $slidelist.height() < 1 ){ + $slidelist.stop().animate({'height':rslide_h - 30}, 300); + $slidelist.find("ul").show(); + } else { + $slidelist.stop().animate({'height':'0px'}, 300); + $slidelist.find("ul").hide(); + } + }) + $(".slidectrl .togglescreen").click(function(){ + toggleFullscreen(); + }) + $(".slidectrl .browserfullscreen").click(function(){ + browserFullScreen(); + }) + $slidelist.find(".list_element").click(function(){ + imagecount = parseInt($(this).parent().attr("for")); + changeImage($(this)); + }) + $rslidenav.find(".navN").click(function(){ + nextpic($(this)); + }) + $rslidenav.find("a.navP").click(function(){ + prevpic($(this)); + }) + $("#nextpic").click(function(){ + nextpic($(this)); + }) + + $(document).keydown(function(e){ + if (e.keyCode == 37){ + prevpic($rslidenav.find(".navP")); + return false; + } + if(e.keyCode == 39){ + nextpic($rslidenav.find(".navN")); + return false; + } + if(e.keyCode == 27){ + toggleFullscreen(); + $rslide.removeClass('browserFullScreen'); + return false; + } + if(e.keyCode == 70 || e.keyCode == 102){ + if($rslide.hasClass("fullscreen")) + browserFullScreen(); + } + }); + var browserFullScreen = function(){ + if(g.fullscreen_mode==false){ + var el = document.documentElement, + rfs = el.requestFullScreen || el.webkitRequestFullScreen || el.mozRequestFullScreen; + rfs.call(el); + g.fullscreen_mode = true; + }else{ + var el = document, + rfs = el.exitFullscreen || el.msExitFullscreen || el.webkitExitFullscreen || el.mozCancelFullScreen; + rfs.call(el); + g.fullscreen_mode = false; + } + } + $(window).resize(function(){ + if(window.innerWidth == screen.width && window.innerHeight == screen.height) { + $rslide.addClass('browserFullScreen'); + } else { + $rslide.removeClass('browserFullScreen'); + } + }) + var nextpic = function(dom){ + if(imagecount == imageArray.length - 1) + imagecount = 0; + else + imagecount++; + changeImage(dom); + } + var prevpic = function(dom){ + if(imagecount == 0) + imagecount = imageArray.length - 1 + else + imagecount--; + changeImage(dom); + } + var toggleFullscreen = function(){ + if($rslide.hasClass("fullscreen")){ + $rslide.css("position","relative"); + $rslide.removeClass("fullscreen"); + $(".slidectrl .browserfullscreen").hide(); + $img.css({"padding":""}) + $("#main_pic").height(picHeight ); + }else{ + $("#main_pic").height(wHeight); + // $img.height("100%"); + $rslide.css("position",""); + $rslide.addClass("fullscreen"); + $img.css({"padding":($rslide.height()-$img.height())/2}) + $(".slidectrl .browserfullscreen").show(); + } + } + window.onpopstate = function(){ + var image_id = document.URL.split('/')[document.URL.split('/').length-1]; + var image = imageArray.filter(function(a){return a._id == image_id})[0]; + imagecount = imageArray.indexOf(image); + changeTheaterImage(image.file.theater.url); + } + var changeImage = function(dom){ + var pageurl = dom.attr('href'); + + if(rcom.getInternetExplorerVersion() == -1){ + if(pageurl!=window.location){ + window.history.pushState({path:pageurl},'',pageurl); + } + }else{ + window.location.hash = pageurl; + } + + changeTheaterImage(dom.attr("data-content")); + } + var changeTheaterImage = function(url){ + $img.fadeOut(200,function(){ + g.loadstart(); + $img.attr("src",""); + $img.attr({"src":url,"height":picHeight+"px"}).load(function(){ + $img.fadeIn(200); + g.loadcomplete(); + }); + + if($rslide.hasClass("fullscreen")){ + $img.css({"padding":($rslide.height()-$img.height())/2}) + } + $slidelist.stop().animate({'height':'0px'}, 300); + $slidelist.find("ul").hide(); + // $(".slideinfo b.info").text(imageArray[imagecount].title); + if($('.bt-tag').hasClass("active")) + updatePhotoTag(); + if(imageArray[imagecount].description) + $(".slideinfo .info").text(imageArray[imagecount].description); + else + $(".slideinfo .info").text(""); + if(imageArray.length > 1) + updateNavigation(); + }) + } + var updateNavigation = function(){ + var next, prev; + if(imagecount == 0){ + next = 1; + prev = imageArray.length - 1; + }else if(imagecount == imageArray.length - 1){ + next = 0 + prev = imageArray.length - 2; + }else{ + next = imagecount + 1; + prev = imagecount - 1; + } + $(".navN").attr({"href":imageArray[next]._id,"data-content":imageArray[next].file.theater.url}); + $(".navP").attr({"href":imageArray[prev]._id,"data-content":imageArray[prev].file.theater.url}); + }; + if(imageArray.length > 1) + updateNavigation(); + } + + var preparestage = function(custom_albumid){ + $.getJSON("../custom_galleries/"+custom_albumid+"/imgs",function(custom_album){ + // imageArray = eval(custom_album.images); + $.each(custom_album.images,function(i,image){ + imageArray.push(image) + if(image._id == id) + imagecount = i; + }) + bindHandlers(); + }) + } + + if(rcom.getInternetExplorerVersion()!=-1){ + var photo_id = window.location.hash.replace("#",""); + if(photo_id){ + var url = window.location.href; + var params = url.split("/"); + // params[params.length-1] = photo_id; + url = url.replace(params[params.length-1],photo_id); + + window.location.href = url; + } + } + + var custom_albumid = $("#main_pic").attr("data-content"); + g.custom_albumArea.find(".bt-back").attr("href",'/'+g.locale+"/admin/custom_galleries/"+custom_albumid); + g.custom_albumArea.find(".bt-edit").attr("href","../custom_albums/"+custom_albumid+"/edit"); + g.custom_albumArea.css("margin-bottom","0"); + picHeight = $(window).height() - ($("#orbit-bar").outerHeight() + $("#orbit_custom_gallery .form-actions").outerHeight()); + preparestage(custom_albumid); + + } + this.loadcomplete = function(){ + g.loading.hide(); + } + this.loadstart = function(){ + g.loading.show(); + } + +} + custom_galleryAPI.prototype.locale = "<%= I18n.locale %>"; + diff --git a/app/assets/javascripts/custom_galleryAPI_frontend.js.erb b/app/assets/javascripts/custom_galleryAPI_frontend.js.erb new file mode 100644 index 0000000..12ccb27 --- /dev/null +++ b/app/assets/javascripts/custom_galleryAPI_frontend.js.erb @@ -0,0 +1,273 @@ +<%# encoding: utf-8 %> +$.extend($.expr[':'], { + 'containsi': function (elem, i, match, array) { + return (elem.textContent || elem.innerText || '').toLowerCase().indexOf((match[3] || "").toLowerCase()) >= 0; + } +}); + +var custom_galleryAPI = function(){ + g = this; + this.urlVars = rcom.getUrlVars(); + this.custom_albumArea = $("#orbit_custom_gallery"); + this.loadArea = "theater"; + this.tagList = $(".taglist ul"); + this.loading = $("#loading"); + this.fullscreen_mode = false; + // this.authenticated = false; + this.initialize = function(callbackFn){ + if(g.loadArea == "theater"){ + if(rcom.getInternetExplorerVersion()!=-1){ + var photo_id = window.location.hash.replace("#",""); + if(photo_id){ + var params = rcom.getUrlVars(); + var url = window.location.href.split("?")[0]; + params["image_id"] = photo_id; + for(i=0;i"+tags[tag].name+""); + } + + } + + + $(".slidectrl a.togglelist").click(function(){ + var rslide_h = $rslide.outerHeight(); + if ( $slidelist.height() < 1 ){ + $slidelist.stop().animate({'height':rslide_h - 30}, 300); + $slidelist.find("ul").show(); + } else { + $slidelist.stop().animate({'height':'0px'}, 300); + $slidelist.find("ul").hide(); + } + }) + $(".slidectrl .togglescreen").click(function(){ + toggleFullscreen(); + }) + $(".slidectrl .browserfullscreen").click(function(){ + browserFullScreen(); + }) + $slidelist.find(".list_element").click(function(){ + imagecount = parseInt($(this).parent().attr("for")); + changeImage($(this)); + }) + $rslidenav.find(".navN").click(function(){ + nextpic($(this)); + }) + $rslidenav.find("a.navP").click(function(){ + prevpic($(this)); + }) + $("#nextpic").click(function(){ + nextpic($(this)); + }) + + $(document).keydown(function(e){ + if (e.keyCode == 37){ + prevpic($rslidenav.find(".navP")); + return false; + } + if(e.keyCode == 39){ + nextpic($rslidenav.find(".navN")); + return false; + } + if(e.keyCode == 27){ + toggleFullscreen(); + $rslide.removeClass('browserFullScreen'); + return false; + } + if(e.keyCode == 70 || e.keyCode == 102){ + if($rslide.hasClass("fullscreen")) + browserFullScreen(); + } + }); + var browserFullScreen = function(){ + if(g.fullscreen_mode==false){ + var el = document.documentElement, + rfs = el.requestFullScreen || el.webkitRequestFullScreen || el.mozRequestFullScreen; + rfs.call(el); + g.fullscreen_mode = true; + }else{ + var el = document, + rfs = el.exitFullscreen || el.msExitFullscreen || el.webkitExitFullscreen || el.mozCancelFullScreen; + rfs.call(el); + g.fullscreen_mode = false; + } + } + $(window).resize(function(){ + if(window.innerWidth == screen.width && window.innerHeight == screen.height) { + $rslide.addClass('browserFullScreen'); + } else { + $rslide.removeClass('browserFullScreen'); + } + }) + var nextpic = function(dom){ + if(imagecount == imageArray.length - 1) + imagecount = 0; + else + imagecount++; + changeImage(dom); + } + var prevpic = function(dom){ + if(imagecount == 0) + imagecount = imageArray.length - 1 + else + imagecount--; + changeImage(dom); + } + var toggleFullscreen = function(){ + if($rslide.hasClass("fullscreen")){ + $rslide.css("position","relative"); + $rslide.removeClass("fullscreen"); + $(".slidectrl .browserfullscreen").hide(); + $img.css({"padding":""}) + $("#main_pic").height("auto"); + }else{ + $("#main_pic").height(wHeight); + $img.css("height","auto"); + $rslide.css("position",""); + $rslide.addClass("fullscreen"); + $img.css({"padding":($rslide.height()-$img.height())/2}) + $(".slidectrl .browserfullscreen").show(); + } + } + window.onpopstate = function(){ + var image_id = window.location.pathname.split('/')[window.location.pathname.split('/').length-1].split('-'); + var image = imageArray.filter(function(a){return a._id == image_id[1]})[0]; + imagecount = imageArray.indexOf(image); + changeTheaterImage(image.file.theater.url); + } + var changeImage = function(dom){ + var pageurl = dom.attr('href'); + + if(rcom.getInternetExplorerVersion() == -1){ + if(pageurl!=window.location){ + var segments = window.location.pathname.split("/"), + uid = segments[segments.length-1]; + pageurl = window.location.pathname.replace(uid,"-"+pageurl)+"?method=theater"; + window.history.pushState({path:pageurl},'',pageurl); + } + }else{ + window.location.hash = pageurl; + } + + changeTheaterImage(dom.attr("data-content")); + } + var changeTheaterImage = function(url){ + $img.fadeOut(200,function(){ + g.loadstart(); + if($rslide.hasClass("fullscreen")){ + + $img.attr({"src":url}).css("height","100%").load(function(){ + g.loadcomplete(); + $img.fadeIn(200); + }); + }else{ + $img.attr({"src":url}).css("height","auto").load(function(){ + g.loadcomplete(); + $img.fadeIn(200); + });; + } + if($rslide.hasClass("fullscreen")){ + $img.css({"padding":($rslide.height()-$img.height())/2}) + } + $slidelist.stop().animate({'height':'0px'}, 300); + $slidelist.find("ul").hide(); + // $(".slideinfo b.info").text(imageArray[imagecount].title); + updatePhotoTag(); + if(imageArray[imagecount].description) + $(".slideinfo .info").text(imageArray[imagecount].description); + else + $(".slideinfo .info").text(""); + if(imageArray.length > 1) + updateNavigation(); + }) + + } + var updateNavigation = function(){ + var next, prev; + if(imagecount == 0){ + next = 1; + prev = imageArray.length - 1; + }else if(imagecount == imageArray.length - 1){ + next = 0 + prev = imageArray.length - 2; + }else{ + next = imagecount + 1; + prev = imagecount - 1; + } + $(".navN").attr({"href":imageArray[next]._id,"data-content":imageArray[next].file.theater.url}); + $(".navP").attr({"href":imageArray[prev]._id,"data-content":imageArray[prev].file.theater.url}); + }; + if(imageArray.length > 1) + updateNavigation(); + } + + var preparestage = function(images){ + // $.getJSON("/custom_galleries/imgs?id=" + custom_albumid, function(custom_album){ + imageArray = images; + $.each(images,function(i,image){ + if(image._id == id) + imagecount = i; + }) + bindHandlers(); + // }) + } + // if(rcom.getInternetExplorerVersion()!=-1){ + // var url_constructor = window.location.href.split("/"); + // var url = ""; + // for(x=0;x<=url_constructor.length-1;x++){ + // if(x == url_constructor.length-1){ + // url+="#!/"+url_constructor[x]; + // }else{ + // url+=url_constructor[x]+"/"; + // } + // } + + // window.location.href = url; + // } + + var custom_albumid = $("#main_pic").attr("data-content"); + g.custom_albumArea.css("margin-bottom","0"); + // picHeight = $(window).height() - ($("#orbit-bar").outerHeight() + $("#orbit_custom_gallery .form-actions").outerHeight()); + preparestage(json_image_data); + + } + this.loadcomplete = function(){ + g.loading.hide(); + } + this.loadstart = function(){ + g.loading.show(); + } + +} +custom_galleryAPI.prototype.locale = "en"; diff --git a/app/assets/javascripts/custom_gallery_old.js b/app/assets/javascripts/custom_gallery_old.js new file mode 100644 index 0000000..9a78181 --- /dev/null +++ b/app/assets/javascripts/custom_gallery_old.js @@ -0,0 +1 @@ +//= require custom_galleryAPI \ No newline at end of file diff --git a/app/assets/javascripts/custom_theater.js b/app/assets/javascripts/custom_theater.js new file mode 100644 index 0000000..ee055aa --- /dev/null +++ b/app/assets/javascripts/custom_theater.js @@ -0,0 +1,539 @@ +window.CustomGalleryTheater = function(){ + var parent_divs = $('.custom_gallery').parents('div'), + parent_div_z_index = parent_divs.eq(parent_divs.length-1).css('z-index') + parent_divs.eq(parent_divs.length-1).css('z-index','2000') + var gt = this, + currentPic = {}, + windowHeight = 0, + windowWidth = 0, + swipeController = null, + resizing = null; + loadingInterval = null, + mainPicLoading = 0, + nextPicLoading = 0, + prevPicLoading = 0, + currentSwipeImageDom = null, + currentSwipeImageDomLeftPos = 0, + windowScreenThresholdForTouch = 0, + loadingProcess = 0; + gt.stage = null; + gt.stripNextBtn = null; + gt.stripPrevBtn = null; + gt.thumbToggle = null; + gt.descriptionToggle = null; + gt.closeBtn = null; + gt.imageContainer = null; + gt.custom_albumData = {}; + gt.loader = null; + gt.thumbStrip = null; + gt.descriptionArea = null; + gt.isTheaterInitialized = false; + + var play_flag = false; + var button_left_string = '', + button_right_string = '', + button_play_string = '', + button_stop_string = '', + playtimeoutID; + var initialize = function(){ + gt.stage = $("#custom_gallery-theater-stage"); + gt.closeBtn = gt.stage.find(".custom_gallery-close"); + gt.switchBtn = gt.stage.find(".custom_gallery-theme-switch"); + gt.imageContainer = gt.stage.find(".image-container"); + gt.thumbStrip = gt.stage.find(".custom_gallery-thumb-wrap"); + gt.thumbToggle = gt.stage.find(".custom_gallery-thumb-toggle"); + gt.loader = gt.stage.find(".custom_gallery-loader"); + gt.stripNextBtn = gt.stage.find(".custom_gallery-thumb-next"); + gt.stripPrevBtn = gt.stage.find(".custom_gallery-thumb-prev"); + gt.descriptionArea = gt.stage.find(".custom_gallery-img-desc"); + gt.descriptionToggle = gt.stage.find(".custom_gallery-toggle-desc"); + windowScreenThresholdForTouch = windowWidth / 3; + startLoading(); + windowHeight = $(window).height(); + windowWidth = $(window).width(); + var addButton = function () { + $('.theaterButton').remove(); + if (!play_flag){ + $(button_left_string+button_play_string+button_right_string).insertAfter($('img.gal-active')); + } + else{ + $(button_left_string+button_stop_string+button_right_string).insertAfter($('img.gal-active')); + } + if (!$(".gal-prev").length) { $('#theaterPreviousButton').remove(); } + if (!$(".gal-next").length) { $('#theaterNextButton').remove(); } + + $('#theaterPreviousButton').click(function () { + gt.previousPic(); + }); + $('#theaterNextButton').click(function () { + gt.nextPic(); + }); + $('#theaterPlayButton').click(function () { + play_flag = true; + playtimeoutID = window.setInterval(function(){ + gt.playallPic(); + },3000) + window.onhashchange() + }); + $('#theaterStopButton').click(function () { + play_flag = false; + window.onhashchange() + window.clearInterval(playtimeoutID) + }); + } + window.onhashchange = locationHashChanged; + bindHandler(); + if(window.location.hash != "" && window.location.hash != "#"){ + var id = window.location.hash.split("#")[1]; + gt.createTheater("/xhr/custom_galleries/theater/" + id); + } + + + addButton(); + function locationHashChanged() { + addButton(); + } + + } + + var bindHandler = function(){ + // handler to close the theater + gt.closeBtn.on("click",gt.destroyTheater); + + // handler to show theater + $("#main-content div[data-list=images] a").on("click",function(){ + gt.createTheater($(this).attr("href")); + return false; + }) + + gt.switchBtn.on("click",gt.switchTheme); + gt.descriptionToggle.on("click", gt.toggleDescription) + gt.stripPrevBtn.on("click", gt.scrollStripRight); + gt.stripNextBtn.on("click", gt.scrollStripLeft); + + if(Modernizr.touch){ + gt.imageContainer.swipe({ + swipe : function(event, direction, distance, duration, fingerCount){ + if(direction == "left"){ + gt.nextPic(); + }else if(direction == "right"){ + gt.previousPic(); + } + } + }) + gt.thumbToggle.swipe({ + swipe : function(event, direction, distance, duration, fingerCount){ + if(direction == "up"){ + gt.thumbStrip.parent().addClass("show"); + gt.thumbToggle.addClass("up"); + gt.thumbToggle.find("i").removeClass("fa-angle-double-up").addClass("fa-angle-double-down"); + }else if(direction == "down"){ + gt.thumbStrip.parent().removeClass("show"); + gt.thumbToggle.removeClass("up"); + gt.thumbToggle.find("i").removeClass("fa-angle-double-down").addClass("fa-angle-double-up"); + } + } + }) + } + + //handler for window resize + $(window).resize(function(){ + clearTimeout(resizing); + resizing = setTimeout(doneResizing,1000); + }) + } + + var bindKeyHandlers = function(){ + if(!Modernizr.touch){ + $(document.body).on("click",".gal-active", gt.nextPic); + $(document.body).on("click",".gal-prev", gt.previousPic); + $(document.body).on("click",".gal-next", gt.nextPic); + $(document).on("keyup",function(e){ + switch(e.keyCode){ + case 39: + gt.nextPic(); + break; + case 37: + gt.previousPic(); + break; + case 27: + gt.destroyTheater(); + break; + } + }) + } + } + + + var doneResizing = function(){ + windowHeight = $(window).height(); + windowWidth = $(window).width(); + setThumbNavs(); + } + + var unBindKeyHandlers = function(){ + $(document).unbind("keyup"); + } + + gt.destroyTheater = function(){ + parent_divs.eq(parent_divs.length-1).css('z-index',parent_div_z_index) + gt.stage.hide(); + $("body").removeClass("custom_gallery-mode-on"); + gt.imageContainer.empty() + unBindKeyHandlers(); + window.location.hash = ""; + } + + gt.createTheater = function(link){ + gt.stage.show(); + $("body").addClass("custom_gallery-mode-on"); + bindKeyHandlers(); + gt.isTheaterInitialized = false; + if(!gt.isTheaterInitialized){ + $.ajax({ + url : link, + dataType : "json", + type : "get", + async:false + }).done(function(data){ + gt.custom_albumData = data.data; + var cp = gt.custom_albumData.images.filter(function(x){return x._id == gt.custom_albumData.image})[0]; + currentPic = {"image" : cp, "index" : gt.custom_albumData.images.indexOf(cp)}; + createThumbStrip(); + }) + }else{ + var id = link.split("/")[4], + cp = gt.custom_albumData.images.filter(function(x){return x._id == id})[0]; + currentPic = {"image" : cp, "index" : gt.custom_albumData.images.indexOf(cp)}; + createThumbStrip(); + } + window.currentPic = currentPic; + } + + gt.hasNextImage = function(){ + return (currentPic.index + 1) <= (gt.custom_albumData.images.length - 1); + } + + gt.hasPreviousImage = function(){ + return (currentPic.index > 0); + } + + gt.nextPic = function(){ + if(loadingProcess == 0){ + if(gt.hasNextImage()){ + startLoading(); + currentPic.image = gt.custom_albumData.images[currentPic.index + 1]; + currentPic.index = currentPic.index + 1; + setMainPic("next"); + } + } + } + gt.playallPic = function(){ + if(loadingProcess == 0){ + mainPicLoading = 1; + nextPicLoading = 1; + prevPicLoading = 1; + if(gt.hasNextImage()){ + currentPic.image = gt.custom_albumData.images[currentPic.index + 1]; + currentPic.index = currentPic.index + 1; + setMainPic("next"); + } + else{ + currentPic.image = gt.custom_albumData.images[0]; + currentPic.index = 0; + setMainPic(); + gt.isTheaterInitialized = false; + setTimeout(function(){ + loadingProcess = 0; + nextPicLoading = 0; + $('.theaterButton').remove() + $("img.custom_gallery-image.gal-prev.gal-inactive").remove(); + img = $("img.custom_gallery-image.gal-active"); + img.eq(0).remove(); + window.onhashchange() + },100) + } + } + } + + + gt.previousPic = function(){ + if(loadingProcess == 0){ + if(gt.hasPreviousImage()) { + startLoading(); + currentPic.image = gt.custom_albumData.images[currentPic.index - 1]; + currentPic.index = currentPic.index - 1; + setMainPic("prev"); + } + } + } + + gt.scrollStripLeft = function(){ + pixels_to_move = parseInt(gt.thumbStrip.css("left")) - (66 * 3); + maximum_pixels = (windowWidth / 2) - (66 * (gt.custom_albumData.images.length - 1)); + if(pixels_to_move < maximum_pixels){ + pixels_to_move = maximum_pixels; + } + gt.thumbStrip.css("left",pixels_to_move + "px"); + } + + gt.scrollStripRight = function(){ + pixels_to_move = parseInt(gt.thumbStrip.css("left")) + (66 * 3); + maximum_pixels = (windowWidth / 2); + if(pixels_to_move > maximum_pixels){ + pixels_to_move = maximum_pixels; + } + gt.thumbStrip.css("left",pixels_to_move + "px"); + } + + + gt.switchTheme = function(){ + var themeWhiteKlass = "theme-white", + nightKlass = "fa fa-circle", + dayKlass = "fa fa-circle-o", + $body = $("body"); + + if (!gt.switchBtn.hasClass(themeWhiteKlass)) { + gt.switchBtn + .addClass(themeWhiteKlass) + .find("i") + .attr("class", dayKlass); + + $body.addClass(themeWhiteKlass); + + } else { + gt.switchBtn + .removeClass(themeWhiteKlass) + .find("i") + .attr("class", nightKlass); + + $body.removeClass(themeWhiteKlass); + + } + } + + gt.toggleDescription = function(){ + $(this).toggleClass("active"); + gt.descriptionArea.toggleClass("active"); + } + + var startLoading = function(){ + loadingProcess = 1; + mainPicLoading = 0; + nextPicLoading = 0; + prevPicLoading = 0; + gt.loader.show(); + loadingInterval = setInterval(stopLoading, 300); + + } + + var stopLoading = function(){ + if(mainPicLoading == 1 && nextPicLoading == 1 && prevPicLoading == 1){ + clearInterval(loadingInterval); + setTimeout(function(){ + loadingProcess = 0; + gt.loader.hide(); + },100) + } + } + + var createThumbStrip = function(){ + if(!gt.isTheaterInitialized){ + $.each(gt.custom_albumData.images,function(index, image){ + var li = $(""), + a = $(""), + img = $("Image Thumb"); + a.on("click",function(){ + startLoading(); + var old_index = currentPic.index; + currentPic.image = gt.custom_albumData.images[index]; + currentPic.index = index; + if(old_index > index){ + setMainPic("prev",true); + }else if(old_index < index){ + setMainPic("next",true); + } + return false; + }) + + img.attr("src",image.file.thumb.url); + img.attr("alt",image.alt_title); + li.attr("data-index",index); + a.append(img); + li.append(a); + gt.thumbStrip.append(li); + }) + setThumbNavs(); + } + setMainPic(); + if (!$('.theaterButton').length){ + window.onhashchange() + } + } + + + var setThumbNavs = function() { + var $thumbNav = gt.stage.find('.custom_gallery-thumb-navs'), + $thumb = gt.thumbStrip.find('img'), + thumbs = $thumb.length, + thumbWidth = $thumb.eq(0).width(), + thumbGap = parseInt($thumb.closest('li').css('margin-right'), 10), + widthSum = (thumbWidth + thumbGap) * thumbs, + margin = widthSum * 0.1, + totalWidth = widthSum + margin; + + if (windowWidth < totalWidth) { + $thumbNav.addClass('show'); + }else{ + $thumbNav.removeClass('show'); + } + }; + function one_load(img){ + if (img[0].complete){ + setTimeout(loaded(img),100) + }else{ + setTimeout(one_load,20) + } + } + function loaded(img){ + calculateHeight(img); + mainPicLoading = 1; + img.fadeIn(100); + } + window.setMainPic = function(direction,selectedFromStrip){ + var img = null; + $('div.custom_gallery-show-original a').eq(0).attr('href',currentPic.image.url) + if(direction == null){ + img = $(""); + img.hide(); + img.attr("src", currentPic.image.file.theater.url); + gt.imageContainer.append(img); + img.one("load", function(){ + one_load(img) + }) + gt.isTheaterInitialized = true; + }else{ + img = gt.imageContainer.find(".gal-active"); + if(selectedFromStrip){ + gt.imageContainer.find(".gal-" + direction).attr("src",currentPic.image.file.theater.url); + } + if(direction == "next"){ + gt.imageContainer.find(".gal-prev").remove(); + img.removeClass("gal-active").addClass("gal-prev gal-inactive temp"); + gt.imageContainer.find(".gal-next").removeClass("gal-inactive gal-next").addClass("gal-active"); + gt.thumbStrip.css("left",(parseInt(gt.thumbStrip.css("left")) - 66) + "px"); + }else if(direction == "prev"){ + gt.imageContainer.find(".gal-next").remove(); + img.removeClass("gal-active").addClass("gal-next gal-inactive temp"); + gt.imageContainer.find(".gal-prev").removeClass("gal-inactive gal-prev").addClass("gal-active"); + gt.thumbStrip.css("left",(parseInt(gt.thumbStrip.css("left")) + 66) + "px"); + } + mainPicLoading = 1; + } + gt.descriptionArea.html("

    " + currentPic.image.description + "

    "); + if(currentPic.image.description == null){ + gt.descriptionArea.addClass("hide"); + }else{ + gt.descriptionArea.removeClass("hide"); + } + if (direction!=null){ + calculateHeight(gt.imageContainer.find(".gal-active")); + } + gt.thumbStrip.find("li.active").removeClass("active"); + gt.thumbStrip.find("li[data-index=" + currentPic.index + "]").addClass("active"); + + setStripToCenter(); + setNextPic(); + setPrevPic(); + changeUrl(); + } + + var calculateHeight = function(img){ + var h = 0, + w = 0, + new_width = 0; + if(!Modernizr.touch){ + if(typeof currentPic.image.height == "undefined"){ + h = img.height(); + currentPic.image.height = h; + w = img.width(); + currentPic.image.width = w; + }else{ + h = currentPic.image.height; + w = currentPic.image.width; + } + }else{ + h = img.height(); + w = img.width(); + } + if(h > (windowHeight - 150)){ + new_width = Math.round((windowHeight - 100) * w / h); + new_width = (new_width / windowWidth) * 100; + img.width(new_width + "%"); + }else{ + if(windowWidth < 770){ + img.width("90%"); + }else{ + img.width("65%"); + } + } + if (typeof set_custom_gallery_height != 'undefined'){ + set_custom_gallery_height() + } + } + + var changeUrl = function(){ + window.location.hash = currentPic.image._id + } + + var setStripToCenter = function(){ + left = (windowWidth / 2) - (66 * currentPic.index); + gt.thumbStrip.css("left",left + "px"); + } + + var setNextPic = function(){ + gt.imageContainer.find(".gal-next.temp").remove() + if(gt.hasNextImage()) { + var obj = gt.custom_albumData.images[currentPic.index + 1], + nextImg = $(""); + nextImg.attr("src",obj.file.theater.url); + nextImg.hide(); + gt.imageContainer.append(nextImg); + nextImg.on("load",function(){ + calculateHeight(nextImg); + nextPicLoading = 1; + nextImg.fadeIn(100); + }) + }else{ + nextPicLoading = 1; + } + } + + var setPrevPic = function(){ + gt.imageContainer.find(".gal-prev.temp").remove() + if(gt.hasPreviousImage()) { + var obj = gt.custom_albumData.images[currentPic.index - 1], + prevImg = $(""); + prevImg.attr("src",obj.file.theater.url); + prevImg.hide(); + gt.imageContainer.prepend(prevImg); + prevImg.on("load",function(){ + calculateHeight(prevImg); + prevPicLoading = 1; + prevImg.fadeIn(100); + }) + }else{ + prevPicLoading = 1; + } + } + + var l = function(x){ + console.log(x) + } + + $(document).ready(function(){ + initialize(); + }) +} + +// custom_gallery-image gal-prev gal-inactive \ No newline at end of file diff --git a/app/assets/javascripts/cycle.js b/app/assets/javascripts/cycle.js new file mode 100644 index 0000000..cd60730 --- /dev/null +++ b/app/assets/javascripts/cycle.js @@ -0,0 +1,1551 @@ +/*! + * jQuery Cycle Plugin (with Transition Definitions) + * Examples and documentation at: http://jquery.malsup.com/cycle/ + * Copyright (c) 2007-2010 M. Alsup + * Version: 2.9999.8 (26-OCT-2012) + * Dual licensed under the MIT and GPL licenses. + * http://jquery.malsup.com/license.html + * Requires: jQuery v1.3.2 or later + */ +;(function($, undefined) { +"use strict"; + +var ver = '2.9999.8'; + +// if $.support is not defined (pre jQuery 1.3) add what I need +if ($.support === undefined) { + $.support = { + opacity: !($.browser.msie) + }; +} + +function debug(s) { + if ($.fn.cycle.debug) + log(s); +} +function log() { + if (window.console && console.log) + console.log('[cycle] ' + Array.prototype.join.call(arguments,' ')); +} +$.expr[':'].paused = function(el) { + return el.cyclePause; +}; + + +// the options arg can be... +// a number - indicates an immediate transition should occur to the given slide index +// a string - 'pause', 'resume', 'toggle', 'next', 'prev', 'stop', 'destroy' or the name of a transition effect (ie, 'fade', 'zoom', etc) +// an object - properties to control the slideshow +// +// the arg2 arg can be... +// the name of an fx (only used in conjunction with a numeric value for 'options') +// the value true (only used in first arg == 'resume') and indicates +// that the resume should occur immediately (not wait for next timeout) + +$.fn.cycle = function(options, arg2) { + var o = { s: this.selector, c: this.context }; + + // in 1.3+ we can fix mistakes with the ready state + if (this.length === 0 && options != 'stop') { + if (!$.isReady && o.s) { + log('DOM not ready, queuing slideshow'); + $(function() { + $(o.s,o.c).cycle(options,arg2); + }); + return this; + } + // is your DOM ready? http://docs.jquery.com/Tutorials:Introducing_$(document).ready() + log('terminating; zero elements found by selector' + ($.isReady ? '' : ' (DOM not ready)')); + return this; + } + + // iterate the matched nodeset + return this.each(function() { + var opts = handleArguments(this, options, arg2); + if (opts === false) + return; + + opts.updateActivePagerLink = opts.updateActivePagerLink || $.fn.cycle.updateActivePagerLink; + + // stop existing slideshow for this container (if there is one) + if (this.cycleTimeout) + clearTimeout(this.cycleTimeout); + this.cycleTimeout = this.cyclePause = 0; + this.cycleStop = 0; // issue #108 + + var $cont = $(this); + var $slides = opts.slideExpr ? $(opts.slideExpr, this) : $cont.children(); + var els = $slides.get(); + + if (els.length < 2) { + log('terminating; too few slides: ' + els.length); + return; + } + + var opts2 = buildOptions($cont, $slides, els, opts, o); + if (opts2 === false) + return; + + var startTime = opts2.continuous ? 10 : getTimeout(els[opts2.currSlide], els[opts2.nextSlide], opts2, !opts2.backwards); + + // if it's an auto slideshow, kick it off + if (startTime) { + startTime += (opts2.delay || 0); + if (startTime < 10) + startTime = 10; + debug('first timeout: ' + startTime); + this.cycleTimeout = setTimeout(function(){go(els,opts2,0,!opts.backwards);}, startTime); + } + }); +}; + +function triggerPause(cont, byHover, onPager) { + var opts = $(cont).data('cycle.opts'); + if (!opts) + return; + var paused = !!cont.cyclePause; + if (paused && opts.paused) + opts.paused(cont, opts, byHover, onPager); + else if (!paused && opts.resumed) + opts.resumed(cont, opts, byHover, onPager); +} + +// process the args that were passed to the plugin fn +function handleArguments(cont, options, arg2) { + if (cont.cycleStop === undefined) + cont.cycleStop = 0; + if (options === undefined || options === null) + options = {}; + if (options.constructor == String) { + switch(options) { + case 'destroy': + case 'stop': + var opts = $(cont).data('cycle.opts'); + if (!opts) + return false; + cont.cycleStop++; // callbacks look for change + if (cont.cycleTimeout) + clearTimeout(cont.cycleTimeout); + cont.cycleTimeout = 0; + if (opts.elements) + $(opts.elements).stop(); + $(cont).removeData('cycle.opts'); + if (options == 'destroy') + destroy(cont, opts); + return false; + case 'toggle': + cont.cyclePause = (cont.cyclePause === 1) ? 0 : 1; + checkInstantResume(cont.cyclePause, arg2, cont); + triggerPause(cont); + return false; + case 'pause': + cont.cyclePause = 1; + triggerPause(cont); + return false; + case 'resume': + cont.cyclePause = 0; + checkInstantResume(false, arg2, cont); + triggerPause(cont); + return false; + case 'prev': + case 'next': + opts = $(cont).data('cycle.opts'); + if (!opts) { + log('options not found, "prev/next" ignored'); + return false; + } + $.fn.cycle[options](opts); + return false; + default: + options = { fx: options }; + } + return options; + } + else if (options.constructor == Number) { + // go to the requested slide + var num = options; + options = $(cont).data('cycle.opts'); + if (!options) { + log('options not found, can not advance slide'); + return false; + } + if (num < 0 || num >= options.elements.length) { + log('invalid slide index: ' + num); + return false; + } + options.nextSlide = num; + if (cont.cycleTimeout) { + clearTimeout(cont.cycleTimeout); + cont.cycleTimeout = 0; + } + if (typeof arg2 == 'string') + options.oneTimeFx = arg2; + go(options.elements, options, 1, num >= options.currSlide); + return false; + } + return options; + + function checkInstantResume(isPaused, arg2, cont) { + if (!isPaused && arg2 === true) { // resume now! + var options = $(cont).data('cycle.opts'); + if (!options) { + log('options not found, can not resume'); + return false; + } + if (cont.cycleTimeout) { + clearTimeout(cont.cycleTimeout); + cont.cycleTimeout = 0; + } + go(options.elements, options, 1, !options.backwards); + } + } +} + +function removeFilter(el, opts) { + if (!$.support.opacity && opts.cleartype && el.style.filter) { + try { el.style.removeAttribute('filter'); } + catch(smother) {} // handle old opera versions + } +} + +// unbind event handlers +function destroy(cont, opts) { + if (opts.next) + $(opts.next).unbind(opts.prevNextEvent); + if (opts.prev) + $(opts.prev).unbind(opts.prevNextEvent); + + if (opts.pager || opts.pagerAnchorBuilder) + $.each(opts.pagerAnchors || [], function() { + this.unbind().remove(); + }); + opts.pagerAnchors = null; + $(cont).unbind('mouseenter.cycle mouseleave.cycle'); + if (opts.destroy) // callback + opts.destroy(opts); +} + +// one-time initialization +function buildOptions($cont, $slides, els, options, o) { + var startingSlideSpecified; + // support metadata plugin (v1.0 and v2.0) + var opts = $.extend({}, $.fn.cycle.defaults, options || {}, $.metadata ? $cont.metadata() : $.meta ? $cont.data() : {}); + var meta = $.isFunction($cont.data) ? $cont.data(opts.metaAttr) : null; + if (meta) + opts = $.extend(opts, meta); + if (opts.autostop) + opts.countdown = opts.autostopCount || els.length; + + var cont = $cont[0]; + $cont.data('cycle.opts', opts); + opts.$cont = $cont; + opts.stopCount = cont.cycleStop; + opts.elements = els; + opts.before = opts.before ? [opts.before] : []; + opts.after = opts.after ? [opts.after] : []; + + // push some after callbacks + if (!$.support.opacity && opts.cleartype) + opts.after.push(function() { removeFilter(this, opts); }); + if (opts.continuous) + opts.after.push(function() { go(els,opts,0,!opts.backwards); }); + + saveOriginalOpts(opts); + + // clearType corrections + if (!$.support.opacity && opts.cleartype && !opts.cleartypeNoBg) + clearTypeFix($slides); + + // container requires non-static position so that slides can be position within + if ($cont.css('position') == 'static') + $cont.css('position', 'relative'); + if (opts.width) + $cont.width(opts.width); + if (opts.height && opts.height != 'auto') + $cont.height(opts.height); + + if (opts.startingSlide !== undefined) { + opts.startingSlide = parseInt(opts.startingSlide,10); + if (opts.startingSlide >= els.length || opts.startSlide < 0) + opts.startingSlide = 0; // catch bogus input + else + startingSlideSpecified = true; + } + else if (opts.backwards) + opts.startingSlide = els.length - 1; + else + opts.startingSlide = 0; + + // if random, mix up the slide array + if (opts.random) { + opts.randomMap = []; + for (var i = 0; i < els.length; i++) + opts.randomMap.push(i); + opts.randomMap.sort(function(a,b) {return Math.random() - 0.5;}); + if (startingSlideSpecified) { + // try to find the specified starting slide and if found set start slide index in the map accordingly + for ( var cnt = 0; cnt < els.length; cnt++ ) { + if ( opts.startingSlide == opts.randomMap[cnt] ) { + opts.randomIndex = cnt; + } + } + } + else { + opts.randomIndex = 1; + opts.startingSlide = opts.randomMap[1]; + } + } + else if (opts.startingSlide >= els.length) + opts.startingSlide = 0; // catch bogus input + opts.currSlide = opts.startingSlide || 0; + var first = opts.startingSlide; + + // set position and zIndex on all the slides + $slides.css({position: 'absolute', top:0, left:0}).hide().each(function(i) { + var z; + if (opts.backwards) + z = first ? i <= first ? els.length + (i-first) : first-i : els.length-i; + else + z = first ? i >= first ? els.length - (i-first) : first-i : els.length-i; + $(this).css('z-index', z); + }); + + // make sure first slide is visible + $(els[first]).css('opacity',1).show(); // opacity bit needed to handle restart use case + removeFilter(els[first], opts); + + // stretch slides + if (opts.fit) { + if (!opts.aspect) { + if (opts.width) + $slides.width(opts.width); + if (opts.height && opts.height != 'auto') + $slides.height(opts.height); + } else { + $slides.each(function(){ + var $slide = $(this); + var ratio = (opts.aspect === true) ? $slide.width()/$slide.height() : opts.aspect; + if( opts.width && $slide.width() != opts.width ) { + $slide.width( opts.width ); + $slide.height( opts.width / ratio ); + } + + if( opts.height && $slide.height() < opts.height ) { + $slide.height( opts.height ); + $slide.width( opts.height * ratio ); + } + }); + } + } + + if (opts.center && ((!opts.fit) || opts.aspect)) { + $slides.each(function(){ + var $slide = $(this); + $slide.css({ + "margin-left": opts.width ? + ((opts.width - $slide.width()) / 2) + "px" : + 0, + "margin-top": opts.height ? + ((opts.height - $slide.height()) / 2) + "px" : + 0 + }); + }); + } + + if (opts.center && !opts.fit && !opts.slideResize) { + $slides.each(function(){ + var $slide = $(this); + $slide.css({ + "margin-left": opts.width ? ((opts.width - $slide.width()) / 2) + "px" : 0, + "margin-top": opts.height ? ((opts.height - $slide.height()) / 2) + "px" : 0 + }); + }); + } + + // stretch container + var reshape = (opts.containerResize || opts.containerResizeHeight) && !$cont.innerHeight(); + if (reshape) { // do this only if container has no size http://tinyurl.com/da2oa9 + var maxw = 0, maxh = 0; + for(var j=0; j < els.length; j++) { + var $e = $(els[j]), e = $e[0], w = $e.outerWidth(), h = $e.outerHeight(); + if (!w) w = e.offsetWidth || e.width || $e.attr('width'); + if (!h) h = e.offsetHeight || e.height || $e.attr('height'); + maxw = w > maxw ? w : maxw; + maxh = h > maxh ? h : maxh; + } + if (opts.containerResize && maxw > 0 && maxh > 0) + $cont.css({width:maxw+'px',height:maxh+'px'}); + if (opts.containerResizeHeight && maxh > 0) + $cont.css({height:maxh+'px'}); + } + + var pauseFlag = false; // https://github.com/malsup/cycle/issues/44 + if (opts.pause) + $cont.bind('mouseenter.cycle', function(){ + pauseFlag = true; + this.cyclePause++; + triggerPause(cont, true); + }).bind('mouseleave.cycle', function(){ + if (pauseFlag) + this.cyclePause--; + triggerPause(cont, true); + }); + + if (supportMultiTransitions(opts) === false) + return false; + + // apparently a lot of people use image slideshows without height/width attributes on the images. + // Cycle 2.50+ requires the sizing info for every slide; this block tries to deal with that. + var requeue = false; + options.requeueAttempts = options.requeueAttempts || 0; + $slides.each(function() { + // try to get height/width of each slide + var $el = $(this); + this.cycleH = (opts.fit && opts.height) ? opts.height : ($el.height() || this.offsetHeight || this.height || $el.attr('height') || 0); + this.cycleW = (opts.fit && opts.width) ? opts.width : ($el.width() || this.offsetWidth || this.width || $el.attr('width') || 0); + + if ( $el.is('img') ) { + // sigh.. sniffing, hacking, shrugging... this crappy hack tries to account for what browsers do when + // an image is being downloaded and the markup did not include sizing info (height/width attributes); + // there seems to be some "default" sizes used in this situation + var loadingIE = ($.browser.msie && this.cycleW == 28 && this.cycleH == 30 && !this.complete); + var loadingFF = ($.browser.mozilla && this.cycleW == 34 && this.cycleH == 19 && !this.complete); + var loadingOp = ($.browser.opera && ((this.cycleW == 42 && this.cycleH == 19) || (this.cycleW == 37 && this.cycleH == 17)) && !this.complete); + var loadingOther = (this.cycleH === 0 && this.cycleW === 0 && !this.complete); + // don't requeue for images that are still loading but have a valid size + if (loadingIE || loadingFF || loadingOp || loadingOther) { + if (o.s && opts.requeueOnImageNotLoaded && ++options.requeueAttempts < 100) { // track retry count so we don't loop forever + log(options.requeueAttempts,' - img slide not loaded, requeuing slideshow: ', this.src, this.cycleW, this.cycleH); + setTimeout(function() {$(o.s,o.c).cycle(options);}, opts.requeueTimeout); + requeue = true; + return false; // break each loop + } + else { + log('could not determine size of image: '+this.src, this.cycleW, this.cycleH); + } + } + } + return true; + }); + + if (requeue) + return false; + + opts.cssBefore = opts.cssBefore || {}; + opts.cssAfter = opts.cssAfter || {}; + opts.cssFirst = opts.cssFirst || {}; + opts.animIn = opts.animIn || {}; + opts.animOut = opts.animOut || {}; + + $slides.not(':eq('+first+')').css(opts.cssBefore); + $($slides[first]).css(opts.cssFirst); + + if (opts.timeout) { + opts.timeout = parseInt(opts.timeout,10); + // ensure that timeout and speed settings are sane + if (opts.speed.constructor == String) + opts.speed = $.fx.speeds[opts.speed] || parseInt(opts.speed,10); + if (!opts.sync) + opts.speed = opts.speed / 2; + + var buffer = opts.fx == 'none' ? 0 : opts.fx == 'shuffle' ? 500 : 250; + while((opts.timeout - opts.speed) < buffer) // sanitize timeout + opts.timeout += opts.speed; + } + if (opts.easing) + opts.easeIn = opts.easeOut = opts.easing; + if (!opts.speedIn) + opts.speedIn = opts.speed; + if (!opts.speedOut) + opts.speedOut = opts.speed; + + opts.slideCount = els.length; + opts.currSlide = opts.lastSlide = first; + if (opts.random) { + if (++opts.randomIndex == els.length) + opts.randomIndex = 0; + opts.nextSlide = opts.randomMap[opts.randomIndex]; + } + else if (opts.backwards) + opts.nextSlide = opts.startingSlide === 0 ? (els.length-1) : opts.startingSlide-1; + else + opts.nextSlide = opts.startingSlide >= (els.length-1) ? 0 : opts.startingSlide+1; + + // run transition init fn + if (!opts.multiFx) { + var init = $.fn.cycle.transitions[opts.fx]; + if ($.isFunction(init)) + init($cont, $slides, opts); + else if (opts.fx != 'custom' && !opts.multiFx) { + log('unknown transition: ' + opts.fx,'; slideshow terminating'); + return false; + } + } + + // fire artificial events + var e0 = $slides[first]; + if (!opts.skipInitializationCallbacks) { + if (opts.before.length) + opts.before[0].apply(e0, [e0, e0, opts, true]); + if (opts.after.length) + opts.after[0].apply(e0, [e0, e0, opts, true]); + } + if (opts.next) + $(opts.next).bind(opts.prevNextEvent,function(){return advance(opts,1);}); + if (opts.prev) + $(opts.prev).bind(opts.prevNextEvent,function(){return advance(opts,0);}); + if (opts.pager || opts.pagerAnchorBuilder) + buildPager(els,opts); + + exposeAddSlide(opts, els); + + return opts; +} + +// save off original opts so we can restore after clearing state +function saveOriginalOpts(opts) { + opts.original = { before: [], after: [] }; + opts.original.cssBefore = $.extend({}, opts.cssBefore); + opts.original.cssAfter = $.extend({}, opts.cssAfter); + opts.original.animIn = $.extend({}, opts.animIn); + opts.original.animOut = $.extend({}, opts.animOut); + $.each(opts.before, function() { opts.original.before.push(this); }); + $.each(opts.after, function() { opts.original.after.push(this); }); +} + +function supportMultiTransitions(opts) { + var i, tx, txs = $.fn.cycle.transitions; + // look for multiple effects + if (opts.fx.indexOf(',') > 0) { + opts.multiFx = true; + opts.fxs = opts.fx.replace(/\s*/g,'').split(','); + // discard any bogus effect names + for (i=0; i < opts.fxs.length; i++) { + var fx = opts.fxs[i]; + tx = txs[fx]; + if (!tx || !txs.hasOwnProperty(fx) || !$.isFunction(tx)) { + log('discarding unknown transition: ',fx); + opts.fxs.splice(i,1); + i--; + } + } + // if we have an empty list then we threw everything away! + if (!opts.fxs.length) { + log('No valid transitions named; slideshow terminating.'); + return false; + } + } + else if (opts.fx == 'all') { // auto-gen the list of transitions + opts.multiFx = true; + opts.fxs = []; + for (var p in txs) { + if (txs.hasOwnProperty(p)) { + tx = txs[p]; + if (txs.hasOwnProperty(p) && $.isFunction(tx)) + opts.fxs.push(p); + } + } + } + if (opts.multiFx && opts.randomizeEffects) { + // munge the fxs array to make effect selection random + var r1 = Math.floor(Math.random() * 20) + 30; + for (i = 0; i < r1; i++) { + var r2 = Math.floor(Math.random() * opts.fxs.length); + opts.fxs.push(opts.fxs.splice(r2,1)[0]); + } + debug('randomized fx sequence: ',opts.fxs); + } + return true; +} + +// provide a mechanism for adding slides after the slideshow has started +function exposeAddSlide(opts, els) { + opts.addSlide = function(newSlide, prepend) { + var $s = $(newSlide), s = $s[0]; + if (!opts.autostopCount) + opts.countdown++; + els[prepend?'unshift':'push'](s); + if (opts.els) + opts.els[prepend?'unshift':'push'](s); // shuffle needs this + opts.slideCount = els.length; + + // add the slide to the random map and resort + if (opts.random) { + opts.randomMap.push(opts.slideCount-1); + opts.randomMap.sort(function(a,b) {return Math.random() - 0.5;}); + } + + $s.css('position','absolute'); + $s[prepend?'prependTo':'appendTo'](opts.$cont); + + if (prepend) { + opts.currSlide++; + opts.nextSlide++; + } + + if (!$.support.opacity && opts.cleartype && !opts.cleartypeNoBg) + clearTypeFix($s); + + if (opts.fit && opts.width) + $s.width(opts.width); + if (opts.fit && opts.height && opts.height != 'auto') + $s.height(opts.height); + s.cycleH = (opts.fit && opts.height) ? opts.height : $s.height(); + s.cycleW = (opts.fit && opts.width) ? opts.width : $s.width(); + + $s.css(opts.cssBefore); + + if (opts.pager || opts.pagerAnchorBuilder) + $.fn.cycle.createPagerAnchor(els.length-1, s, $(opts.pager), els, opts); + + if ($.isFunction(opts.onAddSlide)) + opts.onAddSlide($s); + else + $s.hide(); // default behavior + }; +} + +// reset internal state; we do this on every pass in order to support multiple effects +$.fn.cycle.resetState = function(opts, fx) { + fx = fx || opts.fx; + opts.before = []; opts.after = []; + opts.cssBefore = $.extend({}, opts.original.cssBefore); + opts.cssAfter = $.extend({}, opts.original.cssAfter); + opts.animIn = $.extend({}, opts.original.animIn); + opts.animOut = $.extend({}, opts.original.animOut); + opts.fxFn = null; + $.each(opts.original.before, function() { opts.before.push(this); }); + $.each(opts.original.after, function() { opts.after.push(this); }); + + // re-init + var init = $.fn.cycle.transitions[fx]; + if ($.isFunction(init)) + init(opts.$cont, $(opts.elements), opts); +}; + +// this is the main engine fn, it handles the timeouts, callbacks and slide index mgmt +function go(els, opts, manual, fwd) { + var p = opts.$cont[0], curr = els[opts.currSlide], next = els[opts.nextSlide]; + + // opts.busy is true if we're in the middle of an animation + if (manual && opts.busy && opts.manualTrump) { + // let manual transitions requests trump active ones + debug('manualTrump in go(), stopping active transition'); + $(els).stop(true,true); + opts.busy = 0; + clearTimeout(p.cycleTimeout); + } + + // don't begin another timeout-based transition if there is one active + if (opts.busy) { + debug('transition active, ignoring new tx request'); + return; + } + + + // stop cycling if we have an outstanding stop request + if (p.cycleStop != opts.stopCount || p.cycleTimeout === 0 && !manual) + return; + + // check to see if we should stop cycling based on autostop options + if (!manual && !p.cyclePause && !opts.bounce && + ((opts.autostop && (--opts.countdown <= 0)) || + (opts.nowrap && !opts.random && opts.nextSlide < opts.currSlide))) { + if (opts.end) + opts.end(opts); + return; + } + + // if slideshow is paused, only transition on a manual trigger + var changed = false; + if ((manual || !p.cyclePause) && (opts.nextSlide != opts.currSlide)) { + changed = true; + var fx = opts.fx; + // keep trying to get the slide size if we don't have it yet + curr.cycleH = curr.cycleH || $(curr).height(); + curr.cycleW = curr.cycleW || $(curr).width(); + next.cycleH = next.cycleH || $(next).height(); + next.cycleW = next.cycleW || $(next).width(); + + // support multiple transition types + if (opts.multiFx) { + if (fwd && (opts.lastFx === undefined || ++opts.lastFx >= opts.fxs.length)) + opts.lastFx = 0; + else if (!fwd && (opts.lastFx === undefined || --opts.lastFx < 0)) + opts.lastFx = opts.fxs.length - 1; + fx = opts.fxs[opts.lastFx]; + } + + // one-time fx overrides apply to: $('div').cycle(3,'zoom'); + if (opts.oneTimeFx) { + fx = opts.oneTimeFx; + opts.oneTimeFx = null; + } + + $.fn.cycle.resetState(opts, fx); + + // run the before callbacks + if (opts.before.length) + $.each(opts.before, function(i,o) { + if (p.cycleStop != opts.stopCount) return; + o.apply(next, [curr, next, opts, fwd]); + }); + + // stage the after callacks + var after = function() { + opts.busy = 0; + $.each(opts.after, function(i,o) { + if (p.cycleStop != opts.stopCount) return; + o.apply(next, [curr, next, opts, fwd]); + }); + if (!p.cycleStop) { + // queue next transition + queueNext(); + } + }; + + debug('tx firing('+fx+'); currSlide: ' + opts.currSlide + '; nextSlide: ' + opts.nextSlide); + + // get ready to perform the transition + opts.busy = 1; + if (opts.fxFn) // fx function provided? + opts.fxFn(curr, next, opts, after, fwd, manual && opts.fastOnEvent); + else if ($.isFunction($.fn.cycle[opts.fx])) // fx plugin ? + $.fn.cycle[opts.fx](curr, next, opts, after, fwd, manual && opts.fastOnEvent); + else + $.fn.cycle.custom(curr, next, opts, after, fwd, manual && opts.fastOnEvent); + } + else { + queueNext(); + } + + if (changed || opts.nextSlide == opts.currSlide) { + // calculate the next slide + var roll; + opts.lastSlide = opts.currSlide; + if (opts.random) { + opts.currSlide = opts.nextSlide; + if (++opts.randomIndex == els.length) { + opts.randomIndex = 0; + opts.randomMap.sort(function(a,b) {return Math.random() - 0.5;}); + } + opts.nextSlide = opts.randomMap[opts.randomIndex]; + if (opts.nextSlide == opts.currSlide) + opts.nextSlide = (opts.currSlide == opts.slideCount - 1) ? 0 : opts.currSlide + 1; + } + else if (opts.backwards) { + roll = (opts.nextSlide - 1) < 0; + if (roll && opts.bounce) { + opts.backwards = !opts.backwards; + opts.nextSlide = 1; + opts.currSlide = 0; + } + else { + opts.nextSlide = roll ? (els.length-1) : opts.nextSlide-1; + opts.currSlide = roll ? 0 : opts.nextSlide+1; + } + } + else { // sequence + roll = (opts.nextSlide + 1) == els.length; + if (roll && opts.bounce) { + opts.backwards = !opts.backwards; + opts.nextSlide = els.length-2; + opts.currSlide = els.length-1; + } + else { + opts.nextSlide = roll ? 0 : opts.nextSlide+1; + opts.currSlide = roll ? els.length-1 : opts.nextSlide-1; + } + } + } + if (changed && opts.pager) + opts.updateActivePagerLink(opts.pager, opts.currSlide, opts.activePagerClass); + + function queueNext() { + // stage the next transition + var ms = 0, timeout = opts.timeout; + if (opts.timeout && !opts.continuous) { + ms = getTimeout(els[opts.currSlide], els[opts.nextSlide], opts, fwd); + if (opts.fx == 'shuffle') + ms -= opts.speedOut; + } + else if (opts.continuous && p.cyclePause) // continuous shows work off an after callback, not this timer logic + ms = 10; + if (ms > 0) + p.cycleTimeout = setTimeout(function(){ go(els, opts, 0, !opts.backwards); }, ms); + } +} + +// invoked after transition +$.fn.cycle.updateActivePagerLink = function(pager, currSlide, clsName) { + $(pager).each(function() { + $(this).children().removeClass(clsName).eq(currSlide).addClass(clsName); + }); +}; + +// calculate timeout value for current transition +function getTimeout(curr, next, opts, fwd) { + if (opts.timeoutFn) { + // call user provided calc fn + var t = opts.timeoutFn.call(curr,curr,next,opts,fwd); + while (opts.fx != 'none' && (t - opts.speed) < 250) // sanitize timeout + t += opts.speed; + debug('calculated timeout: ' + t + '; speed: ' + opts.speed); + if (t !== false) + return t; + } + return opts.timeout; +} + +// expose next/prev function, caller must pass in state +$.fn.cycle.next = function(opts) { advance(opts,1); }; +$.fn.cycle.prev = function(opts) { advance(opts,0);}; + +// advance slide forward or back +function advance(opts, moveForward) { + var val = moveForward ? 1 : -1; + var els = opts.elements; + var p = opts.$cont[0], timeout = p.cycleTimeout; + if (timeout) { + clearTimeout(timeout); + p.cycleTimeout = 0; + } + if (opts.random && val < 0) { + // move back to the previously display slide + opts.randomIndex--; + if (--opts.randomIndex == -2) + opts.randomIndex = els.length-2; + else if (opts.randomIndex == -1) + opts.randomIndex = els.length-1; + opts.nextSlide = opts.randomMap[opts.randomIndex]; + } + else if (opts.random) { + opts.nextSlide = opts.randomMap[opts.randomIndex]; + } + else { + opts.nextSlide = opts.currSlide + val; + if (opts.nextSlide < 0) { + if (opts.nowrap) return false; + opts.nextSlide = els.length - 1; + } + else if (opts.nextSlide >= els.length) { + if (opts.nowrap) return false; + opts.nextSlide = 0; + } + } + + var cb = opts.onPrevNextEvent || opts.prevNextClick; // prevNextClick is deprecated + if ($.isFunction(cb)) + cb(val > 0, opts.nextSlide, els[opts.nextSlide]); + go(els, opts, 1, moveForward); + return false; +} + +function buildPager(els, opts) { + var $p = $(opts.pager); + $.each(els, function(i,o) { + $.fn.cycle.createPagerAnchor(i,o,$p,els,opts); + }); + opts.updateActivePagerLink(opts.pager, opts.startingSlide, opts.activePagerClass); +} + +$.fn.cycle.createPagerAnchor = function(i, el, $p, els, opts) { + var a; + if ($.isFunction(opts.pagerAnchorBuilder)) { + a = opts.pagerAnchorBuilder(i,el); + debug('pagerAnchorBuilder('+i+', el) returned: ' + a); + } + else + a = ''+(i+1)+''; + + if (!a) + return; + var $a = $(a); + // don't reparent if anchor is in the dom + if ($a.parents('body').length === 0) { + var arr = []; + if ($p.length > 1) { + $p.each(function() { + var $clone = $a.clone(true); + $(this).append($clone); + arr.push($clone[0]); + }); + $a = $(arr); + } + else { + $a.appendTo($p); + } + } + + opts.pagerAnchors = opts.pagerAnchors || []; + opts.pagerAnchors.push($a); + + var pagerFn = function(e) { + e.preventDefault(); + opts.nextSlide = i; + var p = opts.$cont[0], timeout = p.cycleTimeout; + if (timeout) { + clearTimeout(timeout); + p.cycleTimeout = 0; + } + var cb = opts.onPagerEvent || opts.pagerClick; // pagerClick is deprecated + if ($.isFunction(cb)) + cb(opts.nextSlide, els[opts.nextSlide]); + go(els,opts,1,opts.currSlide < i); // trigger the trans +// return false; // <== allow bubble + }; + + if ( /mouseenter|mouseover/i.test(opts.pagerEvent) ) { + $a.hover(pagerFn, function(){/* no-op */} ); + } + else { + $a.bind(opts.pagerEvent, pagerFn); + } + + if ( ! /^click/.test(opts.pagerEvent) && !opts.allowPagerClickBubble) + $a.bind('click.cycle', function(){return false;}); // suppress click + + var cont = opts.$cont[0]; + var pauseFlag = false; // https://github.com/malsup/cycle/issues/44 + if (opts.pauseOnPagerHover) { + $a.hover( + function() { + pauseFlag = true; + cont.cyclePause++; + triggerPause(cont,true,true); + }, function() { + if (pauseFlag) + cont.cyclePause--; + triggerPause(cont,true,true); + } + ); + } +}; + +// helper fn to calculate the number of slides between the current and the next +$.fn.cycle.hopsFromLast = function(opts, fwd) { + var hops, l = opts.lastSlide, c = opts.currSlide; + if (fwd) + hops = c > l ? c - l : opts.slideCount - l; + else + hops = c < l ? l - c : l + opts.slideCount - c; + return hops; +}; + +// fix clearType problems in ie6 by setting an explicit bg color +// (otherwise text slides look horrible during a fade transition) +function clearTypeFix($slides) { + debug('applying clearType background-color hack'); + function hex(s) { + s = parseInt(s,10).toString(16); + return s.length < 2 ? '0'+s : s; + } + function getBg(e) { + for ( ; e && e.nodeName.toLowerCase() != 'html'; e = e.parentNode) { + var v = $.css(e,'background-color'); + if (v && v.indexOf('rgb') >= 0 ) { + var rgb = v.match(/\d+/g); + return '#'+ hex(rgb[0]) + hex(rgb[1]) + hex(rgb[2]); + } + if (v && v != 'transparent') + return v; + } + return '#ffffff'; + } + $slides.each(function() { $(this).css('background-color', getBg(this)); }); +} + +// reset common props before the next transition +$.fn.cycle.commonReset = function(curr,next,opts,w,h,rev) { + $(opts.elements).not(curr).hide(); + if (typeof opts.cssBefore.opacity == 'undefined') + opts.cssBefore.opacity = 1; + opts.cssBefore.display = 'block'; + if (opts.slideResize && w !== false && next.cycleW > 0) + opts.cssBefore.width = next.cycleW; + if (opts.slideResize && h !== false && next.cycleH > 0) + opts.cssBefore.height = next.cycleH; + opts.cssAfter = opts.cssAfter || {}; + opts.cssAfter.display = 'none'; + $(curr).css('zIndex',opts.slideCount + (rev === true ? 1 : 0)); + $(next).css('zIndex',opts.slideCount + (rev === true ? 0 : 1)); +}; + +// the actual fn for effecting a transition +$.fn.cycle.custom = function(curr, next, opts, cb, fwd, speedOverride) { + var $l = $(curr), $n = $(next); + var speedIn = opts.speedIn, speedOut = opts.speedOut, easeIn = opts.easeIn, easeOut = opts.easeOut; + $n.css(opts.cssBefore); + if (speedOverride) { + if (typeof speedOverride == 'number') + speedIn = speedOut = speedOverride; + else + speedIn = speedOut = 1; + easeIn = easeOut = null; + } + var fn = function() { + $n.animate(opts.animIn, speedIn, easeIn, function() { + cb(); + }); + }; + $l.animate(opts.animOut, speedOut, easeOut, function() { + $l.css(opts.cssAfter); + if (!opts.sync) + fn(); + }); + if (opts.sync) fn(); +}; + +// transition definitions - only fade is defined here, transition pack defines the rest +$.fn.cycle.transitions = { + fade: function($cont, $slides, opts) { + $slides.not(':eq('+opts.currSlide+')').css('opacity',0); + opts.before.push(function(curr,next,opts) { + $.fn.cycle.commonReset(curr,next,opts); + opts.cssBefore.opacity = 0; + }); + opts.animIn = { opacity: 1 }; + opts.animOut = { opacity: 0 }; + opts.cssBefore = { top: 0, left: 0 }; + } +}; + +$.fn.cycle.ver = function() { return ver; }; + +// override these globally if you like (they are all optional) +$.fn.cycle.defaults = { + activePagerClass: 'activeSlide', // class name used for the active pager link + after: null, // transition callback (scope set to element that was shown): function(currSlideElement, nextSlideElement, options, forwardFlag) + allowPagerClickBubble: false, // allows or prevents click event on pager anchors from bubbling + animIn: null, // properties that define how the slide animates in + animOut: null, // properties that define how the slide animates out + aspect: false, // preserve aspect ratio during fit resizing, cropping if necessary (must be used with fit option) + autostop: 0, // true to end slideshow after X transitions (where X == slide count) + autostopCount: 0, // number of transitions (optionally used with autostop to define X) + backwards: false, // true to start slideshow at last slide and move backwards through the stack + before: null, // transition callback (scope set to element to be shown): function(currSlideElement, nextSlideElement, options, forwardFlag) + center: null, // set to true to have cycle add top/left margin to each slide (use with width and height options) + cleartype: !$.support.opacity, // true if clearType corrections should be applied (for IE) + cleartypeNoBg: false, // set to true to disable extra cleartype fixing (leave false to force background color setting on slides) + containerResize: 1, // resize container to fit largest slide + containerResizeHeight: 0, // resize containers height to fit the largest slide but leave the width dynamic + continuous: 0, // true to start next transition immediately after current one completes + cssAfter: null, // properties that defined the state of the slide after transitioning out + cssBefore: null, // properties that define the initial state of the slide before transitioning in + delay: 0, // additional delay (in ms) for first transition (hint: can be negative) + easeIn: null, // easing for "in" transition + easeOut: null, // easing for "out" transition + easing: null, // easing method for both in and out transitions + end: null, // callback invoked when the slideshow terminates (use with autostop or nowrap options): function(options) + fastOnEvent: 0, // force fast transitions when triggered manually (via pager or prev/next); value == time in ms + fit: 0, // force slides to fit container + fx: 'fade', // name of transition effect (or comma separated names, ex: 'fade,scrollUp,shuffle') + fxFn: null, // function used to control the transition: function(currSlideElement, nextSlideElement, options, afterCalback, forwardFlag) + height: 'auto', // container height (if the 'fit' option is true, the slides will be set to this height as well) + manualTrump: true, // causes manual transition to stop an active transition instead of being ignored + metaAttr: 'cycle', // data- attribute that holds the option data for the slideshow + next: null, // element, jQuery object, or jQuery selector string for the element to use as event trigger for next slide + nowrap: 0, // true to prevent slideshow from wrapping + onPagerEvent: null, // callback fn for pager events: function(zeroBasedSlideIndex, slideElement) + onPrevNextEvent: null, // callback fn for prev/next events: function(isNext, zeroBasedSlideIndex, slideElement) + pager: null, // element, jQuery object, or jQuery selector string for the element to use as pager container + pagerAnchorBuilder: null, // callback fn for building anchor links: function(index, DOMelement) + pagerEvent: 'click.cycle', // name of event which drives the pager navigation + pause: 0, // true to enable "pause on hover" + pauseOnPagerHover: 0, // true to pause when hovering over pager link + prev: null, // element, jQuery object, or jQuery selector string for the element to use as event trigger for previous slide + prevNextEvent: 'click.cycle',// event which drives the manual transition to the previous or next slide + random: 0, // true for random, false for sequence (not applicable to shuffle fx) + randomizeEffects: 1, // valid when multiple effects are used; true to make the effect sequence random + requeueOnImageNotLoaded: true, // requeue the slideshow if any image slides are not yet loaded + requeueTimeout: 250, // ms delay for requeue + rev: 0, // causes animations to transition in reverse (for effects that support it such as scrollHorz/scrollVert/shuffle) + shuffle: null, // coords for shuffle animation, ex: { top:15, left: 200 } + skipInitializationCallbacks: false, // set to true to disable the first before/after callback that occurs prior to any transition + slideExpr: null, // expression for selecting slides (if something other than all children is required) + slideResize: 1, // force slide width/height to fixed size before every transition + speed: 1000, // speed of the transition (any valid fx speed value) + speedIn: null, // speed of the 'in' transition + speedOut: null, // speed of the 'out' transition + startingSlide: undefined,// zero-based index of the first slide to be displayed + sync: 1, // true if in/out transitions should occur simultaneously + timeout: 4000, // milliseconds between slide transitions (0 to disable auto advance) + timeoutFn: null, // callback for determining per-slide timeout value: function(currSlideElement, nextSlideElement, options, forwardFlag) + updateActivePagerLink: null,// callback fn invoked to update the active pager link (adds/removes activePagerClass style) + width: null // container width (if the 'fit' option is true, the slides will be set to this width as well) +}; + +})(jQuery); + + +/*! + * jQuery Cycle Plugin Transition Definitions + * This script is a plugin for the jQuery Cycle Plugin + * Examples and documentation at: http://malsup.com/jquery/cycle/ + * Copyright (c) 2007-2010 M. Alsup + * Version: 2.73 + * Dual licensed under the MIT and GPL licenses: + * http://www.opensource.org/licenses/mit-license.php + * http://www.gnu.org/licenses/gpl.html + */ +(function($) { +"use strict"; + +// +// These functions define slide initialization and properties for the named +// transitions. To save file size feel free to remove any of these that you +// don't need. +// +$.fn.cycle.transitions.none = function($cont, $slides, opts) { + opts.fxFn = function(curr,next,opts,after){ + $(next).show(); + $(curr).hide(); + after(); + }; +}; + +// not a cross-fade, fadeout only fades out the top slide +$.fn.cycle.transitions.fadeout = function($cont, $slides, opts) { + $slides.not(':eq('+opts.currSlide+')').css({ display: 'block', 'opacity': 1 }); + opts.before.push(function(curr,next,opts,w,h,rev) { + $(curr).css('zIndex',opts.slideCount + (rev !== true ? 1 : 0)); + $(next).css('zIndex',opts.slideCount + (rev !== true ? 0 : 1)); + }); + opts.animIn.opacity = 1; + opts.animOut.opacity = 0; + opts.cssBefore.opacity = 1; + opts.cssBefore.display = 'block'; + opts.cssAfter.zIndex = 0; +}; + +// scrollUp/Down/Left/Right +$.fn.cycle.transitions.scrollUp = function($cont, $slides, opts) { + $cont.css('overflow','hidden'); + opts.before.push($.fn.cycle.commonReset); + var h = $cont.height(); + opts.cssBefore.top = h; + opts.cssBefore.left = 0; + opts.cssFirst.top = 0; + opts.animIn.top = 0; + opts.animOut.top = -h; +}; +$.fn.cycle.transitions.scrollDown = function($cont, $slides, opts) { + $cont.css('overflow','hidden'); + opts.before.push($.fn.cycle.commonReset); + var h = $cont.height(); + opts.cssFirst.top = 0; + opts.cssBefore.top = -h; + opts.cssBefore.left = 0; + opts.animIn.top = 0; + opts.animOut.top = h; +}; +$.fn.cycle.transitions.scrollLeft = function($cont, $slides, opts) { + $cont.css('overflow','hidden'); + opts.before.push($.fn.cycle.commonReset); + var w = $cont.width(); + opts.cssFirst.left = 0; + opts.cssBefore.left = w; + opts.cssBefore.top = 0; + opts.animIn.left = 0; + opts.animOut.left = 0-w; +}; +$.fn.cycle.transitions.scrollRight = function($cont, $slides, opts) { + $cont.css('overflow','hidden'); + opts.before.push($.fn.cycle.commonReset); + var w = $cont.width(); + opts.cssFirst.left = 0; + opts.cssBefore.left = -w; + opts.cssBefore.top = 0; + opts.animIn.left = 0; + opts.animOut.left = w; +}; +$.fn.cycle.transitions.scrollHorz = function($cont, $slides, opts) { + $cont.css('overflow','hidden').width(); + opts.before.push(function(curr, next, opts, fwd) { + if (opts.rev) + fwd = !fwd; + $.fn.cycle.commonReset(curr,next,opts); + opts.cssBefore.left = fwd ? (next.cycleW-1) : (1-next.cycleW); + opts.animOut.left = fwd ? -curr.cycleW : curr.cycleW; + }); + opts.cssFirst.left = 0; + opts.cssBefore.top = 0; + opts.animIn.left = 0; + opts.animOut.top = 0; +}; +$.fn.cycle.transitions.scrollVert = function($cont, $slides, opts) { + $cont.css('overflow','hidden'); + opts.before.push(function(curr, next, opts, fwd) { + if (opts.rev) + fwd = !fwd; + $.fn.cycle.commonReset(curr,next,opts); + opts.cssBefore.top = fwd ? (1-next.cycleH) : (next.cycleH-1); + opts.animOut.top = fwd ? curr.cycleH : -curr.cycleH; + }); + opts.cssFirst.top = 0; + opts.cssBefore.left = 0; + opts.animIn.top = 0; + opts.animOut.left = 0; +}; + +// slideX/slideY +$.fn.cycle.transitions.slideX = function($cont, $slides, opts) { + opts.before.push(function(curr, next, opts) { + $(opts.elements).not(curr).hide(); + $.fn.cycle.commonReset(curr,next,opts,false,true); + opts.animIn.width = next.cycleW; + }); + opts.cssBefore.left = 0; + opts.cssBefore.top = 0; + opts.cssBefore.width = 0; + opts.animIn.width = 'show'; + opts.animOut.width = 0; +}; +$.fn.cycle.transitions.slideY = function($cont, $slides, opts) { + opts.before.push(function(curr, next, opts) { + $(opts.elements).not(curr).hide(); + $.fn.cycle.commonReset(curr,next,opts,true,false); + opts.animIn.height = next.cycleH; + }); + opts.cssBefore.left = 0; + opts.cssBefore.top = 0; + opts.cssBefore.height = 0; + opts.animIn.height = 'show'; + opts.animOut.height = 0; +}; + +// shuffle +$.fn.cycle.transitions.shuffle = function($cont, $slides, opts) { + var i, w = $cont.css('overflow', 'visible').width(); + $slides.css({left: 0, top: 0}); + opts.before.push(function(curr,next,opts) { + $.fn.cycle.commonReset(curr,next,opts,true,true,true); + }); + // only adjust speed once! + if (!opts.speedAdjusted) { + opts.speed = opts.speed / 2; // shuffle has 2 transitions + opts.speedAdjusted = true; + } + opts.random = 0; + opts.shuffle = opts.shuffle || {left:-w, top:15}; + opts.els = []; + for (i=0; i < $slides.length; i++) + opts.els.push($slides[i]); + + for (i=0; i < opts.currSlide; i++) + opts.els.push(opts.els.shift()); + + // custom transition fn (hat tip to Benjamin Sterling for this bit of sweetness!) + opts.fxFn = function(curr, next, opts, cb, fwd) { + if (opts.rev) + fwd = !fwd; + var $el = fwd ? $(curr) : $(next); + $(next).css(opts.cssBefore); + var count = opts.slideCount; + $el.animate(opts.shuffle, opts.speedIn, opts.easeIn, function() { + var hops = $.fn.cycle.hopsFromLast(opts, fwd); + for (var k=0; k < hops; k++) { + if (fwd) + opts.els.push(opts.els.shift()); + else + opts.els.unshift(opts.els.pop()); + } + if (fwd) { + for (var i=0, len=opts.els.length; i < len; i++) + $(opts.els[i]).css('z-index', len-i+count); + } + else { + var z = $(curr).css('z-index'); + $el.css('z-index', parseInt(z,10)+1+count); + } + $el.animate({left:0, top:0}, opts.speedOut, opts.easeOut, function() { + $(fwd ? this : curr).hide(); + if (cb) cb(); + }); + }); + }; + $.extend(opts.cssBefore, { display: 'block', opacity: 1, top: 0, left: 0 }); +}; + +// turnUp/Down/Left/Right +$.fn.cycle.transitions.turnUp = function($cont, $slides, opts) { + opts.before.push(function(curr, next, opts) { + $.fn.cycle.commonReset(curr,next,opts,true,false); + opts.cssBefore.top = next.cycleH; + opts.animIn.height = next.cycleH; + opts.animOut.width = next.cycleW; + }); + opts.cssFirst.top = 0; + opts.cssBefore.left = 0; + opts.cssBefore.height = 0; + opts.animIn.top = 0; + opts.animOut.height = 0; +}; +$.fn.cycle.transitions.turnDown = function($cont, $slides, opts) { + opts.before.push(function(curr, next, opts) { + $.fn.cycle.commonReset(curr,next,opts,true,false); + opts.animIn.height = next.cycleH; + opts.animOut.top = curr.cycleH; + }); + opts.cssFirst.top = 0; + opts.cssBefore.left = 0; + opts.cssBefore.top = 0; + opts.cssBefore.height = 0; + opts.animOut.height = 0; +}; +$.fn.cycle.transitions.turnLeft = function($cont, $slides, opts) { + opts.before.push(function(curr, next, opts) { + $.fn.cycle.commonReset(curr,next,opts,false,true); + opts.cssBefore.left = next.cycleW; + opts.animIn.width = next.cycleW; + }); + opts.cssBefore.top = 0; + opts.cssBefore.width = 0; + opts.animIn.left = 0; + opts.animOut.width = 0; +}; +$.fn.cycle.transitions.turnRight = function($cont, $slides, opts) { + opts.before.push(function(curr, next, opts) { + $.fn.cycle.commonReset(curr,next,opts,false,true); + opts.animIn.width = next.cycleW; + opts.animOut.left = curr.cycleW; + }); + $.extend(opts.cssBefore, { top: 0, left: 0, width: 0 }); + opts.animIn.left = 0; + opts.animOut.width = 0; +}; + +// zoom +$.fn.cycle.transitions.zoom = function($cont, $slides, opts) { + opts.before.push(function(curr, next, opts) { + $.fn.cycle.commonReset(curr,next,opts,false,false,true); + opts.cssBefore.top = next.cycleH/2; + opts.cssBefore.left = next.cycleW/2; + $.extend(opts.animIn, { top: 0, left: 0, width: next.cycleW, height: next.cycleH }); + $.extend(opts.animOut, { width: 0, height: 0, top: curr.cycleH/2, left: curr.cycleW/2 }); + }); + opts.cssFirst.top = 0; + opts.cssFirst.left = 0; + opts.cssBefore.width = 0; + opts.cssBefore.height = 0; +}; + +// fadeZoom +$.fn.cycle.transitions.fadeZoom = function($cont, $slides, opts) { + opts.before.push(function(curr, next, opts) { + $.fn.cycle.commonReset(curr,next,opts,false,false); + opts.cssBefore.left = next.cycleW/2; + opts.cssBefore.top = next.cycleH/2; + $.extend(opts.animIn, { top: 0, left: 0, width: next.cycleW, height: next.cycleH }); + }); + opts.cssBefore.width = 0; + opts.cssBefore.height = 0; + opts.animOut.opacity = 0; +}; + +// blindX +$.fn.cycle.transitions.blindX = function($cont, $slides, opts) { + var w = $cont.css('overflow','hidden').width(); + opts.before.push(function(curr, next, opts) { + $.fn.cycle.commonReset(curr,next,opts); + opts.animIn.width = next.cycleW; + opts.animOut.left = curr.cycleW; + }); + opts.cssBefore.left = w; + opts.cssBefore.top = 0; + opts.animIn.left = 0; + opts.animOut.left = w; +}; +// blindY +$.fn.cycle.transitions.blindY = function($cont, $slides, opts) { + var h = $cont.css('overflow','hidden').height(); + opts.before.push(function(curr, next, opts) { + $.fn.cycle.commonReset(curr,next,opts); + opts.animIn.height = next.cycleH; + opts.animOut.top = curr.cycleH; + }); + opts.cssBefore.top = h; + opts.cssBefore.left = 0; + opts.animIn.top = 0; + opts.animOut.top = h; +}; +// blindZ +$.fn.cycle.transitions.blindZ = function($cont, $slides, opts) { + var h = $cont.css('overflow','hidden').height(); + var w = $cont.width(); + opts.before.push(function(curr, next, opts) { + $.fn.cycle.commonReset(curr,next,opts); + opts.animIn.height = next.cycleH; + opts.animOut.top = curr.cycleH; + }); + opts.cssBefore.top = h; + opts.cssBefore.left = w; + opts.animIn.top = 0; + opts.animIn.left = 0; + opts.animOut.top = h; + opts.animOut.left = w; +}; + +// growX - grow horizontally from centered 0 width +$.fn.cycle.transitions.growX = function($cont, $slides, opts) { + opts.before.push(function(curr, next, opts) { + $.fn.cycle.commonReset(curr,next,opts,false,true); + opts.cssBefore.left = this.cycleW/2; + opts.animIn.left = 0; + opts.animIn.width = this.cycleW; + opts.animOut.left = 0; + }); + opts.cssBefore.top = 0; + opts.cssBefore.width = 0; +}; +// growY - grow vertically from centered 0 height +$.fn.cycle.transitions.growY = function($cont, $slides, opts) { + opts.before.push(function(curr, next, opts) { + $.fn.cycle.commonReset(curr,next,opts,true,false); + opts.cssBefore.top = this.cycleH/2; + opts.animIn.top = 0; + opts.animIn.height = this.cycleH; + opts.animOut.top = 0; + }); + opts.cssBefore.height = 0; + opts.cssBefore.left = 0; +}; + +// curtainX - squeeze in both edges horizontally +$.fn.cycle.transitions.curtainX = function($cont, $slides, opts) { + opts.before.push(function(curr, next, opts) { + $.fn.cycle.commonReset(curr,next,opts,false,true,true); + opts.cssBefore.left = next.cycleW/2; + opts.animIn.left = 0; + opts.animIn.width = this.cycleW; + opts.animOut.left = curr.cycleW/2; + opts.animOut.width = 0; + }); + opts.cssBefore.top = 0; + opts.cssBefore.width = 0; +}; +// curtainY - squeeze in both edges vertically +$.fn.cycle.transitions.curtainY = function($cont, $slides, opts) { + opts.before.push(function(curr, next, opts) { + $.fn.cycle.commonReset(curr,next,opts,true,false,true); + opts.cssBefore.top = next.cycleH/2; + opts.animIn.top = 0; + opts.animIn.height = next.cycleH; + opts.animOut.top = curr.cycleH/2; + opts.animOut.height = 0; + }); + opts.cssBefore.height = 0; + opts.cssBefore.left = 0; +}; + +// cover - curr slide covered by next slide +$.fn.cycle.transitions.cover = function($cont, $slides, opts) { + var d = opts.direction || 'left'; + var w = $cont.css('overflow','hidden').width(); + var h = $cont.height(); + opts.before.push(function(curr, next, opts) { + $.fn.cycle.commonReset(curr,next,opts); + opts.cssAfter.display = ''; + if (d == 'right') + opts.cssBefore.left = -w; + else if (d == 'up') + opts.cssBefore.top = h; + else if (d == 'down') + opts.cssBefore.top = -h; + else + opts.cssBefore.left = w; + }); + opts.animIn.left = 0; + opts.animIn.top = 0; + opts.cssBefore.top = 0; + opts.cssBefore.left = 0; +}; + +// uncover - curr slide moves off next slide +$.fn.cycle.transitions.uncover = function($cont, $slides, opts) { + var d = opts.direction || 'left'; + var w = $cont.css('overflow','hidden').width(); + var h = $cont.height(); + opts.before.push(function(curr, next, opts) { + $.fn.cycle.commonReset(curr,next,opts,true,true,true); + if (d == 'right') + opts.animOut.left = w; + else if (d == 'up') + opts.animOut.top = -h; + else if (d == 'down') + opts.animOut.top = h; + else + opts.animOut.left = -w; + }); + opts.animIn.left = 0; + opts.animIn.top = 0; + opts.cssBefore.top = 0; + opts.cssBefore.left = 0; +}; + +// toss - move top slide and fade away +$.fn.cycle.transitions.toss = function($cont, $slides, opts) { + var w = $cont.css('overflow','visible').width(); + var h = $cont.height(); + opts.before.push(function(curr, next, opts) { + $.fn.cycle.commonReset(curr,next,opts,true,true,true); + // provide default toss settings if animOut not provided + if (!opts.animOut.left && !opts.animOut.top) + $.extend(opts.animOut, { left: w*2, top: -h/2, opacity: 0 }); + else + opts.animOut.opacity = 0; + }); + opts.cssBefore.left = 0; + opts.cssBefore.top = 0; + opts.animIn.left = 0; +}; + +// wipe - clip animation +$.fn.cycle.transitions.wipe = function($cont, $slides, opts) { + var w = $cont.css('overflow','hidden').width(); + var h = $cont.height(); + opts.cssBefore = opts.cssBefore || {}; + var clip; + if (opts.clip) { + if (/l2r/.test(opts.clip)) + clip = 'rect(0px 0px '+h+'px 0px)'; + else if (/r2l/.test(opts.clip)) + clip = 'rect(0px '+w+'px '+h+'px '+w+'px)'; + else if (/t2b/.test(opts.clip)) + clip = 'rect(0px '+w+'px 0px 0px)'; + else if (/b2t/.test(opts.clip)) + clip = 'rect('+h+'px '+w+'px '+h+'px 0px)'; + else if (/zoom/.test(opts.clip)) { + var top = parseInt(h/2,10); + var left = parseInt(w/2,10); + clip = 'rect('+top+'px '+left+'px '+top+'px '+left+'px)'; + } + } + + opts.cssBefore.clip = opts.cssBefore.clip || clip || 'rect(0px 0px 0px 0px)'; + + var d = opts.cssBefore.clip.match(/(\d+)/g); + var t = parseInt(d[0],10), r = parseInt(d[1],10), b = parseInt(d[2],10), l = parseInt(d[3],10); + + opts.before.push(function(curr, next, opts) { + if (curr == next) return; + var $curr = $(curr), $next = $(next); + $.fn.cycle.commonReset(curr,next,opts,true,true,false); + opts.cssAfter.display = 'block'; + + var step = 1, count = parseInt((opts.speedIn / 13),10) - 1; + (function f() { + var tt = t ? t - parseInt(step * (t/count),10) : 0; + var ll = l ? l - parseInt(step * (l/count),10) : 0; + var bb = b < h ? b + parseInt(step * ((h-b)/count || 1),10) : h; + var rr = r < w ? r + parseInt(step * ((w-r)/count || 1),10) : w; + $next.css({ clip: 'rect('+tt+'px '+rr+'px '+bb+'px '+ll+'px)' }); + (step++ <= count) ? setTimeout(f, 13) : $curr.css('display', 'none'); + })(); + }); + $.extend(opts.cssBefore, { display: 'block', opacity: 1, top: 0, left: 0 }); + opts.animIn = { left: 0 }; + opts.animOut = { left: 0 }; +}; + +})(jQuery); \ No newline at end of file diff --git a/app/assets/javascripts/jquery-cropper.js b/app/assets/javascripts/jquery-cropper.js new file mode 100644 index 0000000..8cbe437 --- /dev/null +++ b/app/assets/javascripts/jquery-cropper.js @@ -0,0 +1,75 @@ +/*! + * jQuery Cropper v1.0.0 + * https://github.com/fengyuanchen/jquery-cropper + * + * Copyright (c) 2018 Chen Fengyuan + * Released under the MIT license + * + * Date: 2018-04-01T06:20:13.168Z + */ + +(function (global, factory) { + typeof exports === 'object' && typeof module !== 'undefined' ? factory(require('jquery'), require('cropperjs')) : + typeof define === 'function' && define.amd ? define(['jquery', 'cropperjs'], factory) : + (factory(global.jQuery,global.Cropper)); +}(this, (function ($,Cropper) { 'use strict'; + + $ = $ && $.hasOwnProperty('default') ? $['default'] : $; + Cropper = Cropper && Cropper.hasOwnProperty('default') ? Cropper['default'] : Cropper; + + if ($.fn) { + var AnotherCropper = $.fn.cropper; + var NAMESPACE = 'cropper'; + + $.fn.cropper = function jQueryCropper(option) { + for (var _len = arguments.length, args = Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) { + args[_key - 1] = arguments[_key]; + } + + var result = void 0; + + this.each(function (i, element) { + var $element = $(element); + var isDestroy = option === 'destroy'; + var cropper = $element.data(NAMESPACE); + + if (!cropper) { + if (isDestroy) { + return; + } + + var options = $.extend({}, $element.data(), $.isPlainObject(option) && option); + + cropper = new Cropper(element, options); + $element.data(NAMESPACE, cropper); + } + + if (typeof option === 'string') { + var fn = cropper[option]; + + if ($.isFunction(fn)) { + result = fn.apply(cropper, args); + + if (result === cropper) { + result = undefined; + } + + if (isDestroy) { + $element.removeData(NAMESPACE); + } + } + } + }); + + return result !== undefined ? result : this; + }; + + $.fn.cropper.Constructor = Cropper; + $.fn.cropper.setDefaults = Cropper.setDefaults; + $.fn.cropper.noConflict = function noConflict() { + $.fn.cropper = AnotherCropper; + return this; + }; + } + +}))); \ No newline at end of file diff --git a/app/assets/javascripts/jquery.lite.image.resize.js b/app/assets/javascripts/jquery.lite.image.resize.js new file mode 100644 index 0000000..27873c3 --- /dev/null +++ b/app/assets/javascripts/jquery.lite.image.resize.js @@ -0,0 +1,136 @@ +/* =================================================== + * jquery-lite-image-resize v.1.0.1 + * https://github.com/RayChang/jquery-lite-image-resize + * =================================================== + * How to use ? + * + * HTML element closest to the image to add class "resizeimg". + * + * Example: + *
    + * + *
    + * + * Or you can use: + * $('your class').rsImg(); + * + * Note : HTML structure must be a structure like the example above. + * +*/ + +!function ($) { + + "use strict"; + + var ResizeImg = function(element, elementLength, i) { + this.element = $(element); + this.element.data('exists', true); + this.elementLength = elementLength; + this.index = i; + }; + ResizeImg.prototype.resize = function(callback) { + var $img = this.element.children('img').eq(0), + elW = this.element.innerWidth(), + elH = this.element.innerHeight(), + elScale = elW/elH, + ell = this.elementLength, + index = this.index, + image = document.createElement("img"); + image.src = $img.attr('src'); + this.element.css({ + 'position': 'relative', + 'overflow': 'hidden', + }); + function imageLoadComplete() { + var imgW = image.width, + imgH = image.height, + imgScale = imgW/imgH, + portrait = { + 'position': 'absolute', + 'height': '100%', + 'width': 'auto', + 'max-width': 'none', + 'left': '50%', + 'top': 0, + 'margin-left': imgW*(elH/imgH)/-2 + }, + landscape = { + 'position': 'absolute', + 'height': 'auto', + 'max-height': 'none', + 'width': '100%', + 'left': 0, + 'top': '50%', + 'margin-top': imgH*(elW/imgW)/-2 + }, + center = { + 'position': 'absolute', + 'height': '100%', + 'width': '100%', + 'top': 0, + 'left': 0 + }; + if(imgScale < 1) { + if(elScale < 1) { + if(elScale > imgScale) { + $img.css(landscape); + } else { + $img.css(portrait); + }; + } else { + $img.css(landscape); + }; + }; + + if(imgScale > 1) { + if(elScale > 1) { + if(elScale > imgScale) { + $img.css(landscape); + } else { + $img.css(portrait); + }; + } else { + $img.css(portrait); + }; + }; + + if(imgScale == 1) { + if(elScale < 1) { + $img.css(portrait); + } else if(elScale > 1) { + $img.css(landscape); + } else { + $img.css(center); + }; + }; + $img.fadeTo(500, 1); + + if(index == ell && callback) { + ResizeImg.prototype.callback(callback) + } + } + if(/MSIE 8.0/g.test($ua)) { + imageLoadComplete(); + } else { + image.onload = imageLoadComplete; + } + }; + + ResizeImg.prototype.callback = function(callback) { + callback(); + }; + + $.fn.rsImg = function (callback) { + var elementLength = this.length - 1; + this.each(function (i) { + if(!$(this).data('exists')) { + $(this).children("img").fadeTo(0,0); + new ResizeImg(this, elementLength, i).resize(callback); + }; + }); + }; + + $(function() { + $('.resizeimg').rsImg(); + }); +}(window.jQuery); diff --git a/app/assets/javascripts/jquery.masonry.min.js b/app/assets/javascripts/jquery.masonry.min.js new file mode 100644 index 0000000..57c081c --- /dev/null +++ b/app/assets/javascripts/jquery.masonry.min.js @@ -0,0 +1,10 @@ +/** + * jQuery Masonry v2.1.08 + * A dynamic layout plugin for jQuery + * The flip-side of CSS Floats + * http://masonry.desandro.com + * + * Licensed under the MIT license. + * Copyright 2012 David DeSandro + */ +(function(e,t,n){"use strict";var r=t.event,i;r.special.smartresize={setup:function(){t(this).bind("resize",r.special.smartresize.handler)},teardown:function(){t(this).unbind("resize",r.special.smartresize.handler)},handler:function(e,t){var n=this,s=arguments;e.type="smartresize",i&&clearTimeout(i),i=setTimeout(function(){r.dispatch.apply(n,s)},t==="execAsap"?0:100)}},t.fn.smartresize=function(e){return e?this.bind("smartresize",e):this.trigger("smartresize",["execAsap"])},t.Mason=function(e,n){this.element=t(n),this._create(e),this._init()},t.Mason.settings={isResizable:!0,isAnimated:!1,animationOptions:{queue:!1,duration:500},gutterWidth:0,isRTL:!1,isFitWidth:!1,containerStyle:{position:"relative"}},t.Mason.prototype={_filterFindBricks:function(e){var t=this.options.itemSelector;return t?e.filter(t).add(e.find(t)):e},_getBricks:function(e){var t=this._filterFindBricks(e).css({position:"absolute"}).addClass("masonry-brick");return t},_create:function(n){this.options=t.extend(!0,{},t.Mason.settings,n),this.styleQueue=[];var r=this.element[0].style;this.originalStyle={height:r.height||""};var i=this.options.containerStyle;for(var s in i)this.originalStyle[s]=r[s]||"";this.element.css(i),this.horizontalDirection=this.options.isRTL?"right":"left";var o=this.element.css("padding-"+this.horizontalDirection),u=this.element.css("padding-top");this.offset={x:o?parseInt(o,10):0,y:u?parseInt(u,10):0},this.isFluid=this.options.columnWidth&&typeof this.options.columnWidth=="function";var a=this;setTimeout(function(){a.element.addClass("masonry")},0),this.options.isResizable&&t(e).bind("smartresize.masonry",function(){a.resize()}),this.reloadItems()},_init:function(e){this._getColumns(),this._reLayout(e)},option:function(e,n){t.isPlainObject(e)&&(this.options=t.extend(!0,this.options,e))},layout:function(e,t){for(var n=0,r=e.length;n'); + var defaults = $.minicolors.defaults; + var name; + var size; + var swatches; + var swatch; + var swatchString; + var panel; + var i; + + // Do nothing if already initialized + if(input.data('minicolors-initialized')) return; + + // Handle settings + settings = $.extend(true, {}, defaults, settings); + + // The wrapper + minicolors + .addClass('minicolors-theme-' + settings.theme) + .toggleClass('minicolors-with-opacity', settings.opacity); + + // Custom positioning + if(settings.position !== undefined) { + $.each(settings.position.split(' '), function() { + minicolors.addClass('minicolors-position-' + this); + }); + } + + // Input size + if(settings.format === 'rgb') { + size = settings.opacity ? '25' : '20'; + } else { + size = settings.keywords ? '11' : '7'; + } + + // The input + input + .addClass('minicolors-input') + .data('minicolors-initialized', false) + .data('minicolors-settings', settings) + .prop('size', size) + .wrap(minicolors) + .after( + '
    ' + + '
    ' + + '
    ' + + '
    ' + + '
    ' + + '
    ' + + '
    ' + + '
    ' + + '
    ' + + '
    ' + + '
    ' + + '
    ' + ); + + // The swatch + if(!settings.inline) { + input.after(''); + input.next('.minicolors-input-swatch').on('click', function(event) { + event.preventDefault(); + input.focus(); + }); + } + + // Prevent text selection in IE + panel = input.parent().find('.minicolors-panel'); + panel.on('selectstart', function() { return false; }).end(); + + // Swatches + if(settings.swatches && settings.swatches.length !== 0) { + panel.addClass('minicolors-with-swatches'); + swatches = $('
      ') + .appendTo(panel); + for(i = 0; i < settings.swatches.length; ++i) { + // allow for custom objects as swatches + if($.type(settings.swatches[i]) === 'object') { + name = settings.swatches[i].name; + swatch = settings.swatches[i].color; + } else { + name = ''; + swatch = settings.swatches[i]; + } + swatchString = swatch; + swatch = isRgb(swatch) ? parseRgb(swatch, true) : hex2rgb(parseHex(swatch, true)); + $('
    • ') + .appendTo(swatches) + .data('swatch-color', swatchString) + .find('.minicolors-swatch-color') + .css({ + backgroundColor: rgb2hex(swatch), + opacity: swatch.a + }); + settings.swatches[i] = swatch; + } + } + + // Inline controls + if(settings.inline) input.parent().addClass('minicolors-inline'); + + updateFromInput(input, false); + + input.data('minicolors-initialized', true); + } + + // Returns the input back to its original state + function destroy(input) { + var minicolors = input.parent(); + + // Revert the input element + input + .removeData('minicolors-initialized') + .removeData('minicolors-settings') + .removeProp('size') + .removeClass('minicolors-input'); + + // Remove the wrap and destroy whatever remains + minicolors.before(input).remove(); + } + + // Shows the specified dropdown panel + function show(input) { + var minicolors = input.parent(); + var panel = minicolors.find('.minicolors-panel'); + var settings = input.data('minicolors-settings'); + + // Do nothing if uninitialized, disabled, inline, or already open + if( + !input.data('minicolors-initialized') || + input.prop('disabled') || + minicolors.hasClass('minicolors-inline') || + minicolors.hasClass('minicolors-focus') + ) return; + + hide(); + + minicolors.addClass('minicolors-focus'); + if (panel.animate) { + panel + .stop(true, true) + .fadeIn(settings.showSpeed, function () { + if (settings.show) settings.show.call(input.get(0)); + }); + } else { + panel.show(); + if (settings.show) settings.show.call(input.get(0)); + } + } + + // Hides all dropdown panels + function hide() { + $('.minicolors-focus').each(function() { + var minicolors = $(this); + var input = minicolors.find('.minicolors-input'); + var panel = minicolors.find('.minicolors-panel'); + var settings = input.data('minicolors-settings'); + + if (panel.animate) { + panel.fadeOut(settings.hideSpeed, function () { + if (settings.hide) settings.hide.call(input.get(0)); + minicolors.removeClass('minicolors-focus'); + }); + } else { + panel.hide(); + if (settings.hide) settings.hide.call(input.get(0)); + minicolors.removeClass('minicolors-focus'); + } + }); + } + + // Moves the selected picker + function move(target, event, animate) { + var input = target.parents('.minicolors').find('.minicolors-input'); + var settings = input.data('minicolors-settings'); + var picker = target.find('[class$=-picker]'); + var offsetX = target.offset().left; + var offsetY = target.offset().top; + var x = Math.round(event.pageX - offsetX); + var y = Math.round(event.pageY - offsetY); + var duration = animate ? settings.animationSpeed : 0; + var wx, wy, r, phi, styles; + + // Touch support + if(event.originalEvent.changedTouches) { + x = event.originalEvent.changedTouches[0].pageX - offsetX; + y = event.originalEvent.changedTouches[0].pageY - offsetY; + } + + // Constrain picker to its container + if(x < 0) x = 0; + if(y < 0) y = 0; + if(x > target.width()) x = target.width(); + if(y > target.height()) y = target.height(); + + // Constrain color wheel values to the wheel + if(target.parent().is('.minicolors-slider-wheel') && picker.parent().is('.minicolors-grid')) { + wx = 75 - x; + wy = 75 - y; + r = Math.sqrt(wx * wx + wy * wy); + phi = Math.atan2(wy, wx); + if(phi < 0) phi += Math.PI * 2; + if(r > 75) { + r = 75; + x = 75 - (75 * Math.cos(phi)); + y = 75 - (75 * Math.sin(phi)); + } + x = Math.round(x); + y = Math.round(y); + } + + // Move the picker + styles = { + top: y + 'px' + }; + if(target.is('.minicolors-grid')) { + styles.left = x + 'px'; + } + if (picker.animate) { + picker + .stop(true) + .animate(styles, duration, settings.animationEasing, function() { + updateFromControl(input, target); + }); + } else { + picker + .css(styles); + updateFromControl(input, target); + } + } + + // Sets the input based on the color picker values + function updateFromControl(input, target) { + + function getCoords(picker, container) { + var left, top; + if(!picker.length || !container) return null; + left = picker.offset().left; + top = picker.offset().top; + + return { + x: left - container.offset().left + (picker.outerWidth() / 2), + y: top - container.offset().top + (picker.outerHeight() / 2) + }; + } + + var hue, saturation, brightness, x, y, r, phi; + var hex = input.val(); + var opacity = input.attr('data-opacity'); + + // Helpful references + var minicolors = input.parent(); + var settings = input.data('minicolors-settings'); + var swatch = minicolors.find('.minicolors-input-swatch'); + + // Panel objects + var grid = minicolors.find('.minicolors-grid'); + var slider = minicolors.find('.minicolors-slider'); + var opacitySlider = minicolors.find('.minicolors-opacity-slider'); + + // Picker objects + var gridPicker = grid.find('[class$=-picker]'); + var sliderPicker = slider.find('[class$=-picker]'); + var opacityPicker = opacitySlider.find('[class$=-picker]'); + + // Picker positions + var gridPos = getCoords(gridPicker, grid); + var sliderPos = getCoords(sliderPicker, slider); + var opacityPos = getCoords(opacityPicker, opacitySlider); + + // Handle colors + if(target.is('.minicolors-grid, .minicolors-slider, .minicolors-opacity-slider')) { + + // Determine HSB values + switch(settings.control) { + case 'wheel': + // Calculate hue, saturation, and brightness + x = (grid.width() / 2) - gridPos.x; + y = (grid.height() / 2) - gridPos.y; + r = Math.sqrt(x * x + y * y); + phi = Math.atan2(y, x); + if(phi < 0) phi += Math.PI * 2; + if(r > 75) { + r = 75; + gridPos.x = 69 - (75 * Math.cos(phi)); + gridPos.y = 69 - (75 * Math.sin(phi)); + } + saturation = keepWithin(r / 0.75, 0, 100); + hue = keepWithin(phi * 180 / Math.PI, 0, 360); + brightness = keepWithin(100 - Math.floor(sliderPos.y * (100 / slider.height())), 0, 100); + hex = hsb2hex({ + h: hue, + s: saturation, + b: brightness + }); + + // Update UI + slider.css('backgroundColor', hsb2hex({ h: hue, s: saturation, b: 100 })); + break; + + case 'saturation': + // Calculate hue, saturation, and brightness + hue = keepWithin(parseInt(gridPos.x * (360 / grid.width()), 10), 0, 360); + saturation = keepWithin(100 - Math.floor(sliderPos.y * (100 / slider.height())), 0, 100); + brightness = keepWithin(100 - Math.floor(gridPos.y * (100 / grid.height())), 0, 100); + hex = hsb2hex({ + h: hue, + s: saturation, + b: brightness + }); + + // Update UI + slider.css('backgroundColor', hsb2hex({ h: hue, s: 100, b: brightness })); + minicolors.find('.minicolors-grid-inner').css('opacity', saturation / 100); + break; + + case 'brightness': + // Calculate hue, saturation, and brightness + hue = keepWithin(parseInt(gridPos.x * (360 / grid.width()), 10), 0, 360); + saturation = keepWithin(100 - Math.floor(gridPos.y * (100 / grid.height())), 0, 100); + brightness = keepWithin(100 - Math.floor(sliderPos.y * (100 / slider.height())), 0, 100); + hex = hsb2hex({ + h: hue, + s: saturation, + b: brightness + }); + + // Update UI + slider.css('backgroundColor', hsb2hex({ h: hue, s: saturation, b: 100 })); + minicolors.find('.minicolors-grid-inner').css('opacity', 1 - (brightness / 100)); + break; + + default: + // Calculate hue, saturation, and brightness + hue = keepWithin(360 - parseInt(sliderPos.y * (360 / slider.height()), 10), 0, 360); + saturation = keepWithin(Math.floor(gridPos.x * (100 / grid.width())), 0, 100); + brightness = keepWithin(100 - Math.floor(gridPos.y * (100 / grid.height())), 0, 100); + hex = hsb2hex({ + h: hue, + s: saturation, + b: brightness + }); + + // Update UI + grid.css('backgroundColor', hsb2hex({ h: hue, s: 100, b: 100 })); + break; + } + + // Handle opacity + if(settings.opacity) { + opacity = parseFloat(1 - (opacityPos.y / opacitySlider.height())).toFixed(2); + } else { + opacity = 1; + } + + updateInput(input, hex, opacity); + } + else { + // Set swatch color + swatch.find('span').css({ + backgroundColor: hex, + opacity: opacity + }); + + // Handle change event + doChange(input, hex, opacity); + } + } + + // Sets the value of the input and does the appropriate conversions + // to respect settings, also updates the swatch + function updateInput(input, value, opacity) { + var rgb; + + // Helpful references + var minicolors = input.parent(); + var settings = input.data('minicolors-settings'); + var swatch = minicolors.find('.minicolors-input-swatch'); + + if(settings.opacity) input.attr('data-opacity', opacity); + + // Set color string + if(settings.format === 'rgb') { + // Returns RGB(A) string + + // Checks for input format and does the conversion + if(isRgb(value)) { + rgb = parseRgb(value, true); + } + else { + rgb = hex2rgb(parseHex(value, true)); + } + + opacity = input.attr('data-opacity') === '' ? 1 : keepWithin(parseFloat(input.attr('data-opacity')).toFixed(2), 0, 1); + if(isNaN(opacity) || !settings.opacity) opacity = 1; + + if(input.minicolors('rgbObject').a <= 1 && rgb && settings.opacity) { + // Set RGBA string if alpha + value = 'rgba(' + rgb.r + ', ' + rgb.g + ', ' + rgb.b + ', ' + parseFloat(opacity) + ')'; + } else { + // Set RGB string (alpha = 1) + value = 'rgb(' + rgb.r + ', ' + rgb.g + ', ' + rgb.b + ')'; + } + } else { + // Returns hex color + + // Checks for input format and does the conversion + if(isRgb(value)) { + value = rgbString2hex(value); + } + + value = convertCase(value, settings.letterCase); + } + + // Update value from picker + input.val(value); + + // Set swatch color + swatch.find('span').css({ + backgroundColor: value, + opacity: opacity + }); + + // Handle change event + doChange(input, value, opacity); + } + + // Sets the color picker values from the input + function updateFromInput(input, preserveInputValue) { + var hex, hsb, opacity, keywords, alpha, value, x, y, r, phi; + + // Helpful references + var minicolors = input.parent(); + var settings = input.data('minicolors-settings'); + var swatch = minicolors.find('.minicolors-input-swatch'); + + // Panel objects + var grid = minicolors.find('.minicolors-grid'); + var slider = minicolors.find('.minicolors-slider'); + var opacitySlider = minicolors.find('.minicolors-opacity-slider'); + + // Picker objects + var gridPicker = grid.find('[class$=-picker]'); + var sliderPicker = slider.find('[class$=-picker]'); + var opacityPicker = opacitySlider.find('[class$=-picker]'); + + // Determine hex/HSB values + if(isRgb(input.val())) { + // If input value is a rgb(a) string, convert it to hex color and update opacity + hex = rgbString2hex(input.val()); + alpha = keepWithin(parseFloat(getAlpha(input.val())).toFixed(2), 0, 1); + if(alpha) { + input.attr('data-opacity', alpha); + } + } else { + hex = convertCase(parseHex(input.val(), true), settings.letterCase); + } + + if(!hex){ + hex = convertCase(parseInput(settings.defaultValue, true), settings.letterCase); + } + hsb = hex2hsb(hex); + + // Get array of lowercase keywords + keywords = !settings.keywords ? [] : $.map(settings.keywords.split(','), function(a) { + return $.trim(a.toLowerCase()); + }); + + // Set color string + if(input.val() !== '' && $.inArray(input.val().toLowerCase(), keywords) > -1) { + value = convertCase(input.val()); + } else { + value = isRgb(input.val()) ? parseRgb(input.val()) : hex; + } + + // Update input value + if(!preserveInputValue) input.val(value); + + // Determine opacity value + if(settings.opacity) { + // Get from data-opacity attribute and keep within 0-1 range + opacity = input.attr('data-opacity') === '' ? 1 : keepWithin(parseFloat(input.attr('data-opacity')).toFixed(2), 0, 1); + if(isNaN(opacity)) opacity = 1; + input.attr('data-opacity', opacity); + swatch.find('span').css('opacity', opacity); + + // Set opacity picker position + y = keepWithin(opacitySlider.height() - (opacitySlider.height() * opacity), 0, opacitySlider.height()); + opacityPicker.css('top', y + 'px'); + } + + // Set opacity to zero if input value is transparent + if(input.val().toLowerCase() === 'transparent') { + swatch.find('span').css('opacity', 0); + } + + // Update swatch + swatch.find('span').css('backgroundColor', hex); + + // Determine picker locations + switch(settings.control) { + case 'wheel': + // Set grid position + r = keepWithin(Math.ceil(hsb.s * 0.75), 0, grid.height() / 2); + phi = hsb.h * Math.PI / 180; + x = keepWithin(75 - Math.cos(phi) * r, 0, grid.width()); + y = keepWithin(75 - Math.sin(phi) * r, 0, grid.height()); + gridPicker.css({ + top: y + 'px', + left: x + 'px' + }); + + // Set slider position + y = 150 - (hsb.b / (100 / grid.height())); + if(hex === '') y = 0; + sliderPicker.css('top', y + 'px'); + + // Update panel color + slider.css('backgroundColor', hsb2hex({ h: hsb.h, s: hsb.s, b: 100 })); + break; + + case 'saturation': + // Set grid position + x = keepWithin((5 * hsb.h) / 12, 0, 150); + y = keepWithin(grid.height() - Math.ceil(hsb.b / (100 / grid.height())), 0, grid.height()); + gridPicker.css({ + top: y + 'px', + left: x + 'px' + }); + + // Set slider position + y = keepWithin(slider.height() - (hsb.s * (slider.height() / 100)), 0, slider.height()); + sliderPicker.css('top', y + 'px'); + + // Update UI + slider.css('backgroundColor', hsb2hex({ h: hsb.h, s: 100, b: hsb.b })); + minicolors.find('.minicolors-grid-inner').css('opacity', hsb.s / 100); + break; + + case 'brightness': + // Set grid position + x = keepWithin((5 * hsb.h) / 12, 0, 150); + y = keepWithin(grid.height() - Math.ceil(hsb.s / (100 / grid.height())), 0, grid.height()); + gridPicker.css({ + top: y + 'px', + left: x + 'px' + }); + + // Set slider position + y = keepWithin(slider.height() - (hsb.b * (slider.height() / 100)), 0, slider.height()); + sliderPicker.css('top', y + 'px'); + + // Update UI + slider.css('backgroundColor', hsb2hex({ h: hsb.h, s: hsb.s, b: 100 })); + minicolors.find('.minicolors-grid-inner').css('opacity', 1 - (hsb.b / 100)); + break; + + default: + // Set grid position + x = keepWithin(Math.ceil(hsb.s / (100 / grid.width())), 0, grid.width()); + y = keepWithin(grid.height() - Math.ceil(hsb.b / (100 / grid.height())), 0, grid.height()); + gridPicker.css({ + top: y + 'px', + left: x + 'px' + }); + + // Set slider position + y = keepWithin(slider.height() - (hsb.h / (360 / slider.height())), 0, slider.height()); + sliderPicker.css('top', y + 'px'); + + // Update panel color + grid.css('backgroundColor', hsb2hex({ h: hsb.h, s: 100, b: 100 })); + break; + } + + // Fire change event, but only if minicolors is fully initialized + if(input.data('minicolors-initialized')) { + doChange(input, value, opacity); + } + } + + // Runs the change and changeDelay callbacks + function doChange(input, value, opacity) { + var settings = input.data('minicolors-settings'); + var lastChange = input.data('minicolors-lastChange'); + var obj, sel, i; + + // Only run if it actually changed + if(!lastChange || lastChange.value !== value || lastChange.opacity !== opacity) { + + // Remember last-changed value + input.data('minicolors-lastChange', { + value: value, + opacity: opacity + }); + + // Check and select applicable swatch + if(settings.swatches && settings.swatches.length !== 0) { + if(!isRgb(value)) { + obj = hex2rgb(value); + } + else { + obj = parseRgb(value, true); + } + sel = -1; + for(i = 0; i < settings.swatches.length; ++i) { + if(obj.r === settings.swatches[i].r && obj.g === settings.swatches[i].g && obj.b === settings.swatches[i].b && obj.a === settings.swatches[i].a) { + sel = i; + break; + } + } + + input.parent().find('.minicolors-swatches .minicolors-swatch').removeClass('selected'); + if(sel !== -1) { + input.parent().find('.minicolors-swatches .minicolors-swatch').eq(i).addClass('selected'); + } + } + + // Fire change event + if(settings.change) { + if(settings.changeDelay) { + // Call after a delay + clearTimeout(input.data('minicolors-changeTimeout')); + input.data('minicolors-changeTimeout', setTimeout(function() { + settings.change.call(input.get(0), value, opacity); + }, settings.changeDelay)); + } else { + // Call immediately + settings.change.call(input.get(0), value, opacity); + } + } + input.trigger('change').trigger('input'); + } + } + + // Generates an RGB(A) object based on the input's value + function rgbObject(input) { + var rgb, + opacity = $(input).attr('data-opacity'); + if( isRgb($(input).val()) ) { + rgb = parseRgb($(input).val(), true); + } else { + var hex = parseHex($(input).val(), true); + rgb = hex2rgb(hex); + } + if( !rgb ) return null; + if( opacity !== undefined ) $.extend(rgb, { a: parseFloat(opacity) }); + return rgb; + } + + // Generates an RGB(A) string based on the input's value + function rgbString(input, alpha) { + var rgb, + opacity = $(input).attr('data-opacity'); + if( isRgb($(input).val()) ) { + rgb = parseRgb($(input).val(), true); + } else { + var hex = parseHex($(input).val(), true); + rgb = hex2rgb(hex); + } + if( !rgb ) return null; + if( opacity === undefined ) opacity = 1; + if( alpha ) { + return 'rgba(' + rgb.r + ', ' + rgb.g + ', ' + rgb.b + ', ' + parseFloat(opacity) + ')'; + } else { + return 'rgb(' + rgb.r + ', ' + rgb.g + ', ' + rgb.b + ')'; + } + } + + // Converts to the letter case specified in settings + function convertCase(string, letterCase) { + return letterCase === 'uppercase' ? string.toUpperCase() : string.toLowerCase(); + } + + // Parses a string and returns a valid hex string when possible + function parseHex(string, expand) { + string = string.replace(/^#/g, ''); + if(!string.match(/^[A-F0-9]{3,6}/ig)) return ''; + if(string.length !== 3 && string.length !== 6) return ''; + if(string.length === 3 && expand) { + string = string[0] + string[0] + string[1] + string[1] + string[2] + string[2]; + } + return '#' + string; + } + + // Parses a string and returns a valid RGB(A) string when possible + function parseRgb(string, obj) { + var values = string.replace(/[^\d,.]/g, ''); + var rgba = values.split(','); + + rgba[0] = keepWithin(parseInt(rgba[0], 10), 0, 255); + rgba[1] = keepWithin(parseInt(rgba[1], 10), 0, 255); + rgba[2] = keepWithin(parseInt(rgba[2], 10), 0, 255); + if(rgba[3] !== undefined) { + rgba[3] = keepWithin(parseFloat(rgba[3], 10), 0, 1); + } + + // Return RGBA object + if( obj ) { + if (rgba[3] !== undefined) { + return { + r: rgba[0], + g: rgba[1], + b: rgba[2], + a: rgba[3] + }; + } else { + return { + r: rgba[0], + g: rgba[1], + b: rgba[2] + }; + } + } + + // Return RGBA string + if(typeof(rgba[3]) !== 'undefined' && rgba[3] <= 1) { + return 'rgba(' + rgba[0] + ', ' + rgba[1] + ', ' + rgba[2] + ', ' + rgba[3] + ')'; + } else { + return 'rgb(' + rgba[0] + ', ' + rgba[1] + ', ' + rgba[2] + ')'; + } + + } + + // Parses a string and returns a valid color string when possible + function parseInput(string, expand) { + if(isRgb(string)) { + // Returns a valid rgb(a) string + return parseRgb(string); + } else { + return parseHex(string, expand); + } + } + + // Keeps value within min and max + function keepWithin(value, min, max) { + if(value < min) value = min; + if(value > max) value = max; + return value; + } + + // Checks if a string is a valid RGB(A) string + function isRgb(string) { + var rgb = string.match(/^rgba?[\s+]?\([\s+]?(\d+)[\s+]?,[\s+]?(\d+)[\s+]?,[\s+]?(\d+)[\s+]?/i); + return (rgb && rgb.length === 4) ? true : false; + } + + // Function to get alpha from a RGB(A) string + function getAlpha(rgba) { + rgba = rgba.match(/^rgba?[\s+]?\([\s+]?(\d+)[\s+]?,[\s+]?(\d+)[\s+]?,[\s+]?(\d+)[\s+]?,[\s+]?(\d+(\.\d{1,2})?|\.\d{1,2})[\s+]?/i); + return (rgba && rgba.length === 6) ? rgba[4] : '1'; + } + + // Converts an HSB object to an RGB object + function hsb2rgb(hsb) { + var rgb = {}; + var h = Math.round(hsb.h); + var s = Math.round(hsb.s * 255 / 100); + var v = Math.round(hsb.b * 255 / 100); + if(s === 0) { + rgb.r = rgb.g = rgb.b = v; + } else { + var t1 = v; + var t2 = (255 - s) * v / 255; + var t3 = (t1 - t2) * (h % 60) / 60; + if(h === 360) h = 0; + if(h < 60) { rgb.r = t1; rgb.b = t2; rgb.g = t2 + t3; } + else if(h < 120) {rgb.g = t1; rgb.b = t2; rgb.r = t1 - t3; } + else if(h < 180) {rgb.g = t1; rgb.r = t2; rgb.b = t2 + t3; } + else if(h < 240) {rgb.b = t1; rgb.r = t2; rgb.g = t1 - t3; } + else if(h < 300) {rgb.b = t1; rgb.g = t2; rgb.r = t2 + t3; } + else if(h < 360) {rgb.r = t1; rgb.g = t2; rgb.b = t1 - t3; } + else { rgb.r = 0; rgb.g = 0; rgb.b = 0; } + } + return { + r: Math.round(rgb.r), + g: Math.round(rgb.g), + b: Math.round(rgb.b) + }; + } + + // Converts an RGB string to a hex string + function rgbString2hex(rgb){ + rgb = rgb.match(/^rgba?[\s+]?\([\s+]?(\d+)[\s+]?,[\s+]?(\d+)[\s+]?,[\s+]?(\d+)[\s+]?/i); + return (rgb && rgb.length === 4) ? '#' + + ('0' + parseInt(rgb[1],10).toString(16)).slice(-2) + + ('0' + parseInt(rgb[2],10).toString(16)).slice(-2) + + ('0' + parseInt(rgb[3],10).toString(16)).slice(-2) : ''; + } + + // Converts an RGB object to a hex string + function rgb2hex(rgb) { + var hex = [ + rgb.r.toString(16), + rgb.g.toString(16), + rgb.b.toString(16) + ]; + $.each(hex, function(nr, val) { + if(val.length === 1) hex[nr] = '0' + val; + }); + return '#' + hex.join(''); + } + + // Converts an HSB object to a hex string + function hsb2hex(hsb) { + return rgb2hex(hsb2rgb(hsb)); + } + + // Converts a hex string to an HSB object + function hex2hsb(hex) { + var hsb = rgb2hsb(hex2rgb(hex)); + if(hsb.s === 0) hsb.h = 360; + return hsb; + } + + // Converts an RGB object to an HSB object + function rgb2hsb(rgb) { + var hsb = { h: 0, s: 0, b: 0 }; + var min = Math.min(rgb.r, rgb.g, rgb.b); + var max = Math.max(rgb.r, rgb.g, rgb.b); + var delta = max - min; + hsb.b = max; + hsb.s = max !== 0 ? 255 * delta / max : 0; + if(hsb.s !== 0) { + if(rgb.r === max) { + hsb.h = (rgb.g - rgb.b) / delta; + } else if(rgb.g === max) { + hsb.h = 2 + (rgb.b - rgb.r) / delta; + } else { + hsb.h = 4 + (rgb.r - rgb.g) / delta; + } + } else { + hsb.h = -1; + } + hsb.h *= 60; + if(hsb.h < 0) { + hsb.h += 360; + } + hsb.s *= 100/255; + hsb.b *= 100/255; + return hsb; + } + + // Converts a hex string to an RGB object + function hex2rgb(hex) { + hex = parseInt(((hex.indexOf('#') > -1) ? hex.substring(1) : hex), 16); + return { + r: hex >> 16, + g: (hex & 0x00FF00) >> 8, + b: (hex & 0x0000FF) + }; + } + + // Handle events + $([document]) + // Hide on clicks outside of the control + .on('mousedown.minicolors touchstart.minicolors', function(event) { + if(!$(event.target).parents().add(event.target).hasClass('minicolors')) { + hide(); + } + }) + // Start moving + .on('mousedown.minicolors touchstart.minicolors', '.minicolors-grid, .minicolors-slider, .minicolors-opacity-slider', function(event) { + var target = $(this); + event.preventDefault(); + $(event.delegateTarget).data('minicolors-target', target); + move(target, event, true); + }) + // Move pickers + .on('mousemove.minicolors touchmove.minicolors', function(event) { + var target = $(event.delegateTarget).data('minicolors-target'); + if(target) move(target, event); + }) + // Stop moving + .on('mouseup.minicolors touchend.minicolors', function() { + $(this).removeData('minicolors-target'); + }) + // Selected a swatch + .on('click.minicolors', '.minicolors-swatches li', function(event) { + event.preventDefault(); + var target = $(this), input = target.parents('.minicolors').find('.minicolors-input'), color = target.data('swatch-color'); + updateInput(input, color, getAlpha(color)); + updateFromInput(input); + }) + // Show panel when swatch is clicked + .on('mousedown.minicolors touchstart.minicolors', '.minicolors-input-swatch', function(event) { + var input = $(this).parent().find('.minicolors-input'); + event.preventDefault(); + show(input); + }) + // Show on focus + .on('focus.minicolors', '.minicolors-input', function() { + var input = $(this); + if(!input.data('minicolors-initialized')) return; + show(input); + }) + // Update value on blur + .on('blur.minicolors', '.minicolors-input', function() { + var input = $(this); + var settings = input.data('minicolors-settings'); + var keywords; + var hex; + var rgba; + var swatchOpacity; + var value; + + if(!input.data('minicolors-initialized')) return; + + // Get array of lowercase keywords + keywords = !settings.keywords ? [] : $.map(settings.keywords.split(','), function(a) { + return $.trim(a.toLowerCase()); + }); + + // Set color string + if(input.val() !== '' && $.inArray(input.val().toLowerCase(), keywords) > -1) { + value = input.val(); + } else { + // Get RGBA values for easy conversion + if(isRgb(input.val())) { + rgba = parseRgb(input.val(), true); + } else { + hex = parseHex(input.val(), true); + rgba = hex ? hex2rgb(hex) : null; + } + + // Convert to format + if(rgba === null) { + value = settings.defaultValue; + } else if(settings.format === 'rgb') { + value = settings.opacity ? + parseRgb('rgba(' + rgba.r + ',' + rgba.g + ',' + rgba.b + ',' + input.attr('data-opacity') + ')') : + parseRgb('rgb(' + rgba.r + ',' + rgba.g + ',' + rgba.b + ')'); + } else { + value = rgb2hex(rgba); + } + } + + // Update swatch opacity + swatchOpacity = settings.opacity ? input.attr('data-opacity') : 1; + if(value.toLowerCase() === 'transparent') swatchOpacity = 0; + input + .closest('.minicolors') + .find('.minicolors-input-swatch > span') + .css('opacity', swatchOpacity); + + // Set input value + input.val(value); + + // Is it blank? + if(input.val() === '') input.val(parseInput(settings.defaultValue, true)); + + // Adjust case + input.val(convertCase(input.val(), settings.letterCase)); + + }) + // Handle keypresses + .on('keydown.minicolors', '.minicolors-input', function(event) { + var input = $(this); + if(!input.data('minicolors-initialized')) return; + switch(event.which) { + case 9: // tab + hide(); + break; + case 13: // enter + case 27: // esc + hide(); + input.blur(); + break; + } + }) + // Update on keyup + .on('keyup.minicolors', '.minicolors-input', function() { + var input = $(this); + if(!input.data('minicolors-initialized')) return; + updateFromInput(input, true); + }) + // Update on paste + .on('paste.minicolors', '.minicolors-input', function() { + var input = $(this); + if(!input.data('minicolors-initialized')) return; + setTimeout(function() { + updateFromInput(input, true); + }, 1); + }); +})); diff --git a/app/assets/javascripts/jquery.touchSwipe.min.js b/app/assets/javascripts/jquery.touchSwipe.min.js new file mode 100644 index 0000000..b7fd340 --- /dev/null +++ b/app/assets/javascripts/jquery.touchSwipe.min.js @@ -0,0 +1 @@ +(function(a){if(typeof define==="function"&&define.amd&&define.amd.jQuery){define(["jquery"],a)}else{a(jQuery)}}(function(f){var y="1.6.9",p="left",o="right",e="up",x="down",c="in",A="out",m="none",s="auto",l="swipe",t="pinch",B="tap",j="doubletap",b="longtap",z="hold",E="horizontal",u="vertical",i="all",r=10,g="start",k="move",h="end",q="cancel",a="ontouchstart" in window,v=window.navigator.msPointerEnabled&&!window.navigator.pointerEnabled,d=window.navigator.pointerEnabled||window.navigator.msPointerEnabled,C="TouchSwipe";var n={fingers:1,threshold:75,cancelThreshold:null,pinchThreshold:20,maxTimeThreshold:null,fingerReleaseThreshold:250,longTapThreshold:500,doubleTapThreshold:200,swipe:null,swipeLeft:null,swipeRight:null,swipeUp:null,swipeDown:null,swipeStatus:null,pinchIn:null,pinchOut:null,pinchStatus:null,click:null,tap:null,doubleTap:null,longTap:null,hold:null,triggerOnTouchEnd:true,triggerOnTouchLeave:false,allowPageScroll:"auto",fallbackToMouseEvents:true,excludedElements:"label, button, input, select, textarea, a, .noSwipe",preventDefaultEvents:true};f.fn.swipe=function(H){var G=f(this),F=G.data(C);if(F&&typeof H==="string"){if(F[H]){return F[H].apply(this,Array.prototype.slice.call(arguments,1))}else{f.error("Method "+H+" does not exist on jQuery.swipe")}}else{if(!F&&(typeof H==="object"||!H)){return w.apply(this,arguments)}}return G};f.fn.swipe.version=y;f.fn.swipe.defaults=n;f.fn.swipe.phases={PHASE_START:g,PHASE_MOVE:k,PHASE_END:h,PHASE_CANCEL:q};f.fn.swipe.directions={LEFT:p,RIGHT:o,UP:e,DOWN:x,IN:c,OUT:A};f.fn.swipe.pageScroll={NONE:m,HORIZONTAL:E,VERTICAL:u,AUTO:s};f.fn.swipe.fingers={ONE:1,TWO:2,THREE:3,ALL:i};function w(F){if(F&&(F.allowPageScroll===undefined&&(F.swipe!==undefined||F.swipeStatus!==undefined))){F.allowPageScroll=m}if(F.click!==undefined&&F.tap===undefined){F.tap=F.click}if(!F){F={}}F=f.extend({},f.fn.swipe.defaults,F);return this.each(function(){var H=f(this);var G=H.data(C);if(!G){G=new D(this,F);H.data(C,G)}})}function D(a5,aw){var aA=(a||d||!aw.fallbackToMouseEvents),K=aA?(d?(v?"MSPointerDown":"pointerdown"):"touchstart"):"mousedown",az=aA?(d?(v?"MSPointerMove":"pointermove"):"touchmove"):"mousemove",V=aA?(d?(v?"MSPointerUp":"pointerup"):"touchend"):"mouseup",T=aA?null:"mouseleave",aE=(d?(v?"MSPointerCancel":"pointercancel"):"touchcancel");var ah=0,aQ=null,ac=0,a2=0,a0=0,H=1,ar=0,aK=0,N=null;var aS=f(a5);var aa="start";var X=0;var aR=null;var U=0,a3=0,a6=0,ae=0,O=0;var aX=null,ag=null;try{aS.bind(K,aO);aS.bind(aE,ba)}catch(al){f.error("events not supported "+K+","+aE+" on jQuery.swipe")}this.enable=function(){aS.bind(K,aO);aS.bind(aE,ba);return aS};this.disable=function(){aL();return aS};this.destroy=function(){aL();aS.data(C,null);aS=null};this.option=function(bd,bc){if(aw[bd]!==undefined){if(bc===undefined){return aw[bd]}else{aw[bd]=bc}}else{f.error("Option "+bd+" does not exist on jQuery.swipe.options")}return null};function aO(be){if(aC()){return}if(f(be.target).closest(aw.excludedElements,aS).length>0){return}var bf=be.originalEvent?be.originalEvent:be;var bd,bg=bf.touches,bc=bg?bg[0]:bf;aa=g;if(bg){X=bg.length}else{be.preventDefault()}ah=0;aQ=null;aK=null;ac=0;a2=0;a0=0;H=1;ar=0;aR=ak();N=ab();S();if(!bg||(X===aw.fingers||aw.fingers===i)||aY()){aj(0,bc);U=au();if(X==2){aj(1,bg[1]);a2=a0=av(aR[0].start,aR[1].start)}if(aw.swipeStatus||aw.pinchStatus){bd=P(bf,aa)}}else{bd=false}if(bd===false){aa=q;P(bf,aa);return bd}else{if(aw.hold){ag=setTimeout(f.proxy(function(){aS.trigger("hold",[bf.target]);if(aw.hold){bd=aw.hold.call(aS,bf,bf.target)}},this),aw.longTapThreshold)}ap(true)}return null}function a4(bf){var bi=bf.originalEvent?bf.originalEvent:bf;if(aa===h||aa===q||an()){return}var be,bj=bi.touches,bd=bj?bj[0]:bi;var bg=aI(bd);a3=au();if(bj){X=bj.length}if(aw.hold){clearTimeout(ag)}aa=k;if(X==2){if(a2==0){aj(1,bj[1]);a2=a0=av(aR[0].start,aR[1].start)}else{aI(bj[1]);a0=av(aR[0].end,aR[1].end);aK=at(aR[0].end,aR[1].end)}H=a8(a2,a0);ar=Math.abs(a2-a0)}if((X===aw.fingers||aw.fingers===i)||!bj||aY()){aQ=aM(bg.start,bg.end);am(bf,aQ);ah=aT(bg.start,bg.end);ac=aN();aJ(aQ,ah);if(aw.swipeStatus||aw.pinchStatus){be=P(bi,aa)}if(!aw.triggerOnTouchEnd||aw.triggerOnTouchLeave){var bc=true;if(aw.triggerOnTouchLeave){var bh=aZ(this);bc=F(bg.end,bh)}if(!aw.triggerOnTouchEnd&&bc){aa=aD(k)}else{if(aw.triggerOnTouchLeave&&!bc){aa=aD(h)}}if(aa==q||aa==h){P(bi,aa)}}}else{aa=q;P(bi,aa)}if(be===false){aa=q;P(bi,aa)}}function M(bc){var bd=bc.originalEvent?bc.originalEvent:bc,be=bd.touches;if(be){if(be.length){G();return true}}if(an()){X=ae}a3=au();ac=aN();if(bb()||!ao()){aa=q;P(bd,aa)}else{if(aw.triggerOnTouchEnd||(aw.triggerOnTouchEnd==false&&aa===k)){bc.preventDefault();aa=h;P(bd,aa)}else{if(!aw.triggerOnTouchEnd&&a7()){aa=h;aG(bd,aa,B)}else{if(aa===k){aa=q;P(bd,aa)}}}}ap(false);return null}function ba(){X=0;a3=0;U=0;a2=0;a0=0;H=1;S();ap(false)}function L(bc){var bd=bc.originalEvent?bc.originalEvent:bc;if(aw.triggerOnTouchLeave){aa=aD(h);P(bd,aa)}}function aL(){aS.unbind(K,aO);aS.unbind(aE,ba);aS.unbind(az,a4);aS.unbind(V,M);if(T){aS.unbind(T,L)}ap(false)}function aD(bg){var bf=bg;var be=aB();var bd=ao();var bc=bb();if(!be||bc){bf=q}else{if(bd&&bg==k&&(!aw.triggerOnTouchEnd||aw.triggerOnTouchLeave)){bf=h}else{if(!bd&&bg==h&&aw.triggerOnTouchLeave){bf=q}}}return bf}function P(be,bc){var bd,bf=be.touches;if((J()||W())||(Q()||aY())){if(J()||W()){bd=aG(be,bc,l)}if((Q()||aY())&&bd!==false){bd=aG(be,bc,t)}}else{if(aH()&&bd!==false){bd=aG(be,bc,j)}else{if(aq()&&bd!==false){bd=aG(be,bc,b)}else{if(ai()&&bd!==false){bd=aG(be,bc,B)}}}}if(bc===q){ba(be)}if(bc===h){if(bf){if(!bf.length){ba(be)}}else{ba(be)}}return bd}function aG(bf,bc,be){var bd;if(be==l){aS.trigger("swipeStatus",[bc,aQ||null,ah||0,ac||0,X,aR]);if(aw.swipeStatus){bd=aw.swipeStatus.call(aS,bf,bc,aQ||null,ah||0,ac||0,X,aR);if(bd===false){return false}}if(bc==h&&aW()){aS.trigger("swipe",[aQ,ah,ac,X,aR]);if(aw.swipe){bd=aw.swipe.call(aS,bf,aQ,ah,ac,X,aR);if(bd===false){return false}}switch(aQ){case p:aS.trigger("swipeLeft",[aQ,ah,ac,X,aR]);if(aw.swipeLeft){bd=aw.swipeLeft.call(aS,bf,aQ,ah,ac,X,aR)}break;case o:aS.trigger("swipeRight",[aQ,ah,ac,X,aR]);if(aw.swipeRight){bd=aw.swipeRight.call(aS,bf,aQ,ah,ac,X,aR)}break;case e:aS.trigger("swipeUp",[aQ,ah,ac,X,aR]);if(aw.swipeUp){bd=aw.swipeUp.call(aS,bf,aQ,ah,ac,X,aR)}break;case x:aS.trigger("swipeDown",[aQ,ah,ac,X,aR]);if(aw.swipeDown){bd=aw.swipeDown.call(aS,bf,aQ,ah,ac,X,aR)}break}}}if(be==t){aS.trigger("pinchStatus",[bc,aK||null,ar||0,ac||0,X,H,aR]);if(aw.pinchStatus){bd=aw.pinchStatus.call(aS,bf,bc,aK||null,ar||0,ac||0,X,H,aR);if(bd===false){return false}}if(bc==h&&a9()){switch(aK){case c:aS.trigger("pinchIn",[aK||null,ar||0,ac||0,X,H,aR]);if(aw.pinchIn){bd=aw.pinchIn.call(aS,bf,aK||null,ar||0,ac||0,X,H,aR)}break;case A:aS.trigger("pinchOut",[aK||null,ar||0,ac||0,X,H,aR]);if(aw.pinchOut){bd=aw.pinchOut.call(aS,bf,aK||null,ar||0,ac||0,X,H,aR)}break}}}if(be==B){if(bc===q||bc===h){clearTimeout(aX);clearTimeout(ag);if(Z()&&!I()){O=au();aX=setTimeout(f.proxy(function(){O=null;aS.trigger("tap",[bf.target]);if(aw.tap){bd=aw.tap.call(aS,bf,bf.target)}},this),aw.doubleTapThreshold)}else{O=null;aS.trigger("tap",[bf.target]);if(aw.tap){bd=aw.tap.call(aS,bf,bf.target)}}}}else{if(be==j){if(bc===q||bc===h){clearTimeout(aX);O=null;aS.trigger("doubletap",[bf.target]);if(aw.doubleTap){bd=aw.doubleTap.call(aS,bf,bf.target)}}}else{if(be==b){if(bc===q||bc===h){clearTimeout(aX);O=null;aS.trigger("longtap",[bf.target]);if(aw.longTap){bd=aw.longTap.call(aS,bf,bf.target)}}}}}return bd}function ao(){var bc=true;if(aw.threshold!==null){bc=ah>=aw.threshold}return bc}function bb(){var bc=false;if(aw.cancelThreshold!==null&&aQ!==null){bc=(aU(aQ)-ah)>=aw.cancelThreshold}return bc}function af(){if(aw.pinchThreshold!==null){return ar>=aw.pinchThreshold}return true}function aB(){var bc;if(aw.maxTimeThreshold){if(ac>=aw.maxTimeThreshold){bc=false}else{bc=true}}else{bc=true}return bc}function am(bc,bd){if(aw.preventDefaultEvents===false){return}if(aw.allowPageScroll===m){bc.preventDefault()}else{var be=aw.allowPageScroll===s;switch(bd){case p:if((aw.swipeLeft&&be)||(!be&&aw.allowPageScroll!=E)){bc.preventDefault()}break;case o:if((aw.swipeRight&&be)||(!be&&aw.allowPageScroll!=E)){bc.preventDefault()}break;case e:if((aw.swipeUp&&be)||(!be&&aw.allowPageScroll!=u)){bc.preventDefault()}break;case x:if((aw.swipeDown&&be)||(!be&&aw.allowPageScroll!=u)){bc.preventDefault()}break}}}function a9(){var bd=aP();var bc=Y();var be=af();return bd&&bc&&be}function aY(){return !!(aw.pinchStatus||aw.pinchIn||aw.pinchOut)}function Q(){return !!(a9()&&aY())}function aW(){var bf=aB();var bh=ao();var be=aP();var bc=Y();var bd=bb();var bg=!bd&&bc&&be&&bh&&bf;return bg}function W(){return !!(aw.swipe||aw.swipeStatus||aw.swipeLeft||aw.swipeRight||aw.swipeUp||aw.swipeDown)}function J(){return !!(aW()&&W())}function aP(){return((X===aw.fingers||aw.fingers===i)||!a)}function Y(){return aR[0].end.x!==0}function a7(){return !!(aw.tap)}function Z(){return !!(aw.doubleTap)}function aV(){return !!(aw.longTap)}function R(){if(O==null){return false}var bc=au();return(Z()&&((bc-O)<=aw.doubleTapThreshold))}function I(){return R()}function ay(){return((X===1||!a)&&(isNaN(ah)||ahaw.longTapThreshold)&&(ah=0)){return p}else{if((be<=360)&&(be>=315)){return p}else{if((be>=135)&&(be<=225)){return o}else{if((be>45)&&(be<135)){return x}else{return e}}}}}function au(){var bc=new Date();return bc.getTime()}function aZ(bc){bc=f(bc);var be=bc.offset();var bd={left:be.left,right:be.left+bc.outerWidth(),top:be.top,bottom:be.top+bc.outerHeight()};return bd}function F(bc,bd){return(bc.x>bd.left&&bc.xbd.top&&bc.y',a,""].join(""),l.id=h,(m?l:n).innerHTML+=f,n.appendChild(l),m||(n.style.background="",n.style.overflow="hidden",k=g.style.overflow,g.style.overflow="hidden",g.appendChild(n)),i=c(l,a),m?l.parentNode.removeChild(l):(n.parentNode.removeChild(n),g.style.overflow=k),!!i},y={}.hasOwnProperty,z;!C(y,"undefined")&&!C(y.call,"undefined")?z=function(a,b){return y.call(a,b)}:z=function(a,b){return b in a&&C(a.constructor.prototype[b],"undefined")},Function.prototype.bind||(Function.prototype.bind=function(b){var c=this;if(typeof c!="function")throw new TypeError;var d=v.call(arguments,1),e=function(){if(this instanceof e){var a=function(){};a.prototype=c.prototype;var f=new a,g=c.apply(f,d.concat(v.call(arguments)));return Object(g)===g?g:f}return c.apply(b,d.concat(v.call(arguments)))};return e}),r.touch=function(){var c;return"ontouchstart"in a||a.DocumentTouch&&b instanceof DocumentTouch?c=!0:x(["@media (",m.join("touch-enabled),("),h,")","{#modernizr{top:9px;position:absolute}}"].join(""),function(a){c=a.offsetTop===9}),c},r.multiplebgs=function(){return A("background:url(https://),url(https://),red url(https://)"),/(url\s*\(.*?){3}/.test(j.background)},r.backgroundsize=function(){return G("backgroundSize")},r.csscolumns=function(){return G("columnCount")},r.svg=function(){return!!b.createElementNS&&!!b.createElementNS(q.svg,"svg").createSVGRect},r.inlinesvg=function(){var a=b.createElement("div");return a.innerHTML="",(a.firstChild&&a.firstChild.namespaceURI)==q.svg};for(var H in r)z(r,H)&&(w=H.toLowerCase(),e[w]=r[H](),u.push((e[w]?"":"no-")+w));return e.addTest=function(a,b){if(typeof a=="object")for(var d in a)z(a,d)&&e.addTest(d,a[d]);else{a=a.toLowerCase();if(e[a]!==c)return e;b=typeof b=="function"?b():b,typeof f!="undefined"&&f&&(g.className+=" "+(b?"":"no-")+a),e[a]=b}return e},A(""),i=k=null,function(a,b){function l(a,b){var c=a.createElement("p"),d=a.getElementsByTagName("head")[0]||a.documentElement;return c.innerHTML="x",d.insertBefore(c.lastChild,d.firstChild)}function m(){var a=s.elements;return typeof a=="string"?a.split(" "):a}function n(a){var b=j[a[h]];return b||(b={},i++,a[h]=i,j[i]=b),b}function o(a,c,d){c||(c=b);if(k)return c.createElement(a);d||(d=n(c));var g;return d.cache[a]?g=d.cache[a].cloneNode():f.test(a)?g=(d.cache[a]=d.createElem(a)).cloneNode():g=d.createElem(a),g.canHaveChildren&&!e.test(a)&&!g.tagUrn?d.frag.appendChild(g):g}function p(a,c){a||(a=b);if(k)return a.createDocumentFragment();c=c||n(a);var d=c.frag.cloneNode(),e=0,f=m(),g=f.length;for(;e",g="hidden"in a,k=a.childNodes.length==1||function(){b.createElement("a");var a=b.createDocumentFragment();return typeof a.cloneNode=="undefined"||typeof a.createDocumentFragment=="undefined"||typeof a.createElement=="undefined"}()}catch(c){g=!0,k=!0}})();var s={elements:d.elements||"abbr article aside audio bdi canvas data datalist details dialog figcaption figure footer header hgroup main mark meter nav output progress section summary template time video",version:c,shivCSS:d.shivCSS!==!1,supportsUnknownElements:k,shivMethods:d.shivMethods!==!1,type:"default",shivDocument:r,createElement:o,createDocumentFragment:p};a.html5=s,r(b)}(this,b),e._version=d,e._prefixes=m,e._domPrefixes=p,e._cssomPrefixes=o,e.testProp=function(a){return E([a])},e.testAllProps=G,e.testStyles=x,g.className=g.className.replace(/(^|\s)no-js(\s|$)/,"$1$2")+(f?" js "+u.join(" "):""),e}(this,this.document),function(a,b,c){function d(a){return"[object Function]"==o.call(a)}function e(a){return"string"==typeof a}function f(){}function g(a){return!a||"loaded"==a||"complete"==a||"uninitialized"==a}function h(){var a=p.shift();q=1,a?a.t?m(function(){("c"==a.t?B.injectCss:B.injectJs)(a.s,0,a.a,a.x,a.e,1)},0):(a(),h()):q=0}function i(a,c,d,e,f,i,j){function k(b){if(!o&&g(l.readyState)&&(u.r=o=1,!q&&h(),l.onload=l.onreadystatechange=null,b)){"img"!=a&&m(function(){t.removeChild(l)},50);for(var d in y[c])y[c].hasOwnProperty(d)&&y[c][d].onload()}}var j=j||B.errorTimeout,l=b.createElement(a),o=0,r=0,u={t:d,s:c,e:f,a:i,x:j};1===y[c]&&(r=1,y[c]=[]),"object"==a?l.data=c:(l.src=c,l.type=a),l.width=l.height="0",l.onerror=l.onload=l.onreadystatechange=function(){k.call(this,r)},p.splice(e,0,u),"img"!=a&&(r||2===y[c]?(t.insertBefore(l,s?null:n),m(k,j)):y[c].push(l))}function j(a,b,c,d,f){return q=0,b=b||"j",e(a)?i("c"==b?v:u,a,b,this.i++,c,d,f):(p.splice(this.i++,0,a),1==p.length&&h()),this}function k(){var a=B;return a.loader={load:j,i:0},a}var l=b.documentElement,m=a.setTimeout,n=b.getElementsByTagName("script")[0],o={}.toString,p=[],q=0,r="MozAppearance"in l.style,s=r&&!!b.createRange().compareNode,t=s?l:n.parentNode,l=a.opera&&"[object Opera]"==o.call(a.opera),l=!!b.attachEvent&&!l,u=r?"object":l?"script":"img",v=l?"script":u,w=Array.isArray||function(a){return"[object Array]"==o.call(a)},x=[],y={},z={timeout:function(a,b){return b.length&&(a.timeout=b[0]),a}},A,B;B=function(a){function b(a){var a=a.split("!"),b=x.length,c=a.pop(),d=a.length,c={url:c,origUrl:c,prefixes:a},e,f,g;for(f=0;f"; + for(i=current_year;i>=year;i--){ + dthtml+=""; + } + dthtml+=" Date: Month: "; + dom.html(dthtml); +}, + +//loading overlay around a dom... +loadingWrapper : function(dom, display){ + if(display){ + dom.prepend("
      "); + $rss("#loading_wrapper").height(dom.height()); + $rss("#loading_wrapper").width(dom.width()); + }else{ + domId=dom.attr("id"); + $rss("#"+domId+" #loading_wrapper").remove(); + } + }, + +//validating a dom.... +validate : function(dom, validation, errormsg){ + var domValue = dom.val(); + var error = false; + var regex=""; + var msg = ""; + switch(validation){ + case "required": + if(domValue=="")error=true; + msg="Cannot be empty."; + break; + case "email": + regex=/^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/; + msg="Invalid Email Address."; + break; + case "number": + regex=/^\d*[0-9](|.\d*[0-9]|,\d*[0-9])?$/; + msg = "Only numbers are accepted."; + break; + case "alphanumeric": + regex=/^\s*[a-zA-Z0-9,\s]+\s*$/; + msg="Only numbers, alphabets and spaces are allowed."; + break; + } + domId=dom.attr("name"); + if(errormsg=="")errormsg=msg; + if(regex!="")if(!regex.test(domValue))error=true; + if(error){$rss("#"+domId+"_error").remove();dom.after(""+errormsg+"");return false;} else{ $rss("#"+domId+"_error").remove();return true;} + }, + +bindToSpinner : function(dom,data,callbackFn){ + var domId = dom.attr("id"); + var dhtml=""; + var spinnerValue=Array(); + var spinnerDisplay=Array(); + $rss.each(data,function(i,it){ + $rss.each(data[i],function(key,it){ + spinnerValue.push(it); + }); + }); + dhtml=""; + dom.html(dhtml); + if(typeof callbackFn=="function") + callbackFn.call(this, dhtml); + }, + + //binds the recieved json to a table +bindToTable : function(dom,data,headers,actions,css_class,callbackFn){ + if(!css_class)css_class=""; + var dhtml=""; + var domId = dom.attr("id"); + if(actions){ + var btnTitles=Array(); + var btnFunctions=Array(); + $rss.each(actions,function(title,func){ + btnTitles.push(title); + btnFunctions.push(func); + }); + rcom.translate(btnTitles,function(convertedData){ + btnTitles=convertedData.slice(); + + rcom.translate(headers,function(convertedData){ + headers=convertedData; + if(!data)return; + $rss.each(headers,function(i,head){ + dhtml+=""; + }); + dhtml+=""; + if(data.length==0)dhtml+=""; + $rss.each(data,function(i,item){ + var cl=""; + if(i%2!=0)cl="even"; + dhtml+=""; + $rss.each(item,function(i,it){ + if(i!="id"){ + if(it==null)it="Not Set"; + dhtml+=""; + } + }) + dhtml+=""; + dhtml+=""; + }); + dhtml+="
      "+head+"
      No Data
      "+it+""; + for(x=0;x"+btnTitles[x]+""; + } + dhtml+="
      "; + dom.html(dhtml); + }); + }); + }else{ + rcom.translate(headers,function(convertedData){ + headers=convertedData; + if(!data)return; + if(headers.length>0){ + $rss.each(headers,function(i,head){ + dhtml+=""+head+""; + }); + } + dhtml+=""; + if(data.length==0)dhtml+="No Data"; + + $rss.each(data,function(i,item){ + var cl=""; + if(i%2!=0)cl="even"; + dhtml+=""; + $rss.each(item,function(i,it){ + if(i!="id"){ + if(it==null)it="Not Set"; + dhtml+=""+it+""; + } + }) + dhtml+=""; + }); + dhtml+=""; + dom.html(dhtml); + }); + } + + if(typeof callbackFn=="function") + callbackFn.call(this, dhtml); +}, + //convert to date string which can be directly inserted in database or according to any format. +convertToInsertableDate : function(y,m,d,format){ + var dt=""; + if(m<10)m="0"+m; + if(d<10)d="0"+d; + switch(format){ + case "yyyy-mm-dd": + dt= y+"-"+m+"-"+d; + break; + case "dd-mm-yyyy": + dt= d+"-"+m+"-"+y; + break; + case "mm-dd-yyyy": + dt= m+"-"+d+"-"+y; + break; + default: + dt= y+"-"+m+"-"+d; + break; + } + return dt; + }, +//a fucntion to show specific divs and hide all other +showDoms : function(doms){ + $rss("body").find("div").each(function(){$rss(this).hide();}); + $rss.each(doms,function(i,dom){ + dom.show(); + }); + }, + +//a function to translate the word or array.. +translate : function(data,callbackFn){ + var cdata=""; + var status =true; + if(!data){ + if(typeof callbackFn=="function") + callbackFn.call(this,cdata); + status=false; + } + if(data==""){ + if(typeof callbackFn=="function") + callbackFn.call(this,cdata); + status=false; + } + if(status){ + $rss.getJSON("../../classes/translate.php", {fn:"translateThis",tData:data},function(convertedData){ + if(typeof callbackFn=="function") + callbackFn.call(this, convertedData); + }); + } + }, + +// a function to bind JSON to list +bindToList : function(dom,data,callbackFn){ + var domId = dom.attr("id"); + var dhtml=""; + var listValue=Array(); + var listDisplay=Array(); + $rss.each(data,function(i,it){ + $rss.each(data[i],function(key,it){ + listValue.push(it); + }); + }); + dhtml="
        "; + for(i=0,y=1,z=0;i"+listValue[y]+""; + } + dhtml+="
      "; + dom.html(dhtml); + if(typeof callbackFn=="function") + callbackFn.call(this,dhtml); + }, +makeDraggable : function(handler,dom){ + handler.css("position","absolute"); + dom.css("position","absolute"); + var puranix=0; + var nayeex=0; + var puraniy=0; + var nayeey=0; + var offset=""; + var zIndex=dom.css("z-index"); + handler.mousedown(function(e){ + puranix=e.clientX; + puraniy=e.clientY; + offset=dom.offset(); + $rss(this).mousemove(function(e){ + nayeex=e.clientX-puranix; + nayeex+=offset.left; + nayeey=e.clientY-puraniy; + nayeey+=offset.top; + dom.css({"left":nayeex+"px","top":nayeey+"px","z-index":"9999"}); + }) + }).mouseup(function(){ + $rss(this).unbind("mousemove"); + dom.css("z-index",zIndex); + }) + }, + +//automatically scrolls to the bottom of the div +scrollToBottom : function(dom){ + var domId = dom.attr("id"); +// var domScrollHeight = document.getElementById(domId).scrollHeight; + var obj = document.getElementById(domId); + + if((obj.scrollTop+100) >= (obj.scrollHeight - obj.offsetHeight)) + dom.scrollTop(obj.scrollHeight); + }, + +/*ajax loading of images... needs following settings +dom:in which images ve to be loaded +url:the server url for making ajax calls +limit:how many images to load +divClass:the class of div surrounding each image +nameClass:class for span showing name +fn:function to be called in on the server +imageSrc:the image source of all the images. +bindTo:to bind images to a onclick function or else will be binded to normal a tag. +urlKey:to specify the key of the value.. if bindTo is used, this will be neglected.. +returns json; +*/ +loadImages : function(settings,callbackFn){ + + var dom = settings.dom; + var domid= dom.attr("id"); + var temp_array=Array(); + var starting = $rss("#"+domid+" img:last").attr("id"); + if(typeof starting != 'undefined'){ + starting = starting.substr(4,starting.length-1); + }else{starting = 0}; + var temp_var=""; + var json = ""; + var dhtml=""; + var extraparam=""; + if(typeof settings.extraParam != "undefined"){ + extraparam = settings.extraParam; + } + $rss.getJSON(settings.url,{fn:settings.fn,id:settings.whereId,limit:settings.limit,start:starting,extra:extraparam},function(images){ + json = eval(images); + $rss.each(images,function(i,pic){ + var temp_array=Array(); + var a_var=Array(); + var name_var=""; + var title=""; + $rss.each(pic,function(i,value){ + temp_array.push(value); + }) + if(temp_array.length>=4){ + name_var=""+temp_array[3]+"" + } + if(temp_array[2]==null) + title = ""; + else + title = temp_array[2]; + if(typeof settings.bindTo!="undefined"){ + a_var[1]="onclick='"+settings.bindTo+"("+temp_array[0]+");return false;'"; + a_var[0]=""; + }else{a_var[0]='?'+settings.urlKey+'='+temp_array[0];a_var[1]="";} + dhtml="
      "+name_var; + dom.delay(100).append(dhtml); + $rss("#pic_"+pic.id).delay(100).fadeIn(200); + + }) + if(typeof callbackFn=="function") + callbackFn.call(this,json); + }) + + + }, + +//function to get url variables... +getUrlVars : function(){ + var vars = [], hash; + var hashes = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&'); + for(var i = 0; i < hashes.length; i++){ + hash = hashes[i].split('='); + vars.push(hash[0]); + vars[hash[0]] = hash[1]; + } + if(vars[0] == window.location.href){ + vars =[]; + } + return vars; +}, +/*function to open a modalwindow on a page.. self reliant no images, no css needed. +settings + +width:in percentage or pixcel +height:in percentage or pixcel +closeBtn:true or false +envClose:closing through background click, true or flase +loadDiv:load html from a div +loadPage:load a page +loadHtml: load html + +*/ +modalWindow : function(settings,callbackFn){ + + var envClose = settings.envClose; + var dhtml=""; + if(typeof envClose == "undefined") + envClose = true; + var closeBtn = settings.closeBtn; + if(typeof closeBtn == "undefined") + closeBtn = true; + + var rgmaskHeight = $rss(window).height(); + var rgmaskWidth = $rss(window).width(); + var tempheight = settings.height; + var tempwidth = settings.width; + + var maxheight = (rgmaskHeight*85)/100; + var maxwidth = (rgmaskWidth*85)/100; + + if(typeof tempheight!="undefined"){ + tempheight = tempheight.toString(); + if(tempheight.charAt(tempheight.length-1)=='%') + tempheight=(rgmaskHeight*parseInt(tempheight.substr(0,tempheight.length)))/100; + if(tempheight>maxheight) + tempheight=maxheight; + }else{tempheight="auto";} + if(typeof tempwidth!="undefined"){ + tempwidth = tempwidth.toString(); + if(tempwidth.charAt(tempwidth.length-1)=='%') + tempwidth=(rgmaskWidth*parseInt(tempwidth.substr(0,tempwidth.length)))/100; + if(tempwidth>maxwidth) + tempwidth=maxwidth; + }else{tempwidth="auto";} + $rss("body").append('
      '); + $rss("#rgsheath").css({background: "#000", width: "100%", position: "fixed", top: 0, left: 0,opacity:0.5,'z-index':199}); + $rss("body").append('
      '); + $rss("#rgWindow").css({"position": "fixed", "z-index": "999", "background": "#fff", "border": "solid 1px #ccc", "padding": "10px", "border-radius": "5px", "-webkit-border-radius": "5px", "-moz-border-radius": "5px", "-ms-border-radius": "5px", "box-shadow": "0 0 20px rgba(0,0,0,0.7)","-webkit-box-shadow": "0 0 20px rgba(0,0,0,0.7)","-moz-box-shadow": "0 0 20px rgba(0,0,0,0.7)","-ms-box-shadow": "0 0 20px rgba(0,0,0,0.7)"}); + var rgWTop = (rgmaskHeight-20)/2; + var rgWLeft = (rgmaskWidth-20)/2; + $rss("#rgWindow").css({top:rgWTop+"px", left:rgWLeft+"px"}); + if(typeof settings.loadDiv!="undefined"){ + dhtml = $rss(settings.loadDiv).html(); + $rss("#rgWindow").html(dhtml).hide(); + prepareWindow(); + } + if(typeof settings.loadHtml!="undefined"){ + dhtml = settings.loadHtml; + $rss("#rgWindow").html(dhtml).hide(); + prepareWindow(); + } + if(typeof settings.loadPage!="undefined"){ + $rss("#rgWindow").load(settings.loadPage,function(){$rss(this).hide();dhtml=$rss(this).html();prepareWindow();}); + } + function prepareWindow(){ + if(tempheight!="auto") + rgWTop = (rgmaskHeight-tempheight)/2; + else{ + tempheight=$rss("#rgWindow").height()+30; + if(tempheight>maxheight) + tempheight=maxheight; + rgWTop=(rgmaskHeight-tempheight)/2; + } + if(tempwidth!="auto") + rgWLeft = (rgmaskWidth-tempwidth)/2; + else{ + tempwidth=$rss("#rgWindow").width(); + if(tempwidth>maxwidth) + tempwidth=maxwidth; + rgWLeft=(rgmaskWidth-tempwidth)/2; + } + tempwidth=parseInt(tempwidth)+25; + $rss("#rgWindow").empty().show(); + var closebtn = ""; + if(closeBtn) + closebtn='X'; + $rss("#rgWindow").animate({"width":tempwidth+"px","height":tempheight+"px",top:rgWTop+"px", left:rgWLeft+"px"},500,function(){$rss("#rgWindow").html(closebtn+"
      "+dhtml+"
      "); + $rss("#close_modal").mouseover(function(){$rss(this).css("color","#999");}).mouseout(function(){$rss(this).css("color","#666");}) + $rss("#close_modal").click(function(){rcom.modalWindowClose(); return false;}) + if(envClose) + $rss("#rgsheath").click(function(){ + rcom.modalWindowClose(); + }) + $rss(document).one("keydown",function(e){ + if (e.keyCode == 27){ + rcom.modalWindowClose(); + return false; + } + }) + + if(typeof callbackFn=="function") + callbackFn.call(this,$rss("#rgWindow")); + }); + } +}, +modalWindowUpdate : function(settings,callbackFn){ + var rgmaskHeight = $rss(window).height(); + var rgmaskWidth = $rss(window).width(); + var tempheight = settings.height; + var tempwidth = settings.width; + var dhtml = ""; + var maxheight = (rgmaskHeight*85)/100; + var maxwidth = (rgmaskWidth*85)/100; + if(typeof tempheight!="undefined"){ + tempheight = tempheight.toString(); + if(tempheight.charAt(tempheight.length-1)=='%') + tempheight=(rgmaskHeight*parseInt(tempheight.substr(0,tempheight.length)))/100; + if(tempheight>maxheight) + tempheight=maxheight; + }else{tempheight="auto";} + if(typeof tempwidth!="undefined"){ + tempwidth = tempwidth.toString(); + if(tempwidth.charAt(tempwidth.length-1)=='%') + tempwidth=(rgmaskWidth*parseInt(tempwidth.substr(0,tempwidth.length)))/100; + if(tempwidth>maxwidth) + tempwidth=maxwidth; + }else{tempwidth="auto";}; + $rss("body").append("
      "); + + if(typeof settings.loadDiv!="undefined"){ + dhtml = $rss("#"+settings.loadDiv).html(); + $rss("#rgwindow_temp_div").html(dhtml).hide(); + prepareWindow(); + } + if(typeof settings.loadHtml!="undefined"){ + dhtml = settings.loadHtml; + $rss("#rgwindow_temp_div").html(dhtml).hide(); + prepareWindow(); + } + if(typeof settings.loadPage!="undefined"){ + $rss("#rgwindow_temp_div").load(settings.loadPage,function(){$rss(this).hide();dhtml=$rss(this).html();prepareWindow();}); + } + function prepareWindow(){ + if(tempheight!="auto") + rgWTop = (rgmaskHeight-tempheight)/2; + else{ + tempheight=$rss("#rgwindow_temp_div").height()+30; + if(tempheight>maxheight) + tempheight=maxheight; + rgWTop=(rgmaskHeight-tempheight)/2; + } + if(tempwidth!="auto") + rgWLeft = (rgmaskWidth-tempwidth)/2; + else{ + tempwidth=$rss("#rgwindow_temp_div").width(); + if(tempwidth>maxwidth) + tempwidth=maxwidth; + rgWLeft=(rgmaskWidth-tempwidth)/2; + } + tempwidth=parseInt(tempwidth)+25; + $rss("#rgContent").empty(); + $rss("#rgWindow").animate({"width":tempwidth+"px","height":tempheight+"px",top:rgWTop+"px", left:rgWLeft+"px"},500,function(){$rss("#rgContent").css("height",tempheight+"px").html(dhtml)}); + $rss("#rgwindow_temp_div").remove(); + } +}, +modalWindowClose : function(callbackFn){ + if($rss("#rgWindow").length>0){ + $rss("#rgWindow").empty(); + var rgmaskHeight = $rss(window).height(); + var rgmaskWidth = $rss(window).width(); + var x = (rgmaskHeight-20)/2; + var y = (rgmaskWidth-20)/2 + $rss("#rgWindow").animate({top:x+"px", left:y+"px","width":"50px","height":"50px"},300,function(){$rss(this).fadeOut(100).remove();$rss("#rgsheath").fadeOut(500).remove();}) + } + if(typeof callbackFn=="function") + callbackFn.call(this,"harry"); +}, +bindDomToHead : function(dom){ + var gc = dom.css("background"); + var t = dom.offset(); + var gw = dom.width(); + $rss(window).scroll(function(){ + var wt = $rss(window).scrollTop(); + if ( wt > t.top ) { + var cssObj = { + 'position':'fixed', + 'top':0, + 'width':gw, + 'background':gc, + 'box-shadow':'0 1px 0 rgba(0,0,0,0.2)', + 'z-index':99 + } + dom.css(cssObj); + } else { + dom.attr('style',""); + } + }); +}, +progressBar : function(dom,settings){ + var domid = dom.prop("id"); + if($rss("#rss_progressbar_div_"+domid).length==0){ + if(typeof settings.top == "undefined") + settings.value = 1; + if(typeof settings.top == "undefined") + settings.top = (dom.height()-12)/2; + dom.append(""); + $rss("#rss_progressbar_div_"+domid).fadeIn(500); + } +}, +progressBarValue : function(dom,value){ + var domid = dom.prop("id"); + if($rss("#rss_progressbar_div_"+domid).length==1){ + $rss("#rss_progressbar_"+domid).animate({"width":value+"%"},100); + + } +}, +progressBarClose : function(dom){ + var domid = dom.prop("id"); + $rss("#rss_progressbar_div_"+domid).fadeOut(500,function(){$(this).remove();}); +}, +getInternetExplorerVersion: function(){ + var rv = -1; // Return value assumes failure. + if (navigator.appName == 'Microsoft Internet Explorer') + { + var ua = navigator.userAgent; + var re = new RegExp("MSIE ([0-9]{1,}[\.0-9]{0,})"); + if (re.exec(ua) != null) + rv = parseFloat( RegExp.$1 ); + } + return rv; + } +} +$ = jQuery.noConflict(); diff --git a/app/assets/javascripts/theater-widget.js b/app/assets/javascripts/theater-widget.js new file mode 100644 index 0000000..0f00043 --- /dev/null +++ b/app/assets/javascripts/theater-widget.js @@ -0,0 +1,536 @@ +var CustomGalleryTheaterWidget = function(widget){ + var parent_divs = widget, + parent_div_z_index = parent_divs.eq(parent_divs.length-1).css('z-index') + parent_divs.eq(parent_divs.length-1).css('z-index','2000') + var gt = this, + currentPic = {}, + windowHeight = 0, + windowWidth = 0, + swipeController = null, + resizing = null; + loadingInterval = null, + mainPicLoading = 0, + nextPicLoading = 0, + prevPicLoading = 0, + currentSwipeImageDom = null, + currentSwipeImageDomLeftPos = 0, + windowScreenThresholdForTouch = 0, + loadingProcess = 0; + gt.stage = null; + gt.stripNextBtn = null; + gt.stripPrevBtn = null; + gt.thumbToggle = null; + gt.descriptionToggle = null; + gt.closeBtn = null; + gt.imageContainer = null; + gt.custom_albumData = {}; + gt.loader = null; + gt.thumbStrip = null; + gt.descriptionArea = null; + gt.isTheaterInitialized = false; + + var play_flag = false; + var button_left_string = '', + button_right_string = '', + button_play_string = '', + button_stop_string = '', + playtimeoutID; + var initialize = function(){ + gt.stage = widget.find('#custom_gallery-theater-stage'); + gt.closeBtn = gt.stage.find(".custom_gallery-close"); + gt.switchBtn = gt.stage.find(".custom_gallery-theme-switch"); + gt.imageContainer = gt.stage.find(".image-container"); + gt.thumbStrip = gt.stage.find(".custom_gallery-thumb-wrap"); + gt.thumbToggle = gt.stage.find(".custom_gallery-thumb-toggle"); + gt.loader = gt.stage.find(".custom_gallery-loader"); + gt.stripNextBtn = gt.stage.find(".custom_gallery-thumb-next"); + gt.stripPrevBtn = gt.stage.find(".custom_gallery-thumb-prev"); + gt.descriptionArea = gt.stage.find(".custom_gallery-img-desc"); + gt.descriptionToggle = gt.stage.find(".custom_gallery-toggle-desc"); + windowScreenThresholdForTouch = windowWidth / 3; + startLoading(); + windowHeight = $(window).height(); + windowWidth = $(window).width(); + var addButton = function () { + widget.find('.theaterButton').remove(); + if (!play_flag){ + $(button_left_string+button_play_string+button_right_string).insertAfter(widget.find('img.gal-active')); + } + else{ + $(button_left_string+button_stop_string+button_right_string).insertAfter(widget.find('img.gal-active')); + } + if (!widget.find(".gal-prev").length) { widget.find('#theaterPreviousButton').remove(); } + if (!widget.find(".gal-next").length) { widget.find('#theaterNextButton').remove(); } + + widget.find('#theaterPreviousButton').click(function () { + gt.previousPic(); + addButton() + }); + widget.find('#theaterNextButton').click(function () { + gt.nextPic(); + addButton() + }); + widget.find('#theaterPlayButton').click(function () { + play_flag = true; + playtimeoutID = window.setInterval(function(){ + gt.playallPic(); + },3000) + addButton() + }); + widget.find('#theaterStopButton').click(function () { + play_flag = false; + addButton() + window.clearInterval(playtimeoutID) + }); + } + bindHandler(); + gt.createTheater(); + + addButton(); + + } + + var bindHandler = function(){ + // handler to close the theater + gt.closeBtn.on("click",gt.destroyTheater); + + // handler to show theater + widget.find("div[data-list=images] a").on("click",function(){ + gt.createTheater(); + return false; + }) + + gt.switchBtn.on("click",gt.switchTheme); + gt.descriptionToggle.on("click", gt.toggleDescription) + gt.stripPrevBtn.on("click", gt.scrollStripRight); + gt.stripNextBtn.on("click", gt.scrollStripLeft); + + if(Modernizr.touch){ + gt.imageContainer.swipe({ + swipe : function(event, direction, distance, duration, fingerCount){ + if(direction == "left"){ + gt.nextPic(); + }else if(direction == "right"){ + gt.previousPic(); + } + } + }) + gt.thumbToggle.swipe({ + swipe : function(event, direction, distance, duration, fingerCount){ + if(direction == "up"){ + gt.thumbStrip.parent().addClass("show"); + gt.thumbToggle.addClass("up"); + gt.thumbToggle.find("i").removeClass("fa-angle-double-up").addClass("fa-angle-double-down"); + }else if(direction == "down"){ + gt.thumbStrip.parent().removeClass("show"); + gt.thumbToggle.removeClass("up"); + gt.thumbToggle.find("i").removeClass("fa-angle-double-down").addClass("fa-angle-double-up"); + } + } + }) + } + + //handler for window resize + $(window).resize(function(){ + clearTimeout(resizing); + resizing = setTimeout(doneResizing,1000); + }) + } + + var bindKeyHandlers = function(){ + if(!Modernizr.touch){ + widget.on("click",".gal-active", gt.nextPic); + widget.on("click",".gal-prev", gt.previousPic); + widget.on("click",".gal-next", gt.nextPic); + $(document).on("keyup",function(e){ + switch(e.keyCode){ + case 39: + gt.nextPic(); + break; + case 37: + gt.previousPic(); + break; + case 27: + gt.destroyTheater(); + break; + } + }) + } + } + + + var doneResizing = function(){ + windowHeight = $(window).height(); + windowWidth = $(window).width(); + setThumbNavs(); + } + + var unBindKeyHandlers = function(){ + $(document).unbind("keyup"); + } + + gt.destroyTheater = function(){ + parent_divs.eq(parent_divs.length-1).css('z-index',parent_div_z_index) + gt.stage.hide(); + widget.removeClass("custom_gallery-mode-on"); + gt.imageContainer.empty() + unBindKeyHandlers(); + } + + gt.createTheater = function(){ + gt.stage.show(); + widget.addClass("custom_gallery-mode-on"); + bindKeyHandlers(); + gt.isTheaterInitialized = false; + gt.custom_albumData = {} + gt.custom_albumData.images = $.map(widget.find('img.custom_gallery-thumb'),function(v){ + var url = $(v).attr('data-link'), + theater_url = $(v).attr('data-theater-url'), + thumb_url = $(v).attr('src') + return {'url': url, + 'file': {'theater': {url: theater_url}, + 'thumb': {url: thumb_url} + } + } + }) + var cp = gt.custom_albumData.images[0]; + currentPic = {"image" : cp, "index" : 0}; + createThumbStrip(); + + currentPic = currentPic; + } + + gt.hasNextImage = function(){ + return (currentPic.index + 1) <= (gt.custom_albumData.images.length - 1); + } + + gt.hasPreviousImage = function(){ + return (currentPic.index > 0); + } + + gt.nextPic = function(){ + if(loadingProcess == 0){ + if(gt.hasNextImage()){ + startLoading(); + currentPic.image = gt.custom_albumData.images[currentPic.index + 1]; + currentPic.index = currentPic.index + 1; + setMainPic("next"); + } + } + } + gt.playallPic = function(){ + if(loadingProcess == 0){ + mainPicLoading = 1; + nextPicLoading = 1; + prevPicLoading = 1; + if(gt.hasNextImage()){ + currentPic.image = gt.custom_albumData.images[currentPic.index + 1]; + currentPic.index = currentPic.index + 1; + setMainPic("next"); + } + else{ + currentPic.image = gt.custom_albumData.images[0]; + currentPic.index = 0; + setMainPic(); + gt.isTheaterInitialized = false; + setTimeout(function(){ + loadingProcess = 0; + nextPicLoading = 0; + widget.find('.theaterButton').remove() + widget.find("img.custom_gallery-image.gal-prev.gal-inactive").remove(); + img = widget.find("img.custom_gallery-image.gal-active"); + img.eq(0).remove(); + },100) + } + } + } + + + gt.previousPic = function(){ + if(loadingProcess == 0){ + if(gt.hasPreviousImage()) { + startLoading(); + currentPic.image = gt.custom_albumData.images[currentPic.index - 1]; + currentPic.index = currentPic.index - 1; + setMainPic("prev"); + } + } + } + + gt.scrollStripLeft = function(){ + pixels_to_move = parseInt(gt.thumbStrip.css("left")) - (66 * 3); + maximum_pixels = (windowWidth / 2) - (66 * (gt.custom_albumData.images.length - 1)); + if(pixels_to_move < maximum_pixels){ + pixels_to_move = maximum_pixels; + } + gt.thumbStrip.css("left",pixels_to_move + "px"); + } + + gt.scrollStripRight = function(){ + pixels_to_move = parseInt(gt.thumbStrip.css("left")) + (66 * 3); + maximum_pixels = (windowWidth / 2); + if(pixels_to_move > maximum_pixels){ + pixels_to_move = maximum_pixels; + } + gt.thumbStrip.css("left",pixels_to_move + "px"); + } + + + gt.switchTheme = function(){ + var themeWhiteKlass = "theme-white", + nightKlass = "fa fa-circle", + dayKlass = "fa fa-circle-o", + $body = widget; + + if (!gt.switchBtn.hasClass(themeWhiteKlass)) { + gt.switchBtn + .addClass(themeWhiteKlass) + .find("i") + .attr("class", dayKlass); + + $body.addClass(themeWhiteKlass); + + } else { + gt.switchBtn + .removeClass(themeWhiteKlass) + .find("i") + .attr("class", nightKlass); + + $body.removeClass(themeWhiteKlass); + + } + } + + gt.toggleDescription = function(){ + $(this).toggleClass("active"); + gt.descriptionArea.toggleClass("active"); + } + + var startLoading = function(){ + loadingProcess = 1; + mainPicLoading = 0; + nextPicLoading = 0; + prevPicLoading = 0; + gt.loader.show(); + loadingInterval = setInterval(stopLoading, 300); + + } + + var stopLoading = function(){ + if(mainPicLoading == 1 && nextPicLoading == 1 && prevPicLoading == 1){ + clearInterval(loadingInterval); + setTimeout(function(){ + loadingProcess = 0; + gt.loader.hide(); + },100) + } + } + + var createThumbStrip = function(){ + if(!gt.isTheaterInitialized){ + gt.thumbStrip.html('') + $.each(gt.custom_albumData.images,function(index, image){ + var li = $(""), + a = $(""), + img = $("Image Thumb"); + a.on("click",function(){ + startLoading(); + var old_index = currentPic.index; + currentPic.image = gt.custom_albumData.images[index]; + currentPic.index = index; + if(old_index > index){ + setMainPic("prev",true); + }else if(old_index < index){ + setMainPic("next",true); + } + return false; + }) + + img.attr("src",image.file.thumb.url); + img.attr("alt",image.alt_title); + li.attr("data-index",index); + a.append(img); + li.append(a); + gt.thumbStrip.append(li); + }) + setThumbNavs(); + } + setMainPic(); + } + + + var setThumbNavs = function() { + var $thumbNav = gt.stage.find('.custom_gallery-thumb-navs'), + $thumb = gt.thumbStrip.find('img'), + thumbs = $thumb.length, + thumbWidth = $thumb.eq(0).width(), + thumbGap = parseInt($thumb.closest('li').css('margin-right'), 10), + widthSum = (thumbWidth + thumbGap) * thumbs, + margin = widthSum * 0.1, + totalWidth = widthSum + margin; + + if (windowWidth < totalWidth) { + $thumbNav.addClass('show'); + }else{ + $thumbNav.removeClass('show'); + } + }; + function one_load(img){ + if (img[0].complete){ + setTimeout(loaded(img),100) + }else{ + setTimeout(one_load,20) + } + } + function loaded(img){ + calculateHeight(img); + mainPicLoading = 1; + img.fadeIn(100); + } + window.setMainPic = function(direction,selectedFromStrip){ + var img = null; + widget.find('div.custom_gallery-show-original a').eq(0).attr('href',currentPic.image.url) + if(direction == null){ + img = $(""); + img.hide(); + img.attr("src", currentPic.image.file.theater.url); + gt.imageContainer.append(img); + img.one("load", function(){ + one_load(img) + }) + gt.isTheaterInitialized = true; + }else{ + img = gt.imageContainer.find(".gal-active"); + if(selectedFromStrip){ + gt.imageContainer.find(".gal-" + direction).attr("src",currentPic.image.file.theater.url); + } + if(direction == "next"){ + gt.imageContainer.find(".gal-prev").remove(); + img.removeClass("gal-active").addClass("gal-prev gal-inactive temp"); + gt.imageContainer.find(".gal-next").removeClass("gal-inactive gal-next").addClass("gal-active"); + gt.thumbStrip.css("left",(parseInt(gt.thumbStrip.css("left")) - 66) + "px"); + }else if(direction == "prev"){ + gt.imageContainer.find(".gal-next").remove(); + img.removeClass("gal-active").addClass("gal-next gal-inactive temp"); + gt.imageContainer.find(".gal-prev").removeClass("gal-inactive gal-prev").addClass("gal-active"); + gt.thumbStrip.css("left",(parseInt(gt.thumbStrip.css("left")) + 66) + "px"); + } + mainPicLoading = 1; + } + gt.descriptionArea.html("

      " + currentPic.image.description + "

      "); + if(currentPic.image.description == null){ + gt.descriptionArea.addClass("hide"); + }else{ + gt.descriptionArea.removeClass("hide"); + } + if (direction!=null){ + calculateHeight(gt.imageContainer.find(".gal-active")); + } + gt.thumbStrip.find("li.active").removeClass("active"); + gt.thumbStrip.find("li[data-index=" + currentPic.index + "]").addClass("active"); + + setStripToCenter(); + setNextPic(); + setPrevPic(); + } + + var calculateHeight = function(img){ + var h = 0, + w = 0, + new_width = 0; + if(!Modernizr.touch){ + if(typeof currentPic.image.height == "undefined"){ + h = img.height(); + currentPic.image.height = h; + w = img.width(); + currentPic.image.width = w; + }else{ + h = currentPic.image.height; + w = currentPic.image.width; + } + }else{ + h = img.height(); + w = img.width(); + } + if(h > (windowHeight - 150)){ + new_width = Math.round((windowHeight - 100) * w / h); + new_width = (new_width / windowWidth) * 100; + img.width(new_width + "%"); + }else{ + if(windowWidth < 770){ + img.width("90%"); + }else{ + img.width("65%"); + } + } + if (typeof set_custom_gallery_height != 'undefined'){ + set_custom_gallery_height(widget) + } + } + + var setStripToCenter = function(){ + left = (windowWidth / 2) - (66 * currentPic.index); + gt.thumbStrip.css("left",left + "px"); + } + + var setNextPic = function(){ + gt.imageContainer.find(".gal-next.temp").remove() + if(gt.hasNextImage()) { + var obj = gt.custom_albumData.images[currentPic.index + 1], + nextImg = $(""); + nextImg.attr("src",obj.file.theater.url); + nextImg.hide(); + gt.imageContainer.append(nextImg); + nextImg.on("load",function(){ + calculateHeight(nextImg); + nextPicLoading = 1; + nextImg.fadeIn(100); + }) + }else{ + nextPicLoading = 1; + } + } + + var setPrevPic = function(){ + gt.imageContainer.find(".gal-prev.temp").remove() + if(gt.hasPreviousImage()) { + var obj = gt.custom_albumData.images[currentPic.index - 1], + prevImg = $(""); + prevImg.attr("src",obj.file.theater.url); + prevImg.hide(); + gt.imageContainer.prepend(prevImg); + prevImg.on("load",function(){ + calculateHeight(prevImg); + prevPicLoading = 1; + prevImg.fadeIn(100); + }) + }else{ + prevPicLoading = 1; + } + } + + var l = function(x){ + console.log(x) + } + + initialize(); +} +if (typeof bind_custom_gallery_widget_slide == 'undefined'){ + function set_custom_gallery_height(widget){ + var h = widget.find('.custom_gallery-thumb-container').height()+widget.find('.custom_gallery-image.gal-active').height()+widget.find('.custom_gallery-actions').height()+widget.find('.theaterButton').height()+20 + widget.find('.show-custom_gallery-2.custom_gallery').css('height',h) + } + var bind_custom_gallery_widget_slide = function(){ + $('.widget-custom_gallery.widget5').each(function(){ + CustomGalleryTheaterWidget($(this)); + $(window).resize(function(){ + set_custom_gallery_height($(this)) + }); + }) + } + $(document).ready(function(){ + bind_custom_gallery_widget_slide() + }) +} + +// custom_gallery-image gal-prev gal-inactive \ No newline at end of file diff --git a/app/assets/javascripts/theater_bak.js b/app/assets/javascripts/theater_bak.js new file mode 100644 index 0000000..dcc64b2 --- /dev/null +++ b/app/assets/javascripts/theater_bak.js @@ -0,0 +1,261 @@ +var CustomGalleryTheater = function(){ + var gt = this, + currentPic = {}, + windowHeight = 0, + windowWidth = 0; + gt.stage = null; + gt.closeBtn = null; + gt.mainStageImage = null; + gt.prevStageImage = null; + gt.nextStageImage = null; + gt.custom_albumData = {}; + gt.thumbStrip = null; + gt.isTheaterInitialized = false; + + var initialize = function(){ + gt.stage = $("#custom_gallery-theater-stage"); + gt.closeBtn = gt.stage.find(".custom_gallery-close"); + gt.switchBtn = gt.stage.find(".custom_gallery-theme-switch"); + gt.mainStageImage = gt.stage.find(".gal-active"); + gt.prevStageImage = gt.stage.find(".gal-prev"); + gt.nextStageImage = gt.stage.find(".gal-next"); + gt.thumbStrip = gt.stage.find(".custom_gallery-thumb-wrap"); + windowHeight = $(window).height(); + windowWidth = $(window).width(); + bindHandler(); + if(window.location.hash != "" && window.location.hash != "#"){ + var id = window.location.hash.split("#")[1]; + gt.createTheater("/xhr/custom_galleries/theater/" + id); + } + } + + var bindHandler = function(){ + // handler to close the theater + gt.closeBtn.on("click",function(){ + gt.destroyTheater(); + }) + + // handler to show theater + $("div[data-list=images] a").on("click",function(){ + gt.createTheater($(this).attr("href")); + return false; + }) + + // handler to show next image + gt.nextStageImage.on("click",function(){ + if($(this).attr("src") != "#"){ + gt.nextPic(); + } + }) + // handler to show prev image + gt.prevStageImage.on("click",function(){ + if($(this).attr("src") != "#"){ + gt.previousPic(); + } + }) + + // handler to go to next image on center image click + gt.mainStageImage.on("click",gt.nextPic); + + gt.switchBtn.on("click", function() { + var themeWhiteKlass = "theme-white", + nightKlass = "fa fa-circle", + dayKlass = "fa fa-circle-o", + $body = $("body"); + + if (!$(this).hasClass(themeWhiteKlass)) { + $(this) + .addClass(themeWhiteKlass) + .find("i") + .attr("class", dayKlass); + + $body.addClass(themeWhiteKlass); + + } else { + $(this) + .removeClass(themeWhiteKlass) + .find("i") + .attr("class", nightKlass); + + $body.removeClass(themeWhiteKlass); + + } + + }); + + //handler for window resize + $(window).resize(function(){ + windowHeight = $(window).height(); + windowWidth = $(window).width(); + }) + } + + var bindKeyHandlers = function(){ + $(document).on("keyup",function(e){ + switch(e.keyCode){ + case 39: + gt.nextPic(); + break; + case 37: + gt.previousPic(); + break; + case 27: + gt.destroyTheater(); + break; + } + }) + } + + var unBindKeyHandlers = function(){ + $(document).unbind("keypress"); + } + + gt.destroyTheater = function(){ + gt.stage.hide(); + $("body").removeClass("custom_gallery-mode-on"); + unBindKeyHandlers(); + window.location.hash = ""; + } + + gt.createTheater = function(link){ + gt.stage.show(); + $("body").addClass("custom_gallery-mode-on"); + bindKeyHandlers(); + if(!gt.isTheaterInitialized){ + $.ajax({ + url : link, + dataType : "json", + type : "get" + }).done(function(data){ + gt.custom_albumData = data.data; + var cp = gt.custom_albumData.images.filter(function(x){return x._id == gt.custom_albumData.image})[0]; + currentPic = {"image" : cp, "index" : gt.custom_albumData.images.indexOf(cp)}; + createThumbStrip(); + }) + }else{ + var id = link.split("/")[4], + cp = gt.custom_albumData.images.filter(function(x){return x._id == id})[0]; + currentPic = {"image" : cp, "index" : gt.custom_albumData.images.indexOf(cp)}; + createThumbStrip(); + } + } + + gt.nextPic = function(){ + if((currentPic.index + 1) <= (gt.custom_albumData.images.length - 1)){ + currentPic.image = gt.custom_albumData.images[currentPic.index + 1]; + currentPic.index = currentPic.index + 1; + setMainPic(); + } + } + + gt.previousPic = function(){ + if(currentPic.index > 0) { + currentPic.image = gt.custom_albumData.images[currentPic.index - 1]; + currentPic.index = currentPic.index - 1; + setMainPic(); + } + } + + var createThumbStrip = function(){ + if(!gt.isTheaterInitialized){ + $.each(gt.custom_albumData.images,function(index, image){ + var li = $(""), + a = $(""), + img = $("Image Thumb"); + a.on("click",function(){ + currentPic.image = gt.custom_albumData.images[index]; + currentPic.index = index; + setMainPic(); + return false; + }) + img.attr("src",image.file.thumb.url); + img.attr("alt",image.alt_title); + li.attr("data-index",index); + a.append(img); + li.append(a); + gt.thumbStrip.append(li); + }) + gt.isTheaterInitialized = true; + } + setMainPic(); + } + + var setMainPic = function(){ + var obj = currentPic.image; + gt.mainStageImage.fadeOut(100,function(){ + gt.mainStageImage.attr("src",obj.file.theater.url); + gt.mainStageImage.attr("alt",obj.alt_title); + gt.mainStageImage.one("load",function(){ + var h = 0, + w = 0, + new_width = 0; + if(typeof currentPic.image.height == "undefined"){ + h = gt.mainStageImage.height(); + currentPic.image.height = h; + w = gt.mainStageImage.width(); + currentPic.image.width = w; + }else{ + h = currentPic.image.height; + w = currentPic.image.width; + } + if(h > (windowHeight - 100)){ + new_width = Math.round((windowHeight - 100) * w / h); + new_width = (new_width / windowWidth) * 100; + gt.mainStageImage.width(new_width + "%"); + }else{ + if(windowWidth < 770){ + gt.mainStageImage.width("90%"); + }else{ + gt.mainStageImage.width("65%"); + } + } + gt.mainStageImage.fadeIn(100); + }) + }); + gt.thumbStrip.find("li.active").removeClass("active"); + gt.thumbStrip.find("li[data-index=" + currentPic.index + "]").addClass("active"); + changeUrl(); + setNextPic(); + setPrevPic(); + } + + var changeUrl = function(){ + window.location.hash = currentPic.image._id + } + + var setNextPic = function(){ + gt.nextStageImage.attr("src","#"); + if((currentPic.index + 1) <= (gt.custom_albumData.images.length - 1)) { + gt.nextStageImage.hide(); + var obj = gt.custom_albumData.images[currentPic.index + 1]; + gt.nextStageImage.attr("src",obj.file.theater.url); + gt.nextStageImage.on("load",function(){ + gt.nextStageImage.show(); + }); + }else{ + gt.nextStageImage.hide(); + } + } + + var setPrevPic = function(){ + gt.prevStageImage.attr("src","#"); + if(currentPic.index > 0) { + gt.prevStageImage.hide(); + var obj = gt.custom_albumData.images[currentPic.index - 1]; + gt.prevStageImage.attr("src",obj.file.theater.url); + gt.prevStageImage.on("load",function(){ + gt.prevStageImage.show(); + }); + }else{ + gt.prevStageImage.hide(); + } + } + + var l = function(x){ + console.log(x) + } + + $(document).ready(function(){ + initialize(); + }) +} \ No newline at end of file diff --git a/app/assets/javascripts/upload.js b/app/assets/javascripts/upload.js new file mode 100644 index 0000000..efaf107 --- /dev/null +++ b/app/assets/javascripts/upload.js @@ -0,0 +1,39 @@ +//https://github.com/blueimp/jQuery-File-Upload + +$(function () { + + 'use strict'; + // Initialize the jQuery File Upload widget: + $('#fileupload').fileupload({ + acceptFileTypes:/(\.|\/)(jpe?g|png)$/i, + headers:{ + 'X-CSRF-Token': $('meta[name="csrf-token"]').attr("content") + } + }); + $('#fileupload').bind("fileuploadadd",function(e,data){$(".fileupload-content").css("background-image","none");}) + // Load existing files: +/* $.getJSON($('#fileupload form').prop('action'),{custom_albumid:pagevars['id']}, function (files) { + var fu = $('#fileupload').data('fileupload'); + fu._adjustMaxNumberOfFiles(-files.length); + fu._renderDownload(files) + .appendTo($('#fileupload .files')) + .fadeIn(function () { + // Fix for IE7 and lower: + $(this).show(); + }); + }); +*/ + // Open download dialogs via iframes, + // to prevent aborting current uploads: + $('#fileupload .files').delegate( + 'a:not([target^=_blank])', + 'click', + function (e) { + e.preventDefault(); + $('') + .prop('src', this.href) + .appendTo('body'); + } + ); + +}); \ No newline at end of file diff --git a/app/assets/stylesheets/cropper.css b/app/assets/stylesheets/cropper.css new file mode 100644 index 0000000..6c5dee5 --- /dev/null +++ b/app/assets/stylesheets/cropper.css @@ -0,0 +1,304 @@ +/*! + * Cropper.js v1.5.5 + * https://fengyuanchen.github.io/cropperjs + * + * Copyright 2015-present Chen Fengyuan + * Released under the MIT license + * + * Date: 2019-08-04T02:26:27.232Z + */ + +.cropper-container { + direction: ltr; + font-size: 0; + line-height: 0; + position: relative; + -ms-touch-action: none; + touch-action: none; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; +} + +.cropper-container img { + display: block; + height: 100%; + image-orientation: 0deg; + max-height: none !important; + max-width: none !important; + min-height: 0 !important; + min-width: 0 !important; + width: 100%; +} + +.cropper-wrap-box, +.cropper-canvas, +.cropper-drag-box, +.cropper-crop-box, +.cropper-modal { + bottom: 0; + left: 0; + position: absolute; + right: 0; + top: 0; +} + +.cropper-wrap-box, +.cropper-canvas { + overflow: hidden; +} + +.cropper-drag-box { + background-color: #fff; + opacity: 0; +} + +.cropper-modal { + background-color: #000; + opacity: 0.5; +} + +.cropper-view-box { + display: block; + height: 100%; + outline: 1px solid #39f; + outline-color: rgba(51, 153, 255, 0.75); + overflow: hidden; + width: 100%; +} + +.cropper-dashed { + border: 0 dashed #eee; + display: block; + opacity: 0.5; + position: absolute; +} + +.cropper-dashed.dashed-h { + border-bottom-width: 1px; + border-top-width: 1px; + height: calc(100% / 3); + left: 0; + top: calc(100% / 3); + width: 100%; +} + +.cropper-dashed.dashed-v { + border-left-width: 1px; + border-right-width: 1px; + height: 100%; + left: calc(100% / 3); + top: 0; + width: calc(100% / 3); +} + +.cropper-center { + display: block; + height: 0; + left: 50%; + opacity: 0.75; + position: absolute; + top: 50%; + width: 0; +} + +.cropper-center::before, +.cropper-center::after { + background-color: #eee; + content: ' '; + display: block; + position: absolute; +} + +.cropper-center::before { + height: 1px; + left: -3px; + top: 0; + width: 7px; +} + +.cropper-center::after { + height: 7px; + left: 0; + top: -3px; + width: 1px; +} + +.cropper-face, +.cropper-line, +.cropper-point { + display: block; + height: 100%; + opacity: 0.1; + position: absolute; + width: 100%; +} + +.cropper-face { + background-color: #fff; + left: 0; + top: 0; +} + +.cropper-line { + background-color: #39f; +} + +.cropper-line.line-e { + cursor: ew-resize; + right: -3px; + top: 0; + width: 5px; +} + +.cropper-line.line-n { + cursor: ns-resize; + height: 5px; + left: 0; + top: -3px; +} + +.cropper-line.line-w { + cursor: ew-resize; + left: -3px; + top: 0; + width: 5px; +} + +.cropper-line.line-s { + bottom: -3px; + cursor: ns-resize; + height: 5px; + left: 0; +} + +.cropper-point { + background-color: #39f; + height: 5px; + opacity: 0.75; + width: 5px; +} + +.cropper-point.point-e { + cursor: ew-resize; + margin-top: -3px; + right: -3px; + top: 50%; +} + +.cropper-point.point-n { + cursor: ns-resize; + left: 50%; + margin-left: -3px; + top: -3px; +} + +.cropper-point.point-w { + cursor: ew-resize; + left: -3px; + margin-top: -3px; + top: 50%; +} + +.cropper-point.point-s { + bottom: -3px; + cursor: s-resize; + left: 50%; + margin-left: -3px; +} + +.cropper-point.point-ne { + cursor: nesw-resize; + right: -3px; + top: -3px; +} + +.cropper-point.point-nw { + cursor: nwse-resize; + left: -3px; + top: -3px; +} + +.cropper-point.point-sw { + bottom: -3px; + cursor: nesw-resize; + left: -3px; +} + +.cropper-point.point-se { + bottom: -3px; + cursor: nwse-resize; + height: 20px; + opacity: 1; + right: -3px; + width: 20px; +} + +@media (min-width: 768px) { + .cropper-point.point-se { + height: 15px; + width: 15px; + } +} + +@media (min-width: 992px) { + .cropper-point.point-se { + height: 10px; + width: 10px; + } +} + +@media (min-width: 1200px) { + .cropper-point.point-se { + height: 5px; + opacity: 0.75; + width: 5px; + } +} + +.cropper-point.point-se::before { + background-color: #39f; + bottom: -50%; + content: ' '; + display: block; + height: 200%; + opacity: 0; + position: absolute; + right: -50%; + width: 200%; +} + +.cropper-invisible { + opacity: 0; +} + +.cropper-bg { + background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAAAA3NCSVQICAjb4U/gAAAABlBMVEXMzMz////TjRV2AAAACXBIWXMAAArrAAAK6wGCiw1aAAAAHHRFWHRTb2Z0d2FyZQBBZG9iZSBGaXJld29ya3MgQ1M26LyyjAAAABFJREFUCJlj+M/AgBVhF/0PAH6/D/HkDxOGAAAAAElFTkSuQmCC'); +} + +.cropper-hide { + display: block; + height: 0; + position: absolute; + width: 0; +} + +.cropper-hidden { + display: none !important; +} + +.cropper-move { + cursor: move; +} + +.cropper-crop { + cursor: crosshair; +} + +.cropper-disabled .cropper-drag-box, +.cropper-disabled .cropper-face, +.cropper-disabled .cropper-line, +.cropper-disabled .cropper-point { + cursor: not-allowed; +} diff --git a/app/assets/stylesheets/custom_gallery.css b/app/assets/stylesheets/custom_gallery.css new file mode 100644 index 0000000..904cb52 --- /dev/null +++ b/app/assets/stylesheets/custom_gallery.css @@ -0,0 +1,554 @@ +#orbit_custom_gallery { + margin: 0; + padding: 0 0 10px; + list-style: none; +} +#orbit_custom_gallery .rgcustom_album { + position: relative; + float: left; + margin: 5px; + padding: 5px; + width: 200px; + background: #FFFFFF; + overflow: hidden; + -webkit-box-shadow: 0px 0px 5px rgba(0, 0, 0, .1); + -moz-box-shadow: 0px 0px 5px rgba(0, 0, 0, .1); + box-shadow: 0px 0px 5px rgba(0, 0, 0, .1); + -o-box-shadow: 0px 0px 5px rgba(0, 0, 0, .1); + -webkit-transition-property: left, right, top; + -moz-transition-property: left, right, top; + -ms-transition-property: left, right, top; + -o-transition-property: left, right, top; + transition-property: left, right, top; +} +#orbit_custom_gallery .rgcustom_album:hover { + box-shadow: 0px 0px 5px rgba(0,0,0,.2); +} +#orbit_custom_gallery .rgcustom_album > a { + position: relative; + display: block; + overflow: hidden; + margin: 0 0 10px; + width: 200px; + height: 200px; + -webkit-transition: all .2s linear; + -moz-transition: all .2s linear; + -o-transition: all .2s linear; + transition: all .2s linear; +} +#orbit_custom_gallery .rgcustom_album a img { + max-width: none; +} +#orbit_custom_gallery .rgcustom_album:hover a img { + -webkit-filter: blur(2px); +} +#orbit_custom_gallery .rgcustom_album > a:after { + content: ""; + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: 0; + display: block; + margin: 0; + background-color: #000000; + opacity: .0; + -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; + filter: alpha(opacity=0); + -webkit-transition: all .2s linear; + -moz-transition: all .2s linear; + -o-transition: all .2s linear; + transition: all .2s linear; +} +#orbit_custom_gallery .rgcustom_album:hover a:after { + opacity: .4; + -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=40)"; + filter: alpha(opacity=40); +} +#orbit_custom_gallery .rgcustom_album a .custom_albumname { + position: absolute; + bottom: 0; + margin: 0; + padding: 10px; + color: #F2F2F2; + text-shadow: 0px -1px 0 rgba(0,0,0,0.4); + letter-spacing: -0.5px; + font-size: 30px; + font-family: 'Playfair Display SC', sans-serif; + line-height: 28px; + z-index: 1; + opacity: .0; + -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; + filter: alpha(opacity=0); + -webkit-transition: all .2s linear; + -moz-transition: all .2s linear; + -o-transition: all .2s linear; + transition: all .2s linear; +} +#orbit_custom_gallery .rgcustom_album:hover a .custom_albumname { + opacity: 1; + -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; + filter: alpha(opacity=100); + -webkit-transition: all .2s linear; + -moz-transition: all .2s linear; + -o-transition: all .2s linear; + transition: all .2s linear; +} +#orbit_custom_gallery .rgcustom_album .custom_gallery_info { + margin: 0; + list-style: none; +} +#orbit_custom_gallery .rgcustom_album .custom_gallery_info li { + display: inline-block; + float: left; + color: #777777; + font-size: 1.2em; + line-height: 20px; + cursor: pointer; +} +#orbit_custom_gallery .rgcustom_album .custom_gallery_info li > a { + display: inline-block; + margin-left: 5px; + color: #777777; +} +#orbit_custom_gallery .rgcustom_album .custom_gallery_info li:hover > a { + color: #E41B2B; + text-decoration: none; +} +#orbit_custom_gallery .rgcustom_album .custom_gallery_info li:hover { + color: #0088CC; +} +#orbit_custom_gallery .rgcustom_album .custom_gallery_info li .icons-tag { + margin-left: 3px; +} +#orbit_custom_gallery .rgcustom_album .custom_gallery_info li.custom_albumcateg { + float: right; + overflow: hidden; + max-width: 125px; + text-align: right; + text-overflow: ellipsis; + white-space: nowrap; +} +#orbit_custom_gallery .rgcustom_album .custom_gallery_info li.view { + overflow: hidden; + max-width: 50px; + text-overflow: ellipsis; + white-space: nowrap; +} +#orbit_custom_gallery .rgcustom_album .custom_albumtag { + display: none; + overflow: hidden; + margin: 0; +} + + +/* CustomGallery Body */ +div.rgbody{ + margin-bottom:50px; +} +.rgbody .custom_gallery-info { + padding: 0 5px; +} +.rgbody .custom_gallery-info h3 { + margin: 5px 0 0; + color: #333; + text-shadow: 0 1px 0 #ffffff; + font-family: 'Playfair Display SC', sans-serif; +} +.rgbody .custom_gallery-info .muted { + font-family: 'Raleway', sans-serif; +} + +#imgholder { + margin: 0; + padding: 0 0 10px; + list-style: none; +} +.rgcustom_album .photo_edit{ + right: 100%; + transition-duration: 0.5s; +} +.rgcustom_album:hover .photo_edit{ + transform: translate(100%); +} +#imgholder .rgcustom_album { + position: relative; + float: left; + margin: 5px; + padding: 5px; + width: 200px; + background: #FFFFFF; + overflow: hidden; + -webkit-box-shadow: 0px 0px 5px rgba(0, 0, 0, .1); + -moz-box-shadow: 0px 0px 5px rgba(0, 0, 0, .1); + box-shadow: 0px 0px 5px rgba(0, 0, 0, .1); + -o-box-shadow: 0px 0px 5px rgba(0, 0, 0, .1); + -webkit-transition-property: left, right, top; + -moz-transition-property: left, right, top; + -ms-transition-property: left, right, top; + -o-transition-property: left, right, top; + transition-property: left, right, top; +} +#imgholder .rgcustom_album.active { + background-color: #51a351; +} +#imgholder .rgcustom_album.active-single { + background-color: #F89406; +} +#imgholder .rgcustom_album .photo-action { + margin: 0; + list-style: none; + left: 5px; + right: 5px; + height: 0; + position: absolute; + background-color: #FFF; + bottom: 5px; + opacity: .9; + -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=90)"; + filter: alpha(opacity=90); + -webkit-transition: all .2s linear; + -moz-transition: all .2s linear; + -o-transition: all .2s linear; + transition: all .2s linear; +} +#imgholder .rgcustom_album:hover .photo-action { + padding: 5px; + height: 30px; +} +#imgholder .rgcustom_album .photo-action li { + display: inline-block; + float: left; + color: #777; + font-size: 11px; + line-height: 30px; + cursor: pointer; + width: 33%; + text-align: center; + font-size: 1.2em; +} +#imgholder .rgcustom_album .photo-action a { + color: #777; + display: block; + text-decoration: none; + width: 100%; + height: 100%; +} +#imgholder .rgcustom_album .photo-action li:hover a { + color: #08C; +} +#imgholder .rgcustom_album .photo-action .icons-star { + color: #F8A900; + font-size: 1.4em; + line-height: 1.4em; +} +#imgholder .rgcustom_album a { + display: block; + overflow: hidden; + margin: 0; + width: 200px; + height: 200px; + -webkit-transition: all .2s linear; + -moz-transition: all .2s linear; + -o-transition: all .2s linear; + transition: all .2s linear; +} +#imgholder .rgcustom_album a img { + max-width: none; +} + +#imgholder .rgcustom_album .check { + position: absolute; + top: 0; + right: 0; + width: 40px; + height: 40px; +} +#imgholder .rgcustom_album .check:after { + font-family: FontAwesome; + font-weight: normal; + font-style: normal; + color: #F2F2F2; + text-decoration: inherit; + content: "\f00c"; + line-height: 25px; + text-indent: 20px; + font-size: 1.3em; + position: absolute; + top: 0; + right: 0; + width: 0px; + height: 0px; + border-style: solid; + border-width: 0 40px 40px 0; + border-color: transparent #FFF transparent transparent; +} +#imgholder .rgcustom_album.active .check:after { + color: #FFF; + border-color: transparent #51a351 transparent transparent; +} +#imgholder .rgcustom_album.active-single .check:after { + color: #FFF; + border-color: transparent #F89406 transparent transparent; +} +#imgholder .rgcustom_album input[type="checkbox"] { + position: absolute; + top: 0; + right: 0; + z-index: 3; + display: block; + margin: 0; + width: 100%; + height: 100%; + -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; + filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0); + opacity: 0; +} + +/* Page Silde */ +#view-photo-tags .phtot-tags { + margin: 0; + padding: 0; + list-style: none; +} +#view-photo-tags .phtot-tags li { + margin: 0 5px 5px 0; + white-space: nowrap; +} + +/* Dialog */ +.modal-body { + min-height: 80px; + line-height: 80px; + text-align: center; +} +.modal-body .spinning { + display: none; + position: absolute; + width: 70px; + height: 70px; + top: 50%; + left: 50%; + margin: -35px 0 0 -35px; +} + +/* File Upload */ +#upload-panel { + clear: both; +} +#upload-panel iframe { + width: 100%; + border: none; +} +#fileupload { + position: relative; + display: none; + clear: both; + overflow: hidden; + margin: 40px 0 15px; + height: 254px; + border: 1px solid #d4d4d4; + border-radius: 4px; + background-color: #FDFDFD; + /*-webkit-box-shadow: 0px 0px 10px rgba(0, 0, 0, .15) inset; + box-shadow: 0px 0px 10px rgba(0, 0, 0, .15) inset;*/ +} +#fileupload table { + margin: 0; +} +#fileupload .fileupload-buttonbar .navbar { + margin-bottom: 0; +} +#fileupload .fileupload-buttonbar .navbar .add-photo { + border: none; + border-right: 1px solid #d4d4d4; + background-color: transparent; + padding: 10px 15px 10px; + color: #777777; + text-decoration: none; + text-shadow: 0 1px 0 #ffffff; +} +#fileupload .fileupload-buttonbar .navbar .add-photo:hover { + color: #333333; + text-decoration: none; + background-color: #EDEDED; +} +#fileupload .fileupload-buttonbar .navbar .fileinput-button { + position: relative; + overflow: hidden; +} +#fileupload .fileupload-buttonbar .navbar .fileinput-button input { + position: absolute; + top: 0; + right: 0; + margin: 0; + font-size: 23px; + opacity: 0; + -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; + filter: alpha(opacity=0); + cursor: pointer; + -webkit-transform: translate(-300px, 0) scale(4); + -moz-transform: translate(-300px, 0) scale(4); + -ms-transform: translate(-300px, 0) scale(4); + -o-transform: translate(-300px, 0) scale(4); + transform: translate(-300px, 0) scale(4); + direction: ltr; +} +#fileupload .fileupload-buttonbar .navbar-inner { + border-width: 0 0 1px; + border-radius: 4px 4px 0 0; + padding: 0; +} + +#fileupload .fileupload-progress .progress { + position: absolute; + right: 0; + left: 0; + margin-bottom: 0; + height: 5px; + border-radius: 0; + background-color: transparent; + background-image: none; +} +#fileupload .fileupload-progress .progress-success.progress-striped .bar { + background-color: #0088CC; +} +#fileupload .fileupload-progress .progress-extended { + position: absolute; + top: 1px; + right: 0; + padding-right: 15px; + color: #0088CC; + text-align: right; + text-shadow: 0 1px 0 #ffffff; + letter-spacing: -0.1em; + font-size: 12px; + font-family: 'Varela Round', sans-serif; + line-height: 40px; +} +#fileupload .fileupload-buttonbar { + position: relative; + z-index: 3; +} +#fileupload #dropzone { + margin: 15px 10px 10px; + padding: 30px; + text-align: center; + font-size: 2em; + font-family: 'Raleway'; + line-height: 1.2em; + color: #e4e4e4; +} +#fileupload #dropzone div[data-icons] { + font-size: 4em; + height: 70px; + padding-top: 30px; + text-shadow: 0px -1px 0px #ececec; + color: #f5f5f5; +} +#fileupload #dropzone.drop { + position: absolute; + top: 37px; + left: 0; + right: 0; + bottom: 0; + border: 2px dashed #0088CC; + border-radius: 10px; + color: #0088CC; + background-color: #FFFFFF; + z-index: 0; +} +#fileupload #dropzone.fade { + opacity: .3; +} +#fileupload #dropzone.in { + opacity: .7; + z-index: 2; + border-color: #faa732; + color: #faa732; +} +#fileupload #dropzone.drop div[data-icons] { + text-shadow: 0px -1px 0px #0c5f80; + color: #0088CC; +} +#fileupload #dropzone.in div[data-icons] { + text-shadow: 0px -1px 0px #a28a10; + color: #faa732; +} +#fileupload #file-list { + position: relative; + z-index: 1; + height: 209px; + margin: 2px 0; +} +#fileupload #file-list .pane { + margin-right: 2px; +} +#fileupload #file-list .files { + margin: 0; + padding: 10px 14px 10px 10px; + list-style: none; +} +#fileupload #file-list .files > li { + padding: 10px; +} +#fileupload #file-list .files > li:nth-child(even) { + background-color: #e9e9e9; + border-radius: 3px; +} +#fileupload #file-list .files ul { + position: relative; + margin: 0; + padding: 0; + list-style: none; +} +#fileupload #file-list .files ul li { + float: left; +} +#fileupload #file-list .files ul li.action-bnt { + float: right; +} +#fileupload #file-list .preview { + width: 80px; + min-height: 1px; + margin-right: 10px; + text-align: center; +} +#fileupload #file-list .name { + width: 150px; + max-width: 250px; + margin-left: 15px; +} +#fileupload #file-list .progress { + position: absolute; + left: -5px; + right: -5px; + bottom: -5px; + margin-bottom: 0; + height: 5px; + box-shadow: none; + background-color: transparent; + background-image: none; +} +#fileupload #file-list .size { + width: 80px; +} +#fileupload #file-list .action-bnt { + text-align: right; +} +.cke_contents.cke_reset{ + position: relative; +} +.order-edit-notification{ + background-color: #ffffd5; + z-index: 10; + display: none; + height: 25px; + margin-left: 40%; + position: fixed; + text-align: center; + margin-top: 5px; + top: 85px; + width: 250px; + font-size: 13px; +} \ No newline at end of file diff --git a/app/assets/stylesheets/custom_gallery_card.css b/app/assets/stylesheets/custom_gallery_card.css new file mode 100644 index 0000000..0bd9e7e --- /dev/null +++ b/app/assets/stylesheets/custom_gallery_card.css @@ -0,0 +1,91 @@ +.custom_gallery.card-group .row { + position: relative; + display: flex; + flex-wrap: wrap; +} +.custom_gallery.card-group .card-back { + transform: rotateY(180deg) translateX(-100%); + position: absolute; + backface-visibility: hidden; + transition: transform 300ms; + transition-timing-function: linear; + display: block; + width: 100%; + height: 100%; + top: 0; + background: white; + color: black; +} +.custom_gallery.card-group .card.card-flip.h-100:nth-child(4n) { + margin-right: 0em; +} + +.custom_gallery.card-group .card.card-flip.h-100 { + position: relative; + overflow: hidden; + width: 25%; + width: calc( 25% - 0.75em); + background: white; + margin-right: 1em; + margin-bottom: 1em; +} +@media (max-width: 768px){ + .custom_gallery.card-group .card.card-flip.h-100 { + width: 50%; + width: calc( 50% - 0.5em); + } + .custom_gallery.card-group .card.card-flip.h-100:nth-child(2n) { + margin-right: 0em; + } +} +@media (max-width: 575px){ + .custom_gallery.card-group .card.card-flip.h-100 { + width: 100%; + margin-right: 0em; + } +} +.custom_gallery.card-group h3.card-title { + padding: 0.5em; + margin: 0; + font-size: 1.2em; +} +.custom_gallery.card-group .card-front{ + backface-visibility: hidden; + width: 100%; + height: 100%; +} +.custom_gallery.card-group .card.card-flip.h-100:hover .card-back { + transform: rotateY(0deg); +} +.custom_gallery.card-group .card-button-group{ + bottom: 0; + right: 0; + position: absolute; + display: flex; +} +.custom_gallery.card-group .card-body{ + width: 100%; + position: inherit; + display: flex; + flex-direction: column; + height: 100%; +} +.custom_gallery.card-group .card-button-group a { + color: #fff; + display: block; + background: #6c757d; + padding: 0.5em; + width: 2.3em; + height: 2.3em; + margin-right: 0.1em; + border-radius: 0; +} +.custom_gallery.card-group .card-button-group a:hover { + color: #fff; + background-color: #5a6268; + border-color: #545b62; +} +.custom_gallery.card-group .card-button-group a:focus { + color: #fff; + outline: 0.1em dotted !important; +} \ No newline at end of file diff --git a/app/assets/stylesheets/custom_gallery_frontend.css b/app/assets/stylesheets/custom_gallery_frontend.css new file mode 100644 index 0000000..286dcc6 --- /dev/null +++ b/app/assets/stylesheets/custom_gallery_frontend.css @@ -0,0 +1,332 @@ +.rg, .rgp { + transition: all 0.3s ease; + -webkit-transition: all 0.3s ease; + -moz-transition: all 0.3s ease; +} +.rg input, .rgp input, .rg textarea, .rgp textarea { + resize: none; + margin: 0; + display: block; + font-size: 13px; + } +.rgp textarea { overflow: auto; } +.rg a, .rgp a { + text-decoration: none; + outline: none; + } +.rg a:hover { } + +/*.rg img { display: block; border: none; }*/ + +.rgmask { background: #000; width: 100%; position: fixed; top: 0; left: 0; } + +.rgui { + display: inline-block; + cursor: pointer; + } +.rghead, .rgbody { overflow: hidden; } +.rghead { + padding: 10px 0; + } +.rgtitle { + color: #333; + text-shadow: 0 1px 0 #ddd; + font-size: 2em; + padding: 0 8px; + } +.rgbody { + + } +.rgfn { overflow: hidden; } +.rgcustom_album, .rgphoto { float: left; margin: 0 10px 24px 0; } +.rgcustom_album { + margin: 0 16px 16px 0; + padding: 6px; + width: 138px; + height: 220px; + border: solid 1px #ccc; + + transition: all 0.3s ease; + -webkit-transition: all 0.3s ease; + -moz-transition: all 0.3s ease; +} +.rgcustom_album > a { + display: block; + float: none; + margin: -6px -6px 0 -6px; +} +.rgcustom_album img { + transition: all, 0.5s ease; + -webkit-transition: all, 0.5s ease; + -moz-transition: all 0.5s ease; + -ms-transition: all, 0.5s ease; + } +.rgphoto { } +.rgphoto a { + display: block; + + transition: all, 0.3s ease; + -webkit-transition: all, 0.3s ease; + -moz-transition: all, 0.3s ease; +} +.rgphoto a:hover img { + opacity: 0.85; +} +.rgphoto img, .rgphoto_edit img { + /*display: block;*/ + + transition: all, 0.3s ease; + -webkit-transition: all, 0.3s ease; + -moz-transition: all, 0.3s ease; + } +.rgcustom_album .custom_albumname { + font-size: 1.25em; + /*line-height: ;*/ + margin: 6px 0; + display: block; + height: 45px; + overflow: hidden; + transition: background 0.3s ease; + -webkit-transition: background 0.3s ease; + -moz-transition: background 0.3s ease; + -ms-transition: background 0.3s ease; + } +.rgcustom_album a:hover img { + opacity: 0.85; + } +.rgcustom_album .categoryname {} +.rgcustom_album .tagnames { + display: block; + margin-top: 8px; + padding-top: 8px; + line-height: 22px; + height: 22px; + overflow: hidden; + border-top: solid 1px #ccc; + color: #666; +} + +.taglist { + padding: 10px 0; +} +.taglist_title { + font-size: 1.5em; + margin: 0 0 10px 0; +} +.taglist ul { + padding: 10px 0; + border-top: solid 1px #ddd; + overflow: hidden; +} +.taglist li { + float: left; + margin: 0 8px 8px 0; +} + +.rgp .rgtitle { margin: 0 0 10px 0; } + + +/* Ruling Slide */ +.rslide { + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + overflow: hidden; + background: #222; + clear: both; + /*z-index: 99;*/ + min-height: 250px; + + transition: all 0.3s ease; + -webkit-transition: all 0.3s ease; + -moz-transition: all 0.3s ease; + } +.rslide.fullscreen { position: fixed; z-index: 99; } +.rslide.fullscreen .comp img{ + width: auto; +} +.rslideinside { + } +.comp { + width: 100%; + height: auto; + overflow: hidden; + position: relative; + + transition: all 0.3s ease; + -webkit-transition: all 0.3s ease; + -moz-transition: all 0.3s ease; + } +.comp img{ display: block; width: 100%; height: auto; margin: 0 auto; cursor: pointer; min-height: 250px; } +.comp .full{ width: auto; height: auto; max-width: 100%; max-height: 100%; } +.rslidenav { + position: absolute; + top: 50%; + left: 0; + right: 0; + margin-top: -35px; + } +.rslidenav a { + position: absolute; + display: block; + width: 30px; + height: 40px; + overflow: hidden; + text-indent: -999px; + background: #000 0 center url(../../../assets/custom_gallery/slidenav.png) no-repeat; + background: rgba(0,0,0,0.9) 0 0 url(../../../assets/custom_gallery/slidenav.png) no-repeat; + + transition: all 0.3s ease; + -webkit-transition: all 0.3s ease; + -moz-transition: all 0.3s ease; + -ms-transition: all 0.3s ease; + } +.rslidenav a:hover { + background-color: #fff; + background-color: rgba(255,255,255,0.9); + } +.rslidenav .navP { left: 0; border-radius: 0 4px 4px 0; background-position: 0 -40px; } +.rslidenav .navN { right: 0; border-radius: 4px 0 0 4px; background-position: -30px 0; } +.rslidenav a.navP:hover { background-position: -30px -40px; } +.rslidenav a.navN:hover { background-position: 0 0; } +.slidectrl { + position: absolute; + bottom: 0; + left: 0; + right: 0; + width: 100%; + height: 30px; + background: #000 left top url(../../../assets/custom_gallery/slidetitlebg.png) repeat-x; + background: rgba(0,0,0,0.9) left top url(../../../assets/custom_gallery/slidetitlebg.png) repeat-x; + /*z-index: 999;*/ + } +.slidectrl a { + display: block; + float: right; + text-indent: -9999px; + overflow: hidden; + width: 30px; + height: 30px; + background: transparent 0 0 url(../../../assets/custom_gallery/slideui.gif) no-repeat; + border-left: solid 1px #222; + } +.slidectrl a.togglelist { background-position: 0 -30px; } +.slidectrl a.togglescreen { background-position: 0 -90px; } +.slidectrl a.toinline { background-position: -30px 0; } +.slidectrl a.sharebt { background-position: -30px -30px; } +.slidectrl a.browserfullscreen { display:none;} +.slidectrl a.slidestop { background-position: 0 -60px; } +.fullscreen .slidectrl a.togglescreen { background-position: -30px -90px; } +.browserFullScreen .slidectrl a.browserfullscreen { background-position: -30px 0; } +.browserFullScreen .togglescreen { display: none; } +.slideinfo { + height: 30px; + line-height: 30px; + color: #fff; + font-size: 13px; + overflow: hidden; + } +.slideinfo .info { padding: 0 0 0 6px; text-transform: uppercase; } +.slideinfo span.info { color: #ccc; text-transform: none; } + +.slidelist { + position: absolute; + bottom: 30px; + z-index: 98; + width: 100%; + height: 0; + overflow: auto; + overflow-x: hidden; + background: transparent 0 0 url(../../../assets/custom_gallery/slidelistbg.png); + } +.slidelist ul { + margin: 0 auto; + padding: 10px 0 10px 10px; + list-style: none; + } +.slidelist li { + display: inline-block; + margin: 0 10px 10px 0; + } +.slidelist a { + border: solid 2px #fff; + display: block; + width: 120px; + height: 96px; + position: relative; + + box-shadow: 0 0 6px rgba(0,0,0,0.7); + -webkit-box-shadow: 0 0 6px rgba(0,0,0,0.7); + -moz-box-shadow: 0 0 6px rgba(0,0,0,0.7); + -ms-box-shadow: 0 0 6px rgba(0,0,0,0.7); + } +.slidelist a.playall { + border: none; + width: 80px; + height: 32px; + margin: 31px 0 0 22px; + background: transparent 0 0 url(../../../assets/custom_gallery/playall.png) no-repeat; + + box-shadow: none; + -webkit-box-shadow: none; + -moz-box-shadow: none; + -ms-box-shadow: none; + } +.slidelist a.playall:hover { background-position: 0 -32px; } +#li_play_all { width: 124px; height: 94px; } +.slidelist img { + margin: 0; + background: #fff; + display: block; + + transition: all 0.2s ease; + -webkit-transition: all 0.2s ease; + -moz-transition: all 0.2s ease; + -ms-transition: all 0.2s ease; + } +.slidelist a:hover img { + padding: 4px; + margin: -4px; + } + +.dm { + background: #fff; + border: solid 1px #a4a4a4; + border-right-color: #666; + position: absolute; + overflow: hidden; + padding: 2px 0; + display: none; + + border-radius: 4px; + -webkit-border-radius: 4px; + -moz-border-radius: 4px; + -ms-border-radius: 4px; + } +.dm ul { margin: 0; padding: 0; list-style: none !important; } +.dm li { + margin: 0; + padding: 0; + border-bottom: solid 1px #ccc; + list-style: none !important; + } +.dm li a { + display: block; + padding: 6px 10px; + font-size: 13px; + + transition: all 0.3s ease; + -webkit-transition: all 0.3s ease; + -moz-transition: all 0.3s ease; + -ms-transition: all 0.3s ease; + } +.dm li a:hover { background: #eee; } + + + +/* orbit style implementation */ +#orbit_custom_gallery { + margin: 0 -10px 30px -10px; +} \ No newline at end of file diff --git a/app/assets/stylesheets/custom_gallery_old.css b/app/assets/stylesheets/custom_gallery_old.css new file mode 100644 index 0000000..021fa5e --- /dev/null +++ b/app/assets/stylesheets/custom_gallery_old.css @@ -0,0 +1,564 @@ +.rg, .rgp { + transition: all 0.3s ease; + -webkit-transition: all 0.3s ease; + -moz-transition: all 0.3s ease; +} +.rg input, .rgp input, .rg textarea, .rgp textarea { + resize: none; + margin: 0; + display: block; + font-size: 13px; + } +.rgp textarea { overflow: auto; } +.rg a, .rgp a { + text-decoration: none; + outline: none; + } +.rg a:hover { } + +/*.rg img { display: block; border: none;}*/ + +.rgmask { background: #000; width: 100%; position: fixed; top: 0; left: 0; } + +.rgui { + display: inline-block; + cursor: pointer; + } +.rghead, .rgbody { overflow: hidden; } +.rghead { + border-bottom: solid 1px #ccc; + padding: 10px 0; + background: #fff; + } +.rgtitle { + color: #333; + text-shadow: 0 1px 0 #ddd; + font-size: 2em; + padding: 0 8px; + } +.rgbody { + + } +.rgfn { overflow: hidden; padding: 4px 10px; } +.rgcustom_album, .rgphoto { float: left; margin: 0 10px 24px 0; } +.rgcustom_album { + padding: 16px; + margin: 0 8px 8px 0; + border: solid 1px #ccc; + width: 300px; + height: 120px; + border-radius: 4px; + + transition: all 0.3s ease; + -webkit-transition: all 0.3s ease; + -moz-transition: all 0.3s ease; +} +.rgcustom_album > a { + display: block; + float: left; + margin-right: 10px; +} +.rgcustom_album:hover { + box-shadow: 0 0 6px rgba(0,0,0,0.2); +} +.rgcustom_album img { + transition: all, 0.5s ease; + -webkit-transition: all, 0.5s ease; + -moz-transition: all 0.5s ease; + -ms-transition: all, 0.5s ease; + } +.rgphoto { } +.rgphoto a { + display: block; + padding: 4px; + border: solid 1px #ddd; + background-color: #fff; + border-radius: 4px; + transition: all, 0.3s ease; + -webkit-transition: all, 0.3s ease; + -moz-transition: all, 0.3s ease; +} +.rgphoto a:hover { + border-color: #999; + box-shadow: 0 3px 6px rgba(0,0,0,0.2); +} +.rgphoto img, .rgphoto_edit img { + /*display: block;*/ + border-radius: 3px; + transition: all, 0.3s ease; + -webkit-transition: all, 0.3s ease; + -moz-transition: all, 0.3s ease; + } +.rgcustom_album .custom_albumname { + font-size: 18px; + padding: 6px 0; + display: block; + transition: background 0.3s ease; + -webkit-transition: background 0.3s ease; + -moz-transition: background 0.3s ease; + -ms-transition: background 0.3s ease; + } +.rgcustom_album a:hover img { + opacity: 0.85; + } + +.rgp .rgtitle { margin: 0 0 10px 0; } + +/* Photo Edit */ +.custom_albumname_edit label, .custom_albumname_edit .rginput, .rgphoto_edit > a, .rgphoto_edit .rginput { float: left; } +.rgphoto_edit, .custom_albumname_edit { + clear: both; + overflow: hidden; + margin-bottom: 10px; +} +.custom_albumname_edit label { + width: 150px; + margin: 0 10px 0 0; + text-align: right; + padding: 0; + line-height: 24px; +} +.custom_albumname_edit .rginput { } +.rgphoto_edit img { margin: 0 10px 10px 0; } +.rgphoto_edit .rginput { margin-right: 10px; } +.rgphoto_edit .edit_fn { float: left; margin-bottom: 10px; } +.rgphoto_edit .edit_fn .bt-dels { } + +/* Delete List */ +.rglist { overflow: hidden; padding: 10px 0; } +.list { table-layout:fixed; width: 100%; margin: 0 0 12px 0; } +.list thead th { padding: 8px 4px; font-size: 30px; font-weight: bold; } +.list th img { width: 60px; height: 45px; } +.list .photoname { padding-left: 6px; } +.list .photofn { padding-right: 4px; } +.list .photofn a { float: right; margin-left: 4px; display: block; } +.list th { padding: 4px 0 4px 4px; } +.list tbody th, .list tbody td { border-bottom: solid 1px #ccc; } +.list .odd th, .list .odd td { background: #f6f6f6; } +.list .c1 { width: 64px; } +.list .c3 { width: 40px; } + +/* Ruling Slide */ +.rslide { + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + overflow: hidden; + background: #222; + clear: both; + /*z-index: 99;*/ + min-height: 250px; + + transition: all 0.3s ease; + -webkit-transition: all 0.3s ease; + -moz-transition: all 0.3s ease; + } +.rslide.fullscreen { position: fixed; z-index: 99; } +.rslideinside { + /* + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + overflow: hidden; + */ + } +.comp { + width: 100%; + height: auto; + overflow: hidden; + position: relative; + + transition: all 0.3s ease; + -webkit-transition: all 0.3s ease; + -moz-transition: all 0.3s ease; + } +.comp img{ display: block; width: auto; height: auto; margin: 0 auto; cursor: pointer; min-height: 250px; } +.comp .full{ width: auto; height: auto; max-width: 100%; max-height: 100%; } +.rslidenav { + position: absolute; + top: 50%; + left: 0; + right: 0; + margin-top: -35px; + } +.rslidenav a { + position: absolute; + display: block; + width: 30px; + height: 40px; + overflow: hidden; + text-indent: -999px; + background: #000 0 center url(../../../assets/custom_gallery/slidenav.png) no-repeat; + background: rgba(0,0,0,0.9) 0 0 url(../../../assets/custom_gallery/slidenav.png) no-repeat; + + transition: all 0.3s ease; + -webkit-transition: all 0.3s ease; + -moz-transition: all 0.3s ease; + -ms-transition: all 0.3s ease; + } +.rslidenav a:hover { + background-color: #fff; + background-color: rgba(255,255,255,0.9); + } +.rslidenav .navP { left: 0; border-radius: 0 4px 4px 0; background-position: 0 -40px; } +.rslidenav .navN { right: 0; border-radius: 4px 0 0 4px; background-position: -30px 0; } +.rslidenav a.navP:hover { background-position: -30px -40px; } +.rslidenav a.navN:hover { background-position: 0 0; } +.slidectrl { + position: absolute; + bottom: 0; + left: 0; + right: 0; + width: 100%; + height: 30px; + background: #000 left top url(../../../assets/custom_gallery/slidetitlebg.png) repeat-x; + background: rgba(0,0,0,0.9) left top url(../../../assets/custom_gallery/slidetitlebg.png) repeat-x; + /*z-index: 999;*/ + } +.slidectrl a { + display: block; + float: right; + text-indent: -9999px; + overflow: hidden; + width: 30px; + height: 30px; + background: transparent 0 0 url(../../../assets/custom_gallery/slideui.gif) no-repeat; + border-left: solid 1px #222; + } +.slidectrl a.togglelist { background-position: 0 -30px; } +.slidectrl a.togglescreen { background-position: 0 -90px; } +.slidectrl a.toinline { background-position: -30px 0; } +.slidectrl a.sharebt { background-position: -30px -30px; } +.slidectrl a.browserfullscreen { display:none;} +.slidectrl a.slidestop { background-position: 0 -60px; } +.fullscreen .slidectrl a.togglescreen { background-position: -30px -90px; } +.browserFullScreen .slidectrl a.browserfullscreen { background-position: -30px 0; } +.browserFullScreen .togglescreen { display: none; } +.slideinfo { + height: 30px; + line-height: 30px; + color: #fff; + font-size: 13px; + overflow: hidden; + } +.slideinfo .info { padding: 0 0 0 6px; text-transform: uppercase; } +.slideinfo span.info { color: #ccc; text-transform: none; } + +.slidelist { + position: absolute; + bottom: 30px; + z-index: 99; + width: 100%; + height: 0; + overflow: auto; + overflow-x: hidden; + background: transparent 0 0 url(../../../assets/custom_gallery/slidelistbg.png); + } +.slidelist ul { + margin: 0 auto; + padding: 10px 0 10px 10px; + list-style: none; + } +.slidelist li { + display: inline-block; + margin: 0 10px 10px 0; + } +.slidelist a { + border: solid 2px #fff; + display: block; + width: 150px; + height: 120px; + position: relative; + + box-shadow: 0 0 6px rgba(0,0,0,0.7); + -webkit-box-shadow: 0 0 6px rgba(0,0,0,0.7); + -moz-box-shadow: 0 0 6px rgba(0,0,0,0.7); + -ms-box-shadow: 0 0 6px rgba(0,0,0,0.7); + } +.slidelist a.playall { + border: none; + width: 80px; + height: 32px; + margin: 31px 0 0 22px; + background: transparent 0 0 url(../../../assets/custom_gallery/playall.png) no-repeat; + + box-shadow: none; + -webkit-box-shadow: none; + -moz-box-shadow: none; + -ms-box-shadow: none; + } +.slidelist a.playall:hover { background-position: 0 -32px; } +#li_play_all { width: 124px; height: 94px; } +.slidelist img { + margin: 0; + background: #fff; + display: block; + + transition: all 0.2s ease; + -webkit-transition: all 0.2s ease; + -moz-transition: all 0.2s ease; + -ms-transition: all 0.2s ease; + } +.slidelist a:hover img { + padding: 4px; + margin: -4px; + } + +.dm { + background: #fff; + border: solid 1px #a4a4a4; + border-right-color: #666; + position: absolute; + overflow: hidden; + padding: 2px 0; + display: none; + + border-radius: 4px; + -webkit-border-radius: 4px; + -moz-border-radius: 4px; + -ms-border-radius: 4px; + } +.dm ul { margin: 0; padding: 0; list-style: none !important; } +.dm li { + margin: 0; + padding: 0; + border-bottom: solid 1px #ccc; + list-style: none !important; + } +.dm li a { + display: block; + padding: 6px 10px; + font-size: 13px; + + transition: all 0.3s ease; + -webkit-transition: all 0.3s ease; + -moz-transition: all 0.3s ease; + -ms-transition: all 0.3s ease; + } +.dm li a:hover { background: #eee; } + +/* Ruling CustomGallery UI */ +.rgbt { + padding: 0 0 0 32px; + vertical-align: top; + + text-shadow: 0 1px 0 #fff; + -webkit-text-shadow: 0 1px 0 #fff; + -moz-text-shadow: 0 1px 0 #fff; + -ms-text-shadow: 0 1px 0 #fff; + } +.rgbt span { + padding: 0 12px 0 8px; + display: inline-block; + line-height: 30px; + height: 32px; + font-size: 14px; + } + +.rgbtsg { + padding: 6px; + } +.rgphoto_edit .rgbtsg.active { display: inline-block; } +.bt-finish { display: block; float: right; clear: both; } +.bt-addnew { + margin: 0 auto; + width: 98px; + height: 100px; + display: block; + } +.bt-next{ + background-position: 0 -258px; + display: block; + float: right; + clear: both; + } +.bt-next:hover { background-position: 0 -448px; } +.bt-next:active { background-position: 0 -638px; } +.bt-close { + position: absolute; + right: 6px; + top: 6px; + } + + +.inputui { + margin: 0 0 8px 0; + } +.inputui span { + padding: 0 4px 0 0; + display: block; + } +.rginput { max-width: 400px; } +.rginput input, .rginput textarea { color: #999; } +.rginput.focus input, .rginput.focus textarea { color: #333; } + +.rgih26 { width: 208px; } +.rgih26 span { } +.rgih26 input { width: 356px; } +.rgih26.focus { } +.rgih26.focus span { } +.rgih68 { width: 396px; } +.rgih68 span { padding: 3px 4px 3px 0; } +.rgih68 textarea { width: 392px; height: 62px; } +.rgih68.focus { } +.rgih68.focus span { } +.rgih98 { width: 396px; } +.rgih98 span { } +.rgih98 textarea { width: 356px; height: 110px; } +.rgih98.focus { } +.rgih98.focus span { } + +.w380 { width: 386px; } + +#imgholder { overflow: hidden; } + +/* upload panel */ +#upload_panel_holder { + display: none; + margin: 16px 0 0 0; + clear: both; + float: right; + width: 100%; +} +#upload_panel { + background-color: #ddd; +} + +/* tag panel */ +#tag_panel { + position: fixed; + right: -200px; + top: 31px; + width: 200px; + min-height: 100px; + border-left: solid 1px #ccc; + background-color: #fff; +} +#tag_panel .scrollbar { + right: 0px; + top: 0px; + width: 9px; +} +#tag_panel .viewport { + height: 100%; +} + +.tag_list { + margin: 0; + padding: 0; +} +.tag_list li { + padding: 4px 6px; + border-top: solid 1px #f6f6f6; +} +.tag_list li:first-child { + border: 0; +} +.tag_list li:hover { + background-color: #08c; +} +.tag_list li:hover label { + color: #fff; +} +.tag_list input[type=checkbox], .tag_list label { + display: inline-block; + vertical-align: middle; + text-transform: capitalize; + margin: 0; +} +.tag_list label { + padding: 0 6px; +} +.tag_search { + position: absolute; + left: -1px; + bottom: -30px; + width: 200px; + height: 32px; + background-color: #f5f5f5; + border-left: solid 1px #ccc; + border-top: solid 1px #ddd; +} +.tag_search input[type=text] { + box-shadow: none; + width: 92px; + height: 25px; + line-height: 25px; + padding: 3px 6px 3px 24px; + border: 0; + border-top: solid 1px #fff; +} +.tag_search input[type=text]:focus { + background-color: #fff; +} +.tag_search .icon-search { + position: absolute; + left: 6px; + top: 50%; + margin-top: -7px; +} +#tag_panel .tag_save { + position: absolute; + right: 0; + bottom: 0; + height: 31px; + border-left: solid 1px #ccc; + background-color: #fff; + padding: 2px 4px 0 4px; +} + + +/* orbit style implementation */ +#orbit_custom_gallery { + margin-bottom: 30px; +} +#orbit_custom_gallery .nav-tabs, #orbit_custom_gallery .tab-pane { + margin-left: 8px; + margin-right: 8px; +} +.tab_content .tab-pane{ + display: none; +} +.tab_content .active{ + display: block; +} +#orbit_custom_gallery .btn { margin: 0; } +#orbit_custom_gallery .btn i { margin-right: 4px; } +#orbit_custom_gallery .rgfn .btn { + margin-left: 8px; +} +#orbit_custom_gallery .form-actions { background-color: whiteSmoke; } + +.o_custom_gallery .tagnames { + display: block; + margin-top: 6px; +} +.o_custom_gallery .label-tags { + display: inline-block; + margin: 0 6px 6px 0; +} + +.o_custom_gallery .rgbody, .o_custom_album .rgbody { + padding: 10px 8px; +} + +#categories .add-custom_album .control-label { + text-align: left; + width: 100px; + padding-left: 12px; + padding-right: 12px; +} +.o_custom_album_edit form { + margin-left: 8px; +} + +#loading{ + background: #fff 0 center url("../../../assets/loading.gif") no-repeat; + height: 16px; + margin: auto; + width: 220px; +} diff --git a/app/assets/stylesheets/custom_theater.css b/app/assets/stylesheets/custom_theater.css new file mode 100644 index 0000000..9bc8102 --- /dev/null +++ b/app/assets/stylesheets/custom_theater.css @@ -0,0 +1,536 @@ +@import url(https://fonts.googleapis.com/css?family=Roboto); + +/* Reset and basic styles */ + +body { + overflow-x: hidden; +} + +*, +*:before, +*:after { + box-sizing: border-box; +} + +.custom_gallery-mode-on { + /*overflow-y: hidden;*/ +} + + +/* CustomGallery */ + +#custom_gallery-theater-stage { + display: none; +} + +#custom_gallery-theater-stage > .custom_gallery { + position: fixed; + top: 0; + right: 0; + bottom: 0; + left: 0; + background: #000; + z-index: 2000; +} + +.custom_gallery-loader { + padding: 10px; + position: absolute; + display: none; + left: 50%; + top: 10px; + -webkit-transform: translate(-50%, 50%); + transform: translate(-50%, 50%); + border-radius: 2px; + z-index: 2000; + background-color: rgba(0, 0, 0, .6); + -webkit-transition: .3s all; + transition: .3s all; +} + +.spinner { + margin: 0 auto; + width: 50px; + height: 20px; + text-align: center; + font-size: 0.625rem; +} + +.spinner > div { + background-color: #e8e8e8; + height: 100%; + width: 4px; + display: inline-block; + -webkit-animation: stretchdelay 1.2s infinite ease-in-out; + animation: stretchdelay 1.2s infinite ease-in-out; +} + +.spinner .rect2 { + -webkit-animation-delay: -1.1s; + animation-delay: -1.1s; +} + +.spinner .rect3 { + -webkit-animation-delay: -1.0s; + animation-delay: -1.0s; +} + +.spinner .rect4 { + -webkit-animation-delay: -0.9s; + animation-delay: -0.9s; +} + +.spinner .rect5 { + -webkit-animation-delay: -0.8s; + animation-delay: -0.8s; +} + +@-webkit-keyframes stretchdelay { + 0%, + 40%, + 100% { + -webkit-transform: scaleY(0.4) + } + 20% { + -webkit-transform: scaleY(1.0) + } +} + +@keyframes stretchdelay { + 0%, + 40%, + 100% { + transform: scaleY(0.4); + -webkit-transform: scaleY(0.4); + } + 20% { + transform: scaleY(1.0); + -webkit-transform: scaleY(1.0); + } +} + +.custom_gallery-actions { + position: absolute; + right: 1rem; + top: 1rem; + cursor: pointer; + background: rgba(255, 255, 255, .7); + border-radius: 2px; + z-index: 2000; +} + +.custom_gallery-actions-btn { + padding: 8px 12px 8px 10px; + display: inline-block; +} + +.custom_gallery-actions-btn:hover { + color: #fff; +} + +.touch .custom_gallery-actions-btn { + padding: 12px 15px 12px 15px; +} + +.custom_gallery-toggle-desc.active { + color: #fff; +} + +.custom_gallery-theme-switch { + border-right: 1px solid rgba(255, 255, 255, .2); + border-left: 1px solid rgba(255, 255, 255, .2); +} + +.custom_gallery-close { + color: #000; +} + +.touch .image-container { + height: 100%; + padding-bottom: 150px; + z-index: 800; +} + +.custom_gallery-image { + position: fixed; + left: 50%; + top: 50%; + width: 60%; + height: auto; + cursor: pointer; +} + +.no-touch .custom_gallery-image { + -webkit-transition: .3s all; + transition: .3s all; +} + +.gal-prev { + display: none; + left: 0; + -webkit-transform: translate(-95%, -50%); + transform: translate(-95%, -50%); +} + +.gal-prev:hover { + -webkit-transform: translate(-94%, -50%); + transform: translate(-94%, -50%); +} + +.gal-next { + display: none; + left: auto; + right: 0; + -webkit-transform: translate(95%, -50%); + transform: translate(95%, -50%); +} + +.gal-next:hover { + -webkit-transform: translate(94%, -50%); + transform: translate(94%, -50%); +} + +.gal-inactive { + -webkit-transition: .3s all; + transition: .3s all; + opacity: .3; +} + +.gal-inactive:hover { + opacity: 1; +} + +.gal-active { + display: none; + -webkit-transform: translate(-50%, -50%); + transform: translate(-50%, -50%); +} + + +/* Thumbnails */ + +.custom_gallery-thumb-toggle { + position: absolute; + bottom: -1000px; +} + +.custom_gallery-thumb-wrap { + overflow-y: hidden; + overflow-x: hidden; + list-style: none; + margin: 0 auto; + padding: 10px 0; + text-align: center; + white-space: nowrap; + position: absolute; + left: 50%; + bottom: 0; + -webkit-transition: .3s all; + transition: .3s all; +} + +.custom_gallery-item { + margin-right: 1em; + display: inline-block; +} + +.custom_gallery-item.active { + border-radius: 2px; + border-radius: 0.125rem; + border: 5px solid #fff; +} + +.custom_gallery-thumb { + width: 50px; + height: 50px; + opacity: .5; + -webkit-transition: .3s opacity; + transition: .3s opacity; +} + +.custom_gallery-thumb:hover { + opacity: 1; +} + +.custom_gallery-thumb-container { + height: 80px; + position: fixed; + left: 0; + bottom: 0; + width: 100%; + background: #1b1b1b; +} + +.custom_gallery-thumb-navs { + display: none; +} + +.custom_gallery-thumb-navs.show { + display: block; +} + +.custom_gallery-thumb-nav { + position: absolute; + cursor: pointer; + font-size: 1.4rem; + color: rgba(255, 255, 255, .7); + background: #222; + height: 80px; + line-height: 80px; + width: 50px; + text-align: center; + z-index: 900; +} + +.custom_gallery-thumb-nav:hover { + color: #fff; +} + +.custom_gallery-thumb-prev { + left: 0; +} + +.custom_gallery-thumb-next { + right: 0; +} + +.active .custom_gallery-thumb { + opacity: 1; +} + +.custom_gallery-img-desc { + color: #000; + line-height: 1.7; + padding: 1rem 1.5rem; + font-family: 'Roboto', sans-serif; + font-size: 0.8125rem; + position: fixed; + top: 4rem; + left: 0; + right: 0; + margin: auto; + border-radius: 2px; + width: 90%; + background-color: #bdbdbd; + opacity: 0; + -webkit-transition: .3s all; + transition: .3s all; + z-index: 1000; +} + +.custom_gallery-img-desc p { + overflow: hidden; + height: 90px; +} + +.custom_gallery-img-desc:empty { + display: none; +} + +.custom_gallery-img-desc.active { + opacity: 1; +} + + +/* White theme */ + +.theme-white #custom_gallery-theater-stage > .custom_gallery { + background-color: #fffdf7; +} + +.theme-white .custom_gallery-actions { + background-color: #eee; + border: 1px solid #ddd; +} + +.theme-white .custom_gallery-toggle-desc.active { + color: #ff4444; +} + +.theme-white .custom_gallery-theme-switch { + border-right: 1px solid #ddd; + border-left: 1px solid #ddd; +} + +.theme-white .custom_gallery-thumb-toggle, +.theme-white .custom_gallery-thumb-toggle:before, +.theme-white .custom_gallery-thumb-toggle:after { + color: #777; + border-color: #aaa; +} + +.theme-white .custom_gallery-thumb-container { + background-color: #e2e2e2; + border-top: 1px solid #c7c7c7; +} + +.theme-white .custom_gallery-actions-btn { + color: #777; +} + +.theme-white .custom_gallery-actions-btn:hover { + color: #ff4444; +} + +.theme-white .custom_gallery-item.active { + border-color: #ff4444; +} + +.theme-white .custom_gallery-thumb-nav { + color: #777; + background-color: #eee; +} + +.theme-white .custom_gallery-thumb-prev { + border-right: 1px solid #c7c7c7; +} + +.theme-white .custom_gallery-thumb-next { + border-left: 1px solid #c7c7c7; +} + +.theme-white .custom_gallery-thumb-nav:hover { + color: #ff4444; +} + +.theme-white .custom_gallery-img-desc { + background-color: #eee; +} + +.theme-white .custom_gallery-loader { + background-color: #777; +} + +.theme-white .spinner > div { + color: #ff4444; +} + +@media screen and (max-width: 768px) { + .gal-prev { + -webkit-transform: translate(-101%, -50%); + transform: translate(-101%, -50%); + } + .gal-next { + -webkit-transform: translate(101%, -50%); + transform: translate(101%, -50%); + } + .custom_gallery-thumb-toggle { + bottom: 50px; + left: 0; + color: #fff; + width: 100%; + text-align: center; + -webkit-transition: .1s all; + transition: .1s all; + } + .custom_gallery-thumb-toggle.up { + bottom: 96px; + } + .custom_gallery-thumb-toggle:before { + content: ""; + position: absolute; + top: 50%; + left: 10%; + margin: auto; + width: 38%; + border-top: 1px solid rgba(255, 255, 255, .2); + height: 1px; + } + .custom_gallery-thumb-toggle:after { + content: ""; + position: absolute; + top: 50%; + right: 10%; + margin: auto; + width: 38%; + border-top: 1px solid rgba(255, 255, 255, .2); + height: 1px; + } + .custom_gallery-thumb-container { + bottom: -1000px; + -webkit-transition: .1s all; + transition: .1s all; + } + .custom_gallery-thumb-container.show { + bottom: 0; + } +} + +/* CSS for button */ + +@media(max-width: 769px){ + .custom_gallery .custom_gallery-thumb-toggle{ + display: none; + } + } + +/* 相本裡的左右控制鍵 */ +#theaterPlayButton,#theaterStopButton{ + left:30%; +} +#theaterStopButton{ + -webkit-text-stroke: 0.02em #ffbb35; + text-shadow: 0em 0em 0.2em #ff0000; +} +.theaterButton{ +position: absolute; +text-align: center; +width: 35%; +bottom: 1.8em; +background-color: transparent; +border: none; +color: white; +padding: 0.4em 1em; +text-align: center; +text-decoration: none; +display: inline-block; +font-size: 2.2rem; +margin: 4px 2px; +cursor: pointer; +border-radius: 5px; +-webkit-text-stroke: 1px #06a2ff; +text-shadow: 0em 0em 0.2em #8F7; +} + +#theaterNextButton{ +right:0; +} +#theaterPreviousButton{ +left:0; +} + +.show-custom_gallery-2 .custom_gallery-thumb-container{ + overflow: hidden; +} +.show-custom_gallery-2 img.custom_gallery-image{ + position: absolute; +} +.show-custom_gallery-2 .image-container{ + position: relative; + height: 100%; + width: 100%; +} +#custom_gallery-theater-stage > .show-custom_gallery-2.custom_gallery{ + position: relative; + height: 0; + width: 100%; + z-index: unset; + overflow: hidden; +} +.show-custom_gallery-2 .custom_gallery-thumb-container{ + position: absolute; +} +.show-custom_gallery-2 .custom_gallery-image { + top: 42%; +} +.show-custom_gallery-2 .custom_gallery-actions{ + display: none; +} +.show-custom_gallery-2 .custom_gallery-img-desc{ + position: absolute; +} +@media screen and (max-width: 768px){ + .show-custom_gallery-2 .custom_gallery-thumb-container { + bottom: 0px; + } +} \ No newline at end of file diff --git a/app/assets/stylesheets/filter.css b/app/assets/stylesheets/filter.css new file mode 100644 index 0000000..6e76a70 --- /dev/null +++ b/app/assets/stylesheets/filter.css @@ -0,0 +1,84 @@ +/* Filter */ +#filter.open { + border-bottom: none; + padding-bottom: 10px; +} +#filter .filter-nav { + margin-bottom: 0px; +} +#filter.open .filter-nav { + margin-bottom: 10px; +} +#filter .filter-nav a { + text-decoration: none; +} +#filter .filter-nav .accordion-group { + border: none; +} +#filter .filter-nav .accordion-group.active { + background-color: #08c; + position: relative; +} +#filter .filter-nav .accordion-group.active a { + color: #FFF; +} +#filter .filter-nav .accordion-group.active:after { + display: block; + height: 0px; + width: 0px; + position: absolute; + bottom: -12px; + left: 50%; + margin-left: -5px; + content: ""; + border-style: solid; + border-width: 0 6px 6px 6px; + border-color: transparent transparent #e5e5e5 transparent; + z-index: 5 +} +#filter .filter-group { + clear: both; + border: none; + margin-bottom: 0px; + -webkit-border-radius: 4px; + -moz-border-radius: 4px; + -o-border-radius: 4px; + border-radius: 4px; +} +#filter .filter-group .accordion-body { + background-color: #e5e5e5; + border-radius: 3px; +} +#filter .filter-group .accordion-body .filter-clear { + padding: 4px; + border-top: 1px solid #D5D5D5; + text-align: right; + -webkit-box-shadow: inset 0px 1px 0px #ECECEC; + -moz-box-shadow: inset 0px 1px 0px #ECECEC; + -o-box-shadow: inset 0px 1px 0px #ECECEC; + box-shadow: inset 0px 1px 0px #ECECEC; +} +#filter .filter-group .accordion-body .filter-clear a { + text-decoration: none; +} +#filter .filter-group .collapse.in { +} +#filter .filter-group .accordion-inner { + padding: 8px 8px 5px; + /*margin-top: 10px;*/ +} +#filter .filter-group .accordion-inner > .btn { + margin-bottom: 3px; +} + + +/* Responsive */ +@media (max-width: 480px) { + /* Filter */ + #filter .filter-nav { + float: left; + } + #filter .accordion-inner.pagination-right { + text-align: left; + } +} \ No newline at end of file diff --git a/app/assets/stylesheets/jquery-ui.css b/app/assets/stylesheets/jquery-ui.css new file mode 100644 index 0000000..759a187 --- /dev/null +++ b/app/assets/stylesheets/jquery-ui.css @@ -0,0 +1,566 @@ +/* + * jQuery UI CSS Framework 1.8.16 + * + * Copyright 2011, AUTHORS.txt (http://jqueryui.com/about) + * Dual licensed under the MIT or GPL Version 2 licenses. + * http://jquery.org/license + * + * http://docs.jquery.com/UI/Theming/API + */ + +/* Layout helpers +----------------------------------*/ +.ui-helper-hidden { display: none; } +.ui-helper-hidden-accessible { position: absolute !important; clip: rect(1px 1px 1px 1px); clip: rect(1px,1px,1px,1px); } +.ui-helper-reset { margin: 0; padding: 0; border: 0; outline: 0; line-height: 1.3; text-decoration: none; font-size: 100%; list-style: none; } +.ui-helper-clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } +.ui-helper-clearfix { display: inline-block; } +/* required comment for clearfix to work in Opera \*/ +* html .ui-helper-clearfix { height:1%; } +.ui-helper-clearfix { display:block; } +/* end clearfix */ +.ui-helper-zfix { width: 100%; height: 100%; top: 0; left: 0; position: absolute; opacity: 0; filter:Alpha(Opacity=0); } + + +/* Interaction Cues +----------------------------------*/ +.ui-state-disabled { cursor: default !important; } + + +/* Icons +----------------------------------*/ + +/* states and images */ +.ui-icon { display: block; text-indent: -99999px; overflow: hidden; background-repeat: no-repeat; } + + +/* Misc visuals +----------------------------------*/ + +/* Overlays */ +.ui-widget-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } +/* + * jQuery UI Accordion 1.8.16 + * + * Copyright 2011, AUTHORS.txt (http://jqueryui.com/about) + * Dual licensed under the MIT or GPL Version 2 licenses. + * http://jquery.org/license + * + * http://docs.jquery.com/UI/Accordion#theming + */ +/* IE/Win - Fix animation bug - #4615 */ +.ui-accordion { width: 100%; } +.ui-accordion .ui-accordion-header { cursor: pointer; position: relative; margin-top: 1px; zoom: 1; } +.ui-accordion .ui-accordion-li-fix { display: inline; } +.ui-accordion .ui-accordion-header-active { border-bottom: 0 !important; } +.ui-accordion .ui-accordion-header a { display: block; font-size: 1em; padding: .5em .5em .5em .7em; } +.ui-accordion-icons .ui-accordion-header a { padding-left: 2.2em; } +.ui-accordion .ui-accordion-header .ui-icon { position: absolute; left: .5em; top: 50%; margin-top: -8px; } +.ui-accordion .ui-accordion-content { padding: 1em 2.2em; border-top: 0; margin-top: -2px; position: relative; top: 1px; margin-bottom: 2px; overflow: auto; display: none; zoom: 1; } +.ui-accordion .ui-accordion-content-active { display: block; } +/* + * jQuery UI Autocomplete 1.8.16 + * + * Copyright 2011, AUTHORS.txt (http://jqueryui.com/about) + * Dual licensed under the MIT or GPL Version 2 licenses. + * http://jquery.org/license + * + * http://docs.jquery.com/UI/Autocomplete#theming + */ +.ui-autocomplete { position: absolute; cursor: default; } + +/* workarounds */ +* html .ui-autocomplete { width:1px; } /* without this, the menu expands to 100% in IE6 */ + +/* + * jQuery UI Menu 1.8.16 + * + * Copyright 2010, AUTHORS.txt (http://jqueryui.com/about) + * Dual licensed under the MIT or GPL Version 2 licenses. + * http://jquery.org/license + * + * http://docs.jquery.com/UI/Menu#theming + */ +.ui-menu { + list-style:none; + padding: 2px; + margin: 0; + display:block; + float: left; +} +.ui-menu .ui-menu { + margin-top: -3px; +} +.ui-menu .ui-menu-item { + margin:0; + padding: 0; + zoom: 1; + float: left; + clear: left; + width: 100%; +} +.ui-menu .ui-menu-item a { + text-decoration:none; + display:block; + padding:.2em .4em; + line-height:1.5; + zoom:1; +} +.ui-menu .ui-menu-item a.ui-state-hover, +.ui-menu .ui-menu-item a.ui-state-active { + font-weight: normal; + margin: -1px; +} +/* + * jQuery UI Button 1.8.16 + * + * Copyright 2011, AUTHORS.txt (http://jqueryui.com/about) + * Dual licensed under the MIT or GPL Version 2 licenses. + * http://jquery.org/license + * + * http://docs.jquery.com/UI/Button#theming + */ +.ui-button { display: inline-block; position: relative; padding: 0; margin-right: .1em; text-decoration: none !important; cursor: pointer; text-align: center; zoom: 1; overflow: visible; } /* the overflow property removes extra width in IE */ +.ui-button-icon-only { width: 2.2em; } /* to make room for the icon, a width needs to be set here */ +button.ui-button-icon-only { width: 2.4em; } /* button elements seem to need a little more width */ +.ui-button-icons-only { width: 3.4em; } +button.ui-button-icons-only { width: 3.7em; } + +/*button text element */ +.ui-button .ui-button-text { display: block; line-height: 1.4; } +.ui-button-text-only .ui-button-text { padding: .4em 1em; } +.ui-button-icon-only .ui-button-text, .ui-button-icons-only .ui-button-text { padding: .4em; text-indent: -9999999px; } +.ui-button-text-icon-primary .ui-button-text, .ui-button-text-icons .ui-button-text { padding: .4em 1em .4em 2.1em; } +.ui-button-text-icon-secondary .ui-button-text, .ui-button-text-icons .ui-button-text { padding: .4em 2.1em .4em 1em; } +.ui-button-text-icons .ui-button-text { padding-left: 2.1em; padding-right: 2.1em; } +/* no icon support for input elements, provide padding by default */ +input.ui-button { padding: .4em 1em; } + +/*button icon element(s) */ +.ui-button-icon-only .ui-icon, .ui-button-text-icon-primary .ui-icon, .ui-button-text-icon-secondary .ui-icon, .ui-button-text-icons .ui-icon, .ui-button-icons-only .ui-icon { position: absolute; top: 50%; margin-top: -8px; } +.ui-button-icon-only .ui-icon { left: 50%; margin-left: -8px; } +.ui-button-text-icon-primary .ui-button-icon-primary, .ui-button-text-icons .ui-button-icon-primary, .ui-button-icons-only .ui-button-icon-primary { left: .5em; } +.ui-button-text-icon-secondary .ui-button-icon-secondary, .ui-button-text-icons .ui-button-icon-secondary, .ui-button-icons-only .ui-button-icon-secondary { right: .5em; } +.ui-button-text-icons .ui-button-icon-secondary, .ui-button-icons-only .ui-button-icon-secondary { right: .5em; } + +/*button sets*/ +.ui-buttonset { margin-right: 7px; } +.ui-buttonset .ui-button { margin-left: 0; margin-right: -.3em; } + +/* workarounds */ +button.ui-button::-moz-focus-inner { border: 0; padding: 0; } /* reset extra padding in Firefox */ +/* + * jQuery UI Datepicker 1.8.16 + * + * Copyright 2011, AUTHORS.txt (http://jqueryui.com/about) + * Dual licensed under the MIT or GPL Version 2 licenses. + * http://jquery.org/license + * + * http://docs.jquery.com/UI/Datepicker#theming + */ +.ui-datepicker { width: 17em; padding: .2em .2em 0; display: none; } +.ui-datepicker .ui-datepicker-header { position:relative; padding:.2em 0; } +.ui-datepicker .ui-datepicker-prev, .ui-datepicker .ui-datepicker-next { position:absolute; top: 2px; width: 1.8em; height: 1.8em; } +.ui-datepicker .ui-datepicker-prev-hover, .ui-datepicker .ui-datepicker-next-hover { top: 1px; } +.ui-datepicker .ui-datepicker-prev { left:2px; } +.ui-datepicker .ui-datepicker-next { right:2px; } +.ui-datepicker .ui-datepicker-prev-hover { left:1px; } +.ui-datepicker .ui-datepicker-next-hover { right:1px; } +.ui-datepicker .ui-datepicker-prev span, .ui-datepicker .ui-datepicker-next span { display: block; position: absolute; left: 50%; margin-left: -8px; top: 50%; margin-top: -8px; } +.ui-datepicker .ui-datepicker-title { margin: 0 2.3em; line-height: 1.8em; text-align: center; } +.ui-datepicker .ui-datepicker-title select { font-size:1em; margin:1px 0; } +.ui-datepicker select.ui-datepicker-month-year {width: 100%;} +.ui-datepicker select.ui-datepicker-month, +.ui-datepicker select.ui-datepicker-year { width: 49%;} +.ui-datepicker table {width: 100%; font-size: .9em; border-collapse: collapse; margin:0 0 .4em; } +.ui-datepicker th { padding: .7em .3em; text-align: center; font-weight: bold; border: 0; } +.ui-datepicker td { border: 0; padding: 1px; } +.ui-datepicker td span, .ui-datepicker td a { display: block; padding: .2em; text-align: right; text-decoration: none; } +.ui-datepicker .ui-datepicker-buttonpane { background-image: none; margin: .7em 0 0 0; padding:0 .2em; border-left: 0; border-right: 0; border-bottom: 0; } +.ui-datepicker .ui-datepicker-buttonpane button { float: right; margin: .5em .2em .4em; cursor: pointer; padding: .2em .6em .3em .6em; width:auto; overflow:visible; } +.ui-datepicker .ui-datepicker-buttonpane button.ui-datepicker-current { float:left; } + +/* with multiple calendars */ +.ui-datepicker.ui-datepicker-multi { width:auto; } +.ui-datepicker-multi .ui-datepicker-group { float:left; } +.ui-datepicker-multi .ui-datepicker-group table { width:95%; margin:0 auto .4em; } +.ui-datepicker-multi-2 .ui-datepicker-group { width:50%; } +.ui-datepicker-multi-3 .ui-datepicker-group { width:33.3%; } +.ui-datepicker-multi-4 .ui-datepicker-group { width:25%; } +.ui-datepicker-multi .ui-datepicker-group-last .ui-datepicker-header { border-left-width:0; } +.ui-datepicker-multi .ui-datepicker-group-middle .ui-datepicker-header { border-left-width:0; } +.ui-datepicker-multi .ui-datepicker-buttonpane { clear:left; } +.ui-datepicker-row-break { clear:both; width:100%; font-size:0em; } + +/* RTL support */ +.ui-datepicker-rtl { direction: rtl; } +.ui-datepicker-rtl .ui-datepicker-prev { right: 2px; left: auto; } +.ui-datepicker-rtl .ui-datepicker-next { left: 2px; right: auto; } +.ui-datepicker-rtl .ui-datepicker-prev:hover { right: 1px; left: auto; } +.ui-datepicker-rtl .ui-datepicker-next:hover { left: 1px; right: auto; } +.ui-datepicker-rtl .ui-datepicker-buttonpane { clear:right; } +.ui-datepicker-rtl .ui-datepicker-buttonpane button { float: left; } +.ui-datepicker-rtl .ui-datepicker-buttonpane button.ui-datepicker-current { float:right; } +.ui-datepicker-rtl .ui-datepicker-group { float:right; } +.ui-datepicker-rtl .ui-datepicker-group-last .ui-datepicker-header { border-right-width:0; border-left-width:1px; } +.ui-datepicker-rtl .ui-datepicker-group-middle .ui-datepicker-header { border-right-width:0; border-left-width:1px; } + +/* IE6 IFRAME FIX (taken from datepicker 1.5.3 */ +.ui-datepicker-cover { + display: none; /*sorry for IE5*/ + display/**/: block; /*sorry for IE5*/ + position: absolute; /*must have*/ + z-index: -1; /*must have*/ + filter: mask(); /*must have*/ + top: -4px; /*must have*/ + left: -4px; /*must have*/ + width: 200px; /*must have*/ + height: 200px; /*must have*/ +}/* + * jQuery UI Dialog 1.8.16 + * + * Copyright 2011, AUTHORS.txt (http://jqueryui.com/about) + * Dual licensed under the MIT or GPL Version 2 licenses. + * http://jquery.org/license + * + * http://docs.jquery.com/UI/Dialog#theming + */ +.ui-dialog { position: absolute; padding: .2em; width: 300px; overflow: hidden; } +.ui-dialog .ui-dialog-titlebar { padding: .4em 1em; position: relative; } +.ui-dialog .ui-dialog-title { float: left; margin: .1em 16px .1em 0; } +.ui-dialog .ui-dialog-titlebar-close { position: absolute; right: .3em; top: 50%; width: 19px; margin: -10px 0 0 0; padding: 1px; height: 18px; } +.ui-dialog .ui-dialog-titlebar-close span { display: block; margin: 1px; } +.ui-dialog .ui-dialog-titlebar-close:hover, .ui-dialog .ui-dialog-titlebar-close:focus { padding: 0; } +.ui-dialog .ui-dialog-content { position: relative; border: 0; padding: .5em 1em; background: none; overflow: auto; zoom: 1; } +.ui-dialog .ui-dialog-buttonpane { text-align: left; border-width: 1px 0 0 0; background-image: none; margin: .5em 0 0 0; padding: .3em 1em .5em .4em; } +.ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset { float: right; } +.ui-dialog .ui-dialog-buttonpane button { margin: .5em .4em .5em 0; cursor: pointer; } +.ui-dialog .ui-resizable-se { width: 14px; height: 14px; right: 3px; bottom: 3px; } +.ui-draggable .ui-dialog-titlebar { cursor: move; } +/* + * jQuery UI Progressbar 1.8.16 + * + * Copyright 2011, AUTHORS.txt (http://jqueryui.com/about) + * Dual licensed under the MIT or GPL Version 2 licenses. + * http://jquery.org/license + * + * http://docs.jquery.com/UI/Progressbar#theming + */ +.ui-progressbar { height:2em; text-align: left; } +.ui-progressbar .ui-progressbar-value {margin: -1px; height:100%; }/* + * jQuery UI Resizable 1.8.16 + * + * Copyright 2011, AUTHORS.txt (http://jqueryui.com/about) + * Dual licensed under the MIT or GPL Version 2 licenses. + * http://jquery.org/license + * + * http://docs.jquery.com/UI/Resizable#theming + */ +.ui-resizable { position: relative;} +.ui-resizable-handle { position: absolute;font-size: 0.1px;z-index: 99999; display: block; } +.ui-resizable-disabled .ui-resizable-handle, .ui-resizable-autohide .ui-resizable-handle { display: none; } +.ui-resizable-n { cursor: n-resize; height: 7px; width: 100%; top: -5px; left: 0; } +.ui-resizable-s { cursor: s-resize; height: 7px; width: 100%; bottom: -5px; left: 0; } +.ui-resizable-e { cursor: e-resize; width: 7px; right: -5px; top: 0; height: 100%; } +.ui-resizable-w { cursor: w-resize; width: 7px; left: -5px; top: 0; height: 100%; } +.ui-resizable-se { cursor: se-resize; width: 12px; height: 12px; right: 1px; bottom: 1px; } +.ui-resizable-sw { cursor: sw-resize; width: 9px; height: 9px; left: -5px; bottom: -5px; } +.ui-resizable-nw { cursor: nw-resize; width: 9px; height: 9px; left: -5px; top: -5px; } +.ui-resizable-ne { cursor: ne-resize; width: 9px; height: 9px; right: -5px; top: -5px;}/* + * jQuery UI Selectable 1.8.16 + * + * Copyright 2011, AUTHORS.txt (http://jqueryui.com/about) + * Dual licensed under the MIT or GPL Version 2 licenses. + * http://jquery.org/license + * + * http://docs.jquery.com/UI/Selectable#theming + */ +.ui-selectable-helper { position: absolute; z-index: 100; border:1px dotted black; } +/* + * jQuery UI Slider 1.8.16 + * + * Copyright 2011, AUTHORS.txt (http://jqueryui.com/about) + * Dual licensed under the MIT or GPL Version 2 licenses. + * http://jquery.org/license + * + * http://docs.jquery.com/UI/Slider#theming + */ +.ui-slider { position: relative; text-align: left; } +.ui-slider .ui-slider-handle { position: absolute; z-index: 2; width: 1.2em; height: 1.2em; cursor: default; } +.ui-slider .ui-slider-range { position: absolute; z-index: 1; font-size: .7em; display: block; border: 0; background-position: 0 0; } + +.ui-slider-horizontal { height: .8em; } +.ui-slider-horizontal .ui-slider-handle { top: -.3em; margin-left: -.6em; } +.ui-slider-horizontal .ui-slider-range { top: 0; height: 100%; } +.ui-slider-horizontal .ui-slider-range-min { left: 0; } +.ui-slider-horizontal .ui-slider-range-max { right: 0; } + +.ui-slider-vertical { width: .8em; height: 100px; } +.ui-slider-vertical .ui-slider-handle { left: -.3em; margin-left: 0; margin-bottom: -.6em; } +.ui-slider-vertical .ui-slider-range { left: 0; width: 100%; } +.ui-slider-vertical .ui-slider-range-min { bottom: 0; } +.ui-slider-vertical .ui-slider-range-max { top: 0; }/* + * jQuery UI Tabs 1.8.16 + * + * Copyright 2011, AUTHORS.txt (http://jqueryui.com/about) + * Dual licensed under the MIT or GPL Version 2 licenses. + * http://jquery.org/license + * + * http://docs.jquery.com/UI/Tabs#theming + */ +.ui-tabs { position: relative; padding: .2em; zoom: 1; } /* position: relative prevents IE scroll bug (element with position: relative inside container with overflow: auto appear as "fixed") */ +.ui-tabs .ui-tabs-nav { margin: 0; padding: .2em .2em 0; } +.ui-tabs .ui-tabs-nav li { list-style: none; float: left; position: relative; top: 1px; margin: 0 .2em 1px 0; border-bottom: 0 !important; padding: 0; white-space: nowrap; } +.ui-tabs .ui-tabs-nav li a { float: left; padding: .5em 1em; text-decoration: none; } +.ui-tabs .ui-tabs-nav li.ui-tabs-selected { margin-bottom: 0; padding-bottom: 1px; } +.ui-tabs .ui-tabs-nav li.ui-tabs-selected a, .ui-tabs .ui-tabs-nav li.ui-state-disabled a, .ui-tabs .ui-tabs-nav li.ui-state-processing a { cursor: text; } +.ui-tabs .ui-tabs-nav li a, .ui-tabs.ui-tabs-collapsible .ui-tabs-nav li.ui-tabs-selected a { cursor: pointer; } /* first selector in group seems obsolete, but required to overcome bug in Opera applying cursor: text overall if defined elsewhere... */ +.ui-tabs .ui-tabs-panel { display: block; border-width: 0; padding: 1em 1.4em; background: none; } +.ui-tabs .ui-tabs-hide { display: none !important; } +/* + * jQuery UI CSS Framework 1.8.16 + * + * Copyright 2011, AUTHORS.txt (http://jqueryui.com/about) + * Dual licensed under the MIT or GPL Version 2 licenses. + * http://jquery.org/license + * + * http://docs.jquery.com/UI/Theming/API + * + * To view and modify this theme, visit http://jqueryui.com/themeroller/ + */ + + +/* Component containers +----------------------------------*/ +.ui-widget { font-family: Verdana,Arial,sans-serif/*{ffDefault}*/; font-size: 1.1em/*{fsDefault}*/; } +.ui-widget .ui-widget { font-size: 1em; } +.ui-widget input, .ui-widget select, .ui-widget textarea, .ui-widget button { font-family: Verdana,Arial,sans-serif/*{ffDefault}*/; font-size: 1em; } +.ui-widget-content { border: 1px solid #aaaaaa/*{borderColorContent}*/; background: #ffffff/*{bgColorContent}*/ url(images/ui-bg_flat_75_ffffff_40x100.png)/*{bgImgUrlContent}*/ 50%/*{bgContentXPos}*/ 50%/*{bgContentYPos}*/ repeat-x/*{bgContentRepeat}*/; color: #222222/*{fcContent}*/; } +.ui-widget-content a { color: #222222/*{fcContent}*/; } +.ui-widget-header { border: 1px solid #aaaaaa/*{borderColorHeader}*/; background: #cccccc/*{bgColorHeader}*/ url(images/ui-bg_highlight-soft_75_cccccc_1x100.png)/*{bgImgUrlHeader}*/ 50%/*{bgHeaderXPos}*/ 50%/*{bgHeaderYPos}*/ repeat-x/*{bgHeaderRepeat}*/; color: #222222/*{fcHeader}*/; font-weight: bold; } +.ui-widget-header a { color: #222222/*{fcHeader}*/; } + +/* Interaction states +----------------------------------*/ +.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default { border: 1px solid #d3d3d3/*{borderColorDefault}*/; background: #e6e6e6/*{bgColorDefault}*/ url(images/ui-bg_glass_75_e6e6e6_1x400.png)/*{bgImgUrlDefault}*/ 50%/*{bgDefaultXPos}*/ 50%/*{bgDefaultYPos}*/ repeat-x/*{bgDefaultRepeat}*/; font-weight: normal/*{fwDefault}*/; color: #555555/*{fcDefault}*/; } +.ui-state-default a, .ui-state-default a:link, .ui-state-default a:visited { color: #555555/*{fcDefault}*/; text-decoration: none; } +.ui-state-hover, .ui-widget-content .ui-state-hover, .ui-widget-header .ui-state-hover, .ui-state-focus, .ui-widget-content .ui-state-focus, .ui-widget-header .ui-state-focus { border: 1px solid #999999/*{borderColorHover}*/; background: #dadada/*{bgColorHover}*/ url(images/ui-bg_glass_75_dadada_1x400.png)/*{bgImgUrlHover}*/ 50%/*{bgHoverXPos}*/ 50%/*{bgHoverYPos}*/ repeat-x/*{bgHoverRepeat}*/; font-weight: normal/*{fwDefault}*/; color: #212121/*{fcHover}*/; } +.ui-state-hover a, .ui-state-hover a:hover { color: #212121/*{fcHover}*/; text-decoration: none; } +.ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active { border: 1px solid #aaaaaa/*{borderColorActive}*/; background: #ffffff/*{bgColorActive}*/ url(images/ui-bg_glass_65_ffffff_1x400.png)/*{bgImgUrlActive}*/ 50%/*{bgActiveXPos}*/ 50%/*{bgActiveYPos}*/ repeat-x/*{bgActiveRepeat}*/; font-weight: normal/*{fwDefault}*/; color: #212121/*{fcActive}*/; } +.ui-state-active a, .ui-state-active a:link, .ui-state-active a:visited { color: #212121/*{fcActive}*/; text-decoration: none; } +.ui-widget :active { outline: none; } + +/* Interaction Cues +----------------------------------*/ +.ui-state-highlight, .ui-widget-content .ui-state-highlight, .ui-widget-header .ui-state-highlight {border: 1px solid #fcefa1/*{borderColorHighlight}*/; background: #fbf9ee/*{bgColorHighlight}*/ url(images/ui-bg_glass_55_fbf9ee_1x400.png)/*{bgImgUrlHighlight}*/ 50%/*{bgHighlightXPos}*/ 50%/*{bgHighlightYPos}*/ repeat-x/*{bgHighlightRepeat}*/; color: #363636/*{fcHighlight}*/; } +.ui-state-highlight a, .ui-widget-content .ui-state-highlight a,.ui-widget-header .ui-state-highlight a { color: #363636/*{fcHighlight}*/; } +.ui-state-error, .ui-widget-content .ui-state-error, .ui-widget-header .ui-state-error {border: 1px solid #cd0a0a/*{borderColorError}*/; background: #fef1ec/*{bgColorError}*/ url(images/ui-bg_glass_95_fef1ec_1x400.png)/*{bgImgUrlError}*/ 50%/*{bgErrorXPos}*/ 50%/*{bgErrorYPos}*/ repeat-x/*{bgErrorRepeat}*/; color: #cd0a0a/*{fcError}*/; } +.ui-state-error a, .ui-widget-content .ui-state-error a, .ui-widget-header .ui-state-error a { color: #cd0a0a/*{fcError}*/; } +.ui-state-error-text, .ui-widget-content .ui-state-error-text, .ui-widget-header .ui-state-error-text { color: #cd0a0a/*{fcError}*/; } +.ui-priority-primary, .ui-widget-content .ui-priority-primary, .ui-widget-header .ui-priority-primary { font-weight: bold; } +.ui-priority-secondary, .ui-widget-content .ui-priority-secondary, .ui-widget-header .ui-priority-secondary { opacity: .7; filter:Alpha(Opacity=70); font-weight: normal; } +.ui-state-disabled, .ui-widget-content .ui-state-disabled, .ui-widget-header .ui-state-disabled { opacity: .35; filter:Alpha(Opacity=35); background-image: none; } + +/* Icons +----------------------------------*/ + +/* states and images */ +.ui-icon { width: 16px; height: 16px; background-image: url(images/ui-icons_222222_256x240.png)/*{iconsContent}*/; } +.ui-widget-content .ui-icon {background-image: url(images/ui-icons_222222_256x240.png)/*{iconsContent}*/; } +.ui-widget-header .ui-icon {background-image: url(images/ui-icons_222222_256x240.png)/*{iconsHeader}*/; } +.ui-state-default .ui-icon { background-image: url(images/ui-icons_888888_256x240.png)/*{iconsDefault}*/; } +.ui-state-hover .ui-icon, .ui-state-focus .ui-icon {background-image: url(images/ui-icons_454545_256x240.png)/*{iconsHover}*/; } +.ui-state-active .ui-icon {background-image: url(images/ui-icons_454545_256x240.png)/*{iconsActive}*/; } +.ui-state-highlight .ui-icon {background-image: url(images/ui-icons_2e83ff_256x240.png)/*{iconsHighlight}*/; } +.ui-state-error .ui-icon, .ui-state-error-text .ui-icon {background-image: url(images/ui-icons_cd0a0a_256x240.png)/*{iconsError}*/; } + +/* positioning */ +.ui-icon-carat-1-n { background-position: 0 0; } +.ui-icon-carat-1-ne { background-position: -16px 0; } +.ui-icon-carat-1-e { background-position: -32px 0; } +.ui-icon-carat-1-se { background-position: -48px 0; } +.ui-icon-carat-1-s { background-position: -64px 0; } +.ui-icon-carat-1-sw { background-position: -80px 0; } +.ui-icon-carat-1-w { background-position: -96px 0; } +.ui-icon-carat-1-nw { background-position: -112px 0; } +.ui-icon-carat-2-n-s { background-position: -128px 0; } +.ui-icon-carat-2-e-w { background-position: -144px 0; } +.ui-icon-triangle-1-n { background-position: 0 -16px; } +.ui-icon-triangle-1-ne { background-position: -16px -16px; } +.ui-icon-triangle-1-e { background-position: -32px -16px; } +.ui-icon-triangle-1-se { background-position: -48px -16px; } +.ui-icon-triangle-1-s { background-position: -64px -16px; } +.ui-icon-triangle-1-sw { background-position: -80px -16px; } +.ui-icon-triangle-1-w { background-position: -96px -16px; } +.ui-icon-triangle-1-nw { background-position: -112px -16px; } +.ui-icon-triangle-2-n-s { background-position: -128px -16px; } +.ui-icon-triangle-2-e-w { background-position: -144px -16px; } +.ui-icon-arrow-1-n { background-position: 0 -32px; } +.ui-icon-arrow-1-ne { background-position: -16px -32px; } +.ui-icon-arrow-1-e { background-position: -32px -32px; } +.ui-icon-arrow-1-se { background-position: -48px -32px; } +.ui-icon-arrow-1-s { background-position: -64px -32px; } +.ui-icon-arrow-1-sw { background-position: -80px -32px; } +.ui-icon-arrow-1-w { background-position: -96px -32px; } +.ui-icon-arrow-1-nw { background-position: -112px -32px; } +.ui-icon-arrow-2-n-s { background-position: -128px -32px; } +.ui-icon-arrow-2-ne-sw { background-position: -144px -32px; } +.ui-icon-arrow-2-e-w { background-position: -160px -32px; } +.ui-icon-arrow-2-se-nw { background-position: -176px -32px; } +.ui-icon-arrowstop-1-n { background-position: -192px -32px; } +.ui-icon-arrowstop-1-e { background-position: -208px -32px; } +.ui-icon-arrowstop-1-s { background-position: -224px -32px; } +.ui-icon-arrowstop-1-w { background-position: -240px -32px; } +.ui-icon-arrowthick-1-n { background-position: 0 -48px; } +.ui-icon-arrowthick-1-ne { background-position: -16px -48px; } +.ui-icon-arrowthick-1-e { background-position: -32px -48px; } +.ui-icon-arrowthick-1-se { background-position: -48px -48px; } +.ui-icon-arrowthick-1-s { background-position: -64px -48px; } +.ui-icon-arrowthick-1-sw { background-position: -80px -48px; } +.ui-icon-arrowthick-1-w { background-position: -96px -48px; } +.ui-icon-arrowthick-1-nw { background-position: -112px -48px; } +.ui-icon-arrowthick-2-n-s { background-position: -128px -48px; } +.ui-icon-arrowthick-2-ne-sw { background-position: -144px -48px; } +.ui-icon-arrowthick-2-e-w { background-position: -160px -48px; } +.ui-icon-arrowthick-2-se-nw { background-position: -176px -48px; } +.ui-icon-arrowthickstop-1-n { background-position: -192px -48px; } +.ui-icon-arrowthickstop-1-e { background-position: -208px -48px; } +.ui-icon-arrowthickstop-1-s { background-position: -224px -48px; } +.ui-icon-arrowthickstop-1-w { background-position: -240px -48px; } +.ui-icon-arrowreturnthick-1-w { background-position: 0 -64px; } +.ui-icon-arrowreturnthick-1-n { background-position: -16px -64px; } +.ui-icon-arrowreturnthick-1-e { background-position: -32px -64px; } +.ui-icon-arrowreturnthick-1-s { background-position: -48px -64px; } +.ui-icon-arrowreturn-1-w { background-position: -64px -64px; } +.ui-icon-arrowreturn-1-n { background-position: -80px -64px; } +.ui-icon-arrowreturn-1-e { background-position: -96px -64px; } +.ui-icon-arrowreturn-1-s { background-position: -112px -64px; } +.ui-icon-arrowrefresh-1-w { background-position: -128px -64px; } +.ui-icon-arrowrefresh-1-n { background-position: -144px -64px; } +.ui-icon-arrowrefresh-1-e { background-position: -160px -64px; } +.ui-icon-arrowrefresh-1-s { background-position: -176px -64px; } +.ui-icon-arrow-4 { background-position: 0 -80px; } +.ui-icon-arrow-4-diag { background-position: -16px -80px; } +.ui-icon-extlink { background-position: -32px -80px; } +.ui-icon-newwin { background-position: -48px -80px; } +.ui-icon-refresh { background-position: -64px -80px; } +.ui-icon-shuffle { background-position: -80px -80px; } +.ui-icon-transfer-e-w { background-position: -96px -80px; } +.ui-icon-transferthick-e-w { background-position: -112px -80px; } +.ui-icon-folder-collapsed { background-position: 0 -96px; } +.ui-icon-folder-open { background-position: -16px -96px; } +.ui-icon-document { background-position: -32px -96px; } +.ui-icon-document-b { background-position: -48px -96px; } +.ui-icon-note { background-position: -64px -96px; } +.ui-icon-mail-closed { background-position: -80px -96px; } +.ui-icon-mail-open { background-position: -96px -96px; } +.ui-icon-suitcase { background-position: -112px -96px; } +.ui-icon-comment { background-position: -128px -96px; } +.ui-icon-person { background-position: -144px -96px; } +.ui-icon-print { background-position: -160px -96px; } +.ui-icon-trash { background-position: -176px -96px; } +.ui-icon-locked { background-position: -192px -96px; } +.ui-icon-unlocked { background-position: -208px -96px; } +.ui-icon-bookmark { background-position: -224px -96px; } +.ui-icon-tag { background-position: -240px -96px; } +.ui-icon-home { background-position: 0 -112px; } +.ui-icon-flag { background-position: -16px -112px; } +.ui-icon-calendar { background-position: -32px -112px; } +.ui-icon-cart { background-position: -48px -112px; } +.ui-icon-pencil { background-position: -64px -112px; } +.ui-icon-clock { background-position: -80px -112px; } +.ui-icon-disk { background-position: -96px -112px; } +.ui-icon-calculator { background-position: -112px -112px; } +.ui-icon-zoomin { background-position: -128px -112px; } +.ui-icon-zoomout { background-position: -144px -112px; } +.ui-icon-search { background-position: -160px -112px; } +.ui-icon-wrench { background-position: -176px -112px; } +.ui-icon-gear { background-position: -192px -112px; } +.ui-icon-heart { background-position: -208px -112px; } +.ui-icon-star { background-position: -224px -112px; } +.ui-icon-link { background-position: -240px -112px; } +.ui-icon-cancel { background-position: 0 -128px; } +.ui-icon-plus { background-position: -16px -128px; } +.ui-icon-plusthick { background-position: -32px -128px; } +.ui-icon-minus { background-position: -48px -128px; } +.ui-icon-minusthick { background-position: -64px -128px; } +.ui-icon-close { background-position: -80px -128px; } +.ui-icon-closethick { background-position: -96px -128px; } +.ui-icon-key { background-position: -112px -128px; } +.ui-icon-lightbulb { background-position: -128px -128px; } +.ui-icon-scissors { background-position: -144px -128px; } +.ui-icon-clipboard { background-position: -160px -128px; } +.ui-icon-copy { background-position: -176px -128px; } +.ui-icon-contact { background-position: -192px -128px; } +.ui-icon-image { background-position: -208px -128px; } +.ui-icon-video { background-position: -224px -128px; } +.ui-icon-script { background-position: -240px -128px; } +.ui-icon-alert { background-position: 0 -144px; } +.ui-icon-info { background-position: -16px -144px; } +.ui-icon-notice { background-position: -32px -144px; } +.ui-icon-help { background-position: -48px -144px; } +.ui-icon-check { background-position: -64px -144px; } +.ui-icon-bullet { background-position: -80px -144px; } +.ui-icon-radio-off { background-position: -96px -144px; } +.ui-icon-radio-on { background-position: -112px -144px; } +.ui-icon-pin-w { background-position: -128px -144px; } +.ui-icon-pin-s { background-position: -144px -144px; } +.ui-icon-play { background-position: 0 -160px; } +.ui-icon-pause { background-position: -16px -160px; } +.ui-icon-seek-next { background-position: -32px -160px; } +.ui-icon-seek-prev { background-position: -48px -160px; } +.ui-icon-seek-end { background-position: -64px -160px; } +.ui-icon-seek-start { background-position: -80px -160px; } +/* ui-icon-seek-first is deprecated, use ui-icon-seek-start instead */ +.ui-icon-seek-first { background-position: -80px -160px; } +.ui-icon-stop { background-position: -96px -160px; } +.ui-icon-eject { background-position: -112px -160px; } +.ui-icon-volume-off { background-position: -128px -160px; } +.ui-icon-volume-on { background-position: -144px -160px; } +.ui-icon-power { background-position: 0 -176px; } +.ui-icon-signal-diag { background-position: -16px -176px; } +.ui-icon-signal { background-position: -32px -176px; } +.ui-icon-battery-0 { background-position: -48px -176px; } +.ui-icon-battery-1 { background-position: -64px -176px; } +.ui-icon-battery-2 { background-position: -80px -176px; } +.ui-icon-battery-3 { background-position: -96px -176px; } +.ui-icon-circle-plus { background-position: 0 -192px; } +.ui-icon-circle-minus { background-position: -16px -192px; } +.ui-icon-circle-close { background-position: -32px -192px; } +.ui-icon-circle-triangle-e { background-position: -48px -192px; } +.ui-icon-circle-triangle-s { background-position: -64px -192px; } +.ui-icon-circle-triangle-w { background-position: -80px -192px; } +.ui-icon-circle-triangle-n { background-position: -96px -192px; } +.ui-icon-circle-arrow-e { background-position: -112px -192px; } +.ui-icon-circle-arrow-s { background-position: -128px -192px; } +.ui-icon-circle-arrow-w { background-position: -144px -192px; } +.ui-icon-circle-arrow-n { background-position: -160px -192px; } +.ui-icon-circle-zoomin { background-position: -176px -192px; } +.ui-icon-circle-zoomout { background-position: -192px -192px; } +.ui-icon-circle-check { background-position: -208px -192px; } +.ui-icon-circlesmall-plus { background-position: 0 -208px; } +.ui-icon-circlesmall-minus { background-position: -16px -208px; } +.ui-icon-circlesmall-close { background-position: -32px -208px; } +.ui-icon-squaresmall-plus { background-position: -48px -208px; } +.ui-icon-squaresmall-minus { background-position: -64px -208px; } +.ui-icon-squaresmall-close { background-position: -80px -208px; } +.ui-icon-grip-dotted-vertical { background-position: 0 -224px; } +.ui-icon-grip-dotted-horizontal { background-position: -16px -224px; } +.ui-icon-grip-solid-vertical { background-position: -32px -224px; } +.ui-icon-grip-solid-horizontal { background-position: -48px -224px; } +.ui-icon-gripsmall-diagonal-se { background-position: -64px -224px; } +.ui-icon-grip-diagonal-se { background-position: -80px -224px; } + + +/* Misc visuals +----------------------------------*/ + +/* Corner radius */ +.ui-corner-all, .ui-corner-top, .ui-corner-left, .ui-corner-tl { -moz-border-radius-topleft: 4px/*{cornerRadius}*/; -webkit-border-top-left-radius: 4px/*{cornerRadius}*/; -khtml-border-top-left-radius: 4px/*{cornerRadius}*/; border-top-left-radius: 4px/*{cornerRadius}*/; } +.ui-corner-all, .ui-corner-top, .ui-corner-right, .ui-corner-tr { -moz-border-radius-topright: 4px/*{cornerRadius}*/; -webkit-border-top-right-radius: 4px/*{cornerRadius}*/; -khtml-border-top-right-radius: 4px/*{cornerRadius}*/; border-top-right-radius: 4px/*{cornerRadius}*/; } +.ui-corner-all, .ui-corner-bottom, .ui-corner-left, .ui-corner-bl { -moz-border-radius-bottomleft: 4px/*{cornerRadius}*/; -webkit-border-bottom-left-radius: 4px/*{cornerRadius}*/; -khtml-border-bottom-left-radius: 4px/*{cornerRadius}*/; border-bottom-left-radius: 4px/*{cornerRadius}*/; } +.ui-corner-all, .ui-corner-bottom, .ui-corner-right, .ui-corner-br { -moz-border-radius-bottomright: 4px/*{cornerRadius}*/; -webkit-border-bottom-right-radius: 4px/*{cornerRadius}*/; -khtml-border-bottom-right-radius: 4px/*{cornerRadius}*/; border-bottom-right-radius: 4px/*{cornerRadius}*/; } + +/* Overlays */ +.ui-widget-overlay { background: #aaaaaa/*{bgColorOverlay}*/ url(images/ui-bg_flat_0_aaaaaa_40x100.png)/*{bgImgUrlOverlay}*/ 50%/*{bgOverlayXPos}*/ 50%/*{bgOverlayYPos}*/ repeat-x/*{bgOverlayRepeat}*/; opacity: .3;filter:Alpha(Opacity=30)/*{opacityOverlay}*/; } +.ui-widget-shadow { margin: -8px/*{offsetTopShadow}*/ 0 0 -8px/*{offsetLeftShadow}*/; padding: 8px/*{thicknessShadow}*/; background: #aaaaaa/*{bgColorShadow}*/ url(images/ui-bg_flat_0_aaaaaa_40x100.png)/*{bgImgUrlShadow}*/ 50%/*{bgShadowXPos}*/ 50%/*{bgShadowYPos}*/ repeat-x/*{bgShadowRepeat}*/; opacity: .3;filter:Alpha(Opacity=30)/*{opacityShadow}*/; -moz-border-radius: 8px/*{cornerRadiusShadow}*/; -khtml-border-radius: 8px/*{cornerRadiusShadow}*/; -webkit-border-radius: 8px/*{cornerRadiusShadow}*/; border-radius: 8px/*{cornerRadiusShadow}*/; } \ No newline at end of file diff --git a/app/assets/stylesheets/jquery.fileupload-ui.css b/app/assets/stylesheets/jquery.fileupload-ui.css new file mode 100644 index 0000000..71b8d42 --- /dev/null +++ b/app/assets/stylesheets/jquery.fileupload-ui.css @@ -0,0 +1,168 @@ +@charset 'UTF-8'; +/* + * jQuery File Upload UI Plugin CSS 5.0.6 + * https://github.com/blueimp/jQuery-File-Upload + * + * Copyright 2010, Sebastian Tschan + * https://blueimp.net + * + * Licensed under the MIT license: + * http://creativecommons.org/licenses/MIT/ + */ +body { margin: 0; } +#fileupload { position: relative; } +#fileupload form { margin: 0; } +.fileupload-buttonbar .ui-button input { + position: absolute; + top: 0; + right: 0; + margin: 0; + border: solid transparent; + border-width: 0 0 100px 200px; + opacity: 0; + filter: alpha(opacity=0); + -o-transform: translate(250px, -50px) scale(1); + -moz-transform: translate(-300px, 0) scale(4); + direction: ltr; + cursor: pointer; +} + +.fileinput-button { + overflow: hidden; +} + +/* Fix for IE 6: */ +/**html .fileinput-button { + padding: 2px 0; +}*/ + +/* Fix for IE 7: */ +/**+html .fileinput-button { + padding: 2px 0; +}*/ + +.fileupload-buttonbar { + height: 44px; + border-bottom: none; + background: transparent 0 0 url(../../../assets/custom_gallery/uppt.png) repeat-x; + position: relative; + z-index: 9; + } + +.fileupload-buttonbar .ui-button { + vertical-align: middle; + font-size: 13px; + font-family: mako; + border: none; + margin: 0; + padding: 0; + background: none; + } +.fileupload-buttonbar .ui-button .ui-button-text { + height: 40px; + line-height: 40px; + padding: 0 14px 0 26px; + background: transparent right center url(../../../assets/custom_gallery/upsep.png) no-repeat; + text-shadow: 1px 1px 0 #fff; + } + +.fileupload-content { + border-top-width: 0; + height: 250px; + overflow: auto; + overflow-x:hidden; + background: #FAFAFA center center url(../../../assets/custom_gallery/uploadbg.gif) no-repeat; + position: relative; + margin-top: -2px; + z-index: 2; + } + +.fileupload-content .ui-progressbar { + width: auto; + height: 18px; + } + +.fileupload-content .ui-progressbar-value { + background: url(../../../assets/custom_gallery/pbar-ani.gif); + height: 16px; + margin: 0; + border-left: none; + border-right: none; + border-radius: 6px; + } +.files .ui-progressbar-value { border: none; height: 18px; border-radius: 2px; } +.fileupload-content .fileupload-progressbar { + width: 400px; + margin: -20px 0 0 -202px; + padding: 2px; + background: rgba(0,0,0,0.8); + position: fixed; + top: 50%; + left: 50%; + border: 0; + border-radius: 4px; + box-shadow: 0 2px 3px rgba(0,0,0,0.4); + -webkit-box-shadow: 0 2px 3px rgba(0,0,0,0.4); + -moz-box-shadow: 0 2px 3px rgba(0,0,0,0.4); + -ms-box-shadow: 0 2px 3px rgba(0,0,0,0.4); + } + +.files { + margin: 0; + border-collapse: collapse; + width: 100%; + table-layout:fixed; + font-family: mako; +} + +.files td { + padding: 5px 4px; + border-spacing: 0; + font-size: 13px; + } + +.files img { border: none; width: 80px; } + +.files .name { } + +.files .size { + text-align: right; + white-space: nowrap; + width: 100px; + } +.files .preview { width: 88px; } +/*.files .progress { width: ; }*/ +.files .start { width: 40px; } +.files .cancel { width: 40px; } + +.ui-state-disabled .ui-state-disabled { + opacity: 1; + filter: alpha(opacity=100); +} + +.ui-state-disabled input { + cursor: default; +} +.fileupload-buttonbar .ui-icon { + background: transparent center 0 url(../../../assets/custom_gallery/upicon.png) no-repeat; + height: 16px; + margin: 0; + padding: 12px 0; + top: 0; + } +.ui-icon.ui-icon-plusthick {} +.ui-button:hover .ui-icon.ui-icon-plusthick { background-position: center -40px; } +.ui-icon.ui-icon-circle-arrow-e { background-position: center -80px; } +.ui-button:hover .ui-icon.ui-icon-circle-arrow-e { background-position: center -120px; } +.ui-icon.ui-icon-cancel { background-position: center -160px; } +.ui-button:hover .ui-icon.ui-icon-cancel { background-position: center -200px; } +.ui-icon.ui-icon-trash { background-position: center -240px; } +.ui-button:hover .ui-icon.ui-icon-trash { background-position: center -280px; } + +.files .ui-icon { background: transparent center 0 url(../../../assets/custom_gallery/upicon.png) no-repeat; } +.files .ui-icon.ui-icon-circle-arrow-e { background-position: center -91px; } +.files .ui-button:hover .ui-icon.ui-icon-circle-arrow-e { background-position: center -131px; } +.files .ui-icon.ui-icon-cancel { background-position: center -171px; } +.files .ui-button:hover .ui-icon.ui-icon-cancel { background-position: center -211px; } +.files .ui-icon.ui-icon-trash { background-position: center -251px; } +.files .ui-button:hover .ui-icon.ui-icon-trash { background-position: center -291px; } \ No newline at end of file diff --git a/app/assets/stylesheets/jquery.minicolors.css b/app/assets/stylesheets/jquery.minicolors.css new file mode 100644 index 0000000..a281101 --- /dev/null +++ b/app/assets/stylesheets/jquery.minicolors.css @@ -0,0 +1,432 @@ +.minicolors { + position: relative; +} + +.minicolors-sprite { + background-image: url(jquery.minicolors.png); +} + +.minicolors-swatch { + position: absolute; + vertical-align: middle; + background-position: -80px 0; + border: solid 1px #ccc; + cursor: text; + padding: 0; + margin: 0; + display: inline-block; +} + +.minicolors-swatch-color { + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; +} + +.minicolors input[type=hidden] + .minicolors-swatch { + width: 28px; + position: static; + cursor: pointer; +} + +.minicolors input[type=hidden][disabled] + .minicolors-swatch { + cursor: default; +} + +/* Panel */ +.minicolors-panel { + position: relative; + width: 173px; + background: white; + border: solid 1px #CCC; + box-shadow: 0 0 20px rgba(0, 0, 0, .2); + z-index: 99999; + box-sizing: content-box; + display: none; +} + +.minicolors-panel.minicolors-visible { + display: block; +} + +/* Panel positioning */ +.minicolors-position-top .minicolors-panel { + top: -154px; +} + +.minicolors-position-right .minicolors-panel { + right: 0; +} + +.minicolors-position-bottom .minicolors-panel { + top: auto; +} + +.minicolors-position-left .minicolors-panel { + left: 0; +} + +.minicolors-with-opacity .minicolors-panel { + width: 194px; +} + +.minicolors .minicolors-grid { + position: relative; + top: 1px; + left: 1px; /* LTR */ + width: 150px; + height: 150px; + margin-bottom: 2px; + background-position: -120px 0; + cursor: crosshair; +} +[dir=rtl] .minicolors .minicolors-grid { + right: 1px; +} + +.minicolors .minicolors-grid-inner { + position: absolute; + top: 0; + left: 0; + width: 150px; + height: 150px; +} + +.minicolors-slider-saturation .minicolors-grid { + background-position: -420px 0; +} + +.minicolors-slider-saturation .minicolors-grid-inner { + background-position: -270px 0; + background-image: inherit; +} + +.minicolors-slider-brightness .minicolors-grid { + background-position: -570px 0; +} + +.minicolors-slider-brightness .minicolors-grid-inner { + background-color: black; +} + +.minicolors-slider-wheel .minicolors-grid { + background-position: -720px 0; +} + +.minicolors-slider, +.minicolors-opacity-slider { + position: absolute; + top: 1px; + left: 152px; /* LTR */ + width: 20px; + height: 150px; + background-color: white; + background-position: 0 0; + cursor: row-resize; +} +[dir=rtl] .minicolors-slider, +[dir=rtl] .minicolors-opacity-slider { + right: 152px; +} + +.minicolors-slider-saturation .minicolors-slider { + background-position: -60px 0; +} + +.minicolors-slider-brightness .minicolors-slider { + background-position: -20px 0; +} + +.minicolors-slider-wheel .minicolors-slider { + background-position: -20px 0; +} + +.minicolors-opacity-slider { + left: 173px; /* LTR */ + background-position: -40px 0; + display: none; +} +[dir=rtl] .minicolors-opacity-slider { + right: 173px; +} + +.minicolors-with-opacity .minicolors-opacity-slider { + display: block; +} + +/* Pickers */ +.minicolors-grid .minicolors-picker { + position: absolute; + top: 70px; + left: 70px; + width: 12px; + height: 12px; + border: solid 1px black; + border-radius: 10px; + margin-top: -6px; + margin-left: -6px; + background: none; +} + +.minicolors-grid .minicolors-picker > div { + position: absolute; + top: 0; + left: 0; + width: 8px; + height: 8px; + border-radius: 8px; + border: solid 2px white; + box-sizing: content-box; +} + +.minicolors-picker { + position: absolute; + top: 0; + left: 0; + width: 18px; + height: 2px; + background: white; + border: solid 1px black; + margin-top: -2px; + box-sizing: content-box; +} + +/* Swatches */ +.minicolors-swatches, +.minicolors-swatches li { + margin: 5px 0 3px 5px; /* LTR */ + padding: 0; + list-style: none; + overflow: hidden; +} +[dir=rtl] .minicolors-swatches, +[dir=rtl] .minicolors-swatches li { + margin: 5px 5px 3px 0; +} + +.minicolors-swatches .minicolors-swatch { + position: relative; + float: left; /* LTR */ + cursor: pointer; + margin:0 4px 0 0; /* LTR */ +} +[dir=rtl] .minicolors-swatches .minicolors-swatch { + float: right; + margin:0 0 0 4px; +} + +.minicolors-with-opacity .minicolors-swatches .minicolors-swatch { + margin-right: 7px; /* LTR */ +} +[dir=rtl] .minicolors-with-opacity .minicolors-swatches .minicolors-swatch { + margin-right: 0; + margin-left: 7px; +} + +.minicolors-swatch.selected { + border-color: #000; +} + +/* Inline controls */ +.minicolors-inline { + display: inline-block; +} + +.minicolors-inline .minicolors-input { + display: none !important; +} + +.minicolors-inline .minicolors-panel { + position: relative; + top: auto; + left: auto; /* LTR */ + box-shadow: none; + z-index: auto; + display: inline-block; +} +[dir=rtl] .minicolors-inline .minicolors-panel { + right: auto; +} + +/* Default theme */ +.minicolors-theme-default .minicolors-swatch { + top: 5px; + left: 5px; /* LTR */ + width: 18px; + height: 18px; +} +[dir=rtl] .minicolors-theme-default .minicolors-swatch { + right: 5px; +} +.minicolors-theme-default .minicolors-swatches .minicolors-swatch { + margin-bottom: 2px; + top: 0; + left: 0; /* LTR */ + width: 18px; + height: 18px; +} +[dir=rtl] .minicolors-theme-default .minicolors-swatches .minicolors-swatch { + right: 0; +} +.minicolors-theme-default.minicolors-position-right .minicolors-swatch { + left: auto; /* LTR */ + right: 5px; /* LTR */ +} +[dir=rtl] .minicolors-theme-default.minicolors-position-left .minicolors-swatch { + right: auto; + left: 5px; +} +.minicolors-theme-default.minicolors { + width: auto; + display: inline-block; +} +.minicolors-theme-default .minicolors-input { + height: 20px; + width: auto; + display: inline-block; + padding-left: 26px; /* LTR */ +} +[dir=rtl] .minicolors-theme-default .minicolors-input { + text-align: right; + unicode-bidi: plaintext; + padding-left: 1px; + padding-right: 26px; +} +.minicolors-theme-default.minicolors-position-right .minicolors-input { + padding-right: 26px; /* LTR */ + padding-left: inherit; /* LTR */ +} +[dir=rtl] .minicolors-theme-default.minicolors-position-left .minicolors-input { + padding-right: inherit; + padding-left: 26px; +} + +/* Bootstrap theme */ +.minicolors-theme-bootstrap .minicolors-swatch { + z-index: 2; + top: 3px; + left: 3px; /* LTR */ + width: 28px; + height: 28px; + border-radius: 3px; +} +[dir=rtl] .minicolors-theme-bootstrap .minicolors-swatch { + right: 3px; +} +.minicolors-theme-bootstrap .minicolors-swatches .minicolors-swatch { + margin-bottom: 2px; + top: 0; + left: 0; /* LTR */ + width: 20px; + height: 20px; +} +[dir=rtl] .minicolors-theme-bootstrap .minicolors-swatches .minicolors-swatch { + right: 0; +} +.minicolors-theme-bootstrap .minicolors-swatch-color { + border-radius: inherit; +} +.minicolors-theme-bootstrap.minicolors-position-right > .minicolors-swatch { + left: auto; /* LTR */ + right: 3px; /* LTR */ +} +[dir=rtl] .minicolors-theme-bootstrap.minicolors-position-left > .minicolors-swatch { + right: auto; + left: 3px; +} +.minicolors-theme-bootstrap .minicolors-input { + float: none; + padding-left: 44px; /* LTR */ +} +[dir=rtl] .minicolors-theme-bootstrap .minicolors-input { + text-align: right; + unicode-bidi: plaintext; + padding-left: 12px; + padding-right: 44px; +} +.minicolors-theme-bootstrap.minicolors-position-right .minicolors-input { + padding-right: 44px; /* LTR */ + padding-left: 12px; /* LTR */ +} +[dir=rtl] .minicolors-theme-bootstrap.minicolors-position-left .minicolors-input { + padding-right: 12px; + padding-left: 44px; +} +.minicolors-theme-bootstrap .minicolors-input.input-lg + .minicolors-swatch { + top: 4px; + left: 4px; /* LTR */ + width: 37px; + height: 37px; + border-radius: 5px; +} +[dir=rtl] .minicolors-theme-bootstrap .minicolors-input.input-lg + .minicolors-swatch { + right: 4px; +} +.minicolors-theme-bootstrap .minicolors-input.input-sm + .minicolors-swatch { + width: 24px; + height: 24px; +} +.minicolors-theme-bootstrap .minicolors-input.input-xs + .minicolors-swatch { + width: 18px; + height: 18px; +} +.input-group .minicolors-theme-bootstrap:not(:first-child) .minicolors-input { + border-top-left-radius: 0; /* LTR */ + border-bottom-left-radius: 0; /* LTR */ +} +[dir=rtl] .input-group .minicolors-theme-bootstrap .minicolors-input { + border-radius: 4px; +} +[dir=rtl] .input-group .minicolors-theme-bootstrap:not(:first-child) .minicolors-input { + border-top-right-radius: 0; + border-bottom-right-radius: 0; +} +[dir=rtl] .input-group .minicolors-theme-bootstrap:not(:last-child) .minicolors-input { + border-top-left-radius: 0; + border-bottom-left-radius: 0; +} +/* bootstrap input-group rtl override */ +[dir=rtl] .input-group .form-control, +[dir=rtl] .input-group-addon, +[dir=rtl] .input-group-btn > .btn, +[dir=rtl] .input-group-btn > .btn-group > .btn, +[dir=rtl] .input-group-btn > .dropdown-toggle { + border: 1px solid #ccc; + border-radius: 4px; +} +[dir=rtl] .input-group .form-control:first-child, +[dir=rtl] .input-group-addon:first-child, +[dir=rtl] .input-group-btn:first-child > .btn, +[dir=rtl] .input-group-btn:first-child > .btn-group > .btn, +[dir=rtl] .input-group-btn:first-child > .dropdown-toggle, +[dir=rtl] .input-group-btn:last-child > .btn:not(:last-child):not(.dropdown-toggle), +[dir=rtl] .input-group-btn:last-child > .btn-group:not(:last-child) > .btn { + border-top-left-radius: 0; + border-bottom-left-radius: 0; + border-left: 0; +} +[dir=rtl] .input-group .form-control:last-child, +[dir=rtl] .input-group-addon:last-child, +[dir=rtl] .input-group-btn:last-child > .btn, +[dir=rtl] .input-group-btn:last-child > .btn-group > .btn, +[dir=rtl] .input-group-btn:last-child > .dropdown-toggle, +[dir=rtl] .input-group-btn:first-child > .btn:not(:first-child), +[dir=rtl] .input-group-btn:first-child > .btn-group:not(:first-child) > .btn { + border-top-right-radius: 0; + border-bottom-right-radius: 0; +} + +/* Semantic Ui theme */ +.minicolors-theme-semanticui .minicolors-swatch { + top: 0; + left: 0; /* LTR */ + padding: 18px; +} +[dir=rtl] .minicolors-theme-semanticui .minicolors-swatch { + right: 0; +} +.minicolors-theme-semanticui input { + text-indent: 30px; +} diff --git a/app/assets/stylesheets/widget_custom_gallery.css b/app/assets/stylesheets/widget_custom_gallery.css new file mode 100644 index 0000000..c9537eb --- /dev/null +++ b/app/assets/stylesheets/widget_custom_gallery.css @@ -0,0 +1,70 @@ +.widget_custom_gallery { + margin-bottom: 20px; +} +.widget_custom_gallery:after { + display: table; + width: 100%; + content: ''; +} +.widget_custom_gallery ul { + list-style: none; + margin: 0; + padding: 0; +} +.widget_custom_gallery li a { + display: block; +} +.widget_custom_gallery li a img { + height: auto; + display: block; +} + +/* widget 1 */ +.w1 ul { + margin: 0 -1%; +} +.w1 li { + float: left; + margin: 1%; +} +.w1.c2 li { width: 48%; } +.w1.c3 li { width: 31.3333%; } +.w1.c4 li { width: 23%; } +.w1.c5 li { width: 18%; } +.w1.c6 li { width: 14.6666%; } +.w1 li a { + -webkit-transition: opacity 0.3s ease; + -moz-transition: opacity 0.3s ease; + transition: opacity 0.3s ease; +} +.w1 li a:hover { + opacity: 0.8; + position: relative; +} +.w1 li a img { + width: 100%; +} + +/* widget 2 */ +.w2 li { + width: 100%; +} +.w2 li a img { + width: 100%; + height: auto; +} +.w2 li a { + position: relative; + overflow: hidden; + color: #fff; + text-transform: capitalize; +} +.w2 li a .desc { + position: absolute; + bottom: -60px; + opacity: 0; + display: block; + width: 100%; + padding: 5%; + background-color: rgba(8, 166, 255, 0.8); +} \ No newline at end of file diff --git a/app/controllers/.keep b/app/controllers/.keep new file mode 100644 index 0000000..e69de29 diff --git a/app/controllers/admin/custom_galleries_controller.rb b/app/controllers/admin/custom_galleries_controller.rb new file mode 100644 index 0000000..0dfeeac --- /dev/null +++ b/app/controllers/admin/custom_galleries_controller.rb @@ -0,0 +1,673 @@ +require 'rubyXL' +class Admin::CustomGalleriesController < OrbitAdminController + include Admin::CustomGalleriesHelper + before_filter :setup_vars + before_action :authenticate_user, :except => "imgs" + before_action :log_user_action + layout :compute_layout + find_tag = Tag.all.select{|value| value.name==I18n.t('custom_gallery.not_show_desc')} + if find_tag.length==0 + module_app_id = ModuleApp.where(:key=>"custom_gallery").first[:_id] + tags = ModuleApp.where(:key=>"custom_gallery").first.tags + tag0 = Tag.new(is_default: false,module_app_ids: [module_app_id]) + tag1 = Tag.new(is_default: false,module_app_ids: [module_app_id]) + nowlocale = I18n.locale + I18n.available_locales.each do |locale| + I18n.locale = locale + tag0.name = I18n.t('custom_gallery.show_desc') + tag1.name = I18n.t('custom_gallery.not_show_desc') + end + I18n.locale = nowlocale + tag0.save + tag1.save + tags << tag0 + tags << tag1 + elsif find_tag.length>1 + show_tags = Tag.all.select{|value| value.name==I18n.t('custom_gallery.show_desc')} + show_tags.each_with_index do |show_tag,index1| + if index1>0 + if show_tag.taggings.count==0 + show_tag.delete + end + end + end + find_tag.each_with_index do |not_show_tag,index1| + if index1>0 + if not_show_tag.taggings.count==0 + not_show_tag.delete + end + end + end + end + def compute_layout + if action_name== 'index' && !params['page_no'].nil? + false + else + 'back_end' + end + end + def get_tag + custom_album = CustomAlbum.find(params['ele_id']) rescue nil + if !custom_album.nil? + text = custom_album.tags.collect do |tag| + "
    • #{tag.name}
    • " + end.join + render :text => text + else + render :text => '' + end + end + def rotate_images + begin + image_ids = params['image_ids'].split(',') + count = image_ids.count + rot_ang = params[:rotate_angle].to_i + variable = CustomAlbumVariable.first + if variable.nil? + variable = CustomAlbumVariable.new + end + variable.finish = false + variable.save! + Thread.new do + variable = CustomAlbumVariable.first + image_ids.each_with_index do |image_id,index| + image = CustomAlbumImage.find(image_id) rescue nil + next if image.nil? + if !(image.custom_album_crops.first.nil?) + w_and_h = image.file.get_w_and_h + cords = image.custom_album_crops.map{|v| [[v.crop_x.to_f,v.crop_y.to_f], + [v.crop_x.to_f,v.crop_y.to_f+v.crop_h.to_f], + [v.crop_w.to_f+v.crop_x.to_f,v.crop_y.to_f], + [v.crop_w.to_f+v.crop_x.to_f,v.crop_y.to_f+v.crop_h.to_f]]}[0] + rot_diff = rot_ang/90 + if (rot_diff) % 2 == 1 + new_w = (w_and_h[1]).to_f + new_h = (w_and_h[0]).to_f + else + new_w = (w_and_h[0]).to_f + new_h = (w_and_h[1]).to_f + end + + rot_times = rot_diff % 4 + deg = (90.0*rot_times/180*Math::PI) + cords = cords.collect do |cord| + x = cord[0]-w_and_h[0].to_f/2 + y = cord[1]-w_and_h[1].to_f/2 + [x*Math.cos(deg)-y*Math.sin(deg)+new_w/2,x*Math.sin(deg)+y*Math.cos(deg)+new_h/2] + end + all_x = cords.collect do |cord| + cord[0] + end + all_y = cords.collect do |cord| + cord[1] + end + image.custom_album_crops.first.update_attributes(crop_x: all_x.min,crop_y: all_y.min,crop_w: all_x.max - all_x.min,crop_h: all_y.max - all_y.min) + end + variable.progress_percent = (index*100.0/count).floor.to_s+'%' + image.file.rotate_ang(rot_ang) + all_version = image.file.versions.map{|k,v| k} + begin + variable.progress_filename = image[:file].to_s + all_version.each do |version| + if !(version.to_s == 'resized' && crop_but_no_backup(image)) + image.file.recreate_versions! version + image.save! + end + end + rescue => e + variable.progress_filename = e.inspect.to_s + puts e.inspect + end + variable.save! + end + variable.finish = true + variable.save! + end + rescue => e + puts e.inspect + end + redirect_to :controller=> 'images' ,:action => 'crop_process' + end + + def save_crop + begin + images = CustomAlbumImage.where(:id.in => Array(params[:id])) + x = params['x'] + y = params['y'] + w = params['w'] + h = params['h'] + cords = x.zip(y,w,h) + count = cords.length + variable = CustomAlbumVariable.first + if variable.nil? + variable = CustomAlbumVariable.new + end + variable.finish = false + variable.save! + Thread.new do + variable = CustomAlbumVariable.first + image_ids= images.pluck(:id) + image_ids.each_with_index do |image_id,index| + image = CustomAlbumImage.find(image_id) + cord = cords[index] + if image.custom_album_crops.first.nil? + image.custom_album_crops.create(crop_x: cord[0],crop_y: cord[1],crop_w: cord[2],crop_h: cord[3]) + else + image.custom_album_crops.first.update_attributes(crop_x: cord[0],crop_y: cord[1],crop_w: cord[2],crop_h: cord[3]) + end + variable.progress_percent = (index*100.0/count).floor.to_s+'%' + all_version = image.file.versions.map{|k,v| k} + begin + #org_fname = image.file.path + #org_extname = File.extname(org_fname) + #org_fname.slice! org_extname + #FileUtils.cp(org_fname + org_extname, org_fname + '_resized' + org_extname) + variable.progress_filename = image[:file].to_s + all_version.each do |version| + if !(version.to_s == 'resized' && crop_but_no_backup(image)) + image.file.recreate_versions! version + image.save! + end + end + rescue => e + variable.progress_filename = e.inspect.to_s + puts e.inspect + end + variable.save! + end + variable.finish = true + variable.save! + end + rescue => e + puts e.inspect + end + redirect_url = "/admin/custom_galleries/crop_process" + render :json => {'href' => redirect_url}.to_json + end + def call_translate + text = params['text'] + render :json => {'translate' => "#{t(text.to_s)}" }.to_json + end + def recreate_image + notalive = ((CustomAlbumVariable.first.notalive.nil? ? true : CustomAlbumVariable.first.notalive) rescue true) + if notalive + if !params['custom_album_id'].to_s.empty? + variable = CustomAlbumVariable.first + if variable.nil? + variable = CustomAlbumVariable.new + end + variable.finish = false + variable.save! + choice_ids = params['custom_album_id'].split(',') + custom_albums = CustomAlbum.where(:id.in => choice_ids) + if !(params['use_default']=='true') + color = params['color_choice'].to_s.empty? ? 'transparent' : params['color_choice'] + custom_albums.each do |custom_album| + if custom_album.custom_album_colors.first.nil? + custom_album.custom_album_colors.create('color' => color) + else + custom_album.custom_album_colors.first.update_attributes('color' => color, 'updated_at' => Time.now) + end + end + end + count = custom_albums.reduce(0){|x,i| i.custom_album_images.count+x} + Thread.new do + i = 0 + custom_album_ids = custom_albums.pluck(:id) + custom_album_ids.each do |custom_album_id| + custom_album = CustomAlbum.find(custom_album_id) rescue CustomAlbum.new() + custom_album_image_ids = custom_album.custom_album_images.pluck(:id) + custom_album_image_ids.each do |image_id| + image = CustomAlbumImage.find(image_id) + error = nil + all_version = image.file.versions.map{|k,v| k} + begin + all_version.each do |version| + if !(version.to_s == 'resized' && crop_but_no_backup(image)) + image.file.recreate_versions! version + image.save! + end + end + rescue => error + end + variable = CustomAlbumVariable.first + variable.progress_percent = (i*100.0/count).floor.to_s+'%' + if !error.nil? + variable.progress_filename = error.inspect.to_s.encode('UTF-8', invalid: :replace, undef: :replace, replace: '?') + sleep(1) + else + variable.progress_filename = image[:file].to_s + end + variable.save! + i+=1 + end + end + variable = CustomAlbumVariable.first + variable.finish = true + variable.save! + end + else + variable = CustomAlbumVariable.first + variable.finish = true + variable.progress_filename = '' + variable.progress_percent = '100%' + variable.save! + end + end + end + def finish_recreate + variable = CustomAlbumVariable.first + variable.progress_percent = '0%' + variable.progress_filename = '' + variable.notalive = true + variable.save! + render :text => '' + end + def recreate_progress + progress_percent = CustomAlbumVariable.first.progress_percent rescue '0%' + progress_filename = CustomAlbumVariable.first.progress_filename rescue '' + finish = CustomAlbumVariable.first.finish rescue false + render :json => {'percent' => progress_percent, 'filename' => progress_filename, 'finish' => finish }.to_json + end + def filter_custom_album + @tags = @module_app.tags + categories = @module_app.categories.enabled + @filter_fields = filter_fields(categories, @tags) + @filter_fields.delete(:status) + custom_albums1 = CustomAlbum.where(:order.in => [nil,-1]).desc(:created_at).with_categories(filters("category")).with_tags(filters("tag")) + custom_albums1 = search_data(custom_albums1,[:name]) + custom_albums2 = CustomAlbum.all.where(:order.ne=>-1).and(:order.ne=>nil).asc(:order).with_categories(filters("category")).with_tags(filters("tag")) + custom_albums2 = search_data(custom_albums2,[:name]) + @fiter_custom_albums = custom_albums1.concat(custom_albums2) + end + def update_custom_album_setting + if params[:custom_album_setting_limit] + params_custom_album_setting = {:limit=>params[:custom_album_setting_limit]} + else + params_custom_album_setting = params.require(:custom_album_setting).permit! + end + CustomAlbumSetting.first.update_attributes(params_custom_album_setting) + redirect_to '/admin/custom_galleries' + end + def setting + @custom_album_setting = CustomAlbumSetting.first + end + def index + custom_album_length = CustomAlbum.where(:custom_module=>params[:custom_module],:bind_uid=>params[:bind_uid]).count + custom_album_sort = CustomAlbum.where(:custom_module=>params[:custom_module],:bind_uid=>params[:bind_uid]).asc(:created_at) + if (custom_album_sort.first.custom_album_colors.first.nil? rescue false) + custom_album_sort.each_with_index do |custom_album| + if custom_album.custom_album_colors.first.nil? + custom_album.custom_album_colors.create('color' => 'transparent') + end + end + end + @url = request.original_fullpath + @limit_count = CustomAlbumSetting.first.limit.to_i + @limit_count = custom_album_length if @limit_count == 0 + if params['page_no'].nil? + @show_script = true + @custom_albums = filter_custom_album.take @limit_count + else + @show_script = false + start = (params['page_no'].to_i - 1)*@limit_count + @custom_albums = filter_custom_album[start...start+@limit_count] + end + if CustomAlbumColor.count!=0 + if CustomAlbumColor.all.desc('updated_at').first[:color] == 'transparent' + @color_save = '' + else + @color_save = CustomAlbumColor.desc('updated_at').first[:color] + end + else + @color_save = 'transparent' + end + @custom_album_configs = CustomAlbumConfig.all + if request.xhr? + render :partial => "custom_albums" + elsif params[:custom_module].blank? || params[:bind_uid].blank? + render "display_enable_modules" + end + end + + def show + @custom_album = CustomAlbum.find(params[:id]) + @images = @custom_album.custom_album_images.where(:order.in => [nil,-1]).desc(:created_at) + images = @custom_album.custom_album_images.where(:order.gt => -1).asc(:order) + @images = @images.concat(images) + image_content = [] + @images.each do |image| + image_content << {"id" => image.id.to_s,"title"=> image.title_translations, "description" => image.description_translations,"tags" => image.tags.collect{|t| t.id.to_s}} + end + @tags = @module_app.tags + @photos_data = {"custom_galleries" => image_content}.to_json + end + + def new + @custom_album = CustomAlbum.new + @tags = @module_app.tags + @categories = @module_app.categories + end + + def create + custom_album = CustomAlbum.new(custom_album_params) + custom_album.save! + custom_module = custom_album.custom_module + bind_uid = custom_album.bind_uid + if custom_module.present? + redirect_to admin_custom_galleries_path + "/#{custom_module}#{bind_uid.present? ? ('-'+bind_uid) : ''}" + else + redirect_to admin_custom_galleries_path + end + end + + def destroy + custom_album = CustomAlbum.find(params[:id]) + custom_module = custom_album.custom_module + bind_uid = custom_album.bind_uid + custom_album.destroy + if custom_module.present? + redirect_to admin_custom_galleries_path + "/#{custom_module}#{bind_uid.present? ? ('-'+bind_uid) : ''}" + else + redirect_to admin_custom_galleries_path + end + end + + def edit + @custom_album = CustomAlbum.find(params[:id]) + if can_edit_or_delete?(@custom_album) + @tags = @module_app.tags + @categories = @module_app.categories + else + render_401 + end + end + + def import + @custom_album = CustomAlbum.find(params[:id]) + end + + def importimages + custom_album = CustomAlbum.find(params[:id]) + workbook = RubyXL::Parser.parse(params["import_file"].tempfile) + sheet = workbook[0] + if sheet.count <= 203 + sheet.each_with_index do |row, i| + next if i < 3 + v = row.cells.first.value rescue nil + next if v.blank? + import_this_image(row, custom_album) + end + redirect_to admin_custom_gallery_path(custom_album.id) + else + redirect_to import_admin_custom_gallery_path(:error => "1") + end + end + + def excel_format + @custom_album = CustomAlbum.find(params[:id]) + respond_to do |format| + format.xlsx { + response.headers['Content-Disposition'] = 'attachment; filename="custom_gallery_import_format.xlsx"' + } + end + end + + def set_cover + if params[:set_cover] == "true" + custom_album = CustomAlbum.find(params[:custom_album_id]) + image = CustomAlbumImage.find(params[:image_id]) + custom_album.update_attributes({:cover_path => image.file.thumb.url, :cover=>params[:image_id]}) + else + custom_album = CustomAlbum.find(params[:custom_album_id]) + custom_album.update_attributes({:cover_path => nil, :cover=>"default"}) + end + render :json =>{"success"=>true}.to_json + end + + def get_photoData_json + @custom_album = CustomAlbum.find(params[:id]) + @images = @custom_album.custom_album_images.where(:order => [nil,-1]).desc(:created_at) + images = @custom_album.custom_album_images.where(:order.gt => -1).asc(:order) + @images = @images.concat(images) + image_content = [] + @images.each do |image| + image_content << {"id" => image.id.to_s,"title"=> image.title_translations, "description" => image.description_translations,"tags" => image.tags.collect{|t| t.id.to_s}} + end + render :json=>{"custom_galleries" => image_content}.to_json + end + + def get_custom_album_json + custom_albums = CustomAlbum.all + output = Array.new + + custom_albums.each do |custom_album| + tag_names = Array.new + + custom_album.tag_ids.each do |tag| + tag_names << get_tags.include?(tag) + end + if custom_album.cover_path + cover_path = custom_album.cover_path + else + cover_path = "/assets/custom_gallery/default.jpg" + end + output << { + custom_album_cover_file: "http://#{request.host_with_port}"+cover_path, + custom_album_name: custom_album.name, + custom_album_tag_names: tag_names, + custom_album_link:"http://#{request.host_with_port}#{panel_custom_gallery_back_end_custom_album_get_imgs_json_path(custom_album)}", + } + end + + render :json=>JSON.pretty_generate(output) + end + + def get_imgs_json + custom_album = CustomAlbum.find(params[:custom_album_id]) + images = custom_album.custom_album_images.all + output = Array.new + + images.each do |image| + tags = Array.new + + image.tag_ids.each do |tag| + tags << get_tags.include?(tag) + end + + if image.file.theater.present? + @image_file = image.file.theater.url + else + @image_file = image.file.url + end + + output << { + image_title: image.title, + image_description: image.description, + image_file: { url: "http://#{request.host_with_port}#{@image_file}", + thumb: "http://#{request.host_with_port}#{image.file.thumb.to_s}"}, + image_tag_names: tags} + end + + render :json=>JSON.pretty_generate(output) + end + + def imgs + @custom_album = CustomAlbum.find(params[:custom_gallery_id]) + @tag_names = Array.new + @images = @custom_album.custom_album_images.asc(:order) + @output = Array.new + @images.each do |values| + @output << { _id: values.id.to_s, + theater_link: admin_image_path(values), + description: values.description, + title: values.title, + file: values.file.as_json[:file], + custom_gallery_custom_album_id: values.custom_album_id, + order: values.order, + tags: values.tags} + end + render :json=>{"images" => @output, "tags" => @custom_album.tags}.to_json + end + + + def upload_process + if CustomAlbumUnprocess.first.upload_success + custom_album_unprocess = Array(CustomAlbumUnprocess.all) + count = custom_album_unprocess.count + Thread.new do + custom_album_unprocess.each_with_index do |un_image,i| + begin + custom_album = CustomAlbumImage.all.select{|value| value.id.to_s == un_image.image_id.to_s}[0] + custom_album.file = un_image.save_var + custom_album.save! + file = un_image.save_var.tempfile + file.close + File.delete file.path + un_image.delete + variable = CustomAlbumVariable.first + variable.progress_filename = custom_album[:file] + variable.progress_percent = ((i+1)*100.0/count).floor.to_s + '%' + variable.save! + rescue => e + puts ['err',un_image.inspect,e.inspect] + un_image.destroy + end + end + variable = CustomAlbumVariable.first + variable.finish = true + variable.save! + end + custom_album_temp = CustomAlbumUnprocess.first + custom_album_temp.upload_success = false + custom_album_temp.save! + end + end + def start_upload_process + custom_album_temp = CustomAlbumUnprocess.first + custom_album_temp.upload_success = true + custom_album_temp.save! + render :json => {}.to_json + end + def init_upload + variable = CustomAlbumVariable.first + if variable.nil? + variable = CustomAlbumVariable.new + end + variable.count = params['all_length'].to_i + variable.finish = false + variable.progress_percent = '0%' + variable.progress_filename = 'processing!!' + variable.notalive = true + variable.save! + render :json => {}.to_json + end + def upload_image + custom_album = CustomAlbum.find(params[:custom_album_id]) + files = params['files'] + custom_album_unprocess = CustomAlbumUnprocess.new() + files.each do |file| + image = custom_album.custom_album_images.new + image.tags = (custom_album.tags rescue []) + if(CustomAlbumVariable.first.count==1 rescue true) + image.file = file + else + custom_album_unprocess.image_id = image.id + custom_album_unprocess.upload_success = false + custom_album_unprocess.save_var = file + custom_album_unprocess.save! + ObjectSpace.undefine_finalizer(file.tempfile) + end + image.save! + end + render :json=>{"files"=>[{}]}.to_json + end + + def last_image_id + custom_album = CustomAlbum.find(params[:custom_albumid]) + lastimage = custom_album.custom_album_images.last + render :json => {"last_image_id" => lastimage.id.to_s}.to_json + end + + def new_images + @custom_album = CustomAlbum.find(params[:custom_album_id]) + if params[:last_image_id].present? + lastimage = CustomAlbumImage.find(params[:last_image_id]) + @newimages = @custom_album.custom_album_images.where(:created_at.gt => lastimage.created_at,:order => -1).desc(:created_at) + else + @newimages = @custom_album.custom_album_images.where(:order => [nil,-1]).desc(:created_at) + end + render :layout=>false + end + + + def images_tags + custom_album = CustomAlbum.find(params[:custom_album_id]) + tags = Array.new + images = custom_album.custom_album_images.all + images.each do |image| + tags << {"id"=>image.id, "tags" => image.tags} + end + render :json=>tags.to_json + end + + def update + custom_album = CustomAlbum.find(params[:id]) + tagsToDestroy = [] + tagsToAdd = [] + new_tags = params[:custom_album][:tags] || [] + old_tags = custom_album.tags.collect{|t| t.id.to_s} + old_tags.each do |tag| + if !new_tags.include?(tag) + tagsToDestroy << tag + end + end + if new_tags != nil + new_tags.each do |tag| + if !old_tags.include?(tag) + tagsToAdd << tag + end + end + end + update_children_image_tag(custom_album,tagsToDestroy,tagsToAdd) + custom_album.update_attributes(custom_album_params) + redirect_to "/admin/custom_galleries/"+custom_album.id.to_s + end + + def update_children_image_tag(custom_album,tagsToDestroy,tagsToAdd) + # tagsToDestroy will contain all tag ids which have to be deleted from the galley_images + # tagsToAdd will contain all tag ids which ve to be added in tall custom_album_images + images = custom_album.custom_album_images + images.each do |image| + image_tags = image.tags.collect{|t| t.id.to_s} + tagsToAdd.each do |tag| + image_tags << tag + end + tagsToDestroy.each do |tag| + if image_tags.include?tag + image_tags.delete(tag) + end + end + image.tags = image_tags + image.save + end + end + + private + def crop_but_no_backup image + fname = image.file.path + extension = File.extname(fname) + base_name = fname.chomp(extension) + base_name += ('_resized'+ extension) + File.file?(base_name) + end + def setup_vars + @module_app = ModuleApp.where(:key=>"custom_gallery").first + end + + def custom_album_params + p = params.require(:custom_album).permit! + p["tags"] = p["tags"] || [] + p + end +end diff --git a/app/controllers/admin/custom_images_controller.rb b/app/controllers/admin/custom_images_controller.rb new file mode 100644 index 0000000..b45724b --- /dev/null +++ b/app/controllers/admin/custom_images_controller.rb @@ -0,0 +1,107 @@ +class Admin::CustomImagesController < OrbitAdminController + before_filter :setup_vars + def crop_process + end + def batch_crop + images = params['image_ids'].split(',') + @img = [] + images.each do |image| + @img << CustomAlbumImage.find(image) + end + render 'batch_crop' + end + def edit + @image = CustomAlbumImage.find(params[:id]) + render 'edit_image' + end + def show + @image = CustomAlbumImage.find(params[:id]) + @custom_albumid = @image.custom_album_id + @custom_album = CustomAlbum.find(@custom_albumid) + @images = @custom_album.custom_album_images.asc(:order) + end + + def changeorder + type = params[:type] + if type == "imgholder" + images = params[:imageids] + images.each_with_index do |image, i| + img = CustomAlbumImage.find(image) rescue nil + if !img.nil? + img.order = i + img.save + end + end + elsif type == "orbit_custom_gallery" + custom_albums = params[:imageids] + custom_albums.each_with_index do |custom_albumid, i| + custom_album = CustomAlbum.find(custom_albumid) rescue nil + if !custom_album.nil? + custom_album.order = i + custom_album.save + end + end + end + render :json => {"success" => true}.to_json + end + + def delete_photos + images = params['images'] + images.each do |image| + img = CustomAlbumImage.find(image) + begin + FileUtils.rm_rf(File.dirname(img.file.path)) + rescue => e + puts ["can't delete",e] + end + img.delete + end + if params['delete_cover'] == "true" + custom_album = CustomAlbum.find(params['custom_album_id']) + custom_album.update_attributes(:cover=>"default",:cover_path => nil) + end + render :json =>{"success"=>true}.to_json + end + + def image_tagging + images = params[:image_ids] + tags = params[:tag_ids] || [] + i = nil + images.each do |image| + img = CustomAlbumImage.find(image) + img.tags = tags + img.save + i = img + end + @custom_album = CustomAlbum.find(i.custom_album_id.to_s) + @images = @custom_album.custom_album_images + @image_content = [] + @images.each do |image| + @image_content << {"id" => image.id.to_s, "description" => image.description_translations,"tags" => image.tags.collect{|t| t.id.to_s}} + end + render :json=>{"custom_galleries" => @image_content}.to_json + end + + def update_image + image = CustomAlbumImage.find(params[:image_id]) + image.update_attributes(update_params) + image.save! + @custom_album = CustomAlbum.find(image.custom_album_id.to_s) + @images = @custom_album.custom_album_images + @image_content = [] + @images.each do |image| + @image_content << {"id" => image.id.to_s, "description" => image.description_translations,"tags" => image.tags.collect{|t| t.id.to_s}} + end + render :json=>{"custom_galleries" => @image_content}.to_json + end + + private + + def setup_vars + @module_app = ModuleApp.where(:key=>"custom_gallery").first + end + + def update_params + params.require(:custom_album_image).permit! + end +end \ No newline at end of file diff --git a/app/controllers/custom_galleries_controller.rb b/app/controllers/custom_galleries_controller.rb new file mode 100644 index 0000000..d4b0f7f --- /dev/null +++ b/app/controllers/custom_galleries_controller.rb @@ -0,0 +1,284 @@ +class CustomGalleriesController < ApplicationController + + find_tag = Tag.all.select{|value| value.name==I18n.t('custom_gallery.not_show_desc')} + if find_tag.length==0 + module_app_id = ModuleApp.where(:key=>"custom_gallery").first[:_id] + tags = ModuleApp.where(:key=>"custom_gallery").first.tags + tag0 = Tag.new(is_default: false,module_app_ids: [module_app_id]) + tag1 = Tag.new(is_default: false,module_app_ids: [module_app_id]) + nowlocale = I18n.locale + I18n.available_locales.each do |locale| + I18n.locale = locale + tag0.name = I18n.t('custom_gallery.show_desc') + tag1.name = I18n.t('custom_gallery.not_show_desc') + end + I18n.locale = nowlocale + tag0.save + tag1.save + tags << tag0 + tags << tag1 + elsif find_tag.length>1 + show_tags = Tag.all.select{|value| value.name==I18n.t('custom_gallery.show_desc')} + show_tags.each_with_index do |show_tag,index1| + if index1>0 + if show_tag.taggings.count==0 + show_tag.delete + end + end + end + find_tag.each_with_index do |not_show_tag,index1| + if index1>0 + if not_show_tag.taggings.count==0 + not_show_tag.delete + end + end + end + end + + def index + @custom_album_setting = CustomAlbumSetting.first + params = OrbitHelper.params + page = OrbitHelper.page rescue nil + unless page + page = Page.where(url:params['url']).first + end + custom_data_field = page.custom_data_field rescue nil + if custom_data_field.nil? + custom_data_field = {} + elsif custom_data_field["bind_module_app"] + custom_data_field["custom_module"] = custom_data_field["bind_module_app"] + custom_data_field.delete('bind_module_app') + end + custom_album_tp = CustomAlbum.where(custom_data_field).filter_by_categories.filter_by_tags + all_count = custom_album_tp.count + page_data_count = OrbitHelper.page_data_count + no_order_count = custom_album_tp.where(:order.in=>[-1,nil]).count + with_order_count = all_count - no_order_count + with_order_total_pages = (with_order_count.to_f / page_data_count).ceil + custom_albums_with_order = custom_album_tp.asc(:order).where(:order.ne=>-1).and(:order.ne=>nil).to_a rescue [] + page_no = (params[:page_no] || 1).to_i + if page_no < with_order_total_pages + custom_albums_no_order = [] + elsif page_no == with_order_total_pages + if custom_albums_with_order.count == page_data_count + custom_albums_no_order = [] + else + custom_albums_no_order = custom_album_tp.desc(:created_at).where(:order.in=>[-1,nil]).page(nil).per(all_count)[0...(page_data_count - custom_albums_with_order.count)] + end + else + custom_albums_with_order = [] + start_index = (page_data_count - (with_order_count % page_data_count) + page_data_count*(page_no - 1 - with_order_total_pages)) + custom_albums_no_order = custom_album_tp.desc(:created_at).where(:order.in=>[-1,nil]).page(nil).per(all_count)[start_index...(start_index+page_data_count)].to_a + end + custom_albums = custom_albums_with_order.concat(custom_albums_no_order) + custom_album_color_map = CustomAlbumColor.where(:custom_album_id.in=> custom_albums.map{|v| v.id}).pluck(:custom_album_id,:color,:custom_album_card_background_color,:custom_album_card_text_color).map{|v| [v[0],v[1..-1]]}.to_h + custom_galleries = custom_albums.collect do |a| + doc = Nokogiri::HTML(a.description.to_s) + alt_text = doc.text.empty? ? 'custom_gallery image' : doc.text + colors = custom_album_color_map[a.id] + { + "custom_album-name" => a.name, + "custom_album-description" => a.description, + "alt_title" => alt_text, + "link_to_show" => OrbitHelper.url_to_show(a.to_param), + "thumb-src" => a.cover_path || "/assets/custom_gallery/default.jpg", + "custom_album_color" => iterate_data(colors[1],colors[0],@custom_album_setting.custom_album_card_background_color,'transparent'), + "custom_album_card_text_color" => iterate_data(colors[2],@custom_album_setting.custom_album_card_text_color) + } + end + { + "custom_albums" => custom_galleries, + "extras" => {"widget-title"=>"CustomGallery"}, + "total_pages" => custom_album_tp.total_pages + } + end + def show + @custom_album_setting = CustomAlbumSetting.first + params = OrbitHelper.params + custom_album = CustomAlbum.find_by_param(params[:uid]) + flag = show_desc? + colors = CustomAlbumColor.where(:custom_album_id=> custom_album.id).pluck(:color,:custom_album_card_background_color,:custom_album_card_text_color)[0] rescue [] + images = custom_album.custom_album_images.asc(:order).collect do |a| + alt_text = (a.description.blank? ? "custom_gallery image" : Nokogiri::HTML(a.description.to_s).text()) + { + "image-description" => (flag ? a.description : ''), + "image_short_description" => a.title, + "alt_title" => alt_text, + "link_to_show" => "#" + a.id.to_s, + "thumb-src" => a.file.thumb.url, + "thumb-large-src" => a.file.thumb_large.url, + "mobile-src" => a.file.mobile.url, + "theater-src" => a.file.theater.url, + + "custom_album_color" => iterate_data(colors[1],colors[0],@custom_album_setting.custom_album_card_background_color,'transparent'), + "custom_album_card_text_color" => iterate_data(colors[2],@custom_album_setting.custom_album_card_text_color) + } + end + { + "images" => images, + "data" => {"custom_album-title"=>custom_album.name, + "custom_album-description" => (flag ? "

      #{custom_album.description}

      " : "")} + } + end + def iterate_data(*args) + tmp = nil + args.each do |arg| + if !arg.blank? && arg != 'transparent' + tmp = arg + break + end + end + tmp + end + def self.custom_widget_data + @custom_configs = CustomAlbumConfig.all.to_a + ac = ActionController::Base.new + ac.render_to_string("custom_galleries/custom_widget_data",:locals=>{:@custom_data_field=>@custom_data_field,:@custom_configs=>@custom_configs,:@field_name=>@field_name}) + end + def custom_album_widget + @custom_album_setting = CustomAlbumSetting.first + params = OrbitHelper.params + tags = OrbitHelper.widget_tags.empty? ? ["all"] : OrbitHelper.widget_tags + custom_album_tp = CustomAlbum.filter_by_widget_categories(OrbitHelper.widget_categories,false).filter_by_tags(tags) + all_count = custom_album_tp.count + page_data_count = OrbitHelper.widget_data_count + no_order_count = custom_album_tp.where(:order.in=>[-1,nil]).count + with_order_count = all_count - no_order_count + with_order_total_pages = (with_order_count.to_f / page_data_count).ceil + custom_albums_with_order = custom_album_tp.asc(:order).where(:order.ne=>-1).and(:order.ne=>nil).to_a rescue [] + page_no = (params[:page_no] || 1).to_i + if page_no < with_order_total_pages + custom_albums_no_order = [] + custom_albums_with_order = custom_albums_with_order[(page_no-1)*page_data_count...page_no*page_data_count] + elsif page_no == with_order_total_pages + if custom_albums_with_order.count == page_data_count + custom_albums_no_order = [] + else + custom_albums_no_order = custom_album_tp.desc(:created_at).where(:order.in=>[-1,nil]).page(nil).per(all_count)[0...(page_data_count - custom_albums_with_order.count)] + end + else + custom_albums_with_order = [] + start_index = (page_data_count - (with_order_count % page_data_count) + page_data_count*(page_no - 1 - with_order_total_pages)) + custom_albums_no_order = custom_album_tp.desc(:created_at).where(:order.in=>[-1,nil]).page(nil).per(all_count)[start_index...(start_index+page_data_count)].to_a + end + custom_albums = custom_albums_with_order.concat(custom_albums_no_order) + custom_album_color_map = CustomAlbumColor.where(:custom_album_id.in=> custom_albums.map{|v| v.id}).pluck(:custom_album_id,:color,:custom_album_card_background_color,:custom_album_card_text_color).map{|v| [v[0],v[1..-1]]}.to_h + custom_galleries = custom_albums.collect.with_index do |a,i| + doc = Nokogiri::HTML(a.description.to_s) + alt_text = doc.text.empty? ? 'custom_gallery image' : doc.text.strip + colors = custom_album_color_map[a.id] + thumb_src = a.cover_path || "/assets/custom_gallery/default.jpg" + cover_image = CustomAlbumImage.find(a.cover) rescue a.custom_album_images.first + image_description = a.description + image_short_description = a.name + { + "link_text" => a.name, + "custom_album-name" => a.name, + "custom_album-description" => a.description, + "alt_title" => alt_text, + "link_to_show" => OrbitHelper.widget_more_url + "/" + a.to_param + "#" + (cover_image.id.to_s rescue ""), + "src" => thumb_src.gsub("thumb_",""), + "thumb-src" => thumb_src, + "thumb-large-src" => thumb_src.gsub("thumb_","thumb_large_"), + "mobile-src" => thumb_src.gsub("thumb_","mobile_"), + "theater-src" => thumb_src.gsub("thumb_","theater_"), + "image_description" => image_description, + "image_short_description" => image_short_description, + "custom_album_color" => iterate_data(colors[1],colors[0],@custom_album_setting.custom_album_card_background_color,'transparent'), + "custom_album_card_text_color" => iterate_data(colors[2],@custom_album_setting.custom_album_card_text_color), + "i" => i + } + end + { + "images" => custom_galleries, + "extras" => {"widget-title"=>"CustomGallery","more_url" => OrbitHelper.widget_more_url,"more_text"=>(locale == :en ? 'more' : '更多照片')} + } + end + def widget + @custom_album_setting = CustomAlbumSetting.first + tags = OrbitHelper.widget_tags.empty? ? ["all"] : OrbitHelper.widget_tags + custom_album_ids = CustomAlbum.filter_by_widget_categories(OrbitHelper.widget_categories,false).filter_by_tags(tags).pluck(:id) + custom_album_color_map = CustomAlbumColor.where(:custom_album_id.in=> custom_album_ids).pluck(:custom_album_id,:color,:custom_album_card_background_color,:custom_album_card_text_color).map{|v| [v[0],v[1..-1]]}.to_h + params = OrbitHelper.params + counts = OrbitHelper.widget_data_count + images = CustomAlbumImage.where({custom_album_id:{"$in"=>custom_album_ids}}).desc(:id).limit(counts *5).sample(counts) + images = images.each_with_index.collect do |a,i| + colors = custom_album_color_map[a.custom_album_id] + alt_text = (a.description.blank? ? "custom_gallery image" : Nokogiri::HTML(a.description).text().strip) + { + "link_text" => "", + "link_to_show" => OrbitHelper.widget_more_url + "/" + a.custom_album.to_param + "#" + a.id.to_s, + "alt_title" => alt_text, + "src" => a.file.url, + "thumb-src" => a.file.thumb.url, + "thumb-large-src" => a.file.thumb_large.url, + "image_description" => a.description, + "image_short_description" => a.title, + "mobile-src" => a.file.mobile.url, + "theater-src" => a.file.theater.url, + "custom_album-name" => a.custom_album.name_translations[I18n.locale], + "custom_album_color" => iterate_data(colors[1],colors[0],@custom_album_setting.custom_album_card_background_color,'transparent'), + "custom_album_card_text_color" => iterate_data(colors[2],@custom_album_setting.custom_album_card_text_color), + "i" => i + } + end + { + "images" => images, + "extras" => {"widget-title"=>"CustomGallery","more_url" => OrbitHelper.widget_more_url,"more_text"=>(locale == :en ? 'more' : '更多照片')} + } + end + def imgs(custom_album_id) + custom_album = CustomAlbum.find(custom_album_id) + tag_names = Array.new + images = custom_album.custom_album_images.asc(:order) + output = Array.new + images.each do |values| + alt_text = (values.description.nil? || values.description == "" ? "custom_gallery image" : values.description) + output << { _id: values.id.to_s, + description: values.description, + title: values.title, + alt_title: alt_text, + url: values.file.url, + file: values.file.as_json[:file], + custom_gallery_custom_album_id: values.custom_album_id, + tags: values.tags} + end + return output + end + def theater + if params[:id].include?('page=') + custom_album = CustomAlbum.where(uid: params[:id].sub('page=','')).first + custom_albumid = custom_album.id + image = custom_album.custom_album_images.first + else + image = CustomAlbumImage.find(params[:id]) + custom_albumid = image.custom_album_id + custom_album = CustomAlbum.find(custom_albumid) + end + images = custom_album.custom_album_images.asc(:order) + data = { + "custom_album" => custom_album, + "image" => image.id.to_s, + "images" => imgs(custom_albumid) + } + render :json => {"data" => data}.to_json + end + + private + + def show_desc? + tags = OrbitHelper.page_tags if tags.blank? + tags = [tags].flatten.uniq + flag = true + tag_temp = Tag.all.select{|value| tags.include? value.id.to_s} + tag_temp_length = 0 + tag_temp.each do |value| + if value.name==I18n.t('custom_gallery.show_desc') + flag = true + elsif value.name==I18n.t('custom_gallery.not_show_desc') + flag = false + end + end + flag + end +end \ No newline at end of file diff --git a/app/helpers/.keep b/app/helpers/.keep new file mode 100644 index 0000000..e69de29 diff --git a/app/helpers/admin/custom_galleries_helper.rb b/app/helpers/admin/custom_galleries_helper.rb new file mode 100644 index 0000000..5e6434f --- /dev/null +++ b/app/helpers/admin/custom_galleries_helper.rb @@ -0,0 +1,46 @@ +module Admin::CustomGalleriesHelper + def back_end_breadcrumb + if params[:controller] == "admin/custom_galleries" + res = '' + divider = "/" + res << "
    • #{t(:dashboard_)}#{divider}
    • " + if params[:custom_module] + trans_name = I18n.t("module_name.#{params[:custom_module]}") + if trans_name.include?("translation missing") + trans_name = params[:custom_module] + end + res << "
    • #{trans_name}#{divider}
    • " + end + if params[:action] != "index" + if params[:custom_module] + extra_url = "/#{params[:custom_module]}#{params[:bind_uid].present? ? ('-'+params[:bind_uid]) : ''}" + end + res << "
    • #{t('module_name.'+@module_app.key)}#{divider}
    • " + res << "
    • #{t(params[:action], scope: 'restful_actions')}
    • " + else + res << "
    • #{t('module_name.'+@module_app.key)}
    • " + end + res.html_safe + else + super + end + end + def import_this_image(row,custom_album) + value = {} + image = CustomAlbumImage.new + image.custom_album = custom_album + row.cells.each_with_index do |cell,index| + val = cell.value rescue nil + next if val.blank? + case index + when 0 + image.remote_file_url = val + when 1 + value["zh_tw"] = val + value["en"] = (row.cells[index + 1].value rescue "") + image.description_translations = value + end + end + image.save + end +end diff --git a/app/mailers/.keep b/app/mailers/.keep new file mode 100644 index 0000000..e69de29 diff --git a/app/models/.keep b/app/models/.keep new file mode 100644 index 0000000..e69de29 diff --git a/app/models/custom_album.rb b/app/models/custom_album.rb new file mode 100644 index 0000000..20013a6 --- /dev/null +++ b/app/models/custom_album.rb @@ -0,0 +1,119 @@ +class CustomAlbum + include Mongoid::Document + include Mongoid::Timestamps + + include OrbitCategory::Categorizable + include OrbitTag::Taggable + include Slug + + field :custom_module + field :bind_uid + field :name, as: :slug_title, localize: true + field :description, localize: true + field :cover, default: "default" + field :cover_path #can refact + field :tag_names + field :uid, type: String + field :rss2_id, type: String + field :order, type: Integer, default: -1 + field :resize_gravity + # has_and_belongs_to_many :tags, :class_name => "CustomGalleryTag" + has_many :custom_album_images, :autosave => true, :dependent => :destroy + has_many :custom_album_colors, :autosave => true, :dependent => :destroy + accepts_nested_attributes_for :custom_album_images, :allow_destroy => true + accepts_nested_attributes_for :custom_album_colors, :allow_destroy => true + before_save do |record| + if record.order.nil? || record.order == -1 + topest_order = CustomAlbum.all.pluck(:order).sort{|a,b| a.to_i<=>b.to_i}.first + if topest_order.nil? || topest_order == 0 + record.order = -2 + else + record.order = topest_order - 1 + end + end + end + after_create do + custom_record_callback(1) + end + after_destroy do + custom_record_callback(-1) + end + def custom_record_callback(num) + if self.custom_module && self.bind_uid.present? + custom_album_config = CustomAlbumConfig.where(:module=>self.custom_module).first + if custom_album_config && custom_album_config.custom_record_callback.present? && custom_album_config.bind_model.present? + target_model = custom_album_config.bind_model.constantize rescue nil + if target_model + target_record = target_model.where(custom_album_config.uid_field=>self.bind_uid).first + target_record.send(custom_album_config.custom_record_callback,num) + end + end + end + end + def resize_gravity + """ + NorthWestGravity + Position object at top-left of region + NorthGravity + Position object at top-center of region + NorthEastGravity + Position object at top-right of region + WestGravity + Position object at left-center of region + CenterGravity + Position object at center of region + EastGravity + Position object at right-center of region + SouthWestGravity + Position object at left-bottom of region + SouthGravity + Position object at bottom-center of region + SouthEastGravity + Position object at bottom-right of region + """ + tmp = self[:resize_gravity] + (tmp.blank? ? (CustomAlbumSetting.first.resize_gravity.blank? ? "Center" : CustomAlbumSetting.first.resize_gravity) : tmp) rescue 'Center' + end + def self.find_by_param(input) + self.find_by(uid: input) + end + def self.filter_by_tags(tags=[]) + tags = OrbitHelper.page_tags if tags.blank? + tags = [tags].flatten.uniq + if !(tags.include?("all")) + tag_temp = Tag.all.select{|value| tags.include? value.id.to_s} + tag_temp_length = 0 + tag_temp.each do |value| + if value.name==I18n.t('custom_gallery.show_desc') || value.name==I18n.t('custom_gallery.not_show_desc') + tag_temp_length+=1 + end + end + if tag_temp_length!=0 + if (tags.length - tag_temp_length) == 0 + tags = ['all'] + end + end + end + if tags.blank? || (tags.include?("all") rescue false) + self.all + else + tags + taggings = Tagging.where(:tag_id.in=>tags).map{|item| item.taggable_id} + self.where(:id.in=>taggings) + end + end + def cover + tmp = self['cover'] + if tmp=='default' + tmp = (self.custom_album_images.first.id.to_s rescue 'default') + end + tmp + end + def cover_path + tmp = self['cover_path'] + if tmp.nil? + tmp = (self.custom_album_images.first.file.thumb.url rescue nil) + end + tmp + end +end \ No newline at end of file diff --git a/app/models/custom_album_color.rb b/app/models/custom_album_color.rb new file mode 100644 index 0000000..30dc125 --- /dev/null +++ b/app/models/custom_album_color.rb @@ -0,0 +1,9 @@ +class CustomAlbumColor + include Mongoid::Document + include Mongoid::Timestamps + field :color, type: String + field :custom_album_card_background_color, type: String + field :custom_album_card_text_color, type: String + + belongs_to :custom_album +end \ No newline at end of file diff --git a/app/models/custom_album_config.rb b/app/models/custom_album_config.rb new file mode 100644 index 0000000..c6ca1fa --- /dev/null +++ b/app/models/custom_album_config.rb @@ -0,0 +1,10 @@ +class CustomAlbumConfig + include Mongoid::Document + include Mongoid::Timestamps + field :module + field :bind_model , :type => String + field :title_field , :type => String , :default => "slug_title" + field :uid_field , :type => String , :default => "uid" + field :custom_record_callback #if exists, it will call 'custom_record_callback(num)' + #where num is 1 when create bulletin, num is -1 when destroy. +end \ No newline at end of file diff --git a/app/models/custom_album_crop.rb b/app/models/custom_album_crop.rb new file mode 100644 index 0000000..ea7665d --- /dev/null +++ b/app/models/custom_album_crop.rb @@ -0,0 +1,8 @@ +class CustomAlbumCrop + include Mongoid::Document + field :crop_x, type: String + field :crop_y, type: String + field :crop_w, type: String + field :crop_h, type: String + belongs_to :custom_album_image +end \ No newline at end of file diff --git a/app/models/custom_album_image.rb b/app/models/custom_album_image.rb new file mode 100644 index 0000000..a0948a9 --- /dev/null +++ b/app/models/custom_album_image.rb @@ -0,0 +1,27 @@ +require 'net/http' +class CustomAlbumImage + include Mongoid::Document + include Mongoid::Timestamps + include OrbitTag::Taggable + mount_uploader :file, CustomGalleryUploader + field :title + field :title_translations, type: Hash, default: {} + field :description, localize: true + field :rss2_id, type: String + field :order, type: Integer, default: -1 + + # has_and_belongs_to_many :tags, :class_name => "CustomGalleryTag" + def title_translations + tmp = super || {} + if tmp == {} + tmp = I18n.available_locales.collect{|locale| [locale,self[:title]]}.to_h + end + tmp + end + def title + self.title_translations[I18n.locale] + end + belongs_to :custom_album + has_many :custom_album_crops, :autosave => true, :dependent => :destroy + accepts_nested_attributes_for :custom_album_crops, :allow_destroy => true +end \ No newline at end of file diff --git a/app/models/custom_album_setting.rb b/app/models/custom_album_setting.rb new file mode 100644 index 0000000..927cfaf --- /dev/null +++ b/app/models/custom_album_setting.rb @@ -0,0 +1,9 @@ +class CustomAlbumSetting + include Mongoid::Document + include Mongoid::Timestamps + field :limit + field :resize_gravity, type: String, default: 'center' + ResizeGravities = %w[Center NorthWest North NorthEast West East SouthWest South SouthEast] + field :custom_album_card_background_color, default: '' + field :custom_album_card_text_color, default: '#000000' +end \ No newline at end of file diff --git a/app/models/custom_album_unprocess.rb b/app/models/custom_album_unprocess.rb new file mode 100644 index 0000000..0182c71 --- /dev/null +++ b/app/models/custom_album_unprocess.rb @@ -0,0 +1,18 @@ +class CustomAlbumUnprocess + include Mongoid::Document + field :image_id + field :save_var, type: String + field :upload_success, type: Boolean + def save_var + temp = YAML.load(self[:save_var]) + temp[:tempfile] = File.open(temp[:tempfile]) + ActionDispatch::Http::UploadedFile.new(temp) + end + def save_var=(value) + temp = {:filename => value.original_filename, + :type => value.content_type, + :head => value.headers, + :tempfile => value.tempfile.path} + self[:save_var] = temp.to_yaml + end +end \ No newline at end of file diff --git a/app/models/custom_album_variable.rb b/app/models/custom_album_variable.rb new file mode 100644 index 0000000..e0240da --- /dev/null +++ b/app/models/custom_album_variable.rb @@ -0,0 +1,8 @@ +class CustomAlbumVariable + include Mongoid::Document + field :count, type: Integer + field :progress_percent, type: String + field :progress_filename, type: String + field :finish, type: Boolean + field :notalive, type: Boolean +end \ No newline at end of file diff --git a/app/uploaders/custom_gallery_uploader.rb b/app/uploaders/custom_gallery_uploader.rb new file mode 100644 index 0000000..1236986 --- /dev/null +++ b/app/uploaders/custom_gallery_uploader.rb @@ -0,0 +1,183 @@ +# encoding: utf-8 +module CarrierWave + module Uploader + module Versions + def store_dir + "uploads/#{model.class.to_s.underscore}/#{mounted_as}/#{model.id}" + end + end + end +end + +class CustomGalleryUploader < CarrierWave::Uploader::Base + # Include RMagick or ImageScience support: + # include CarrierWave::RMagick + # include CarrierWave::ImageScience + include CarrierWave::MiniMagick + # Choose what kind of storage to use for this uploader: + # storage :file + # storage :s3 + + # Override the directory where uploaded files will be stored. + # This is a sensible default for uploaders that are meant to be mounted: + def store_dir + "uploads/#{model.class.to_s.underscore}/#{mounted_as}/#{model.id}" + end + def get_org_url + if have_crop? + model.file.resized.url + else + model.file.url + end + end + def fix_exif_rotation + manipulate! do |img| + img.tap(&:auto_orient) + end + end + # Provide a default URL as a default if there hasn't been a file uploaded: + # def default_url + # "/images/fallback/" + [version_name, "default.png"].compact.join('_') + # end + + # Process files as they are uploaded: + # process :scale => [200, 300] + # + # def scale(width, height) + # # do something + # end + + # Create different versions of your uploaded files: + # version :thumb do + # process :scale => [50, 50] + # end + process :resizer + process :optimize + version :resized, :if => :have_crop? do #backup + def full_filename(for_file) + extension = File.extname(super(for_file)) + base_name = super(for_file).split('resized_').join('').chomp(extension) + base_name + '_resized'+ extension + end + end + version :crop_from_org, :if => :have_crop? do + process :crop_it + def full_filename(for_file) + super(for_file).split('crop_from_org_').join('') + end + end + version :thumb do + process :convert => 'png', :if => :transparent? + process :pad_process => [200,200] + end + version :thumb_large do + process :convert => 'png', :if => :transparent? + process :pad_process => [600,600] + end + version :theater do + process :limit_process => [1920, 1080] + end + version :mobile do + process :limit_process => [1152, 768] + end +# Add a white list of extensions which are allowed to be uploaded. +# For images you might use something like this: +# def extension_white_list +# %w(jpg jpeg gif png) +# end + +# Override the filename of the uploaded files: +# def filename +# "something.jpg" if original_filename +# end + +# def manipulate! +# raise current_path.inspect +# image = ::MiniMagick::Image.open(current_path) +# image = yield(image) +# image.write(current_path) +# ::MiniMagick::Image.open(current_path) +# rescue ::MiniMagick::Error, ::MiniMagick::Invalid => e +# raise CarrierWave::ProcessingError.new("Failed to manipulate with MiniMagick, maybe it is not an image? Original Error: #{e}") +# end + def get_w_and_h + if have_crop? + img = MiniMagick::Image.open(model.file.resized.path) + else + img = MiniMagick::Image.open(model.file.path) + end + [img[:width], img[:height]] + end + def rotate_ang(angle) + if have_crop? + img_path = model.file.resized.path + else + img_path = model.file.path + end + puts img_path + img = MiniMagick::Image.open(img_path) + img.rotate(angle) + puts img + img.write(img_path) + end + def optimize (*arg) + manipulate! do |img| + return img unless img.mime_type.match /image\/jpeg/ + img.strip + img.combine_options do |c| + c.quality "90" + c.depth "24" + c.interlace "plane" + end + img + end + end + private + def resizer + size_of_file = size.to_f / (2**20) + if size_of_file > 5 + img = MiniMagick::Image.open(path) + img_width = img[:width] + img_height = img[:height] + multiple = [img_width/Math.sqrt(size_of_file/5)/1920,img_height/Math.sqrt(size_of_file/5)/1080].max + if (multiple - multiple.to_i)>0.5 + multiple = multiple.to_i + 0.5 + else + multiple = multiple.to_i + end + resize_to_limit(multiple*1920,multiple*1080) + else + manipulate! do |img| + img + end + end + end + def limit_process(w,h) + resize_to_limit(w,h) + end + def have_crop?(*arg) + !(model.custom_album_crops.first.nil?) + end + def crop_it + crops = model.custom_album_crops.first + x=(crops.crop_x).to_i.abs.to_s + y=(crops.crop_y).to_i.abs.to_s + w=crops.crop_w.to_i + h=crops.crop_h.to_i + crop_image("#{w}x#{h}+#{x}+#{y}") + end + def crop_image(geometry) + img = MiniMagick::Image.open(model.file.resized.path) + img.crop(geometry) + img.write(model.file.crop_from_org.path) + end + def transparent?(*arg) + now_custom_album = model.custom_album + now_custom_album.custom_album_colors.first['color']=='transparent' rescue true + end + def pad_process (w,h) + now_custom_album = model.custom_album + resize_and_pad(w, h, (transparent? ? :transparent : now_custom_album.custom_album_colors.first['color']), (now_custom_album.resize_gravity rescue 'Center')) + end +end + diff --git a/app/views/.keep b/app/views/.keep new file mode 100644 index 0000000..e69de29 diff --git a/app/views/admin/custom_galleries/_custom_album.html.erb b/app/views/admin/custom_galleries/_custom_album.html.erb new file mode 100644 index 0000000..93dae6c --- /dev/null +++ b/app/views/admin/custom_galleries/_custom_album.html.erb @@ -0,0 +1,29 @@ +
    • +
      + +
      + + <% if custom_album.cover == "default" %> + <%= image_tag "custom_gallery/default.jpg" %> + <% else %> + + <% end %> +

      <%= custom_album.name %>

      +
      + +
        + +
      +
    • \ No newline at end of file diff --git a/app/views/admin/custom_galleries/_custom_albums.html.erb b/app/views/admin/custom_galleries/_custom_albums.html.erb new file mode 100644 index 0000000..0da9a6e --- /dev/null +++ b/app/views/admin/custom_galleries/_custom_albums.html.erb @@ -0,0 +1,14 @@ +<%= render :partial => "custom_album", :collection => @custom_albums %> + \ No newline at end of file diff --git a/app/views/admin/custom_galleries/_form.html.erb b/app/views/admin/custom_galleries/_form.html.erb new file mode 100644 index 0000000..db571db --- /dev/null +++ b/app/views/admin/custom_galleries/_form.html.erb @@ -0,0 +1,202 @@ +<% content_for :page_specific_css do %> + <%= stylesheet_link_tag "lib/main-forms" %> + <%= stylesheet_link_tag "lib/fileupload" %> + <%= stylesheet_link_tag "lib/main-list" %> + <%= stylesheet_link_tag "jquery.minicolors" %> +<% end %> +<% content_for :page_specific_javascript do %> + <%= javascript_include_tag "lib/bootstrap-fileupload" %> + <%= javascript_include_tag "lib/bootstrap-datetimepicker" %> + <%= javascript_include_tag "lib/datetimepicker/datetimepicker.js" %> + <%= javascript_include_tag "lib/modal-preview" %> + <%= javascript_include_tag "lib/file-type" %> + <%= javascript_include_tag "jquery.minicolors" %> +<% end %> + + +
      + +
      + + + + + + +
      + + +
      + + +
      + +
      + <%= select_category(f, @module_app) %> +
      +
      + +
      + +
      + + +
      + + <%= select_tags(f, @module_app) %> +
      +
      + + <% if @custom_album.custom_album_colors.first.nil? %> + <% @custom_album.custom_album_colors.new('color' => 'transparent') %> + <% end %> + <%= f.fields_for :custom_album_colors do |custom_album_color_form| %> +
      + +
      + + <%= custom_album_color_form.text_field :color , :class => 'input-block-level minicolors-input' %> + + + <%= t('custom_gallery.transparent') %> + +
      +
      + + <%= custom_album_color_form.text_field :custom_album_card_background_color, :class => 'input-block-level minicolors-input' %> + + + <%= t('custom_gallery.transparent') %> + +
      +
      + + <%= custom_album_color_form.text_field :custom_album_card_text_color, :class => 'input-block-level minicolors-input' %> + + + <%= t('custom_gallery.transparent') %> + +
      +
      + +
      + <%= f.select :resize_gravity, [["---#{t("default")}: #{t("custom_gallery.gravity.#{CustomAlbumSetting::ResizeGravities[0]}")}---",nil]]+CustomAlbumSetting::ResizeGravities.collect{|v| [t("custom_gallery.gravity.#{v}"),v]} %> +
      +
      +
      + <% end %> +
      +
      +
      + + +
      + + + + <% @site_in_use_locales.each_with_index do |locale, i| %> + +
      +
      + <%= f.fields_for :name_translations do |name| %> + <%= label_tag(locale, t("custom_gallery.custom_album_name"),:class=>"control-label muted") %> +
      + <%= name.text_field locale, :class => "input-block-level", :placeholder=>"#{t(:title)}",:value => (@custom_album.name_translations[locale] rescue nil) %> +
      + <% end %> +
      +
      + <%= f.fields_for :description_translations do |desc| %> + <%= label_tag(locale, t("custom_gallery.custom_album_desc"), :class=>"control-label muted") %> +
      +
      + <%= desc.text_area locale, :class => "ckeditor input-block-level", :value => (@custom_album.description_translations[locale] rescue nil)%> +
      +
      + <% end %> +
      +
      + <% end %> + +
      + +
      + +
      + <%= f.submit t("custom_gallery.save"), :class=> "btn btn-primary bt-form-save" %> + <%= link_to t('cancel'), admin_custom_galleries_path + (params[:custom_module].blank? ? '' : "/#{params[:custom_module]}#{(params[:bind_uid].blank? ? '' : ('-'+params[:bind_uid]))}"), :class=>"btn" %> + <% if params[:custom_module].present? %> + <%= f.hidden_field :custom_module, :value=> params[:custom_module] %> + <% if params[:bind_uid].present? %> + <%= f.hidden_field :bind_uid, :value=> params[:bind_uid] %> + <% end %> + <% end %> +
      +
      + \ No newline at end of file diff --git a/app/views/admin/custom_galleries/_image.html.erb b/app/views/admin/custom_galleries/_image.html.erb new file mode 100644 index 0000000..91d1c33 --- /dev/null +++ b/app/views/admin/custom_galleries/_image.html.erb @@ -0,0 +1,18 @@ +
    • + + + + <% if can_edit_or_delete?(@custom_album) %> + + + ">edit +
        +
      • ">
      • +
      • +
      • +
      + <% end %> +
      + +
      +
    • \ No newline at end of file diff --git a/app/views/admin/custom_galleries/_recreate_thumb.html.erb b/app/views/admin/custom_galleries/_recreate_thumb.html.erb new file mode 100644 index 0000000..f31c99f --- /dev/null +++ b/app/views/admin/custom_galleries/_recreate_thumb.html.erb @@ -0,0 +1,106 @@ +<%= javascript_include_tag "jquery.minicolors.js" %> +<%= stylesheet_link_tag "jquery.minicolors.css" %> + +
      + +<%= t('custom_gallery.recreate_thumb')+':' %> + + + + +<%= t('custom_gallery.transparent') %> + + + + + + + +
      + + + + + + +
      + \ No newline at end of file diff --git a/app/views/admin/custom_galleries/create.js.erb b/app/views/admin/custom_galleries/create.js.erb new file mode 100644 index 0000000..a1e7517 --- /dev/null +++ b/app/views/admin/custom_galleries/create.js.erb @@ -0,0 +1,3 @@ +var gal = new custom_galleryAPI(); +gal.loadCustomAlbums("all"); +rcom.modalWindowClose(); diff --git a/app/views/admin/custom_galleries/display_enable_modules.html.erb b/app/views/admin/custom_galleries/display_enable_modules.html.erb new file mode 100644 index 0000000..ac854f0 --- /dev/null +++ b/app/views/admin/custom_galleries/display_enable_modules.html.erb @@ -0,0 +1,74 @@ +<% if params[:custom_module].blank? %> +
      + +
      +<% else %> + <% config = @custom_album_configs.where(:module=>params[:custom_module]).first %> + <% target_model = config.bind_model.constantize %> + <% page_num = params[:page] || 1 %> + <% target_records = target_model.where(config.title_field.to_sym.nin=>[nil,""]).page(page_num).per(10) %> + <% if params[:search_title].present? + target_records = target_records.where(config.title_field.to_sym=>/#{params[:search_title].gsub(/(\[|\]|\(|\)|\.)/){|f| "\\"+f}}/) + end %> +

      <%= t("module_name.#{config.module}") %>

      +
      + +
      + + + + + + <% target_records.each do |record| %> + + <% uid = record.send(config.uid_field) %> + + + + <% end %> +
      <%= t(:title) %><%= t("custom_gallery.total_amount") %>
      + " title="<%=record.send(config.title_field)%>"><%= record.send(config.title_field) %> + + <%= CustomAlbum.where(:custom_module=>params[:custom_module],:bind_uid=>uid).count %> +
      + <%= + content_tag :div, class: "bottomnav clearfix" do + content_tag :div, paginate(target_records), class: "pagination pagination-centered" + end + %> +<% end %> + \ No newline at end of file diff --git a/app/views/admin/custom_galleries/edit.html.erb b/app/views/admin/custom_galleries/edit.html.erb new file mode 100644 index 0000000..f6301f8 --- /dev/null +++ b/app/views/admin/custom_galleries/edit.html.erb @@ -0,0 +1,3 @@ +<%= form_for @custom_album, :url => {:action => "update"}, :html => {:class => 'form-horizontal main-forms'} do |f| %> + <%= render :partial => 'form', :locals => {:f => f} %> +<% end %> diff --git a/app/views/admin/custom_galleries/excel_format.xlsx.axlsx b/app/views/admin/custom_galleries/excel_format.xlsx.axlsx new file mode 100644 index 0000000..90bfa14 --- /dev/null +++ b/app/views/admin/custom_galleries/excel_format.xlsx.axlsx @@ -0,0 +1,28 @@ +# encoding: utf-8 + +wb = xlsx_package.workbook + +wb.add_worksheet(name: @custom_album.name[0..100]) do |sheet| + + sheet.merge_cells "A1:C1" + heading = sheet.styles.add_style(:b => true, :locked => true, :alignment=>{:horizontal => :center}) + example = sheet.styles.add_style(:i => true) + row = [] + row1 = [] + row2 = [] + + row << "Import for custom_album #{@custom_album.name}" + + row1 << t("custom_gallery.img_link") + row2 << "http://www.example.com/example.jpg" + + row1 << t("custom_gallery.img_description") + "(" + t(:zh_tw) + ")" + row2 << "This is an image" + row1 << t("custom_gallery.img_description") + "(" + t(:en) + ")" + row2 << "This is an image" + + sheet.add_row row, :style => heading + sheet.add_row row1 + sheet.add_row row2, :style => example + +end \ No newline at end of file diff --git a/app/views/admin/custom_galleries/import.html.erb b/app/views/admin/custom_galleries/import.html.erb new file mode 100644 index 0000000..82a44a9 --- /dev/null +++ b/app/views/admin/custom_galleries/import.html.erb @@ -0,0 +1,36 @@ +<% content_for :page_specific_javascript do %> + +<% end %> +
      +

      Import from Excel for custom_album <%= @custom_album.name %>

      + <%= hidden_field_tag :authenticity_token, form_authenticity_token %> +
      + +
      + +
      + + Only excel file is allowed. Max 200 entries. +
      +
      +
      +
      + +
      +
      + + \ No newline at end of file diff --git a/app/views/admin/custom_galleries/index.html.erb b/app/views/admin/custom_galleries/index.html.erb new file mode 100644 index 0000000..60693db --- /dev/null +++ b/app/views/admin/custom_galleries/index.html.erb @@ -0,0 +1,87 @@ +<% if @show_script %> + <%= stylesheet_link_tag "custom_gallery" %> + <%= stylesheet_link_tag "lib/tags-groups" %> + <% content_for :page_specific_javascript do %> + <%= javascript_include_tag "lib/jquery-ui-1.10.0.custom.min" %> + <%= javascript_include_tag "jquery.masonry.min.js" %> + <%= javascript_include_tag "jquery.lite.image.resize.js" %> + <%= javascript_include_tag "custom_gallery" %> + + <% end %> + + <%= render_filter @filter_fields, "orbit_custom_gallery" %> + <% custom_config = CustomAlbumConfig.where(:module=>params[:custom_module]).first %> + <% target_model = custom_config.bind_model.constantize %> +

      <%= target_model.where(custom_config.uid_field=>params[:bind_uid]).first.send(custom_config.title_field) %>

      +
      CustomAlbums re-ordering enabled.
      + <%= render 'recreate_thumb' %> + + <%= form_tag '/admin/custom_galleries/update_custom_album_setting',remote: true,:class=>'update_custom_album_setting_form' do %> + <%= t('custom_gallery.custom_album_limit_for_one_page') %>: + <%= text_field_tag :custom_album_setting_limit, CustomAlbumSetting.first.limit,:placeholder => t('custom_gallery.blank_for_nil') %> + + <% end %> +
      + +
      +
      +
      + <% if can_edit_or_delete?(nil) %> + <%= t('custom_gallery.edit_order') %> + <% end %> + <% if @fiter_custom_albums.length > @limit_count %> + + <% end %> + "><%=t(:new_)%> +
      +
      +<% else %> + <%= render :partial => "custom_albums" %> +<% end %> \ No newline at end of file diff --git a/app/views/admin/custom_galleries/new.html.erb b/app/views/admin/custom_galleries/new.html.erb new file mode 100644 index 0000000..cae3e83 --- /dev/null +++ b/app/views/admin/custom_galleries/new.html.erb @@ -0,0 +1,5 @@ +
      +<%= form_for @custom_album, :url => {:action => "create"}, :html => {:class => 'form-horizontal main-forms'} do |f| %> + <%= render :partial => 'form', :locals => {:f => f} %> +<% end %> +
      diff --git a/app/views/admin/custom_galleries/new_images.html.erb b/app/views/admin/custom_galleries/new_images.html.erb new file mode 100644 index 0000000..cdf89ca --- /dev/null +++ b/app/views/admin/custom_galleries/new_images.html.erb @@ -0,0 +1,3 @@ +<% @newimages.each do |image| %> + <%= render :partial=>"image", :object=>image %> +<% end %> \ No newline at end of file diff --git a/app/views/admin/custom_galleries/recreate_image.html.erb b/app/views/admin/custom_galleries/recreate_image.html.erb new file mode 100644 index 0000000..8e9656c --- /dev/null +++ b/app/views/admin/custom_galleries/recreate_image.html.erb @@ -0,0 +1,39 @@ +<%= t('custom_gallery.progressbar')+':' %> +
      +
      +
      0
      +
      +
      +
      + \ No newline at end of file diff --git a/app/views/admin/custom_galleries/setting.html.erb b/app/views/admin/custom_galleries/setting.html.erb new file mode 100644 index 0000000..6c5fcd9 --- /dev/null +++ b/app/views/admin/custom_galleries/setting.html.erb @@ -0,0 +1,79 @@ +<%= javascript_include_tag "jquery.minicolors" %> +<%= stylesheet_link_tag "jquery.minicolors" %> + + +<%= form_for @custom_album_setting, url: '/admin/custom_galleries/update_custom_album_setting',:class=>'update_custom_album_setting_form',method: 'post' do |f| %> +
      + + <%= f.text_field :limit,:placeholder => t('custom_gallery.blank_for_nil') %> +
      +
      + + <%= f.select :resize_gravity, [["---#{t("default")}: #{t("custom_gallery.gravity.#{CustomAlbumSetting::ResizeGravities[0]}")}---",nil]]+CustomAlbumSetting::ResizeGravities.collect{|v| [t("custom_gallery.gravity.#{v}"),v]} %> +
      +
      + + <%= f.text_field :custom_album_card_background_color, :class => 'input-block-level minicolors-input' %> + + + <%= t('custom_gallery.transparent') %> + +
      +
      + + <%= f.text_field :custom_album_card_text_color, :class => 'input-block-level minicolors-input' %> + + + <%= t('custom_gallery.transparent') %> + +
      + + <%= f.hidden_field :id %> + <%= f.submit t('submit'),:class=>'btn btn-primary' %> +<% end %> \ No newline at end of file diff --git a/app/views/admin/custom_galleries/show.html.erb b/app/views/admin/custom_galleries/show.html.erb new file mode 100644 index 0000000..892cc61 --- /dev/null +++ b/app/views/admin/custom_galleries/show.html.erb @@ -0,0 +1,275 @@ +<%= stylesheet_link_tag "custom_gallery" %> +<%= stylesheet_link_tag "lib/tags-groups" %> + + + +
      Images re-ordering enabled.
      +
      + +
      +
      + <%= t('custom_gallery.crop_div').html_safe %> +
      + 0° +
      + + +
      + <%= t('custom_gallery.rotate_images') %> + <%= t('custom_gallery.batch_crop') %> + <%= t('custom_gallery.deselect') %> + <% if can_edit_or_delete?(@custom_album) %> + <%= t('custom_gallery.delete_photo') %> + <%= t('custom_gallery.add_tags') %> + <%= t('custom_gallery.import') %> + + <%= t('custom_gallery.edit') %> + <%= t('custom_gallery.edit_order') %> + + + <%= t('custom_gallery.add_image') %> + <% end %> +
      +
      + + +
      + + +
      + +
      +
      +
      + +
      +
      +
      + +
      +
      + <%= t('custom_gallery.drop_files_here') %> +
      + +
      + +
      +
      + +
      +
      +
      +
      + +
      + + +
      + + + + + + + +<% content_for :page_specific_javascript do %> + <%= javascript_include_tag "jquery.masonry.min.js" %> + <%= javascript_include_tag "jquery.lite.image.resize.js" %> + <%= javascript_include_tag "lib/checkbox.card" %> + <%= javascript_include_tag "file-upload/vendor/jquery.ui.widget.js" %> + <%= javascript_include_tag "file-upload/tmpl.min.js" %> + <%= javascript_include_tag "file-upload/load-image.min.js" %> + <%= javascript_include_tag "file-upload/canvas-to-blob.min.js" %> + <%= javascript_include_tag "file-upload/jquery.iframe-transport.js" %> + <%= javascript_include_tag "file-upload/jquery.fileupload.js" %> + <%= javascript_include_tag "file-upload/jquery.fileupload-fp.js" %> + <%= javascript_include_tag "file-upload/jquery.fileupload-ui.js" %> + <%= javascript_include_tag "file-upload/drop-zone.js" %> + <%= javascript_include_tag "custom_gallery" %> +<% end %> + + + + + + + diff --git a/app/views/admin/custom_galleries/upload_panel.html.erb b/app/views/admin/custom_galleries/upload_panel.html.erb new file mode 100644 index 0000000..63b7063 --- /dev/null +++ b/app/views/admin/custom_galleries/upload_panel.html.erb @@ -0,0 +1,107 @@ + + +<%= csrf_meta_tag %> +<%= javascript_include_tag "jquery-latest" %> +<%= stylesheet_link_tag "jquery-ui" %> +<%= stylesheet_link_tag "jquery.fileupload-ui.css" %> + + + +
      +
      + <%= form_for @custom_album, :url => panel_custom_gallery_back_end_upload_image_path, :html => {:class => 'clear'} do |f| %> +
      + + + + + +
      + + <% end %> +
      +
      +
      +
      +
      + + + +
      + + <%= javascript_include_tag "jquery-ui.min" %> + <%= javascript_include_tag "jquery.tmpl.min" %> + <%= javascript_include_tag "jquery.iframe-transport" %> + <%= javascript_include_tag "jquery.fileupload" %> + <%= javascript_include_tag "jquery.fileupload-ui" %> + <%= javascript_include_tag "upload" %> + + + + + diff --git a/app/views/admin/custom_galleries/upload_process.html.erb b/app/views/admin/custom_galleries/upload_process.html.erb new file mode 100644 index 0000000..8e9656c --- /dev/null +++ b/app/views/admin/custom_galleries/upload_process.html.erb @@ -0,0 +1,39 @@ +<%= t('custom_gallery.progressbar')+':' %> +
      +
      +
      0
      +
      +
      +
      + \ No newline at end of file diff --git a/app/views/admin/images/batch_crop.html.erb b/app/views/admin/images/batch_crop.html.erb new file mode 100644 index 0000000..4c3343d --- /dev/null +++ b/app/views/admin/images/batch_crop.html.erb @@ -0,0 +1,102 @@ + + + + +
      +
      + + + + + + +
      + +
      +
      + <% @img.each do |image| %> +
      + +
      + <% end %> +
      + + \ No newline at end of file diff --git a/app/views/admin/images/crop_process.html.erb b/app/views/admin/images/crop_process.html.erb new file mode 100644 index 0000000..5ddd7bf --- /dev/null +++ b/app/views/admin/images/crop_process.html.erb @@ -0,0 +1,39 @@ +<%= t('custom_gallery.progressbar')+':' %> +
      +
      +
      0
      +
      +
      +
      + \ No newline at end of file diff --git a/app/views/admin/images/edit_image.html.erb b/app/views/admin/images/edit_image.html.erb new file mode 100644 index 0000000..fb27068 --- /dev/null +++ b/app/views/admin/images/edit_image.html.erb @@ -0,0 +1,60 @@ + + + + +
      + + \ No newline at end of file diff --git a/app/views/admin/images/show.html.erb b/app/views/admin/images/show.html.erb new file mode 100644 index 0000000..7133823 --- /dev/null +++ b/app/views/admin/images/show.html.erb @@ -0,0 +1,59 @@ + +<%= stylesheet_link_tag "custom_gallery_old" %> + + + +<%# content_for :page_specific_javascript do %> + <%= javascript_include_tag "rss" %> + <%= javascript_include_tag "custom_galleryAPI" %> +<%# end %> + + + + + + + diff --git a/app/views/admin/images/upload_panel.html.erb b/app/views/admin/images/upload_panel.html.erb new file mode 100644 index 0000000..c6567cf --- /dev/null +++ b/app/views/admin/images/upload_panel.html.erb @@ -0,0 +1,111 @@ + + +<%= csrf_meta_tag %> +<%= javascript_include_tag "jquery-latest" %> +<%= stylesheet_link_tag "jquery-ui" %> +<%= stylesheet_link_tag "jquery.fileupload-ui.css" %> + + + +
      +
      +<%= form_for @custom_album, :url => panel_custom_gallery_back_end_custom_album_path(@custom_album), :html => {:class => 'clear'} do |f| %> + + +
      + + + + + +
      + + <% end %> +
      +
      +
      +
      +
      + + + +
      + + <%= javascript_include_tag "jquery-ui.min" %> + <%= javascript_include_tag "jquery.tmpl.min" %> + <%= javascript_include_tag "jquery.iframe-transport" %> + <%= javascript_include_tag "jquery.fileupload" %> + <%= javascript_include_tag "jquery.fileupload-ui" %> + <%= javascript_include_tag "upload" %> + + + + + diff --git a/app/views/custom_galleries/custom_widget_data.html.erb b/app/views/custom_galleries/custom_widget_data.html.erb new file mode 100644 index 0000000..14047bd --- /dev/null +++ b/app/views/custom_galleries/custom_widget_data.html.erb @@ -0,0 +1,39 @@ +<% active_module = @custom_data_field[:bind_module_app] rescue nil %> +<% active_uid = @custom_data_field[:bind_uid] rescue nil %> +<% active_module = @custom_configs.first.module if active_module.nil? %> +
      + +
      + <%= select_tag("#{@field_name}[custom_data_field][bind_module_app]", options_for_select(@custom_configs.map{|c| [t("module_name.#{c.module}"),c.module]},active_module),{:id=>"custom_bind_module_app"})%> +
      +
      +
      + +
      + <% @custom_configs.each do |c| %> + <% title_field = c.title_field + uid_field = c.uid_field + bind_model = c.bind_model.constantize rescue nil + %> + <% if bind_model %> +
      " data-module="<%= c.module %>"> + <%= select_tag("#{@field_name}[custom_data_field][bind_uid]", options_for_select(bind_model.where(title_field.to_sym.nin=>[nil,""]).map{|target_model| [target_model.send(title_field),target_model.send(uid_field)]},active_uid),{:id=>"custom_bind_uid"})%> +
      + <% end %> + <% end %> +
      +
      + \ No newline at end of file diff --git a/app/views/custom_galleries/index.html.erb b/app/views/custom_galleries/index.html.erb new file mode 100644 index 0000000..d2897fd --- /dev/null +++ b/app/views/custom_galleries/index.html.erb @@ -0,0 +1,2 @@ +<%= render_view %> + diff --git a/app/views/custom_galleries/show.html.erb b/app/views/custom_galleries/show.html.erb new file mode 100644 index 0000000..65c2419 --- /dev/null +++ b/app/views/custom_galleries/show.html.erb @@ -0,0 +1,144 @@ +<% + params = OrbitHelper.params + page = Page.where(url:params['url']).first + @layout_type = 0 + if page.methods.include?(:select_option_items) + @show_option_items = ModuleApp.where(key: 'custom_gallery').last.show_option_items rescue nil + page.select_option_items.each do |select_option_item| + if !(@show_option_items.nil?) && select_option_item.field_name == @show_option_items.keys.first.to_s + value = YAML.load(select_option_item.value) + tmp = value[:en] + I18n.with_locale(:en) do + if tmp == t('custom_gallery.grid_style') + @layout_type = 0 + elsif tmp == t('custom_gallery.card_style') + @layout_type = 1 + elsif tmp == t('custom_gallery.slideshow_style') + @layout_type = 2 + end + end + end + end + end + data = action_data +%> +<% if @layout_type==0 %> +<%= render_view %> +<% elsif @layout_type==1 %> + + +<% elsif @layout_type==2 %> + +<% end %> +<% OrbitHelper.render_css_in_head(["custom_theater.css"]) %> +<%= javascript_include_tag "jquery.touchSwipe.min" %> +<%= javascript_include_tag "custom_theater" %> +<% OrbitHelper.render_meta_tags([{"name" => "mobile-web-app-capable","content" => "yes"},{"name" => "apple-mobile-web-app-status-bar-style","content" => "black-translucent"}]) %> + + + \ No newline at end of file diff --git a/app/views/custom_galleries/theater.html.erb b/app/views/custom_galleries/theater.html.erb new file mode 100644 index 0000000..c76a64b --- /dev/null +++ b/app/views/custom_galleries/theater.html.erb @@ -0,0 +1,76 @@ +<% data = action_data + @images = data["images"] + @custom_album = data["custom_album"] + @image = data["image"] + @back_link = data["back_to_custom_albums"] + @wall_images = data["wall_images"] +%> + +<%= stylesheet_link_tag "custom_gallery_frontend" %> + + + +<%# content_for :page_specific_javascript do %> + <%= javascript_include_tag "custom_galleryAPI_frontend" %> + <%#= javascript_include_tag "jquery.tinyscrollbar" %> + <%= javascript_include_tag "rss" %> +<%# end %> + + + + + + + diff --git a/bin/rails b/bin/rails new file mode 100644 index 0000000..0ebd3ab --- /dev/null +++ b/bin/rails @@ -0,0 +1,16 @@ +#!/usr/bin/env ruby +# This command will automatically be run when you run "rails" with Rails 4 gems installed from the root of your application. + +ENGINE_ROOT = File.expand_path('../..', __FILE__) +ENGINE_PATH = File.expand_path('../../lib/custom_gallery/engine', __FILE__) + +# Set up gems listed in the Gemfile. +ENV['BUNDLE_GEMFILE'] ||= File.expand_path('../../Gemfile', __FILE__) +require 'bundler/setup' if File.exist?(ENV['BUNDLE_GEMFILE']) + +require "action_controller/railtie" +require "action_mailer/railtie" +require "sprockets/railtie" +require "rails/test_unit/railtie" +require "mongoid" +require 'rails/engine/commands' diff --git a/config/locales/en.yml b/config/locales/en.yml new file mode 100644 index 0000000..241c352 --- /dev/null +++ b/config/locales/en.yml @@ -0,0 +1,107 @@ +en: + module_name: + custom_gallery: Custom Gallery + custom_gallery: + total_amount: Total amount + use_module: Use Module + use_content: Use Content + inner_page_layout: Inner Page Layout + card_style: Card Style + grid_style: Grid Style + slideshow_style: Slideshow style + custom_album_card_background_color: Background Color for custom_album card + custom_album_card_text_color: Text Color for custom_album card + thumb_resize_reference: Resize reference for thumb + gravity: + Center: center + NorthWest: top-left + North: top-center + NorthEast: top-right + West: left-center + East: right-center + SouthWest: left-bottom + South: bottom-center + SouthEast: bottom-right + short-description: Short Description + custom_album_limit_for_one_page: Amount of limit for custom_album in one page + blank_for_nil: blank present no limit + load_html: Load next batch + wait_time: please wait a minute + show_desc: Show the custom_album description + not_show_desc: Don't show the custom_album description + show_original_image: Show the original picture + width: Width + height: Height + review: Review + rotate: Rotate + confirm_msg: Are you sure to rotate images + add_degree: Add 90 degree + reduce_degree: Reduce 90 degree + crop_div: "Please input the degree you want to rotate.
      (positive for clockwise)" + rotate_images: Rotate images + batch_crop: Batch crop images + use_set: Use the previously configured color + add_files: Add files + start_upload: Start upload + cancel_upload: Cancel upload + drop_files_here: Drop files here + success: Success + file_uploaded_successfully: File uploaded successfully + close_panel: Close panel + no_choose: Please select at least one before apply + edit_order: Edit Order + save_order: Save Order + add_tags: Add tags + import: Import + delete_photo: Delete Photo + delete: Delete + deselect: Deselect + back: Back + edit: Edit + add_image: Add Image + progressbar: 'Progress bar' + error: 'Recreate thumb failed, please contact service agent or try again later' + 'sure?': 'Are yoy sure to apply? it will recreate all the thumbs of you choose' + recreate_thumb: 'Frame color' + 'recreate': 'Apply' + transparent: transparent + checked: select all + unchecked: unselect all + add_custom_album: Add CustomAlbum + add_images: Add Images + all: All + new: New + custom_album: CustomAlbum + custom_album_desc: CustomAlbum Description + custom_album_name: CustomAlbum Name + custom_album_not_found: CustomAlbum Not Found + custom_album_tag: CustomAlbum Tag + back_to_custom_albums: Back to CustomAlbums + back_to_photos: Back to Photos + cate_auth: Category Authorization + chinese: Chinese + cover: Cover + del_custom_album: Delete CustomAlbum + del_custom_album?: Delete this custom_album? + delete_selected: Delete Selected + english: English + frontend: + custom_albums: Front-end custom_albums + custom_gallery: CustomGallery + categories: Category + new_category: New Category + no_description: No Decription + photo_tag: Photo Tag + pic_not_found: Picture Not Found + img_link: Image Link + img_description: Image Description + save: Save + save_changes: Save Changes + search_tags: Search Tags + select_category: Select Category + set_cover: Set as Cover + widget: + widget1: Widget1 + widget_option: + horizontal: Horizontal + vertical: Vertical \ No newline at end of file diff --git a/config/locales/zh_tw.yml b/config/locales/zh_tw.yml new file mode 100644 index 0000000..8f4f802 --- /dev/null +++ b/config/locales/zh_tw.yml @@ -0,0 +1,107 @@ +zh_tw: + module_name: + custom_gallery: 客製相簿 + custom_gallery: + total_amount: 總數 + use_module: 使用模組 + use_content: 使用內容 + inner_page_layout: 內頁頁面樣式 + card_style: 卡片樣式 + grid_style: 格子排版樣式 + slideshow_style: 輪播樣式 + custom_album_card_background_color: 相簿卡片背景顏色 + custom_album_card_text_color: 相簿卡片文字顏色 + thumb_resize_reference: 縮圖縮放參考 + gravity: + Center: 中心 + NorthWest: 左上 + North: 中心上方 + NorthEast: 右上 + West: 左側中心 + East: 右側中心 + SouthWest: 左下 + South: 中心下方 + SouthEast: 右下 + short-description: 簡短描述 + custom_album_limit_for_one_page: 一頁呈現的相簿數量 + blank_for_nil: 留白表示無限制 + load_html: 存取下一批資料 + wait_time: 請稍等 + show_desc: 顯示相簿描述 + not_show_desc: 不顯示相簿描述 + show_original_image: 顯示原始圖片 + width: 寬 + height: 高 + review: 預覽 + rotate: 旋轉 + confirm_msg: 確定要旋轉圖片嗎? + add_degree: 增加90度 + reduce_degree: 減少90度 + crop_div: "請輸入需要旋轉的角度.
      (順時針為正)" + rotate_images: 旋轉圖片 + batch_crop: 批量裁減圖片 + use_set: 使用先前已設定的顏色 + add_files: 新增檔案 + start_upload: 開始上傳 + cancel_upload: 取消上傳 + drop_files_here: 拖移檔案到此 + success: 成功 + file_uploaded_successfully: 檔案上傳成功 + close_panel: 關閉面板 + no_choose: 請至少選擇一項再按套用 + edit_order: 改變排序 + save_order: 儲存排序 + add_tags: 新增標籤 + import: 匯入 + delete_photo: 刪除圖片 + delete: 刪除 + deselect: 反選 + back: 返回 + edit: 編輯 + add_image: 新增圖片 + cancel: 關閉 + dashboard: 儀表板 + progressbar: 進度條 + error: '重新產生縮圖失敗,請聯絡客服或稍後再試' + 'sure?': '您真的确定要套用嗎? 會重新產生整個相簿的縮圖喔!' + recreate_thumb: 相框底色 + transparent: 透明 + checked: 全選 + unchecked: 全部反選 + recreate: 套用 + add_custom_album: 新增相冊 + add_images: 新增影像 + custom_album: 相冊 + custom_album_desc: 相冊描述 + custom_album_name: 相冊名稱 + custom_album_not_found: 找不到相冊 + custom_album_tag: 相冊標籤 + back_to_custom_albums: 回到相冊 + back_to_photos: 回到相片 + cate_auth: 類別授權 + chinese: 中文 + cover: 封面 + del_custom_album: 刪除相冊 + del_custom_album?: 要刪除這本相簿嗎? + delete_selected: 刪除已選取項目 + english: 英文 + frontend: + custom_albums: 相簿前台 + custom_gallery: 客製相簿 + manage_categories: 管理類別 + new_category: 新增類別 + no_description: 沒有描述 + photo_tag: 相片標籤 + pic_not_found: 找不到圖片 + img_link: 圖片連結 + img_description: 圖片描述 + save: 儲存 + save_changes: 儲存變更 + search_tags: 搜尋標籤 + select_category: 選擇類別 + set_cover: 設定為封面 + widget: + widget1: 插件1 + widget_option: + horizontal: 水平 + vertical: 垂直 \ No newline at end of file diff --git a/config/routes.rb b/config/routes.rb new file mode 100644 index 0000000..b242e4a --- /dev/null +++ b/config/routes.rb @@ -0,0 +1,49 @@ +Rails.application.routes.draw do + locales = Site.first.in_use_locales rescue I18n.available_locales + scope "(:locale)", locale: Regexp.new(locales.join("|")) do + get "/xhr/custom_galleries/theater/:id" => "custom_galleries#theater" + namespace :admin do + get "custom_galleries/get_photoData_json" => "custom_galleries#get_photoData_json" + get "custom_galleries/recreate_image" => "custom_galleries#recreate_image" + get "custom_galleries/crop_process" => "custom_images#crop_process" + post "custom_galleries/recreate_image/recreate_progress" => "custom_galleries#recreate_progress" + get "custom_galleries/recreate_image/finish_recreate" => "custom_galleries#finish_recreate" + get "custom_galleries/batch_crop" => "custom_images#batch_crop" + get "custom_galleries/new_images" => "custom_galleries#new_images" + get "custom_galleries/last_image_id" => "custom_galleries#last_image_id" + post "custom_galleries/set_cover" => "custom_galleries#set_cover" + post "custom_galleries/delete_photos" => "custom_images#delete_photos" + post "custom_galleries/update_image" => "custom_images#update_image" + post "custom_galleries/image_tagging" => "custom_images#image_tagging" + post "custom_galleries/order" => "custom_images#changeorder" + post "custom_galleries/translate" => "custom_galleries#call_translate" + post "custom_galleries/save_crop" => "custom_galleries#save_crop" + get "custom_galleries/rotate_images" => "custom_galleries#rotate_images" + get "custom_galleries/upload_process" => "custom_galleries#upload_process" + post "custom_galleries/start_upload_process" => "custom_galleries#start_upload_process" + post "custom_galleries/init_upload" => "custom_galleries#init_upload" + post "custom_galleries/get_tag" => "custom_galleries#get_tag" + post "custom_galleries/update_custom_album_setting" => "custom_galleries#update_custom_album_setting" + get "custom_galleries/setting" => "custom_galleries#setting" + resources :custom_galleries do + get "imgs" => "custom_galleries#imgs" + member do + get "import" + get "excel_format" + post "importimages" + end + collection do + get "/:custom_module-:bind_uid" => "custom_galleries#index" + get "/:custom_module-:bind_uid/new" => "custom_galleries#new" + get "/:custom_module-:bind_uid/:id/edit" => "custom_galleries#edit" + delete "/:custom_module-:bind_uid/:id/destroy" => "custom_galleries#destroy" + + get "/:custom_module" => "custom_galleries#index", constraints: {custom_module: /.{1,23}/} + end + end + resources :custom_images + post "custom_galleries/upload_image" => "custom_galleries#upload_image" + # match "image_tagging" => "custom_album_images#image_tagging" + end + end +end diff --git a/custom_gallery.gemspec b/custom_gallery.gemspec new file mode 100644 index 0000000..964fdbf --- /dev/null +++ b/custom_gallery.gemspec @@ -0,0 +1,33 @@ +$:.push File.expand_path("../lib", __FILE__) + +# Maintain your gem's version: +require "custom_gallery/version" +bundle_update_flag = ARGV[0]=='update' || ARGV[0]=='install' +if bundle_update_flag + env_pwd = ENV['PWD'] + app_path = File.expand_path(__dir__) + template_path = env_pwd + '/app/templates' + all_template = Dir.glob(template_path+'/*/') + all_template.each do |folder| + if !folder.include?('mobile') + if Dir.exist?("#{folder}modules/") + Bundler.with_clean_env{system ('cp -r '+ app_path + '/modules/ ' + folder)} + end + end + end +end +#system ('rm -r '+app_path + '/modules/') +# Describe your gem and declare its dependencies: +Gem::Specification.new do |s| + s.name = "custom_gallery" + s.version = CustomGallery::VERSION + s.authors = ["Ruling Digital Inc."] + s.email = ["orbit@rulingcom.com"] + s.homepage = "http://www.rulingcom.com" + s.summary = "Campus CustomGallery." + s.description = "Campus Galllery" + s.license = "MIT" + + s.files = Dir["{app,config,db,lib}/**/*", "MIT-LICENSE", "Rakefile", "README.rdoc"] + s.test_files = Dir["test/**/*"] +end diff --git a/lib/custom_gallery.rb b/lib/custom_gallery.rb new file mode 100644 index 0000000..68e5215 --- /dev/null +++ b/lib/custom_gallery.rb @@ -0,0 +1,4 @@ +require "custom_gallery/engine" +module CustomGallery + +end diff --git a/lib/custom_gallery/engine.rb b/lib/custom_gallery/engine.rb new file mode 100644 index 0000000..01af13e --- /dev/null +++ b/lib/custom_gallery/engine.rb @@ -0,0 +1,95 @@ +module CustomGallery + class Engine < ::Rails::Engine + initializer "custom_gallery" do + begin + translate_data = Dir["#{CustomGallery::Engine.root}/config/locales/*.yml"] .map{|yaml_file| YAML.load(File.read(yaml_file))} + data = {} + key1 = {} + value1 = {} + value2 = {} + value3 = {} + translate_data.each do |t_data| + v = t_data.values + k = t_data.keys[0] + key1[k] = v[0]['custom_gallery']['inner_page_layout'] + value1[k] = v[0]['custom_gallery']['grid_style'] + value2[k] = v[0]['custom_gallery']['card_style'] + value3[k] = v[0]['custom_gallery']['slideshow_style'] + end + data[key1] = [value1,value2,value3] + rescue => e + puts ['error in custom_gallery',e] + end + + require File.expand_path('../../../app/models/custom_album_setting', __FILE__) + if defined?(CustomAlbumSetting) + if CustomAlbumSetting.first.nil? + CustomAlbumSetting.create() + elsif CustomAlbumSetting.count > 1 + CustomAlbumSetting.all.to_a[1..-1].each do |custom_album_setting| + custom_album_setting.destroy + end + end + end + + OrbitApp.registration "CustomGallery", :type => "ModuleApp" do + module_label "custom_gallery.custom_gallery" + base_url File.expand_path File.dirname(__FILE__) + widget_methods ["widget","custom_album_widget"] + # widget_settings [] + widget_settings [{"data_count"=>30,"enable_custom_widget_data"=>true}] + models_to_cache [:custom_album,:custom_album_image] + taggable "CustomAlbum" + categorizable + authorizable + frontend_enabled + data_count 1..30 + + begin + show_option_items data + rescue => e + puts ['there_was_no_show_option_method',e] + end + side_bar do + head_label_i18n 'custom_gallery.custom_gallery', icon_class: "icons-pictures" + available_for "users" + active_for_controllers (['admin/custom_galleries','admin/images']) + head_link_path "admin_custom_galleries_path" + + context_link 'custom_gallery.all', + :link_path=>"admin_custom_galleries_path" , + :priority=>1, + :active_for_action=>{'admin/custom_galleries'=>"index"}, + :available_for => 'users' + + # context_link 'custom_gallery.new', + # :link_path=>"new_admin_custom_gallery_path" , + # :priority=>2, + # :active_for_action=>{'admin/custom_galleries'=>"new"}, + # :available_for => 'sub_managers' + + context_link 'categories', + :link_path=>"admin_module_app_categories_path" , + :link_arg=>"{:module_app_id=>ModuleApp.find_by(:key=>'custom_gallery').id}", + :priority=>3, + :active_for_action=>{'admin/custom_galleries'=>'categories'}, + :active_for_category => 'CustomGallery', + :available_for => 'managers' + + context_link 'tags', + :link_path=>"admin_module_app_tags_path" , + :link_arg=>"{:module_app_id=>ModuleApp.find_by(:key=>'custom_gallery').id}", + :priority=>4, + :active_for_action=>{'admin/custom_galleries'=>'tags'}, + :active_for_tag => 'CustomGallery', + :available_for => 'managers' + context_link 'setting', + :link_path=>"admin_custom_galleries_setting_path" , + :priority=>5, + :active_for_action=>{'admin/custom_galleries'=>'setting'}, + :available_for => 'managers' + end + end + end + end +end diff --git a/lib/custom_gallery/version.rb b/lib/custom_gallery/version.rb new file mode 100644 index 0000000..72d12b3 --- /dev/null +++ b/lib/custom_gallery/version.rb @@ -0,0 +1,3 @@ +module CustomGallery + VERSION = "0.0.1" +end diff --git a/lib/tasks/custom_gallery_tasks.rake b/lib/tasks/custom_gallery_tasks.rake new file mode 100644 index 0000000..02194ed --- /dev/null +++ b/lib/tasks/custom_gallery_tasks.rake @@ -0,0 +1,4 @@ +# desc "Explaining what the task does" +# task :custom_gallery do +# # Task goes here +# end diff --git a/modules/custom_gallery/_custom_gallery_widget1.html.erb b/modules/custom_gallery/_custom_gallery_widget1.html.erb new file mode 100644 index 0000000..8c8ff6d --- /dev/null +++ b/modules/custom_gallery/_custom_gallery_widget1.html.erb @@ -0,0 +1,30 @@ + diff --git a/modules/custom_gallery/_custom_gallery_widget2.html.erb b/modules/custom_gallery/_custom_gallery_widget2.html.erb new file mode 100644 index 0000000..721de0e --- /dev/null +++ b/modules/custom_gallery/_custom_gallery_widget2.html.erb @@ -0,0 +1,20 @@ + \ No newline at end of file diff --git a/modules/custom_gallery/_custom_gallery_widget3.html.erb b/modules/custom_gallery/_custom_gallery_widget3.html.erb new file mode 100644 index 0000000..0a5dc2e --- /dev/null +++ b/modules/custom_gallery/_custom_gallery_widget3.html.erb @@ -0,0 +1,31 @@ + diff --git a/modules/custom_gallery/_custom_gallery_widget4.html.erb b/modules/custom_gallery/_custom_gallery_widget4.html.erb new file mode 100644 index 0000000..cfd3241 --- /dev/null +++ b/modules/custom_gallery/_custom_gallery_widget4.html.erb @@ -0,0 +1,39 @@ + \ No newline at end of file diff --git a/modules/custom_gallery/_custom_gallery_widget5.html.erb b/modules/custom_gallery/_custom_gallery_widget5.html.erb new file mode 100644 index 0000000..7570c11 --- /dev/null +++ b/modules/custom_gallery/_custom_gallery_widget5.html.erb @@ -0,0 +1,73 @@ + + + + \ No newline at end of file diff --git a/modules/custom_gallery/custom_gallery_index1.html.erb b/modules/custom_gallery/custom_gallery_index1.html.erb new file mode 100644 index 0000000..4531ca1 --- /dev/null +++ b/modules/custom_gallery/custom_gallery_index1.html.erb @@ -0,0 +1,21 @@ + +{{pagination_goes_here}} diff --git a/modules/custom_gallery/custom_gallery_index2.html.erb b/modules/custom_gallery/custom_gallery_index2.html.erb new file mode 100644 index 0000000..dceb6f4 --- /dev/null +++ b/modules/custom_gallery/custom_gallery_index2.html.erb @@ -0,0 +1,21 @@ + +{{pagination_goes_here}} diff --git a/modules/custom_gallery/custom_gallery_index3.html.erb b/modules/custom_gallery/custom_gallery_index3.html.erb new file mode 100644 index 0000000..fb8f821 --- /dev/null +++ b/modules/custom_gallery/custom_gallery_index3.html.erb @@ -0,0 +1,20 @@ + +{{pagination_goes_here}} diff --git a/modules/custom_gallery/custom_gallery_index4.html.erb b/modules/custom_gallery/custom_gallery_index4.html.erb new file mode 100644 index 0000000..8e69c37 --- /dev/null +++ b/modules/custom_gallery/custom_gallery_index4.html.erb @@ -0,0 +1,20 @@ + +{{pagination_goes_here}} diff --git a/modules/custom_gallery/custom_gallery_index5.html.erb b/modules/custom_gallery/custom_gallery_index5.html.erb new file mode 100644 index 0000000..4a5a7a1 --- /dev/null +++ b/modules/custom_gallery/custom_gallery_index5.html.erb @@ -0,0 +1,32 @@ + +{{pagination_goes_here}} diff --git a/modules/custom_gallery/info.json b/modules/custom_gallery/info.json new file mode 100644 index 0000000..6eec99f --- /dev/null +++ b/modules/custom_gallery/info.json @@ -0,0 +1,86 @@ +{ + "frontend": [ + { + "filename" : "custom_gallery_index1", + "name" : { + "zh_tw" : "1. 縮圖 ( 相本圖片, 相本說明, 分頁導覽 )", + "en" : "1. Thumbnail ( custom_gallery thumbnail, custom_gallery description, page navigation )" + }, + "thumbnail" : "thumb.png" + }, + { + "filename" : "custom_gallery_index2", + "name" : { + "zh_tw" : "2. 條列 ( 相本圖片, 相本說明, 分頁導覽 )", + "en" : "2. Thumbnail ( custom_gallery thumbnail, custom_gallery description, page navigation )" + }, + "thumbnail" : "thumb.png" + }, + { + "filename" : "custom_gallery_index3", + "name" : { + "zh_tw" : "3. 縮圖 ( 相本圖片, 分頁導覽 )", + "en" : "3. Thumbnail ( custom_gallery thumbnail, page navigation )" + }, + "thumbnail" : "thumb.png" + }, + { + "filename" : "custom_gallery_index4", + "name" : { + "zh_tw" : "4. 條列 ( 相本圖片, 分頁導覽 )", + "en" : "4. Thumbnail ( custom_gallery thumbnail, page navigation )" + }, + "thumbnail" : "thumb.png" + }, + { + "filename" : "custom_gallery_index5", + "name" : { + "zh_tw" : "5. 卡片", + "en" : "5. Card" + }, + "thumbnail" : "thumb.png" + } + ], + "widgets" : [ + { + "filename" : "custom_gallery_widget1", + "name" : { + "zh_tw" : "1. 跑馬燈 ( 模組標題, 圖片 )", + "en" : "1. Carousel Effect (widget-title, image)" + }, + "thumbnail" : "thumb.png" + }, + { + "filename" : "custom_gallery_widget2", + "name" : { + "zh_tw" : "2. 相本排版 ( 模組標題, 圖片 )", + "en" : "2. Thumbnail (widget-title, image)" + }, + "thumbnail" : "thumb.png" + }, + { + "filename" : "custom_gallery_widget3", + "name" : { + "zh_tw" : "3. 單本相簿跑馬燈 ( 圖片 )", + "en" : "3. Single Picture With Carousel Effect (image)" + }, + "thumbnail" : "thumb.png" + }, + { + "filename" : "custom_gallery_widget4", + "name" : { + "zh_tw" : "4. 卡片", + "en" : "4. Card" + }, + "thumbnail" : "thumb.png" + }, + { + "filename" : "custom_gallery_widget5", + "name" : { + "zh_tw" : "5. 投影片式輪播", + "en" : "5. Slide" + }, + "thumbnail" : "thumb.png" + } + ] +} \ No newline at end of file diff --git a/modules/custom_gallery/show.html.erb b/modules/custom_gallery/show.html.erb new file mode 100644 index 0000000..17c6d27 --- /dev/null +++ b/modules/custom_gallery/show.html.erb @@ -0,0 +1,18 @@ + \ No newline at end of file diff --git a/modules/custom_gallery/thumbs/thumb.png b/modules/custom_gallery/thumbs/thumb.png new file mode 100644 index 0000000..266af56 Binary files /dev/null and b/modules/custom_gallery/thumbs/thumb.png differ diff --git a/test/controllers/admin/custom_galleries_controller_test.rb b/test/controllers/admin/custom_galleries_controller_test.rb new file mode 100644 index 0000000..8da6e84 --- /dev/null +++ b/test/controllers/admin/custom_galleries_controller_test.rb @@ -0,0 +1,9 @@ +require 'test_helper' + +class Admin::CustomGalleriesControllerTest < ActionController::TestCase + test "should get index" do + get :index + assert_response :success + end + +end diff --git a/test/custom_gallery_test.rb b/test/custom_gallery_test.rb new file mode 100644 index 0000000..2d2f7f1 --- /dev/null +++ b/test/custom_gallery_test.rb @@ -0,0 +1,7 @@ +require 'test_helper' + +class CustomGalleryTest < ActiveSupport::TestCase + test "truth" do + assert_kind_of Module, CustomGallery + end +end diff --git a/test/dummy/README.rdoc b/test/dummy/README.rdoc new file mode 100644 index 0000000..dd4e97e --- /dev/null +++ b/test/dummy/README.rdoc @@ -0,0 +1,28 @@ +== README + +This README would normally document whatever steps are necessary to get the +application up and running. + +Things you may want to cover: + +* Ruby version + +* System dependencies + +* Configuration + +* Database creation + +* Database initialization + +* How to run the test suite + +* Services (job queues, cache servers, search engines, etc.) + +* Deployment instructions + +* ... + + +Please feel free to use a different markup language if you do not plan to run +rake doc:app. diff --git a/test/dummy/Rakefile b/test/dummy/Rakefile new file mode 100644 index 0000000..ba6b733 --- /dev/null +++ b/test/dummy/Rakefile @@ -0,0 +1,6 @@ +# Add your own tasks in files placed in lib/tasks ending in .rake, +# for example lib/tasks/capistrano.rake, and they will automatically be available to Rake. + +require File.expand_path('../config/application', __FILE__) + +Rails.application.load_tasks diff --git a/test/dummy/app/assets/images/.keep b/test/dummy/app/assets/images/.keep new file mode 100644 index 0000000..e69de29 diff --git a/test/dummy/app/assets/javascripts/application.js b/test/dummy/app/assets/javascripts/application.js new file mode 100644 index 0000000..5bc2e1c --- /dev/null +++ b/test/dummy/app/assets/javascripts/application.js @@ -0,0 +1,13 @@ +// This is a manifest file that'll be compiled into application.js, which will include all the files +// listed below. +// +// Any JavaScript/Coffee file within this directory, lib/assets/javascripts, vendor/assets/javascripts, +// or vendor/assets/javascripts of plugins, if any, can be referenced here using a relative path. +// +// It's not advisable to add code directly here, but if you do, it'll appear at the bottom of the +// compiled file. +// +// Read Sprockets README (https://github.com/sstephenson/sprockets#sprockets-directives) for details +// about supported directives. +// +//= require_tree . diff --git a/test/dummy/app/assets/stylesheets/application.css b/test/dummy/app/assets/stylesheets/application.css new file mode 100644 index 0000000..a443db3 --- /dev/null +++ b/test/dummy/app/assets/stylesheets/application.css @@ -0,0 +1,15 @@ +/* + * This is a manifest file that'll be compiled into application.css, which will include all the files + * listed below. + * + * Any CSS and SCSS file within this directory, lib/assets/stylesheets, vendor/assets/stylesheets, + * or vendor/assets/stylesheets of plugins, if any, can be referenced here using a relative path. + * + * You're free to add application-wide styles to this file and they'll appear at the bottom of the + * compiled file so the styles you add here take precedence over styles defined in any styles + * defined in the other CSS/SCSS files in this directory. It is generally better to create a new + * file per style scope. + * + *= require_tree . + *= require_self + */ diff --git a/test/dummy/app/controllers/application_controller.rb b/test/dummy/app/controllers/application_controller.rb new file mode 100644 index 0000000..d83690e --- /dev/null +++ b/test/dummy/app/controllers/application_controller.rb @@ -0,0 +1,5 @@ +class ApplicationController < ActionController::Base + # Prevent CSRF attacks by raising an exception. + # For APIs, you may want to use :null_session instead. + protect_from_forgery with: :exception +end diff --git a/test/dummy/app/controllers/concerns/.keep b/test/dummy/app/controllers/concerns/.keep new file mode 100644 index 0000000..e69de29 diff --git a/test/dummy/app/helpers/application_helper.rb b/test/dummy/app/helpers/application_helper.rb new file mode 100644 index 0000000..de6be79 --- /dev/null +++ b/test/dummy/app/helpers/application_helper.rb @@ -0,0 +1,2 @@ +module ApplicationHelper +end diff --git a/test/dummy/app/mailers/.keep b/test/dummy/app/mailers/.keep new file mode 100644 index 0000000..e69de29 diff --git a/test/dummy/app/models/.keep b/test/dummy/app/models/.keep new file mode 100644 index 0000000..e69de29 diff --git a/test/dummy/app/models/concerns/.keep b/test/dummy/app/models/concerns/.keep new file mode 100644 index 0000000..e69de29 diff --git a/test/dummy/app/views/layouts/application.html.erb b/test/dummy/app/views/layouts/application.html.erb new file mode 100644 index 0000000..593a778 --- /dev/null +++ b/test/dummy/app/views/layouts/application.html.erb @@ -0,0 +1,14 @@ + + + + Dummy + <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track' => true %> + <%= javascript_include_tag 'application', 'data-turbolinks-track' => true %> + <%= csrf_meta_tags %> + + + +<%= yield %> + + + diff --git a/test/dummy/bin/bundle b/test/dummy/bin/bundle new file mode 100644 index 0000000..66e9889 --- /dev/null +++ b/test/dummy/bin/bundle @@ -0,0 +1,3 @@ +#!/usr/bin/env ruby +ENV['BUNDLE_GEMFILE'] ||= File.expand_path('../../Gemfile', __FILE__) +load Gem.bin_path('bundler', 'bundle') diff --git a/test/dummy/bin/rails b/test/dummy/bin/rails new file mode 100644 index 0000000..728cd85 --- /dev/null +++ b/test/dummy/bin/rails @@ -0,0 +1,4 @@ +#!/usr/bin/env ruby +APP_PATH = File.expand_path('../../config/application', __FILE__) +require_relative '../config/boot' +require 'rails/commands' diff --git a/test/dummy/bin/rake b/test/dummy/bin/rake new file mode 100644 index 0000000..1724048 --- /dev/null +++ b/test/dummy/bin/rake @@ -0,0 +1,4 @@ +#!/usr/bin/env ruby +require_relative '../config/boot' +require 'rake' +Rake.application.run diff --git a/test/dummy/config.ru b/test/dummy/config.ru new file mode 100644 index 0000000..5bc2a61 --- /dev/null +++ b/test/dummy/config.ru @@ -0,0 +1,4 @@ +# This file is used by Rack-based servers to start the application. + +require ::File.expand_path('../config/environment', __FILE__) +run Rails.application diff --git a/test/dummy/config/application.rb b/test/dummy/config/application.rb new file mode 100644 index 0000000..e56fcad --- /dev/null +++ b/test/dummy/config/application.rb @@ -0,0 +1,29 @@ +require File.expand_path('../boot', __FILE__) + +# Pick the frameworks you want: +# require "active_record/railtie" +require "action_controller/railtie" +require "action_mailer/railtie" +require "action_view/railtie" +require "sprockets/railtie" +require "rails/test_unit/railtie" + +Bundler.require(*Rails.groups) +require "custom_gallery" + +module Dummy + class Application < Rails::Application + # Settings in config/environments/* take precedence over those specified here. + # Application configuration should go into files in config/initializers + # -- all .rb files in that directory are automatically loaded. + + # Set Time.zone default to the specified zone and make Active Record auto-convert to this zone. + # Run "rake -D time" for a list of tasks for finding time zone names. Default is UTC. + # config.time_zone = 'Central Time (US & Canada)' + + # The default locale is :en and all translations from config/locales/*.rb,yml are auto loaded. + # config.i18n.load_path += Dir[Rails.root.join('my', 'locales', '*.{rb,yml}').to_s] + # config.i18n.default_locale = :de + end +end + diff --git a/test/dummy/config/boot.rb b/test/dummy/config/boot.rb new file mode 100644 index 0000000..6266cfc --- /dev/null +++ b/test/dummy/config/boot.rb @@ -0,0 +1,5 @@ +# Set up gems listed in the Gemfile. +ENV['BUNDLE_GEMFILE'] ||= File.expand_path('../../../../Gemfile', __FILE__) + +require 'bundler/setup' if File.exist?(ENV['BUNDLE_GEMFILE']) +$LOAD_PATH.unshift File.expand_path('../../../../lib', __FILE__) diff --git a/test/dummy/config/environment.rb b/test/dummy/config/environment.rb new file mode 100644 index 0000000..ee8d90d --- /dev/null +++ b/test/dummy/config/environment.rb @@ -0,0 +1,5 @@ +# Load the Rails application. +require File.expand_path('../application', __FILE__) + +# Initialize the Rails application. +Rails.application.initialize! diff --git a/test/dummy/config/environments/development.rb b/test/dummy/config/environments/development.rb new file mode 100644 index 0000000..a384d95 --- /dev/null +++ b/test/dummy/config/environments/development.rb @@ -0,0 +1,34 @@ +Rails.application.configure do + # Settings specified here will take precedence over those in config/application.rb. + + # In the development environment your application's code is reloaded on + # every request. This slows down response time but is perfect for development + # since you don't have to restart the web server when you make code changes. + config.cache_classes = false + + # Do not eager load code on boot. + config.eager_load = false + + # Show full error reports and disable caching. + config.consider_all_requests_local = true + config.action_controller.perform_caching = false + + # Don't care if the mailer can't send. + config.action_mailer.raise_delivery_errors = false + + # Print deprecation notices to the Rails logger. + config.active_support.deprecation = :log + + # Debug mode disables concatenation and preprocessing of assets. + # This option may cause significant delays in view rendering with a large + # number of complex assets. + config.assets.debug = true + + # Adds additional error checking when serving assets at runtime. + # Checks for improperly declared sprockets dependencies. + # Raises helpful error messages. + config.assets.raise_runtime_errors = true + + # Raises error for missing translations + # config.action_view.raise_on_missing_translations = true +end diff --git a/test/dummy/config/environments/production.rb b/test/dummy/config/environments/production.rb new file mode 100644 index 0000000..4f67ce3 --- /dev/null +++ b/test/dummy/config/environments/production.rb @@ -0,0 +1,80 @@ +Rails.application.configure do + # Settings specified here will take precedence over those in config/application.rb. + + # Code is not reloaded between requests. + config.cache_classes = true + + # Eager load code on boot. This eager loads most of Rails and + # your application in memory, allowing both threaded web servers + # and those relying on copy on write to perform better. + # Rake tasks automatically ignore this option for performance. + config.eager_load = true + + # Full error reports are disabled and caching is turned on. + config.consider_all_requests_local = false + config.action_controller.perform_caching = true + + # Enable Rack::Cache to put a simple HTTP cache in front of your application + # Add `rack-cache` to your Gemfile before enabling this. + # For large-scale production use, consider using a caching reverse proxy like nginx, varnish or squid. + # config.action_dispatch.rack_cache = true + + # Disable Rails's static asset server (Apache or nginx will already do this). + config.serve_static_assets = false + + # Compress JavaScripts and CSS. + config.assets.js_compressor = :uglifier + # config.assets.css_compressor = :sass + + # Do not fallback to assets pipeline if a precompiled asset is missed. + config.assets.compile = false + + # Generate digests for assets URLs. + config.assets.digest = true + + # Version of your assets, change this if you want to expire all your assets. + config.assets.version = '1.0' + + # Specifies the header that your server uses for sending files. + # config.action_dispatch.x_sendfile_header = "X-Sendfile" # for apache + # config.action_dispatch.x_sendfile_header = 'X-Accel-Redirect' # for nginx + + # Force all access to the app over SSL, use Strict-Transport-Security, and use secure cookies. + # config.force_ssl = true + + # Set to :debug to see everything in the log. + config.log_level = :info + + # Prepend all log lines with the following tags. + # config.log_tags = [ :subdomain, :uuid ] + + # Use a different logger for distributed setups. + # config.logger = ActiveSupport::TaggedLogging.new(SyslogLogger.new) + + # Use a different cache store in production. + # config.cache_store = :mem_cache_store + + # Enable serving of images, stylesheets, and JavaScripts from an asset server. + # config.action_controller.asset_host = "http://assets.example.com" + + # Precompile additional assets. + # application.js, application.css, and all non-JS/CSS in app/assets folder are already added. + # config.assets.precompile += %w( search.js ) + + # Ignore bad email addresses and do not raise email delivery errors. + # Set this to true and configure the email server for immediate delivery to raise delivery errors. + # config.action_mailer.raise_delivery_errors = false + + # Enable locale fallbacks for I18n (makes lookups for any locale fall back to + # the I18n.default_locale when a translation cannot be found). + config.i18n.fallbacks = true + + # Send deprecation notices to registered listeners. + config.active_support.deprecation = :notify + + # Disable automatic flushing of the log to improve performance. + # config.autoflush_log = false + + # Use default logging formatter so that PID and timestamp are not suppressed. + config.log_formatter = ::Logger::Formatter.new +end diff --git a/test/dummy/config/environments/test.rb b/test/dummy/config/environments/test.rb new file mode 100644 index 0000000..053f5b6 --- /dev/null +++ b/test/dummy/config/environments/test.rb @@ -0,0 +1,39 @@ +Rails.application.configure do + # Settings specified here will take precedence over those in config/application.rb. + + # The test environment is used exclusively to run your application's + # test suite. You never need to work with it otherwise. Remember that + # your test database is "scratch space" for the test suite and is wiped + # and recreated between test runs. Don't rely on the data there! + config.cache_classes = true + + # Do not eager load code on boot. This avoids loading your whole application + # just for the purpose of running a single test. If you are using a tool that + # preloads Rails for running tests, you may have to set it to true. + config.eager_load = false + + # Configure static asset server for tests with Cache-Control for performance. + config.serve_static_assets = true + config.static_cache_control = 'public, max-age=3600' + + # Show full error reports and disable caching. + config.consider_all_requests_local = true + config.action_controller.perform_caching = false + + # Raise exceptions instead of rendering exception templates. + config.action_dispatch.show_exceptions = false + + # Disable request forgery protection in test environment. + config.action_controller.allow_forgery_protection = false + + # Tell Action Mailer not to deliver emails to the real world. + # The :test delivery method accumulates sent emails in the + # ActionMailer::Base.deliveries array. + config.action_mailer.delivery_method = :test + + # Print deprecation notices to the stderr. + config.active_support.deprecation = :stderr + + # Raises error for missing translations + # config.action_view.raise_on_missing_translations = true +end diff --git a/test/dummy/config/initializers/backtrace_silencers.rb b/test/dummy/config/initializers/backtrace_silencers.rb new file mode 100644 index 0000000..59385cd --- /dev/null +++ b/test/dummy/config/initializers/backtrace_silencers.rb @@ -0,0 +1,7 @@ +# Be sure to restart your server when you modify this file. + +# You can add backtrace silencers for libraries that you're using but don't wish to see in your backtraces. +# Rails.backtrace_cleaner.add_silencer { |line| line =~ /my_noisy_library/ } + +# You can also remove all the silencers if you're trying to debug a problem that might stem from framework code. +# Rails.backtrace_cleaner.remove_silencers! diff --git a/test/dummy/config/initializers/cookies_serializer.rb b/test/dummy/config/initializers/cookies_serializer.rb new file mode 100644 index 0000000..7a06a89 --- /dev/null +++ b/test/dummy/config/initializers/cookies_serializer.rb @@ -0,0 +1,3 @@ +# Be sure to restart your server when you modify this file. + +Rails.application.config.action_dispatch.cookies_serializer = :json \ No newline at end of file diff --git a/test/dummy/config/initializers/filter_parameter_logging.rb b/test/dummy/config/initializers/filter_parameter_logging.rb new file mode 100644 index 0000000..4a994e1 --- /dev/null +++ b/test/dummy/config/initializers/filter_parameter_logging.rb @@ -0,0 +1,4 @@ +# Be sure to restart your server when you modify this file. + +# Configure sensitive parameters which will be filtered from the log file. +Rails.application.config.filter_parameters += [:password] diff --git a/test/dummy/config/initializers/inflections.rb b/test/dummy/config/initializers/inflections.rb new file mode 100644 index 0000000..ac033bf --- /dev/null +++ b/test/dummy/config/initializers/inflections.rb @@ -0,0 +1,16 @@ +# Be sure to restart your server when you modify this file. + +# Add new inflection rules using the following format. Inflections +# are locale specific, and you may define rules for as many different +# locales as you wish. All of these examples are active by default: +# ActiveSupport::Inflector.inflections(:en) do |inflect| +# inflect.plural /^(ox)$/i, '\1en' +# inflect.singular /^(ox)en/i, '\1' +# inflect.irregular 'person', 'people' +# inflect.uncountable %w( fish sheep ) +# end + +# These inflection rules are supported but not enabled by default: +# ActiveSupport::Inflector.inflections(:en) do |inflect| +# inflect.acronym 'RESTful' +# end diff --git a/test/dummy/config/initializers/mime_types.rb b/test/dummy/config/initializers/mime_types.rb new file mode 100644 index 0000000..dc18996 --- /dev/null +++ b/test/dummy/config/initializers/mime_types.rb @@ -0,0 +1,4 @@ +# Be sure to restart your server when you modify this file. + +# Add new mime types for use in respond_to blocks: +# Mime::Type.register "text/richtext", :rtf diff --git a/test/dummy/config/initializers/session_store.rb b/test/dummy/config/initializers/session_store.rb new file mode 100644 index 0000000..e766b67 --- /dev/null +++ b/test/dummy/config/initializers/session_store.rb @@ -0,0 +1,3 @@ +# Be sure to restart your server when you modify this file. + +Rails.application.config.session_store :cookie_store, key: '_dummy_session' diff --git a/test/dummy/config/initializers/wrap_parameters.rb b/test/dummy/config/initializers/wrap_parameters.rb new file mode 100644 index 0000000..b81ea74 --- /dev/null +++ b/test/dummy/config/initializers/wrap_parameters.rb @@ -0,0 +1,9 @@ +# Be sure to restart your server when you modify this file. + +# This file contains settings for ActionController::ParamsWrapper which +# is enabled by default. + +# Enable parameter wrapping for JSON. You can disable this by setting :format to an empty array. +ActiveSupport.on_load(:action_controller) do + wrap_parameters format: [:json] if respond_to?(:wrap_parameters) +end diff --git a/test/dummy/config/locales/en.yml b/test/dummy/config/locales/en.yml new file mode 100644 index 0000000..0653957 --- /dev/null +++ b/test/dummy/config/locales/en.yml @@ -0,0 +1,23 @@ +# Files in the config/locales directory are used for internationalization +# and are automatically loaded by Rails. If you want to use locales other +# than English, add the necessary files in this directory. +# +# To use the locales, use `I18n.t`: +# +# I18n.t 'hello' +# +# In views, this is aliased to just `t`: +# +# <%= t('hello') %> +# +# To use a different locale, set it with `I18n.locale`: +# +# I18n.locale = :es +# +# This would use the information in config/locales/es.yml. +# +# To learn more, please read the Rails Internationalization guide +# available at http://guides.rubyonrails.org/i18n.html. + +en: + hello: "Hello world" diff --git a/test/dummy/config/routes.rb b/test/dummy/config/routes.rb new file mode 100644 index 0000000..3f66539 --- /dev/null +++ b/test/dummy/config/routes.rb @@ -0,0 +1,56 @@ +Rails.application.routes.draw do + # The priority is based upon order of creation: first created -> highest priority. + # See how all your routes lay out with "rake routes". + + # You can have the root of your site routed with "root" + # root 'welcome#index' + + # Example of regular route: + # get 'products/:id' => 'catalog#view' + + # Example of named route that can be invoked with purchase_url(id: product.id) + # get 'products/:id/purchase' => 'catalog#purchase', as: :purchase + + # Example resource route (maps HTTP verbs to controller actions automatically): + # resources :products + + # Example resource route with options: + # resources :products do + # member do + # get 'short' + # post 'toggle' + # end + # + # collection do + # get 'sold' + # end + # end + + # Example resource route with sub-resources: + # resources :products do + # resources :comments, :sales + # resource :seller + # end + + # Example resource route with more complex sub-resources: + # resources :products do + # resources :comments + # resources :sales do + # get 'recent', on: :collection + # end + # end + + # Example resource route with concerns: + # concern :toggleable do + # post 'toggle' + # end + # resources :posts, concerns: :toggleable + # resources :photos, concerns: :toggleable + + # Example resource route within a namespace: + # namespace :admin do + # # Directs /admin/products/* to Admin::ProductsController + # # (app/controllers/admin/products_controller.rb) + # resources :products + # end +end diff --git a/test/dummy/config/secrets.yml b/test/dummy/config/secrets.yml new file mode 100644 index 0000000..71627a1 --- /dev/null +++ b/test/dummy/config/secrets.yml @@ -0,0 +1,22 @@ +# Be sure to restart your server when you modify this file. + +# Your secret key is used for verifying the integrity of signed cookies. +# If you change this key, all old signed cookies will become invalid! + +# Make sure the secret is at least 30 characters and all random, +# no regular words or you'll be exposed to dictionary attacks. +# You can use `rake secret` to generate a secure secret key. + +# Make sure the secrets in this file are kept private +# if you're sharing your code publicly. + +development: + secret_key_base: ff4471524b4489ec0613567f06096c46920513dfcbf29b1a79ad705512cc0272a0aa3219cb163e29e1ad39a6b537f811700834b1924c7b453c8932c9d7bf3e85 + +test: + secret_key_base: 58df89e57dbb1fa1252eed82b37d078fd9c0d1725290bf7201fcf37fc0fad59a616d294cbaad869cf132b4e08b8fd5e01f05dfe4b7fabcc5e8c6fd56fe5b808b + +# Do not keep production secrets in the repository, +# instead read values from the environment. +production: + secret_key_base: <%= ENV["SECRET_KEY_BASE"] %> diff --git a/test/dummy/lib/assets/.keep b/test/dummy/lib/assets/.keep new file mode 100644 index 0000000..e69de29 diff --git a/test/dummy/log/.keep b/test/dummy/log/.keep new file mode 100644 index 0000000..e69de29 diff --git a/test/dummy/public/404.html b/test/dummy/public/404.html new file mode 100644 index 0000000..b612547 --- /dev/null +++ b/test/dummy/public/404.html @@ -0,0 +1,67 @@ + + + + The page you were looking for doesn't exist (404) + + + + + + +
      +
      +

      The page you were looking for doesn't exist.

      +

      You may have mistyped the address or the page may have moved.

      +
      +

      If you are the application owner check the logs for more information.

      +
      + + diff --git a/test/dummy/public/422.html b/test/dummy/public/422.html new file mode 100644 index 0000000..a21f82b --- /dev/null +++ b/test/dummy/public/422.html @@ -0,0 +1,67 @@ + + + + The change you wanted was rejected (422) + + + + + + +
      +
      +

      The change you wanted was rejected.

      +

      Maybe you tried to change something you didn't have access to.

      +
      +

      If you are the application owner check the logs for more information.

      +
      + + diff --git a/test/dummy/public/500.html b/test/dummy/public/500.html new file mode 100644 index 0000000..061abc5 --- /dev/null +++ b/test/dummy/public/500.html @@ -0,0 +1,66 @@ + + + + We're sorry, but something went wrong (500) + + + + + + +
      +
      +

      We're sorry, but something went wrong.

      +
      +

      If you are the application owner check the logs for more information.

      +
      + + diff --git a/test/dummy/public/favicon.ico b/test/dummy/public/favicon.ico new file mode 100644 index 0000000..e69de29 diff --git a/test/helpers/admin/custom_galleries_helper_test.rb b/test/helpers/admin/custom_galleries_helper_test.rb new file mode 100644 index 0000000..8c119ed --- /dev/null +++ b/test/helpers/admin/custom_galleries_helper_test.rb @@ -0,0 +1,4 @@ +require 'test_helper' + +class Admin::CustomGalleriesHelperTest < ActionView::TestCase +end diff --git a/test/integration/navigation_test.rb b/test/integration/navigation_test.rb new file mode 100644 index 0000000..eec8c0e --- /dev/null +++ b/test/integration/navigation_test.rb @@ -0,0 +1,9 @@ +require 'test_helper' + +class NavigationTest < ActionDispatch::IntegrationTest + + # test "the truth" do + # assert true + # end +end + diff --git a/test/test_helper.rb b/test/test_helper.rb new file mode 100644 index 0000000..1e26a31 --- /dev/null +++ b/test/test_helper.rb @@ -0,0 +1,15 @@ +# Configure Rails Environment +ENV["RAILS_ENV"] = "test" + +require File.expand_path("../dummy/config/environment.rb", __FILE__) +require "rails/test_help" + +Rails.backtrace_cleaner.remove_silencers! + +# Load support files +Dir["#{File.dirname(__FILE__)}/support/**/*.rb"].each { |f| require f } + +# Load fixtures from the engine +if ActiveSupport::TestCase.method_defined?(:fixture_path=) + ActiveSupport::TestCase.fixture_path = File.expand_path("../fixtures", __FILE__) +end