image_viewer_rails 0.0.1

data/app/assets/javascripts/image_viewer_rails/jquery.rotate.js

@@ -0,0 +1,313 @@
+// VERSION: 2.2 LAST UPDATE: 13.03.2012
+/*
+ * Licensed under the MIT license: http://www.opensource.org/licenses/mit-license.php
+ *
+ * Made by Wilq32, wilq32@gmail.com, Wroclaw, Poland, 01.2009
+ * Website: http://code.google.com/p/jqueryrotate/
+ */
+
+// Documentation removed from script file (was kinda useless and outdated)
+
+(function($) {
+var supportedCSS,styles=document.getElementsByTagName("head")[0].style,toCheck="transformProperty WebkitTransform OTransform msTransform MozTransform".split(" ");
+for (var a=0;a<toCheck.length;a++) if (styles[toCheck[a]] !== undefined) supportedCSS = toCheck[a];
+// Bad eval to preven google closure to remove it from code o_O
+// After compresion replace it back to var IE = 'v' == '\v'
+var IE = eval('"v"=="\v"');
+
+jQuery.fn.extend({
+    rotate:function(parameters)
+    {
+        if (this.length===0||typeof parameters=="undefined") return;
+            if (typeof parameters=="number") parameters={angle:parameters};
+        var returned=[];
+        for (var i=0,i0=this.length;i<i0;i++)
+            {
+                var element=this.get(i);
+                if (!element.Wilq32 || !element.Wilq32.PhotoEffect) {
+
+                    var paramClone = $.extend(true, {}, parameters);
+                    var newRotObject = new Wilq32.PhotoEffect(element,paramClone)._rootObj;
+
+                    returned.push($(newRotObject));
+                }
+                else {
+                    element.Wilq32.PhotoEffect._handleRotation(parameters);
+                }
+            }
+            return returned;
+    },
+    getRotateAngle: function(){
+        var ret = [];
+        for (var i=0,i0=this.length;i<i0;i++)
+            {
+                var element=this.get(i);
+                if (element.Wilq32 && element.Wilq32.PhotoEffect) {
+                    ret[i] = element.Wilq32.PhotoEffect._angle;
+                }
+            }
+            return ret;
+    },
+    stopRotate: function(){
+        for (var i=0,i0=this.length;i<i0;i++)
+            {
+                var element=this.get(i);
+                if (element.Wilq32 && element.Wilq32.PhotoEffect) {
+                    clearTimeout(element.Wilq32.PhotoEffect._timer);
+                }
+            }
+    }
+});
+
+// Library agnostic interface
+
+Wilq32=window.Wilq32||{};
+Wilq32.PhotoEffect=(function(){
+
+  if (supportedCSS) {
+    return function(img,parameters){
+      img.Wilq32 = {
+        PhotoEffect: this
+      };
+
+            this._img = this._rootObj = this._eventObj = img;
+            this._handleRotation(parameters);
+    }
+  } else {
+    return function(img,parameters) {
+      // Make sure that class and id are also copied - just in case you would like to refeer to an newly created object
+            this._img = img;
+
+      this._rootObj=document.createElement('span');
+      this._rootObj.style.display="inline-block";
+      this._rootObj.Wilq32 =
+        {
+          PhotoEffect: this
+        };
+      img.parentNode.insertBefore(this._rootObj,img);
+
+      if (img.complete) {
+        this._Loader(parameters);
+      } else {
+        var self=this;
+        // TODO: Remove jQuery dependency
+        jQuery(this._img).bind("load", function()
+        {
+          self._Loader(parameters);
+        });
+      }
+    }
+  }
+})();
+
+Wilq32.PhotoEffect.prototype={
+    _setupParameters : function (parameters){
+    this._parameters = this._parameters || {};
+        if (typeof this._angle !== "number") this._angle = 0 ;
+        if (typeof parameters.angle==="number") this._angle = parameters.angle;
+        this._parameters.animateTo = (typeof parameters.animateTo==="number") ? (parameters.animateTo) : (this._angle);
+
+        this._parameters.step = parameters.step || this._parameters.step || null;
+    this._parameters.easing = parameters.easing || this._parameters.easing || function (x, t, b, c, d) { return -c * ((t=t/d-1)*t*t*t - 1) + b; }
+    this._parameters.duration = parameters.duration || this._parameters.duration || 1000;
+        this._parameters.callback = parameters.callback || this._parameters.callback || function(){};
+        if (parameters.bind && parameters.bind != this._parameters.bind) this._BindEvents(parameters.bind);
+  },
+  _handleRotation : function(parameters){
+          this._setupParameters(parameters);
+          if (this._angle==this._parameters.animateTo) {
+              this._rotate(this._angle);
+          }
+          else {
+              this._animateStart();
+          }
+  },
+
+  _BindEvents:function(events){
+    if (events && this._eventObj)
+    {
+            // Unbinding previous Events
+            if (this._parameters.bind){
+                var oldEvents = this._parameters.bind;
+                for (var a in oldEvents) if (oldEvents.hasOwnProperty(a))
+                        // TODO: Remove jQuery dependency
+                        jQuery(this._eventObj).unbind(a,oldEvents[a]);
+            }
+
+            this._parameters.bind = events;
+      for (var a in events) if (events.hasOwnProperty(a))
+        // TODO: Remove jQuery dependency
+          jQuery(this._eventObj).bind(a,events[a]);
+    }
+  },
+
+  _Loader:(function()
+  {
+    if (IE)
+    return function(parameters)
+    {
+      var width=this._img.width;
+      var height=this._img.height;
+      this._img.parentNode.removeChild(this._img);
+
+      this._vimage = this.createVMLNode('image');
+      this._vimage.src=this._img.src;
+      this._vimage.style.height=height+"px";
+      this._vimage.style.width=width+"px";
+      this._vimage.style.position="absolute"; // FIXES IE PROBLEM - its only rendered if its on absolute position!
+      this._vimage.style.top = "0px";
+      this._vimage.style.left = "0px";
+
+      /* Group minifying a small 1px precision problem when rotating object */
+      this._container =  this.createVMLNode('group');
+      this._container.style.width=width;
+      this._container.style.height=height;
+      this._container.style.position="absolute";
+      this._container.setAttribute('coordsize',width-1+','+(height-1)); // This -1, -1 trying to fix ugly problem with small displacement on IE
+      this._container.appendChild(this._vimage);
+
+      this._rootObj.appendChild(this._container);
+      this._rootObj.style.position="relative"; // FIXES IE PROBLEM
+      this._rootObj.style.width=width+"px";
+      this._rootObj.style.height=height+"px";
+      this._rootObj.setAttribute('id',this._img.getAttribute('id'));
+      this._rootObj.className=this._img.className;
+        this._eventObj = this._rootObj;
+        this._handleRotation(parameters);
+    }
+    else
+    return function (parameters)
+    {
+      this._rootObj.setAttribute('id',this._img.getAttribute('id'));
+      this._rootObj.className=this._img.className;
+
+      this._width=this._img.width;
+      this._height=this._img.height;
+      this._widthHalf=this._width/2; // used for optimisation
+      this._heightHalf=this._height/2;// used for optimisation
+
+      var _widthMax=Math.sqrt((this._height)*(this._height) + (this._width) * (this._width));
+
+      this._widthAdd = _widthMax - this._width;
+      this._heightAdd = _widthMax - this._height; // widthMax because maxWidth=maxHeight
+      this._widthAddHalf=this._widthAdd/2; // used for optimisation
+      this._heightAddHalf=this._heightAdd/2;// used for optimisation
+
+      this._img.parentNode.removeChild(this._img);
+
+      this._aspectW = ((parseInt(this._img.style.width,10)) || this._width)/this._img.width;
+      this._aspectH = ((parseInt(this._img.style.height,10)) || this._height)/this._img.height;
+
+      this._canvas=document.createElement('canvas');
+      this._canvas.setAttribute('width',this._width);
+      this._canvas.style.position="relative";
+      this._canvas.style.left = -this._widthAddHalf + "px";
+      this._canvas.style.top = -this._heightAddHalf + "px";
+      this._canvas.Wilq32 = this._rootObj.Wilq32;
+
+      this._rootObj.appendChild(this._canvas);
+      this._rootObj.style.width=this._width+"px";
+      this._rootObj.style.height=this._height+"px";
+            this._eventObj = this._canvas;
+
+      this._cnv=this._canvas.getContext('2d');
+            this._handleRotation(parameters);
+    }
+  })(),
+
+  _animateStart:function()
+  {
+    if (this._timer) {
+      clearTimeout(this._timer);
+    }
+    this._animateStartTime = +new Date;
+    this._animateStartAngle = this._angle;
+    this._animate();
+  },
+    _animate:function()
+    {
+         var actualTime = +new Date;
+         var checkEnd = actualTime - this._animateStartTime > this._parameters.duration;
+
+         // TODO: Bug for animatedGif for static rotation ? (to test)
+         if (checkEnd && !this._parameters.animatedGif)
+         {
+             clearTimeout(this._timer);
+         }
+         else
+         {
+             if (this._canvas||this._vimage||this._img) {
+                 var angle = this._parameters.easing(0, actualTime - this._animateStartTime, this._animateStartAngle, this._parameters.animateTo - this._animateStartAngle, this._parameters.duration);
+                 this._rotate((~~(angle*10))/10);
+             }
+             if (this._parameters.step) {
+                this._parameters.step(this._angle);
+             }
+             var self = this;
+             this._timer = setTimeout(function()
+                     {
+                     self._animate.call(self);
+                     }, 10);
+         }
+
+         // To fix Bug that prevents using recursive function in callback I moved this function to back
+         if (this._parameters.callback && checkEnd){
+             this._angle = this._parameters.animateTo;
+             this._rotate(this._angle);
+             this._parameters.callback.call(this._rootObj);
+         }
+     },
+
+  _rotate : (function()
+  {
+    var rad = Math.PI/180;
+    if (IE)
+    return function(angle)
+    {
+            this._angle = angle;
+      this._container.style.rotation=(angle%360)+"deg";
+    }
+    else if (supportedCSS)
+    return function(angle){
+            this._angle = angle;
+      this._img.style[supportedCSS]="rotate("+(angle%360)+"deg)";
+    }
+    else
+    return function(angle)
+    {
+            this._angle = angle;
+      angle=(angle%360)* rad;
+      // clear canvas
+      this._canvas.width = this._width+this._widthAdd;
+      this._canvas.height = this._height+this._heightAdd;
+
+      // REMEMBER: all drawings are read from backwards.. so first function is translate, then rotate, then translate, translate..
+      this._cnv.translate(this._widthAddHalf,this._heightAddHalf);  // at least center image on screen
+      this._cnv.translate(this._widthHalf,this._heightHalf);      // we move image back to its orginal
+      this._cnv.rotate(angle);                    // rotate image
+      this._cnv.translate(-this._widthHalf,-this._heightHalf);    // move image to its center, so we can rotate around its center
+      this._cnv.scale(this._aspectW,this._aspectH); // SCALE - if needed ;)
+      this._cnv.drawImage(this._img, 0, 0);             // First - we draw image
+    }
+
+  })()
+}
+
+if (IE)
+{
+Wilq32.PhotoEffect.prototype.createVMLNode=(function(){
+document.createStyleSheet().addRule(".rvml", "behavior:url(#default#VML)");
+    try {
+      !document.namespaces.rvml && document.namespaces.add("rvml", "urn:schemas-microsoft-com:vml");
+      return function (tagName) {
+        return document.createElement('<rvml:' + tagName + ' class="rvml">');
+      };
+    } catch (e) {
+      return function (tagName) {
+        return document.createElement('<' + tagName + ' xmlns="urn:schemas-microsoft.com:vml" class="rvml">');
+      };
+    }
+})();
+}
+
+})(jQuery);

