Mojolicious-Plugin-Materialize
view release on metacpan or search on metacpan
lib/Mojolicious/Plugin/Materialize/js/materialize.js view on Meta::CPAN
if(!$(toEl).closest('.dropdown-button').is(origin)) {
activates.stop(true, true);
hideDropdown();
open = false;
}
});
// Click
} else {
// Click handler to show dropdown
origin.unbind('click.' + origin.attr('id'));
origin.bind('click.'+origin.attr('id'), function(e){
if (!isFocused) {
if ( origin[0] == e.currentTarget &&
!origin.hasClass('active') &&
($(e.target).closest('.dropdown-content').length === 0)) {
e.preventDefault(); // Prevents button click from moving window
if (options.stopPropagation) {
e.stopPropagation();
}
placeDropdown('click');
}
// If origin is clicked and menu is open, close menu
else if (origin.hasClass('active')) {
hideDropdown();
$(document).unbind('click.'+ activates.attr('id') + ' touchstart.' + activates.attr('id'));
}
// If menu open, add click close handler to document
if (activates.hasClass('active')) {
$(document).bind('click.'+ activates.attr('id') + ' touchstart.' + activates.attr('id'), function (e) {
if (!activates.is(e.target) && !origin.is(e.target) && (!origin.find(e.target).length) ) {
hideDropdown();
$(document).unbind('click.'+ activates.attr('id') + ' touchstart.' + activates.attr('id'));
}
});
}
}
});
} // End else
// Listen to open and close event - useful for select component
origin.on('open', function(e, eventType) {
placeDropdown(eventType);
});
origin.on('close', hideDropdown);
});
}; // End dropdown plugin
$(document).ready(function(){
$('.dropdown-button').dropdown();
});
}( jQuery ));
;(function($) {
var _stack = 0,
_lastID = 0,
_generateID = function() {
_lastID++;
return 'materialize-lean-overlay-' + _lastID;
};
$.fn.extend({
openModal: function(options) {
var $body = $('body');
var oldWidth = $body.innerWidth();
$body.css('overflow', 'hidden');
$body.width(oldWidth);
var defaults = {
opacity: 0.5,
in_duration: 350,
out_duration: 250,
ready: undefined,
complete: undefined,
dismissible: true,
starting_top: '4%',
ending_top: '10%'
};
var $modal = $(this);
if ($modal.hasClass('open')) {
return;
}
var overlayID = _generateID();
var $overlay = $('<div class="lean-overlay"></div>');
lStack = (++_stack);
// Store a reference of the overlay
$overlay.attr('id', overlayID).css('z-index', 1000 + lStack * 2);
$modal.data('overlay-id', overlayID).css('z-index', 1000 + lStack * 2 + 1);
$modal.addClass('open');
$("body").append($overlay);
// Override defaults
options = $.extend(defaults, options);
if (options.dismissible) {
$overlay.click(function() {
$modal.closeModal(options);
});
// Return on ESC
$(document).on('keyup.leanModal' + overlayID, function(e) {
if (e.keyCode === 27) { // ESC key
$modal.closeModal(options);
}
});
}
$modal.find(".modal-close").on('click.close', function(e) {
$modal.closeModal(options);
});
$overlay.css({ display : "block", opacity : 0 });
$modal.css({
display : "block",
opacity: 0
});
$overlay.velocity({opacity: options.opacity}, {duration: options.in_duration, queue: false, ease: "easeOutCubic"});
$modal.data('associated-overlay', $overlay[0]);
// Define Bottom Sheet animation
if ($modal.hasClass('bottom-sheet')) {
$modal.velocity({bottom: "0", opacity: 1}, {
duration: options.in_duration,
queue: false,
ease: "easeOutCubic",
// Handle modal ready callback
complete: function() {
if (typeof(options.ready) === "function") {
options.ready();
}
}
});
}
else {
$.Velocity.hook($modal, "scaleX", 0.7);
$modal.css({ top: options.starting_top });
$modal.velocity({top: options.ending_top, opacity: 1, scaleX: '1'}, {
duration: options.in_duration,
queue: false,
ease: "easeOutCubic",
// Handle modal ready callback
complete: function() {
if (typeof(options.ready) === "function") {
options.ready();
}
}
});
}
}
});
$.fn.extend({
closeModal: function(options) {
var defaults = {
out_duration: 250,
complete: undefined
};
var $modal = $(this);
var overlayID = $modal.data('overlay-id');
var $overlay = $('#' + overlayID);
$modal.removeClass('open');
options = $.extend(defaults, options);
// Enable scrolling
$('body').css({
overflow: '',
width: ''
});
$modal.find('.modal-close').off('click.close');
$(document).off('keyup.leanModal' + overlayID);
$overlay.velocity( { opacity: 0}, {duration: options.out_duration, queue: false, ease: "easeOutQuart"});
// Define Bottom Sheet animation
if ($modal.hasClass('bottom-sheet')) {
$modal.velocity({bottom: "-100%", opacity: 0}, {
duration: options.out_duration,
queue: false,
ease: "easeOutCubic",
// Handle modal ready callback
complete: function() {
$overlay.css({display:"none"});
// Call complete callback
if (typeof(options.complete) === "function") {
options.complete();
}
$overlay.remove();
_stack--;
}
});
}
else {
$modal.velocity(
{ top: options.starting_top, opacity: 0, scaleX: 0.7}, {
duration: options.out_duration,
complete:
function() {
$(this).css('display', 'none');
// Call complete callback
if (typeof(options.complete) === "function") {
options.complete();
}
$overlay.remove();
_stack--;
}
}
);
}
}
});
$.fn.extend({
leanModal: function(option) {
return this.each(function() {
var defaults = {
starting_top: '4%'
},
// Override defaults
options = $.extend(defaults, option);
// Close Handlers
$(this).click(function(e) {
options.starting_top = ($(this).offset().top - $(window).scrollTop()) /1.15;
var modal_id = $(this).attr("href") || '#' + $(this).data('target');
$(modal_id).openModal(options);
e.preventDefault();
}); // done set on click
}); // done return
}
});
})(jQuery);
;(function ($) {
$.fn.materialbox = function () {
return this.each(function() {
if ($(this).hasClass('initialized')) {
return;
}
$(this).addClass('initialized');
var overlayActive = false;
var doneAnimating = true;
var inDuration = 275;
var outDuration = 200;
var origin = $(this);
var placeholder = $('<div></div>').addClass('material-placeholder');
var originalWidth = 0;
var originalHeight = 0;
var ancestorsChanged;
var ancestor;
origin.wrap(placeholder);
origin.on('click', function(){
var placeholder = origin.parent('.material-placeholder');
var windowWidth = window.innerWidth;
var windowHeight = window.innerHeight;
var originalWidth = origin.width();
var originalHeight = origin.height();
// If already modal, return to original
if (doneAnimating === false) {
returnToOriginal();
return false;
}
else if (overlayActive && doneAnimating===true) {
returnToOriginal();
return false;
}
// Set states
doneAnimating = false;
origin.addClass('active');
overlayActive = true;
// Set positioning for placeholder
placeholder.css({
width: placeholder[0].getBoundingClientRect().width,
height: placeholder[0].getBoundingClientRect().height,
position: 'relative',
top: 0,
left: 0
});
// Find ancestor with overflow: hidden; and remove it
ancestorsChanged = undefined;
ancestor = placeholder[0].parentNode;
var count = 0;
while (ancestor !== null && !$(ancestor).is(document)) {
var curr = $(ancestor);
if (curr.css('overflow') !== 'visible') {
curr.css('overflow', 'visible');
if (ancestorsChanged === undefined) {
ancestorsChanged = curr;
}
else {
ancestorsChanged = ancestorsChanged.add(curr);
}
}
ancestor = ancestor.parentNode;
}
// Set css on origin
origin.css({position: 'absolute', 'z-index': 1000})
.data('width', originalWidth)
.data('height', originalHeight);
// Add overlay
var overlay = $('<div id="materialbox-overlay"></div>')
.css({
opacity: 0
})
.click(function(){
if (doneAnimating === true)
returnToOriginal();
});
// Animate Overlay
// Put before in origin image to preserve z-index layering.
origin.before(overlay);
overlay.velocity({opacity: 1},
{duration: inDuration, queue: false, easing: 'easeOutQuad'} );
// Add and animate caption if it exists
if (origin.data('caption') !== "") {
var $photo_caption = $('<div class="materialbox-caption"></div>');
$photo_caption.text(origin.data('caption'));
$('body').append($photo_caption);
$photo_caption.css({ "display": "inline" });
$photo_caption.velocity({opacity: 1}, {duration: inDuration, queue: false, easing: 'easeOutQuad'});
}
// Resize Image
var ratio = 0;
var widthPercent = originalWidth / windowWidth;
var heightPercent = originalHeight / windowHeight;
var newWidth = 0;
var newHeight = 0;
if (widthPercent > heightPercent) {
ratio = originalHeight / originalWidth;
newWidth = windowWidth * 0.9;
newHeight = windowWidth * 0.9 * ratio;
}
else {
ratio = originalWidth / originalHeight;
newWidth = (windowHeight * 0.9) * ratio;
newHeight = windowHeight * 0.9;
}
// Animate image + set z-index
if(origin.hasClass('responsive-img')) {
origin.velocity({'max-width': newWidth, 'width': originalWidth}, {duration: 0, queue: false,
complete: function(){
origin.css({left: 0, top: 0})
.velocity(
{
height: newHeight,
width: newWidth,
left: $(document).scrollLeft() + windowWidth/2 - origin.parent('.material-placeholder').offset().left - newWidth/2,
top: $(document).scrollTop() + windowHeight/2 - origin.parent('.material-placeholder').offset().top - newHeight/ 2
},
{
duration: inDuration,
queue: false,
easing: 'easeOutQuad',
complete: function(){doneAnimating = true;}
}
);
} // End Complete
}); // End Velocity
}
else {
origin.css('left', 0)
.css('top', 0)
.velocity(
{
height: newHeight,
width: newWidth,
left: $(document).scrollLeft() + windowWidth/2 - origin.parent('.material-placeholder').offset().left - newWidth/2,
top: $(document).scrollTop() + windowHeight/2 - origin.parent('.material-placeholder').offset().top - newHeight/ 2
},
{
duration: inDuration,
queue: false,
easing: 'easeOutQuad',
complete: function(){doneAnimating = true;}
}
); // End Velocity
}
}); // End origin on click
// Return on scroll
$(window).scroll(function() {
if (overlayActive) {
returnToOriginal();
}
});
// Return on ESC
$(document).keyup(function(e) {
if (e.keyCode === 27 && doneAnimating === true) { // ESC key
if (overlayActive) {
returnToOriginal();
}
}
});
// This function returns the modaled image to the original spot
function returnToOriginal() {
doneAnimating = false;
var placeholder = origin.parent('.material-placeholder');
var windowWidth = window.innerWidth;
var windowHeight = window.innerHeight;
var originalWidth = origin.data('width');
var originalHeight = origin.data('height');
origin.velocity("stop", true);
$('#materialbox-overlay').velocity("stop", true);
$('.materialbox-caption').velocity("stop", true);
$('#materialbox-overlay').velocity({opacity: 0}, {
duration: outDuration, // Delay prevents animation overlapping
queue: false, easing: 'easeOutQuad',
complete: function(){
// Remove Overlay
overlayActive = false;
$(this).remove();
}
});
// Resize Image
origin.velocity(
{
width: originalWidth,
height: originalHeight,
left: 0,
top: 0
},
{
duration: outDuration,
queue: false, easing: 'easeOutQuad'
}
);
// Remove Caption + reset css settings on image
$('.materialbox-caption').velocity({opacity: 0}, {
duration: outDuration, // Delay prevents animation overlapping
queue: false, easing: 'easeOutQuad',
complete: function(){
placeholder.css({
height: '',
width: '',
position: '',
top: '',
left: ''
});
origin.css({
height: '',
top: '',
left: '',
width: '',
'max-width': '',
position: '',
'z-index': ''
});
// Remove class
origin.removeClass('active');
doneAnimating = true;
$(this).remove();
// Remove overflow overrides on ancestors
if (ancestorsChanged) {
ancestorsChanged.css('overflow', '');
}
}
});
}
});
};
$(document).ready(function(){
$('.materialboxed').materialbox();
});
lib/Mojolicious/Plugin/Materialize/js/materialize.js view on Meta::CPAN
} else {
toast.classList.remove('panning');
// Put toast back into original position
Vel(toast, { left: 0, opacity: 1 }, { duration: 300,
easing: 'easeOutExpo',
queue: false
});
}
});
return toast;
}
};
;(function ($) {
var methods = {
init : function(options) {
var defaults = {
menuWidth: 300,
edge: 'left',
closeOnClick: false
};
options = $.extend(defaults, options);
$(this).each(function(){
var $this = $(this);
var menu_id = $("#"+ $this.attr('data-activates'));
// Set to width
if (options.menuWidth != 300) {
menu_id.css('width', options.menuWidth);
}
// Add Touch Area
var dragTarget = $('<div class="drag-target"></div>');
$('body').append(dragTarget);
if (options.edge == 'left') {
menu_id.css('transform', 'translateX(-100%)');
dragTarget.css({'left': 0}); // Add Touch Area
}
else {
menu_id.addClass('right-aligned') // Change text-alignment to right
.css('transform', 'translateX(100%)');
dragTarget.css({'right': 0}); // Add Touch Area
}
// If fixed sidenav, bring menu out
if (menu_id.hasClass('fixed')) {
if (window.innerWidth > 992) {
menu_id.css('transform', 'translateX(0)');
}
}
// Window resize to reset on large screens fixed
if (menu_id.hasClass('fixed')) {
$(window).resize( function() {
if (window.innerWidth > 992) {
// Close menu if window is resized bigger than 992 and user has fixed sidenav
if ($('#sidenav-overlay').length !== 0 && menuOut) {
removeMenu(true);
}
else {
// menu_id.removeAttr('style');
menu_id.css('transform', 'translateX(0%)');
// menu_id.css('width', options.menuWidth);
}
}
else if (menuOut === false){
if (options.edge === 'left') {
menu_id.css('transform', 'translateX(-100%)');
} else {
menu_id.css('transform', 'translateX(100%)');
}
}
});
}
// if closeOnClick, then add close event for all a tags in side sideNav
if (options.closeOnClick === true) {
menu_id.on("click.itemclick", "a:not(.collapsible-header)", function(){
removeMenu();
});
}
function removeMenu(restoreNav) {
panning = false;
menuOut = false;
// Reenable scrolling
$('body').css({
overflow: '',
width: ''
});
$('#sidenav-overlay').velocity({opacity: 0}, {duration: 200,
queue: false, easing: 'easeOutQuad',
complete: function() {
$(this).remove();
} });
if (options.edge === 'left') {
// Reset phantom div
dragTarget.css({width: '', right: '', left: '0'});
menu_id.velocity(
{'translateX': '-100%'},
{ duration: 200,
queue: false,
easing: 'easeOutCubic',
complete: function() {
if (restoreNav === true) {
// Restore Fixed sidenav
menu_id.removeAttr('style');
menu_id.css('width', options.menuWidth);
}
}
});
}
else {
// Reset phantom div
dragTarget.css({width: '', right: '0', left: ''});
menu_id.velocity(
{'translateX': '100%'},
{ duration: 200,
queue: false,
easing: 'easeOutCubic',
complete: function() {
if (restoreNav === true) {
// Restore Fixed sidenav
menu_id.removeAttr('style');
menu_id.css('width', options.menuWidth);
}
}
});
}
}
// Touch Event
var panning = false;
var menuOut = false;
dragTarget.on('click', function(){
if (menuOut) {
removeMenu();
}
});
dragTarget.hammer({
prevent_default: false
}).bind('pan', function(e) {
if (e.gesture.pointerType == "touch") {
var direction = e.gesture.direction;
var x = e.gesture.center.x;
var y = e.gesture.center.y;
var velocityX = e.gesture.velocityX;
// Disable Scrolling
var $body = $('body');
var oldWidth = $body.innerWidth();
$body.css('overflow', 'hidden');
$body.width(oldWidth);
// If overlay does not exist, create one and if it is clicked, close menu
if ($('#sidenav-overlay').length === 0) {
var overlay = $('<div id="sidenav-overlay"></div>');
overlay.css('opacity', 0).click( function(){
removeMenu();
});
$('body').append(overlay);
}
// Keep within boundaries
if (options.edge === 'left') {
if (x > options.menuWidth) { x = options.menuWidth; }
else if (x < 0) { x = 0; }
}
if (options.edge === 'left') {
// Left Direction
if (x < (options.menuWidth / 2)) { menuOut = false; }
// Right Direction
else if (x >= (options.menuWidth / 2)) { menuOut = true; }
menu_id.css('transform', 'translateX(' + (x - options.menuWidth) + 'px)');
}
else {
// Left Direction
if (x < (window.innerWidth - options.menuWidth / 2)) {
menuOut = true;
}
// Right Direction
else if (x >= (window.innerWidth - options.menuWidth / 2)) {
menuOut = false;
}
var rightPos = (x - options.menuWidth / 2);
if (rightPos < 0) {
rightPos = 0;
}
menu_id.css('transform', 'translateX(' + rightPos + 'px)');
}
// Percentage overlay
var overlayPerc;
if (options.edge === 'left') {
overlayPerc = x / options.menuWidth;
$('#sidenav-overlay').velocity({opacity: overlayPerc }, {duration: 10, queue: false, easing: 'easeOutQuad'});
}
else {
overlayPerc = Math.abs((x - window.innerWidth) / options.menuWidth);
$('#sidenav-overlay').velocity({opacity: overlayPerc }, {duration: 10, queue: false, easing: 'easeOutQuad'});
}
}
}).bind('panend', function(e) {
if (e.gesture.pointerType == "touch") {
var velocityX = e.gesture.velocityX;
var x = e.gesture.center.x;
var leftPos = x - options.menuWidth;
var rightPos = x - options.menuWidth / 2;
if (leftPos > 0 ) {
leftPos = 0;
}
if (rightPos < 0) {
rightPos = 0;
}
panning = false;
if (options.edge === 'left') {
// If velocityX <= 0.3 then the user is flinging the menu closed so ignore menuOut
if ((menuOut && velocityX <= 0.3) || velocityX < -0.5) {
// Return menu to open
if (leftPos !== 0) {
menu_id.velocity({'translateX': [0, leftPos]}, {duration: 300, queue: false, easing: 'easeOutQuad'});
}
$('#sidenav-overlay').velocity({opacity: 1 }, {duration: 50, queue: false, easing: 'easeOutQuad'});
dragTarget.css({width: '50%', right: 0, left: ''});
menuOut = true;
}
else if (!menuOut || velocityX > 0.3) {
// Enable Scrolling
$('body').css({
overflow: '',
width: ''
});
// Slide menu closed
menu_id.velocity({'translateX': [-1 * options.menuWidth - 10, leftPos]}, {duration: 200, queue: false, easing: 'easeOutQuad'});
$('#sidenav-overlay').velocity({opacity: 0 }, {duration: 200, queue: false, easing: 'easeOutQuad',
complete: function () {
$(this).remove();
}});
dragTarget.css({width: '10px', right: '', left: 0});
}
}
else {
if ((menuOut && velocityX >= -0.3) || velocityX > 0.5) {
// Return menu to open
if (rightPos !== 0) {
menu_id.velocity({'translateX': [0, rightPos]}, {duration: 300, queue: false, easing: 'easeOutQuad'});
}
$('#sidenav-overlay').velocity({opacity: 1 }, {duration: 50, queue: false, easing: 'easeOutQuad'});
dragTarget.css({width: '50%', right: '', left: 0});
menuOut = true;
}
else if (!menuOut || velocityX < -0.3) {
// Enable Scrolling
$('body').css({
overflow: '',
width: ''
});
// Slide menu closed
menu_id.velocity({'translateX': [options.menuWidth + 10, rightPos]}, {duration: 200, queue: false, easing: 'easeOutQuad'});
$('#sidenav-overlay').velocity({opacity: 0 }, {duration: 200, queue: false, easing: 'easeOutQuad',
complete: function () {
$(this).remove();
}});
dragTarget.css({width: '10px', right: 0, left: ''});
}
}
}
});
$this.click(function() {
if (menuOut === true) {
menuOut = false;
panning = false;
removeMenu();
}
else {
// Disable Scrolling
var $body = $('body');
var oldWidth = $body.innerWidth();
$body.css('overflow', 'hidden');
$body.width(oldWidth);
// Push current drag target on top of DOM tree
$('body').append(dragTarget);
if (options.edge === 'left') {
dragTarget.css({width: '50%', right: 0, left: ''});
menu_id.velocity({'translateX': [0, -1 * options.menuWidth]}, {duration: 300, queue: false, easing: 'easeOutQuad'});
}
else {
dragTarget.css({width: '50%', right: '', left: 0});
menu_id.velocity({'translateX': [0, options.menuWidth]}, {duration: 300, queue: false, easing: 'easeOutQuad'});
}
var overlay = $('<div id="sidenav-overlay"></div>');
overlay.css('opacity', 0)
.click(function(){
menuOut = false;
panning = false;
removeMenu();
overlay.velocity({opacity: 0}, {duration: 300, queue: false, easing: 'easeOutQuad',
complete: function() {
$(this).remove();
} });
});
$('body').append(overlay);
overlay.velocity({opacity: 1}, {duration: 300, queue: false, easing: 'easeOutQuad',
complete: function () {
menuOut = true;
panning = false;
}
});
}
return false;
});
});
},
show : function() {
this.trigger('click');
},
hide : function() {
$('#sidenav-overlay').trigger('click');
}
};
$.fn.sideNav = function(methodOrOptions) {
if ( methods[methodOrOptions] ) {
return methods[ methodOrOptions ].apply( this, Array.prototype.slice.call( arguments, 1 ));
} else if ( typeof methodOrOptions === 'object' || ! methodOrOptions ) {
// Default to "init"
return methods.init.apply( this, arguments );
} else {
$.error( 'Method ' + methodOrOptions + ' does not exist on jQuery.sideNav' );
}
}; // Plugin end
}( jQuery ));
;/**
* Extend jquery with a scrollspy plugin.
* This watches the window scroll and fires events when elements are scrolled into viewport.
*
* throttle() and getTime() taken from Underscore.js
* https://github.com/jashkenas/underscore
*
* @author Copyright 2013 John Smart
* @license https://raw.github.com/thesmart/jquery-scrollspy/master/LICENSE
* @see https://github.com/thesmart
* @version 0.1.2
*/
(function($) {
var jWindow = $(window);
var elements = [];
var elementsInView = [];
var isSpying = false;
var ticks = 0;
var unique_id = 1;
var offset = {
top : 0,
right : 0,
bottom : 0,
left : 0,
}
/**
* Find elements that are within the boundary
* @param {number} top
* @param {number} right
* @param {number} bottom
* @param {number} left
* @return {jQuery} A collection of elements
*/
function findElements(top, right, bottom, left) {
var hits = $();
$.each(elements, function(i, element) {
if (element.height() > 0) {
var elTop = element.offset().top,
elLeft = element.offset().left,
elRight = elLeft + element.width(),
elBottom = elTop + element.height();
var isIntersect = !(elLeft > right ||
( run in 0.593 second using v1.01-cache-2.11-cpan-39bf76dae61 )