plugin updates

This commit is contained in:
Tony Volpe
2024-07-16 13:57:46 +00:00
parent 41f50eacc4
commit 8f93917880
1529 changed files with 259452 additions and 25451 deletions

View File

@@ -0,0 +1,80 @@
/**
* Copyright (c) 2011-2014 Felix Gnass
* Licensed under the MIT license
*/
/*
Basic Usage:
============
$('#el').spin(); // Creates a default Spinner using the text color of #el.
$('#el').spin({ ... }); // Creates a Spinner using the provided options.
$('#el').spin(false); // Stops and removes the spinner.
Using Presets:
==============
$('#el').spin('small'); // Creates a 'small' Spinner using the text color of #el.
$('#el').spin('large', '#fff'); // Creates a 'large' white Spinner.
Adding a custom preset:
=======================
$.fn.spin.presets.flower = {
lines: 9
length: 10
width: 20
radius: 0
}
$('#el').spin('flower', 'red');
*/
(function (factory) {
if (typeof exports == 'object') {
// CommonJS
factory(require('jquery'), require('spin'))
}
else if (typeof define == 'function' && define.amd) {
// AMD, register as anonymous module
define(['jquery', 'spin'], factory)
}
else {
// Browser globals
if (!window.Spinner) throw new Error('Spin.js not present')
factory(window.jQuery, window.Spinner)
}
}(function ($, Spinner) {
$.fn.spin = function (opts, color) {
return this.each(function () {
var $this = $(this),
data = $this.data();
if (data.spinner) {
data.spinner.stop();
delete data.spinner;
}
if (opts !== false) {
opts = $.extend(
{color: color || $this.css('color')},
$.fn.spin.presets[opts] || opts
)
data.spinner = new Spinner(opts).spin(this)
}
})
}
$.fn.spin.presets = {
tiny: {lines: 8, length: 2, width: 2, radius: 3},
small: {lines: 8, length: 4, width: 3, radius: 5},
large: {lines: 10, length: 8, width: 4, radius: 8}
}
}));

View File

