static/js/jquery-live-preview.js

   1 /* ==========================================================
   2  * jquery-live-preview.js v1.1.0
   3  * https://github.com/alanphoon/jquery-live-preview
   4  * ==========================================================
   5  * Copyright 2015 Alan Phoon, www.ampedupdesigns.com
   6  * The MIT License
   7  *
   8  * Permission is hereby granted, free of charge, to any person obtaining a copy
   9  * of this software and associated documentation files (the "Software"), to deal
  10  * in the Software without restriction, including without limitation the rights
  11  * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
  12  * copies of the Software, and to permit persons to whom the Software is
  13  * furnished to do so, subject to the following conditions:
  14  *
  15  * The above copyright notice and this permission notice shall be included in
  16  * all copies or substantial portions of the Software.
  17  *
  18  * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
  19  * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
  20  * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
  21  * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
  22  * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
  23  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
  24  * THE SOFTWARE.
  25  * ========================================================== */
  26
  27 (function($) {
  28   $.fn.extend({
  29      livePreview: function(options) {
  30
  31          var defaults = {
  32              trigger: 'hover',
  33              targetWidth : 1000,
  34              targetHeight: 800,
  35              viewWidth: 300,
  36              viewHeight: 200,
  37              position: 'right',
  38              positionOffset: 40,
  39          };
  40
  41          var options = $.extend(defaults, options);
  42          //calculate appropriate scaling based on width.
  43          var scale_w = (options.viewWidth / options.targetWidth);
  44          var scale_h = (options.viewHeight / options.targetHeight);
  45          var scale_f = 1;
  46          var preview_id = 'livepreview_dialog';
  47
  48          if(typeof options.scale != 'undefined')
  49              scale_f = options.scale;
  50          else
  51          {
  52              if(scale_w > scale_h)
  53                  scale_f = scale_w;
  54              else
  55                  scale_f = scale_h;
  56          }
  57
  58          var showPreview = function(event) {
  59              var triggerType = event.data.triggerType;
  60              var obj = event.data.target;
  61              var href = event.data.href;
  62              var s = event.data.scale;
  63
  64              if( (triggerType == 'click') && ($('#' + preview_id).length == 0) ) {
  65                  event.preventDefault();
  66              }
  67
  68              var currentPos = options.position;
  69               if(obj.attr("data-position"))
  70                  currentPos = obj.attr("data-position");
  71
  72              var currentOffset = options.positionOffset;
  73              if(obj.attr("data-positionOffset"))
  74                  currentOffset = obj.attr("data-positionOffset");
  75
  76              if(obj.attr("data-scale"))
  77                  s = obj.attr("data-scale");
  78
  79              var pos = $(this).offset();
  80              var width = $(this).width();
  81              var height = $(this).height();
  82              var toppos = pos.top - (options.viewHeight/2);
  83              var leftpos = pos.left + width + currentOffset;
  84
  85              if(currentPos == 'left') {
  86                 leftpos = pos.left - options.viewWidth - currentOffset;
  87              }
  88
  89              if(currentPos == 'top') {
  90                 leftpos = pos.left + (width/2) - (options.viewWidth/2);
  91                 toppos = pos.top - options.viewHeight - currentOffset;
  92              }
  93
  94              if(currentPos == 'bottom') {
  95                 leftpos = pos.left + (width/2) - (options.viewWidth/2);
  96                 toppos = pos.top + (height/2) + currentOffset;
  97              }
  98
  99              //hover on
 100              $('body').append('<div id="livepreview_dialog" class="' + currentPos + '" style="display:none; padding:0px; left: ' + leftpos + 'px; top:' + toppos + 'px; width: ' + options.viewWidth + 'px; height: ' + options.viewHeight + 'px"><div class="livepreview-container" style="overflow:hidden; width: ' + options.viewWidth + 'px; height: ' + options.viewHeight + 'px"><iframe id="livepreview_iframe" src="' + href + '" style="height:' + options.targetHeight + 'px; width:' + options.targetWidth + 'px;-moz-transform: scale('+ s + ');-moz-transform-origin: 0 0;-o-transform: scale('+ s + ');-o-transform-origin: 0 0;-webkit-transform: scale('+ s + ');-webkit-transform-origin: 0 0;"></iframe></div></div>');
 101              $('#' + preview_id).fadeIn(100);
 102          };
 103
 104          return this.each(function() {
 105             var o = options;
 106             var s = scale_f;
 107             var obj = $(this);
 108             var href = obj.attr("data-preview-url") || obj.attr("href");
 109             var triggerType = options.trigger;
 110
 111             if(obj.attr("data-trigger")) {
 112                 triggerType = obj.attr("data-trigger");
 113             }
 114
 115             if(triggerType != 'click') {
 116                 triggerType = 'mouseenter';
 117                 obj.on('click', function() {
 118                     $('#' + preview_id).remove();
 119                 });
 120             }
 121
 122             obj.on(triggerType, null, { triggerType: triggerType, target: obj, href: href, scale: s }, showPreview);
 123             obj.on('mouseleave', function() {
 124                 $('#' + preview_id).remove();
 125             });
 126
 127          });
 128      }
 129   });
 130 })(jQuery);