start integration default template
This commit is contained in:
Manuel Raynaud
120
templates/default/assets/js/plugins/bootstrap-magnify/bootstrap-magnify.js
vendored
Executable file
120
templates/default/assets/js/plugins/bootstrap-magnify/bootstrap-magnify.js
vendored
Executable file
@@ -0,0 +1,120 @@
|
||||
!function ($) {
|
||||
|
||||
"use strict"; // jshint ;_;
|
||||
|
||||
|
||||
/* MAGNIFY PUBLIC CLASS DEFINITION
|
||||
* =============================== */
|
||||
|
||||
var Magnify = function (element, options) {
|
||||
this.init('magnify', element, options)
|
||||
}
|
||||
|
||||
Magnify.prototype = {
|
||||
|
||||
constructor: Magnify
|
||||
|
||||
, init: function (type, element, options) {
|
||||
var event = 'mousemove'
|
||||
, eventOut = 'mouseleave';
|
||||
|
||||
this.type = type
|
||||
this.$element = $(element)
|
||||
this.options = this.getOptions(options)
|
||||
this.nativeWidth = 0
|
||||
this.nativeHeight = 0
|
||||
|
||||
this.$element.wrap('<div class="magnify" \>');
|
||||
this.$element.parent('.magnify').append('<div class="magnify-large" \>');
|
||||
this.$element.siblings(".magnify-large").css("background","url('" + this.$element.attr("src") + "') no-repeat");
|
||||
|
||||
this.$element.parent('.magnify').on(event + '.' + this.type, $.proxy(this.check, this));
|
||||
this.$element.parent('.magnify').on(eventOut + '.' + this.type, $.proxy(this.check, this));
|
||||
}
|
||||
|
||||
, getOptions: function (options) {
|
||||
options = $.extend({}, $.fn[this.type].defaults, options, this.$element.data())
|
||||
|
||||
if (options.delay && typeof options.delay == 'number') {
|
||||
options.delay = {
|
||||
show: options.delay
|
||||
, hide: options.delay
|
||||
}
|
||||
}
|
||||
|
||||
return options
|
||||
}
|
||||
|
||||
, check: function (e) {
|
||||
var container = $(e.currentTarget);
|
||||
var self = container.children('img');
|
||||
var mag = container.children(".magnify-large");
|
||||
|
||||
// Get the native dimensions of the image
|
||||
if(!this.nativeWidth && !this.nativeHeight) {
|
||||
var image = new Image();
|
||||
image.src = self.attr("src");
|
||||
|
||||
this.nativeWidth = image.width;
|
||||
this.nativeHeight = image.height;
|
||||
|
||||
} else {
|
||||
|
||||
var magnifyOffset = container.offset();
|
||||
var mx = e.pageX - magnifyOffset.left;
|
||||
var my = e.pageY - magnifyOffset.top;
|
||||
|
||||
if (mx < container.width() && my < container.height() && mx > 0 && my > 0) {
|
||||
mag.fadeIn(100);
|
||||
} else {
|
||||
mag.fadeOut(100);
|
||||
}
|
||||
|
||||
if(mag.is(":visible"))
|
||||
{
|
||||
var rx = Math.round(mx/container.width()*this.nativeWidth - mag.width()/2)*-1;
|
||||
var ry = Math.round(my/container.height()*this.nativeHeight - mag.height()/2)*-1;
|
||||
var bgp = rx + "px " + ry + "px";
|
||||
|
||||
var px = mx - mag.width()/2;
|
||||
var py = my - mag.height()/2;
|
||||
|
||||
mag.css({left: px, top: py, backgroundPosition: bgp});
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/* MAGNIFY PLUGIN DEFINITION
|
||||
* ========================= */
|
||||
|
||||
$.fn.magnify = function ( option ) {
|
||||
return this.each(function () {
|
||||
var $this = $(this)
|
||||
, data = $this.data('magnify')
|
||||
, options = typeof option == 'object' && option
|
||||
if (!data) $this.data('tooltip', (data = new Magnify(this, options)))
|
||||
if (typeof option == 'string') data[option]()
|
||||
})
|
||||
}
|
||||
|
||||
$.fn.magnify.Constructor = Magnify
|
||||
|
||||
$.fn.magnify.defaults = {
|
||||
delay: 0
|
||||
}
|
||||
|
||||
|
||||
/* MAGNIFY DATA-API
|
||||
* ================ */
|
||||
|
||||
$(window).on('load', function () {
|
||||
$('[data-toggle="magnify"]').each(function () {
|
||||
var $mag = $(this);
|
||||
$mag.magnify()
|
||||
})
|
||||
})
|
||||
|
||||
} ( window.jQuery );
|
||||
1
templates/default/assets/js/plugins/bootstrap-magnify/bootstrap-magnify.min.js
vendored
Executable file
1
templates/default/assets/js/plugins/bootstrap-magnify/bootstrap-magnify.min.js
vendored
Executable file
@@ -0,0 +1 @@
|
||||
!function(e){"use strict";var t=function(e,t){this.init("magnify",e,t)};t.prototype={constructor:t,init:function(t,n,r){var i="mousemove",s="mouseleave";this.type=t;this.$element=e(n);this.options=this.getOptions(r);this.nativeWidth=0;this.nativeHeight=0;this.$element.wrap('<div class="magnify" >');this.$element.parent(".magnify").append('<div class="magnify-large" >');this.$element.siblings(".magnify-large").css("background","url('"+this.$element.attr("src")+"') no-repeat");this.$element.parent(".magnify").on(i+"."+this.type,e.proxy(this.check,this));this.$element.parent(".magnify").on(s+"."+this.type,e.proxy(this.check,this))},getOptions:function(t){t=e.extend({},e.fn[this.type].defaults,t,this.$element.data());t.delay&&typeof t.delay=="number"&&(t.delay={show:t.delay,hide:t.delay});return t},check:function(t){var n=e(t.currentTarget),r=n.children("img"),i=n.children(".magnify-large");if(!this.nativeWidth&&!this.nativeHeight){var s=new Image;s.src=r.attr("src");this.nativeWidth=s.width;this.nativeHeight=s.height}else{var o=n.offset(),u=t.pageX-o.left,a=t.pageY-o.top;u<n.width()&&a<n.height()&&u>0&&a>0?i.fadeIn(100):i.fadeOut(100);if(i.is(":visible")){var f=Math.round(u/n.width()*this.nativeWidth-i.width()/2)*-1,l=Math.round(a/n.height()*this.nativeHeight-i.height()/2)*-1,c=f+"px "+l+"px",h=u-i.width()/2,p=a-i.height()/2;i.css({left:h,top:p,backgroundPosition:c})}}}};e.fn.magnify=function(n){return this.each(function(){var r=e(this),i=r.data("magnify"),s=typeof n=="object"&&n;i||r.data("tooltip",i=new t(this,s));typeof n=="string"&&i[n]()})};e.fn.magnify.Constructor=t;e.fn.magnify.defaults={delay:0};e(window).on("load",function(){e('[data-toggle="magnify"]').each(function(){var t=e(this);t.magnify()})})}(window.jQuery);
|
||||
323
templates/default/assets/js/plugins/menu-aim/jquery.menu-aim.js
Executable file
323
templates/default/assets/js/plugins/menu-aim/jquery.menu-aim.js
Executable file
@@ -0,0 +1,323 @@
|
||||
/**
|
||||
* menu-aim is a jQuery plugin for dropdown menus that can differentiate
|
||||
* between a user trying hover over a dropdown item vs trying to navigate into
|
||||
* a submenu's contents.
|
||||
*
|
||||
* menu-aim assumes that you have are using a menu with submenus that expand
|
||||
* to the menu's right. It will fire events when the user's mouse enters a new
|
||||
* dropdown item *and* when that item is being intentionally hovered over.
|
||||
*
|
||||
* __________________________
|
||||
* | Monkeys >| Gorilla |
|
||||
* | Gorillas >| Content |
|
||||
* | Chimps >| Here |
|
||||
* |___________|____________|
|
||||
*
|
||||
* In the above example, "Gorillas" is selected and its submenu content is
|
||||
* being shown on the right. Imagine that the user's cursor is hovering over
|
||||
* "Gorillas." When they move their mouse into the "Gorilla Content" area, they
|
||||
* may briefly hover over "Chimps." This shouldn't close the "Gorilla Content"
|
||||
* area.
|
||||
*
|
||||
* This problem is normally solved using timeouts and delays. menu-aim tries to
|
||||
* solve this by detecting the direction of the user's mouse movement. This can
|
||||
* make for quicker transitions when navigating up and down the menu. The
|
||||
* experience is hopefully similar to amazon.com/'s "Shop by Department"
|
||||
* dropdown.
|
||||
*
|
||||
* Use like so:
|
||||
*
|
||||
* $("#menu").menuAim({
|
||||
* activate: $.noop, // fired on row activation
|
||||
* deactivate: $.noop // fired on row deactivation
|
||||
* });
|
||||
*
|
||||
* ...to receive events when a menu's row has been purposefully (de)activated.
|
||||
*
|
||||
* The following options can be passed to menuAim. All functions execute with
|
||||
* the relevant row's HTML element as the execution context ('this'):
|
||||
*
|
||||
* .menuAim({
|
||||
* // Function to call when a row is purposefully activated. Use this
|
||||
* // to show a submenu's content for the activated row.
|
||||
* activate: function() {},
|
||||
*
|
||||
* // Function to call when a row is deactivated.
|
||||
* deactivate: function() {},
|
||||
*
|
||||
* // Function to call when mouse enters a menu row. Entering a row
|
||||
* // does not mean the row has been activated, as the user may be
|
||||
* // mousing over to a submenu.
|
||||
* enter: function() {},
|
||||
*
|
||||
* // Function to call when mouse exits a menu row.
|
||||
* exit: function() {},
|
||||
*
|
||||
* // Selector for identifying which elements in the menu are rows
|
||||
* // that can trigger the above events. Defaults to "> li".
|
||||
* rowSelector: "> li",
|
||||
*
|
||||
* // You may have some menu rows that aren't submenus and therefore
|
||||
* // shouldn't ever need to "activate." If so, filter submenu rows w/
|
||||
* // this selector. Defaults to "*" (all elements).
|
||||
* submenuSelector: "*",
|
||||
*
|
||||
* // Direction the submenu opens relative to the main menu. Can be
|
||||
* // left, right, above, or below. Defaults to "right".
|
||||
* submenuDirection: "right"
|
||||
* });
|
||||
*
|
||||
* https://github.com/kamens/jQuery-menu-aim
|
||||
*/
|
||||
(function($) {
|
||||
|
||||
$.fn.menuAim = function(opts) {
|
||||
// Initialize menu-aim for all elements in jQuery collection
|
||||
this.each(function() {
|
||||
init.call(this, opts);
|
||||
});
|
||||
|
||||
return this;
|
||||
};
|
||||
|
||||
function init(opts) {
|
||||
var $menu = $(this),
|
||||
activeRow = null,
|
||||
mouseLocs = [],
|
||||
lastDelayLoc = null,
|
||||
timeoutId = null,
|
||||
options = $.extend({
|
||||
rowSelector: "> li",
|
||||
submenuSelector: "*",
|
||||
submenuDirection: "right",
|
||||
tolerance: 75, // bigger = more forgivey when entering submenu
|
||||
enter: $.noop,
|
||||
exit: $.noop,
|
||||
activate: $.noop,
|
||||
deactivate: $.noop,
|
||||
exitMenu: $.noop
|
||||
}, opts);
|
||||
|
||||
var MOUSE_LOCS_TRACKED = 3, // number of past mouse locations to track
|
||||
DELAY = 300; // ms delay when user appears to be entering submenu
|
||||
|
||||
/**
|
||||
* Keep track of the last few locations of the mouse.
|
||||
*/
|
||||
var mousemoveDocument = function(e) {
|
||||
mouseLocs.push({x: e.pageX, y: e.pageY});
|
||||
|
||||
if (mouseLocs.length > MOUSE_LOCS_TRACKED) {
|
||||
mouseLocs.shift();
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* Cancel possible row activations when leaving the menu entirely
|
||||
*/
|
||||
var mouseleaveMenu = function() {
|
||||
if (timeoutId) {
|
||||
clearTimeout(timeoutId);
|
||||
}
|
||||
|
||||
// If exitMenu is supplied and returns true, deactivate the
|
||||
// currently active row on menu exit.
|
||||
if (options.exitMenu(this)) {
|
||||
if (activeRow) {
|
||||
options.deactivate(activeRow);
|
||||
}
|
||||
|
||||
activeRow = null;
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* Trigger a possible row activation whenever entering a new row.
|
||||
*/
|
||||
var mouseenterRow = function() {
|
||||
if (timeoutId) {
|
||||
// Cancel any previous activation delays
|
||||
clearTimeout(timeoutId);
|
||||
}
|
||||
|
||||
options.enter(this);
|
||||
possiblyActivate(this);
|
||||
},
|
||||
mouseleaveRow = function() {
|
||||
options.exit(this);
|
||||
};
|
||||
|
||||
/*
|
||||
* Immediately activate a row if the user clicks on it.
|
||||
*/
|
||||
var clickRow = function() {
|
||||
activate(this);
|
||||
};
|
||||
|
||||
/**
|
||||
* Activate a menu row.
|
||||
*/
|
||||
var activate = function(row) {
|
||||
if (row == activeRow) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (activeRow) {
|
||||
options.deactivate(activeRow);
|
||||
}
|
||||
|
||||
options.activate(row);
|
||||
activeRow = row;
|
||||
};
|
||||
|
||||
/**
|
||||
* Possibly activate a menu row. If mouse movement indicates that we
|
||||
* shouldn't activate yet because user may be trying to enter
|
||||
* a submenu's content, then delay and check again later.
|
||||
*/
|
||||
var possiblyActivate = function(row) {
|
||||
var delay = activationDelay();
|
||||
|
||||
if (delay) {
|
||||
timeoutId = setTimeout(function() {
|
||||
possiblyActivate(row);
|
||||
}, delay);
|
||||
} else {
|
||||
activate(row);
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* Return the amount of time that should be used as a delay before the
|
||||
* currently hovered row is activated.
|
||||
*
|
||||
* Returns 0 if the activation should happen immediately. Otherwise,
|
||||
* returns the number of milliseconds that should be delayed before
|
||||
* checking again to see if the row should be activated.
|
||||
*/
|
||||
var activationDelay = function() {
|
||||
if (!activeRow || !$(activeRow).is(options.submenuSelector)) {
|
||||
// If there is no other submenu row already active, then
|
||||
// go ahead and activate immediately.
|
||||
return 0;
|
||||
}
|
||||
|
||||
var offset = $menu.offset(),
|
||||
upperLeft = {
|
||||
x: offset.left,
|
||||
y: offset.top - options.tolerance
|
||||
},
|
||||
upperRight = {
|
||||
x: offset.left + $menu.outerWidth(),
|
||||
y: upperLeft.y
|
||||
},
|
||||
lowerLeft = {
|
||||
x: offset.left,
|
||||
y: offset.top + $menu.outerHeight() + options.tolerance
|
||||
},
|
||||
lowerRight = {
|
||||
x: offset.left + $menu.outerWidth(),
|
||||
y: lowerLeft.y
|
||||
},
|
||||
loc = mouseLocs[mouseLocs.length - 1],
|
||||
prevLoc = mouseLocs[0];
|
||||
|
||||
if (!loc) {
|
||||
return 0;
|
||||
}
|
||||
|
||||
if (!prevLoc) {
|
||||
prevLoc = loc;
|
||||
}
|
||||
|
||||
if (prevLoc.x < offset.left || prevLoc.x > lowerRight.x ||
|
||||
prevLoc.y < offset.top || prevLoc.y > lowerRight.y) {
|
||||
// If the previous mouse location was outside of the entire
|
||||
// menu's bounds, immediately activate.
|
||||
return 0;
|
||||
}
|
||||
|
||||
if (lastDelayLoc &&
|
||||
loc.x == lastDelayLoc.x && loc.y == lastDelayLoc.y) {
|
||||
// If the mouse hasn't moved since the last time we checked
|
||||
// for activation status, immediately activate.
|
||||
return 0;
|
||||
}
|
||||
|
||||
// Detect if the user is moving towards the currently activated
|
||||
// submenu.
|
||||
//
|
||||
// If the mouse is heading relatively clearly towards
|
||||
// the submenu's content, we should wait and give the user more
|
||||
// time before activating a new row. If the mouse is heading
|
||||
// elsewhere, we can immediately activate a new row.
|
||||
//
|
||||
// We detect this by calculating the slope formed between the
|
||||
// current mouse location and the upper/lower right points of
|
||||
// the menu. We do the same for the previous mouse location.
|
||||
// If the current mouse location's slopes are
|
||||
// increasing/decreasing appropriately compared to the
|
||||
// previous's, we know the user is moving toward the submenu.
|
||||
//
|
||||
// Note that since the y-axis increases as the cursor moves
|
||||
// down the screen, we are looking for the slope between the
|
||||
// cursor and the upper right corner to decrease over time, not
|
||||
// increase (somewhat counterintuitively).
|
||||
function slope(a, b) {
|
||||
return (b.y - a.y) / (b.x - a.x);
|
||||
};
|
||||
|
||||
var decreasingCorner = upperRight,
|
||||
increasingCorner = lowerRight;
|
||||
|
||||
// Our expectations for decreasing or increasing slope values
|
||||
// depends on which direction the submenu opens relative to the
|
||||
// main menu. By default, if the menu opens on the right, we
|
||||
// expect the slope between the cursor and the upper right
|
||||
// corner to decrease over time, as explained above. If the
|
||||
// submenu opens in a different direction, we change our slope
|
||||
// expectations.
|
||||
if (options.submenuDirection == "left") {
|
||||
decreasingCorner = lowerLeft;
|
||||
increasingCorner = upperLeft;
|
||||
} else if (options.submenuDirection == "below") {
|
||||
decreasingCorner = lowerRight;
|
||||
increasingCorner = lowerLeft;
|
||||
} else if (options.submenuDirection == "above") {
|
||||
decreasingCorner = upperLeft;
|
||||
increasingCorner = upperRight;
|
||||
}
|
||||
|
||||
var decreasingSlope = slope(loc, decreasingCorner),
|
||||
increasingSlope = slope(loc, increasingCorner),
|
||||
prevDecreasingSlope = slope(prevLoc, decreasingCorner),
|
||||
prevIncreasingSlope = slope(prevLoc, increasingCorner);
|
||||
|
||||
if (decreasingSlope < prevDecreasingSlope &&
|
||||
increasingSlope > prevIncreasingSlope) {
|
||||
// Mouse is moving from previous location towards the
|
||||
// currently activated submenu. Delay before activating a
|
||||
// new menu row, because user may be moving into submenu.
|
||||
lastDelayLoc = loc;
|
||||
return DELAY;
|
||||
}
|
||||
|
||||
lastDelayLoc = null;
|
||||
return 0;
|
||||
};
|
||||
|
||||
/**
|
||||
* Hook up initial menu events
|
||||
*/
|
||||
$menu
|
||||
.mouseleave(mouseleaveMenu)
|
||||
.find(options.rowSelector)
|
||||
.mouseenter(mouseenterRow)
|
||||
.mouseleave(mouseleaveRow)
|
||||
.click(clickRow);
|
||||
|
||||
$(document).mousemove(mousemoveDocument);
|
||||
|
||||
};
|
||||
})(jQuery);
|
||||
|
||||
Reference in New Issue
Block a user