@@ -0,0 +1,179 @@
/*
WP Gif Player, an easy to use GIF Player for Wordpress
Copyright (C) 2016 David Bedenknecht (http://www.sketchmouse.com/page/contact)
This program is free software: you can redistribute it and/or modify
it under the terms of the GNU General Public License as published by
the Free Software Foundation, either version 3 of the License, or
(at your option) any later version.
This program is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
GNU General Public License for more details.
You should have received a copy of the GNU General Public License
along with this program. If not, see <http://www.gnu.org/licenses/>.
*/
jQuery(function () {
//gifs HAVE to be preloaded, otherwise nothing happens for ages when user clicks play!
var gifs = []; //Array that will hold all gifs as Images
var gif_urls = [];//array holds all GIF Urls
var player_wrap = jQuery('.gif_wrap');
var showing_btn = jQuery('span.play_gif'); //Play "Button" - purely css
var playing = false;
var first_load = true;
var stop_load = false;
var last_viewed = null; //index of gif that was last played
//first spinner which is shown before the window has fully loaded
var spinnerPreload;
var spinnerLoading;
var spinnerOptions = {
lines: 13,
length: 12,
width: 8,
radius: 18,
trail: 100,
speed: 1.3,
color: '#fff',
className: 'gif_spinner'
};
spinnerPreload = new Spinner(spinnerOptions);
spinnerLoading = new Spinner(spinnerOptions);
//Preloads one gif as an image object
function preload_gif(url, idx) {
if (!gifs[idx]) {//if there not already an image at that idx in gifs, create one
var img = new Image();
img.src = url;
img.className = '_showing';
gifs[idx] = img;
first_load = true;
return img;
} else {
first_load = false;
return gifs[idx];
}
}
//Save all GIF urls
jQuery('._showing.frame').each(function () {
var s = jQuery(this);
if (s.attr('src')) {
if (s.attr('data-lazy-src')) {//unfassbar.es -> lazy load enabled
gif_urls.push(s.attr('data-lazy-src').replace('_still_tmp.jpeg', '.gif'));
} else {
if (typeof s.attr('src') !== 'undefined' && s.attr('src') !== false) {
gif_urls.push(s.attr('src').replace('_still_tmp.jpeg', '.gif'));
} else {
gif_urls.push(s.src.replace('_still_tmp.jpeg', '.gif'));
}
}
} else if (s.data('cfsrc')) { //CloudFlare sets the "src" as 'data-cfsrc="..."'
gif_urls.push(s.data('cfsrc').replace('_still_tmp.jpeg', '.gif'));
}
});
jQuery(document).ready(function () {
//start preloading spinner
spinnerPreload.spin();//start Spinner
if (jQuery('.gif_wrap').length) {
jQuery('.gif_wrap')[0].appendChild(spinnerPreload.el);//only show on first gif (if we wanted to show it on all gifs, we'd have to instantiate a new spinner for each)
}
});
jQuery(window).on('load', function () {
spinnerPreload.stop(); //stop spinner when all images have loaded and play button should be clickable
var showing_btn_idx = "";
var gif_img;
var displayedImgSrc;
var hiddenImgSrc;
//Button is hidden before whole DOM tree is loaded, otherwise it jumps from top to center of .gif_wrap
showing_btn.css('visibility', 'visible'); //show GIF Play Button
function play(idx) {
//Img / GIF sources
displayedImgSrc = jQuery('._showing')[idx].src;
hiddenImgSrc = jQuery('._hidden')[idx].src;
//Index of last played element
last_viewed = idx;
showing_btn_idx = showing_btn[idx]; //specific GIF Button for this clicked element
if (playing == false) { //hide first frame and GIF button
playing = true;
showing_btn_idx.style.visibility = 'hidden';
} else { //display first frame and GIF button
playing = false;
showing_btn_idx.style.visibility = 'visible';
}
if (displayedImgSrc == gifs[idx].src && !first_load) { //if the gif is already showing
displayedImgSrc = hiddenImgSrc;
hiddenImgSrc = gifs[idx].src;
if (playing == false) //if the the gif that was played is clicked again and stops last_view has to be set to null, otherwise two gifs start at the same time
last_viewed = null;
else
last_viewed = idx;
} else if (hiddenImgSrc == gifs[idx].src) { // if still is showing
hiddenImgSrc = displayedImgSrc;
displayedImgSrc = gifs[idx].src;
}
jQuery('._showing')[idx].src = displayedImgSrc;
jQuery('._hidden')[idx].src = hiddenImgSrc;
}
jQuery('.gif_wrap').click(function (event) {
var self = this;
var idx = jQuery('.gif_wrap').index(this); //returns index of clicked div
if (!gifs[idx]) {
first_load = true;
//target is gif_wrap
spinnerLoading.spin();//start Spinner
self.appendChild(spinnerLoading.el);
}
//This is to check if the user clicked again before the gif was fully loaded.
//If so, we need to stop the onload Event for the image by setting first_load to false.
//Preload the gif onclick
if (first_load) {
stop_load = true;
gif_img = preload_gif(gif_urls[idx], idx);
gif_img.onload = function () { //could possibly cause errors (asynch. http://stackoverflow.com/questions/20613984/jquery-or-javascript-check-if-image-loaded)
spinnerLoading.stop();
first_load = false; //set first_load to false, otherwise, if a gif is clicked twice the src of the still is overwritten.
};
//append gif as img src
jQuery(self).children('img').attr('src', gif_img.src);
}
if (!last_viewed && last_viewed != 0) {
last_viewed = idx; //last_viewed != 0 has to be included because !0 is true
}
if (idx == last_viewed) { //the index of the gif_wrap element that's just been clicked is the same as idx of last click
play(idx);
} else { //idx of element that's just been clicked differs from element that's last been clicked
if (playing) {
showing_btn_idx = showing_btn[last_viewed]; //play button of last played gif
showing_btn_idx.style.visibility = 'visible';
if (jQuery('._showing')[last_viewed].src == gifs[last_viewed].src) { //if the gif is already showing
var tmpSrc = jQuery('._showing')[last_viewed].src;
jQuery('._showing')[last_viewed].src = jQuery('._hidden')[last_viewed].src;
jQuery('._hidden')[last_viewed].src = tmpSrc;
}
playing = false;
play(idx);
}
}
});
player_wrap.mouseenter(function () {
player_wrap.css('cursor', 'pointer');
}); //change mouse on enter, when leaving mouse changes on default
});
});

View File