data/app/assets/javascripts/image_viewer_rails/keymaster.js

@@ -0,0 +1,236 @@
+//     keymaster.js - 64fc7e56aa97efd9a1802a15e773fa98d3903372
+//     (c) 2011-2012 Thomas Fuchs
+//     keymaster.js may be freely distributed under the MIT license.
+
+;(function(global){
+  var k,
+    _handlers = {},
+    _mods = { 16: false, 18: false, 17: false, 91: false },
+    _scope = 'all',
+    // modifier keys
+    _MODIFIERS = {
+      '⇧': 16, shift: 16,
+      '⌥': 18, alt: 18, option: 18,
+      '⌃': 17, ctrl: 17, control: 17,
+      '⌘': 91, command: 91
+    },
+    // special keys
+    _MAP = {
+      backspace: 8, tab: 9, clear: 12,
+      enter: 13, 'return': 13,
+      esc: 27, escape: 27, space: 32,
+      left: 37, up: 38,
+      right: 39, down: 40,
+      del: 46, 'delete': 46,
+      home: 36, end: 35,
+      pageup: 33, pagedown: 34,
+      ',': 188, '.': 190, '/': 191,
+      '`': 192, '-': 189, '=': 187,
+      ';': 186, '\'': 222,
+      '[': 219, ']': 221, '\\': 220
+    },
+    code = function(x){
+      return _MAP[x] || x.toUpperCase().charCodeAt(0);
+    },
+    _downKeys = [];
+
+  for(k=1;k<20;k++) _MAP['f'+k] = 111+k;
+
+  // IE doesn't support Array#indexOf, so have a simple replacement
+  function index(array, item){
+    var i = array.length;
+    while(i--) if(array[i]===item) return i;
+    return -1;
+  }
+
+  var modifierMap = {
+      16:'shiftKey',
+      18:'altKey',
+      17:'ctrlKey',
+      91:'metaKey'
+  };
+  function updateModifierKey(event) {
+      for(k in _mods) _mods[k] = event[modifierMap[k]];
+  };
+
+  // handle keydown event
+  function dispatch(event, scope){
+    var key, handler, k, i, modifiersMatch;
+    key = event.keyCode;
+
+    if (index(_downKeys, key) == -1) {
+        _downKeys.push(key);
+    }
+
+    // if a modifier key, set the key.<modifierkeyname> property to true and return
+    if(key == 93 || key == 224) key = 91; // right command on webkit, command on Gecko
+    if(key in _mods) {
+      _mods[key] = true;
+      // 'assignKey' from inside this closure is exported to window.key
+      for(k in _MODIFIERS) if(_MODIFIERS[k] == key) assignKey[k] = true;
+      return;
+    }
+    updateModifierKey(event);
+
+    // see if we need to ignore the keypress (filter() can can be overridden)
+    // by default ignore key presses if a select, textarea, or input is focused
+    if(!assignKey.filter.call(this, event)) return;
+
+    // abort if no potentially matching shortcuts found
+    if (!(key in _handlers)) return;
+
+    // for each potential shortcut
+    for (i = 0; i < _handlers[key].length; i++) {
+      handler = _handlers[key][i];
+
+      // see if it's in the current scope
+      if(handler.scope == scope || handler.scope == 'all'){
+        // check if modifiers match if any
+        modifiersMatch = handler.mods.length > 0;
+        for(k in _mods)
+          if((!_mods[k] && index(handler.mods, +k) > -1) ||
+            (_mods[k] && index(handler.mods, +k) == -1)) modifiersMatch = false;
+        // call the handler and stop the event if neccessary
+        if((handler.mods.length == 0 && !_mods[16] && !_mods[18] && !_mods[17] && !_mods[91]) || modifiersMatch){
+          if(handler.method(event, handler)===false){
+            if(event.preventDefault) event.preventDefault();
+              else event.returnValue = false;
+            if(event.stopPropagation) event.stopPropagation();
+            if(event.cancelBubble) event.cancelBubble = true;
+          }
+        }
+      }
+    }
+  };
+
+  // unset modifier keys on keyup
+  function clearModifier(event){
+    var key = event.keyCode, k,
+        i = index(_downKeys, key);
+
+    // remove key from _downKeys
+    if (i >= 0) {
+        _downKeys.splice(i, 1);
+    }
+
+    if(key == 93 || key == 224) key = 91;
+    if(key in _mods) {
+      _mods[key] = false;
+      for(k in _MODIFIERS) if(_MODIFIERS[k] == key) assignKey[k] = false;
+    }
+  };
+
+  function resetModifiers() {
+    for(k in _mods) _mods[k] = false;
+    for(k in _MODIFIERS) assignKey[k] = false;
+  }
+
+  // parse and assign shortcut
+  function assignKey(key, scope, method){
+    var keys, mods, i, mi;
+    if (method === undefined) {
+      method = scope;
+      scope = 'all';
+    }
+    key = key.replace(/\s/g,'');
+    keys = key.split(',');
+
+    if((keys[keys.length-1])=='')
+      keys[keys.length-2] += ',';
+    // for each shortcut
+    for (i = 0; i < keys.length; i++) {
+      // set modifier keys if any
+      mods = [];
+      key = keys[i].split('+');
+      if(key.length > 1){
+        mods = key.slice(0,key.length-1);
+        for (mi = 0; mi < mods.length; mi++)
+          mods[mi] = _MODIFIERS[mods[mi]];
+        key = [key[key.length-1]];
+      }
+      // convert to keycode and...
+      key = key[0]
+      key = code(key);
+      // ...store handler
+      if (!(key in _handlers)) _handlers[key] = [];
+      _handlers[key].push({ shortcut: keys[i], scope: scope, method: method, key: keys[i], mods: mods });
+    }
+  };
+
+  // Returns true if the key with code 'keyCode' is currently down
+  // Converts strings into key codes.
+  function isPressed(keyCode) {
+      if (typeof(keyCode)=='string') {
+        keyCode = code(keyCode);
+      }
+      return index(_downKeys, keyCode) != -1;
+  }
+
+  function getPressedKeyCodes() {
+      return _downKeys.slice(0);
+  }
+
+  function filter(event){
+    var tagName = (event.target || event.srcElement).tagName;
+    // ignore keypressed in any elements that support keyboard data input
+    return !(tagName == 'INPUT' || tagName == 'SELECT' || tagName == 'TEXTAREA');
+  }
+
+  // initialize key.<modifier> to false
+  for(k in _MODIFIERS) assignKey[k] = false;
+
+  // set current scope (default 'all')
+  function setScope(scope){ _scope = scope || 'all' };
+  function getScope(){ return _scope || 'all' };
+
+  // delete all handlers for a given scope
+  function deleteScope(scope){
+    var key, handlers, i;
+
+    for (key in _handlers) {
+      handlers = _handlers[key];
+      for (i = 0; i < handlers.length; ) {
+        if (handlers[i].scope === scope) handlers.splice(i, 1);
+        else i++;
+      }
+    }
+  };
+
+  // cross-browser events
+  function addEvent(object, event, method) {
+    if (object.addEventListener)
+      object.addEventListener(event, method, false);
+    else if(object.attachEvent)
+      object.attachEvent('on'+event, function(){ method(window.event) });
+  };
+
+  // set the handlers globally on document
+  addEvent(document, 'keydown', function(event) { dispatch(event, _scope) }); // Passing _scope to a callback to ensure it remains the same by execution. Fixes #48
+  addEvent(document, 'keyup', clearModifier);
+
+  // reset modifiers to false whenever the window is (re)focused.
+  addEvent(window, 'focus', resetModifiers);
+
+  // store previously defined key
+  var previousKey = global.key;
+
+  // restore previously defined key and return reference to our key object
+  function noConflict() {
+    var k = global.key;
+    global.key = previousKey;
+    return k;
+  }
+
+  // set window.key and window.key.set/get/deleteScope, and the default filter
+  global.key = assignKey;
+  global.key.setScope = setScope;
+  global.key.getScope = getScope;
+  global.key.deleteScope = deleteScope;
+  global.key.filter = filter;
+  global.key.isPressed = isPressed;
+  global.key.getPressedKeyCodes = getPressedKeyCodes;
+  global.key.noConflict = noConflict;
+
+  if(typeof module !== 'undefined') module.exports = key;
+
+})(this);