@@ -0,0 +1,357 @@
/**
* Copyright (c) 2011-2014 Felix Gnass
* Licensed under the MIT license
*/
(function (root, factory) {
/* CommonJS */
if (typeof exports == 'object') module.exports = factory()
/* AMD module */
else if (typeof define == 'function' && define.amd) define(factory)
/* Browser global */
else root.Spinner = factory()
}
(this, function () {
"use strict";
var prefixes = ['webkit', 'Moz', 'ms', 'O'] /* Vendor prefixes */
, animations = {} /* Animation rules keyed by their name */
, useCssAnimations
/* Whether to use CSS animations or setTimeout */
/**
* Utility function to create elements. If no tag name is given,
* a DIV is created. Optionally properties can be passed.
*/
function createEl(tag, prop) {
var el = document.createElement(tag || 'div')
, n
for (n in prop) el[n] = prop[n]
return el
}
/**
* Appends children and returns the parent.
*/
function ins(parent /* child1, child2, ...*/) {
for (var i = 1, n = arguments.length; i < n; i++)
parent.appendChild(arguments[i])
return parent
}
/**
* Insert a new stylesheet to hold the @keyframe or VML rules.
*/
var sheet = (function () {
var el = createEl('style', {type: 'text/css'})
ins(document.getElementsByTagName('head')[0], el)
return el.sheet || el.styleSheet
}())
/**
* Creates an opacity keyframe animation rule and returns its name.
* Since most mobile Webkits have timing issues with animation-delay,
* we create separate rules for each line/segment.
*/
function addAnimation(alpha, trail, i, lines) {
var name = ['opacity', trail, ~~(alpha * 100), i, lines].join('-')
, start = 0.01 + i / lines * 100
, z = Math.max(1 - (1 - alpha) / trail * (100 - start), alpha)
, prefix = useCssAnimations.substring(0, useCssAnimations.indexOf('Animation')).toLowerCase()
, pre = prefix && '-' + prefix + '-' || ''
if (!animations[name]) {
sheet.insertRule(
'@' + pre + 'keyframes ' + name + '{' +
'0%{opacity:' + z + '}' +
start + '%{opacity:' + alpha + '}' +
(start + 0.01) + '%{opacity:1}' +
(start + trail) % 100 + '%{opacity:' + alpha + '}' +
'100%{opacity:' + z + '}' +
'}', sheet.cssRules.length)
animations[name] = 1
}
return name
}
/**
* Tries various vendor prefixes and returns the first supported property.
*/
function vendor(el, prop) {
var s = el.style
, pp
, i
prop = prop.charAt(0).toUpperCase() + prop.slice(1)
for (i = 0; i < prefixes.length; i++) {
pp = prefixes[i] + prop
if (s[pp] !== undefined) return pp
}
if (s[prop] !== undefined) return prop
}
/**
* Sets multiple style properties at once.
*/
function css(el, prop) {
for (var n in prop)
el.style[vendor(el, n) || n] = prop[n]
return el
}
/**
* Fills in default values.
*/
function merge(obj) {
for (var i = 1; i < arguments.length; i++) {
var def = arguments[i]
for (var n in def)
if (obj[n] === undefined) obj[n] = def[n]
}
return obj
}
/**
* Returns the absolute page-offset of the given element.
*/
function pos(el) {
var o = {x: el.offsetLeft, y: el.offsetTop}
while ((el = el.offsetParent))
o.x += el.offsetLeft, o.y += el.offsetTop
return o
}
/**
* Returns the line color from the given string or array.
*/
function getColor(color, idx) {
return typeof color == 'string' ? color : color[idx % color.length]
}
// Built-in defaults
var defaults = {
lines: 12, // The number of lines to draw
length: 7, // The length of each line
width: 5, // The line thickness
radius: 10, // The radius of the inner circle
rotate: 0, // Rotation offset
corners: 1, // Roundness (0..1)
color: '#000', // #rgb or #rrggbb
direction: 1, // 1: clockwise, -1: counterclockwise
speed: 1, // Rounds per second
trail: 100, // Afterglow percentage
opacity: 1 / 4, // Opacity of the lines
fps: 20, // Frames per second when using setTimeout()
zIndex: 2e9, // Use a high z-index by default
className: 'spinner', // CSS class to assign to the element
top: '50%', // center vertically
left: '50%', // center horizontally
position: 'absolute' // element position
}
/** The constructor */
function Spinner(o) {
this.opts = merge(o || {}, Spinner.defaults, defaults)
}
// Global defaults that override the built-ins:
Spinner.defaults = {}
merge(Spinner.prototype, {
/**
* Adds the spinner to the given target element. If this instance is already
* spinning, it is automatically removed from its previous target b calling
* stop() internally.
*/
spin: function (target) {
this.stop()
var self = this
, o = self.opts
, el = self.el = css(createEl(0, {className: o.className}), {
position: o.position,
width: 0,
zIndex: o.zIndex
})
, mid = o.radius + o.length + o.width
css(el, {
left: o.left,
top: o.top
})
if (target) {
target.insertBefore(el, target.firstChild || null)
}
el.setAttribute('role', 'progressbar')
self.lines(el, self.opts)
if (!useCssAnimations) {
// No CSS animation support, use setTimeout() instead
var i = 0
, start = (o.lines - 1) * (1 - o.direction) / 2
, alpha
, fps = o.fps
, f = fps / o.speed
, ostep = (1 - o.opacity) / (f * o.trail / 100)
, astep = f / o.lines
;(function anim() {
i++;
for (var j = 0; j < o.lines; j++) {
alpha = Math.max(1 - (i + (o.lines - j) * astep) % f * ostep, o.opacity)
self.opacity(el, j * o.direction + start, alpha, o)
}
self.timeout = self.el && setTimeout(anim, ~~(1000 / fps))
})()
}
return self
},
/**
* Stops and removes the Spinner.
*/
stop: function () {
var el = this.el
if (el) {
clearTimeout(this.timeout)
if (el.parentNode) el.parentNode.removeChild(el)
this.el = undefined
}
return this
},
/**
* Internal method that draws the individual lines. Will be overwritten
* in VML fallback mode below.
*/
lines: function (el, o) {
var i = 0
, start = (o.lines - 1) * (1 - o.direction) / 2
, seg
function fill(color, shadow) {
return css(createEl(), {
position: 'absolute',
width: (o.length + o.width) + 'px',
height: o.width + 'px',
background: color,
boxShadow: shadow,
transformOrigin: 'left',
transform: 'rotate(' + ~~(360 / o.lines * i + o.rotate) + 'deg) translate(' + o.radius + 'px' + ',0)',
borderRadius: (o.corners * o.width >> 1) + 'px'
})
}
for (; i < o.lines; i++) {
seg = css(createEl(), {
position: 'absolute',
top: 1 + ~(o.width / 2) + 'px',
transform: o.hwaccel ? 'translate3d(0,0,0)' : '',
opacity: o.opacity,
animation: useCssAnimations && addAnimation(o.opacity, o.trail, start + i * o.direction, o.lines) + ' ' + 1 / o.speed + 's linear infinite'
})
if (o.shadow) ins(seg, css(fill('#000', '0 0 4px ' + '#000'), {top: 2 + 'px'}))
ins(el, ins(seg, fill(getColor(o.color, i), '0 0 1px rgba(0,0,0,.1)')))
}
return el
},
/**
* Internal method that adjusts the opacity of a single line.
* Will be overwritten in VML fallback mode below.
*/
opacity: function (el, i, val) {
if (i < el.childNodes.length) el.childNodes[i].style.opacity = val
}
})
function initVML() {
/* Utility function to create a VML tag */
function vml(tag, attr) {
return createEl('<' + tag + ' xmlns="urn:schemas-microsoft.com:vml" class="spin-vml">', attr)
}
// No CSS transforms but VML support, add a CSS rule for VML elements:
sheet.addRule('.spin-vml', 'behavior:url(#default#VML)')
Spinner.prototype.lines = function (el, o) {
var r = o.length + o.width
, s = 2 * r
function grp() {
return css(
vml('group', {
coordsize: s + ' ' + s,
coordorigin: -r + ' ' + -r
}),
{width: s, height: s}
)
}
var margin = -(o.width + o.length) * 2 + 'px'
, g = css(grp(), {position: 'absolute', top: margin, left: margin})
, i
function seg(i, dx, filter) {
ins(g,
ins(css(grp(), {rotation: 360 / o.lines * i + 'deg', left: ~~dx}),
ins(css(vml('roundrect', {arcsize: o.corners}), {
width: r,
height: o.width,
left: o.radius,
top: -o.width >> 1,
filter: filter
}),
vml('fill', {color: getColor(o.color, i), opacity: o.opacity}),
vml('stroke', {opacity: 0}) // transparent stroke to fix color bleeding upon opacity change
)
)
)
}
if (o.shadow)
for (i = 1; i <= o.lines; i++)
seg(i, -2, 'progid:DXImageTransform.Microsoft.Blur(pixelradius=2,makeshadow=1,shadowopacity=.3)')
for (i = 1; i <= o.lines; i++) seg(i)
return ins(el, g)
}
Spinner.prototype.opacity = function (el, i, val, o) {
var c = el.firstChild
o = o.shadow && o.lines || 0
if (c && i + o < c.childNodes.length) {
c = c.childNodes[i + o];
c = c && c.firstChild;
c = c && c.firstChild
if (c) c.opacity = val
}
}
}
var probe = css(createEl('group'), {behavior: 'url(#default#VML)'})
if (!vendor(probe, 'transform') && probe.adj) initVML()
else useCssAnimations = vendor(probe, 'animation')
return Spinner
}));