first commit
This commit is contained in:
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@@ -0,0 +1,60 @@
|
||||
(function ($) {
|
||||
'use strict';
|
||||
|
||||
let defaults = {
|
||||
activeClass: 'active',
|
||||
fixed: true
|
||||
};
|
||||
|
||||
let container,
|
||||
target,
|
||||
activeClass,
|
||||
fixed,
|
||||
collection = [];
|
||||
|
||||
let init = function (params) {
|
||||
let options = $.extend({}, defaults, params);
|
||||
|
||||
container = this;
|
||||
target = options.target;
|
||||
activeClass = options.activeClass;
|
||||
fixed = options.fixed;
|
||||
|
||||
let hash = null, element = null;
|
||||
$.each(target, function () {
|
||||
(hash = this.href.split('#')[1]) !== undefined
|
||||
? (element = container.find(`[id="${hash}"]`)).length > 0 ? collection.push({
|
||||
link: $(this),
|
||||
element: element
|
||||
}) : null : null;
|
||||
});
|
||||
this.unbind('scroll', eventListener).bind('scroll', eventListener);
|
||||
return this;
|
||||
};
|
||||
|
||||
let eventListener = function () {
|
||||
let relativeOffsetTop = collection.length > 0 ? collection[0].element.offset().top + container.scrollTop() : 0;
|
||||
$.each(collection, function () {
|
||||
let _ot = Math.floor(this.element.offset().top + container.scrollTop() - relativeOffsetTop);
|
||||
let _st = Math.ceil(container.scrollTop());
|
||||
if (_ot <= _st && _st < _ot + Math.floor(this.element.outerHeight())) {
|
||||
if (!this.link.hasClass(activeClass)) {
|
||||
target.removeClass(activeClass);
|
||||
this.link.addClass(activeClass);
|
||||
}
|
||||
return false;
|
||||
} else if (fixed) {
|
||||
this.link.removeClass('active');
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
$.fn.scrollSpy = function (options) {
|
||||
if (typeof options === 'object' && typeof options.target != "undefined") {
|
||||
return init.apply(this, arguments);
|
||||
} else {
|
||||
$.error('You should use plugin with required options...');
|
||||
}
|
||||
};
|
||||
|
||||
})(jQuery);
|
||||
@@ -0,0 +1 @@
|
||||
!function(t){"use strict";let e,l,i,s,n={activeClass:"active",fixed:!0},o=[],r=function(){let n=o.length>0?o[0].element.offset().top+e.scrollTop():0;t.each(o,function(){let t=Math.floor(this.element.offset().top+e.scrollTop()-n),o=Math.ceil(e.scrollTop());if(t<=o&&o<t+Math.floor(this.element.outerHeight()))return this.link.hasClass(i)||(l.removeClass(i),this.link.addClass(i)),!1;s&&this.link.removeClass("active")})};t.fn.scrollSpy=function(h){if("object"==typeof h&&void 0!==h.target)return function(h){let c=t.extend({},n,h);e=this,l=c.target,i=c.activeClass,s=c.fixed;let u=null,a=null;return t.each(l,function(){void 0!==(u=this.href.split("#")[1])&&(a=e.find(`[id="${u}"]`)).length>0&&o.push({link:t(this),element:a})}),this.unbind("scroll",r).bind("scroll",r),this}.apply(this,arguments);t.error("You should use plugin with required options...")}}(jQuery);
|
||||
File diff suppressed because one or more lines are too long
@@ -0,0 +1,225 @@
|
||||
/**
|
||||
* 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 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) {
|
||||
var elTop = element.offset().top,
|
||||
elLeft = element.offset().left,
|
||||
elRight = elLeft + element.width(),
|
||||
elBottom = elTop + element.height();
|
||||
|
||||
var isIntersect = !(elLeft > right ||
|
||||
elRight < left ||
|
||||
elTop > bottom ||
|
||||
elBottom < top);
|
||||
|
||||
if (isIntersect) {
|
||||
hits.push(element);
|
||||
}
|
||||
});
|
||||
|
||||
return hits;
|
||||
}
|
||||
|
||||
/**
|
||||
* Called when the user scrolls the window
|
||||
*/
|
||||
function onScroll() {
|
||||
// unique tick id
|
||||
++ticks;
|
||||
|
||||
// viewport rectangle
|
||||
var top = jWindow.scrollTop(),
|
||||
left = jWindow.scrollLeft(),
|
||||
right = left + jWindow.width(),
|
||||
bottom = top + jWindow.height();
|
||||
|
||||
// determine which elements are in view
|
||||
var intersections = findElements(top+offset.top, right+offset.right, bottom+offset.bottom, left+offset.left);
|
||||
$.each(intersections, function(i, element) {
|
||||
var lastTick = element.data('scrollSpy:ticks');
|
||||
if (typeof lastTick != 'number') {
|
||||
// entered into view
|
||||
element.triggerHandler('scrollSpy:enter');
|
||||
}
|
||||
|
||||
// update tick id
|
||||
element.data('scrollSpy:ticks', ticks);
|
||||
});
|
||||
|
||||
// determine which elements are no longer in view
|
||||
$.each(elementsInView, function(i, element) {
|
||||
var lastTick = element.data('scrollSpy:ticks');
|
||||
if (typeof lastTick == 'number' && lastTick !== ticks) {
|
||||
// exited from view
|
||||
element.triggerHandler('scrollSpy:exit');
|
||||
element.data('scrollSpy:ticks', null);
|
||||
}
|
||||
});
|
||||
|
||||
// remember elements in view for next tick
|
||||
elementsInView = intersections;
|
||||
}
|
||||
|
||||
/**
|
||||
* Called when window is resized
|
||||
*/
|
||||
function onWinSize() {
|
||||
jWindow.trigger('scrollSpy:winSize');
|
||||
}
|
||||
|
||||
/**
|
||||
* Get time in ms
|
||||
* @license https://raw.github.com/jashkenas/underscore/master/LICENSE
|
||||
* @type {function}
|
||||
* @return {number}
|
||||
*/
|
||||
var getTime = (Date.now || function () {
|
||||
return new Date().getTime();
|
||||
});
|
||||
|
||||
/**
|
||||
* Returns a function, that, when invoked, will only be triggered at most once
|
||||
* during a given window of time. Normally, the throttled function will run
|
||||
* as much as it can, without ever going more than once per `wait` duration;
|
||||
* but if you'd like to disable the execution on the leading edge, pass
|
||||
* `{leading: false}`. To disable execution on the trailing edge, ditto.
|
||||
* @license https://raw.github.com/jashkenas/underscore/master/LICENSE
|
||||
* @param {function} func
|
||||
* @param {number} wait
|
||||
* @param {Object=} options
|
||||
* @returns {Function}
|
||||
*/
|
||||
function throttle(func, wait, options) {
|
||||
var context, args, result;
|
||||
var timeout = null;
|
||||
var previous = 0;
|
||||
options || (options = {});
|
||||
var later = function () {
|
||||
previous = options.leading === false ? 0 : getTime();
|
||||
timeout = null;
|
||||
result = func.apply(context, args);
|
||||
context = args = null;
|
||||
};
|
||||
return function () {
|
||||
var now = getTime();
|
||||
if (!previous && options.leading === false) previous = now;
|
||||
var remaining = wait - (now - previous);
|
||||
context = this;
|
||||
args = arguments;
|
||||
if (remaining <= 0) {
|
||||
clearTimeout(timeout);
|
||||
timeout = null;
|
||||
previous = now;
|
||||
result = func.apply(context, args);
|
||||
context = args = null;
|
||||
} else if (!timeout && options.trailing !== false) {
|
||||
timeout = setTimeout(later, remaining);
|
||||
}
|
||||
return result;
|
||||
};
|
||||
};
|
||||
|
||||
/**
|
||||
* Enables ScrollSpy using a selector
|
||||
* @param {jQuery|string} selector The elements collection, or a selector
|
||||
* @param {Object=} options Optional.
|
||||
throttle : number -> scrollspy throttling. Default: 100 ms
|
||||
offsetTop : number -> offset from top. Default: 0
|
||||
offsetRight : number -> offset from right. Default: 0
|
||||
offsetBottom : number -> offset from bottom. Default: 0
|
||||
offsetLeft : number -> offset from left. Default: 0
|
||||
* @returns {jQuery}
|
||||
*/
|
||||
$.scrollSpy = function(selector, options) {
|
||||
selector = $(selector);
|
||||
selector.each(function(i, element) {
|
||||
elements.push($(element));
|
||||
});
|
||||
options = options || {
|
||||
throttle: 100
|
||||
};
|
||||
|
||||
offset.top = options.offsetTop || 0;
|
||||
offset.right = options.offsetRight || 0;
|
||||
offset.bottom = options.offsetBottom || 0;
|
||||
offset.left = options.offsetLeft || 0;
|
||||
|
||||
var throttledScroll = throttle(onScroll, options.throttle || 100);
|
||||
var readyScroll = function(){
|
||||
$(document).ready(throttledScroll);
|
||||
};
|
||||
|
||||
if (!isSpying) {
|
||||
jWindow.on('scroll', readyScroll);
|
||||
jWindow.on('resize', readyScroll);
|
||||
isSpying = true;
|
||||
}
|
||||
|
||||
// perform a scan once, after current execution context, and after dom is ready
|
||||
setTimeout(readyScroll, 0);
|
||||
|
||||
return selector;
|
||||
};
|
||||
|
||||
/**
|
||||
* Listen for window resize events
|
||||
* @param {Object=} options Optional. Set { throttle: number } to change throttling. Default: 100 ms
|
||||
* @returns {jQuery} $(window)
|
||||
*/
|
||||
$.winSizeSpy = function(options) {
|
||||
$.winSizeSpy = function() { return jWindow; }; // lock from multiple calls
|
||||
options = options || {
|
||||
throttle: 100
|
||||
};
|
||||
return jWindow.on('resize', throttle(onWinSize, options.throttle || 100));
|
||||
};
|
||||
|
||||
/**
|
||||
* Enables ScrollSpy on a collection of elements
|
||||
* e.g. $('.scrollSpy').scrollSpy()
|
||||
* @param {Object=} options Optional.
|
||||
throttle : number -> scrollspy throttling. Default: 100 ms
|
||||
offsetTop : number -> offset from top. Default: 0
|
||||
offsetRight : number -> offset from right. Default: 0
|
||||
offsetBottom : number -> offset from bottom. Default: 0
|
||||
offsetLeft : number -> offset from left. Default: 0
|
||||
* @returns {jQuery}
|
||||
*/
|
||||
$.fn.scrollSpy = function(options) {
|
||||
return $.scrollSpy($(this), options);
|
||||
};
|
||||
|
||||
})(jQuery);
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@@ -0,0 +1,382 @@
|
||||
var Tour = (function() {
|
||||
var t = [],
|
||||
o, cur
|
||||
T = {
|
||||
step: {
|
||||
pl: "krok",
|
||||
en: "step",
|
||||
be: "крок",
|
||||
ca: "pas",
|
||||
cs: "krok",
|
||||
da: "trin",
|
||||
de: "Schritt",
|
||||
el: "βήμα",
|
||||
es: "paso",
|
||||
et: "samm",
|
||||
fi: "vaihe",
|
||||
fr: "étape",
|
||||
hu: "lépés",
|
||||
it: "passo",
|
||||
lt: "žingsnis",
|
||||
lv: "solis",
|
||||
mk: "чекор",
|
||||
nl: "stap",
|
||||
no: "trinn",
|
||||
pt: "passo",
|
||||
ru: "шаг",
|
||||
sk: "krok",
|
||||
sl: "korak",
|
||||
sq: "hapi",
|
||||
sv: "steg",
|
||||
tr: "adım",
|
||||
uk: "крок"
|
||||
},
|
||||
Next: {
|
||||
pl: "Następny",
|
||||
en: "Next",
|
||||
be: "Далей",
|
||||
ca: "Següent",
|
||||
cs: "Další",
|
||||
da: "Næste",
|
||||
de: "Weiter",
|
||||
el: "Την επόμενη",
|
||||
es: "Siguiente",
|
||||
et: "Järgmine",
|
||||
fi: "Seuraava",
|
||||
fr: "Prochaine",
|
||||
hu: "Következő",
|
||||
it: "Accanto",
|
||||
lt: "Kitas",
|
||||
lv: "Nākamā",
|
||||
mk: "Следна",
|
||||
nl: "Volgende",
|
||||
no: "Neste",
|
||||
pt: "Próximo",
|
||||
ru: "Далее",
|
||||
sk: "Ďalej",
|
||||
sl: "Naprej",
|
||||
sq: "Tjetër",
|
||||
sv: "Nästa",
|
||||
tr: "Gelecek",
|
||||
uk: "Далі"
|
||||
},
|
||||
Previous: {
|
||||
pl: "Poprzedni",
|
||||
en: "Previous",
|
||||
be: "Папярэдні",
|
||||
ca: "Anteriors",
|
||||
cs: "Předchozí",
|
||||
da: "Tidligere",
|
||||
de: "Vorherige",
|
||||
el: "Προηγούμενο",
|
||||
es: "Anterior",
|
||||
et: "Eelmine",
|
||||
fi: "Edellinen",
|
||||
fr: "Précédente",
|
||||
hu: "Előző",
|
||||
it: "Precedente",
|
||||
lt: "Ankstesnis",
|
||||
lv: "Iepriekšējā",
|
||||
mk: "Претходна",
|
||||
nl: "Vorige",
|
||||
no: "Tidligere",
|
||||
pt: "Anterior",
|
||||
ru: "Предыдущий",
|
||||
sk: "Predchádzajúce",
|
||||
sl: "Prejšnji",
|
||||
sq: "E mëparshme",
|
||||
sv: "Föregående",
|
||||
tr: "Önceki",
|
||||
uk: "Попередній"
|
||||
},
|
||||
Finish: {
|
||||
pl: "Zakończ",
|
||||
en: "Finish",
|
||||
be: "Аздабленне",
|
||||
ca: "Acabat",
|
||||
cs: "Dokončit",
|
||||
da: "Finish",
|
||||
de: "Finish",
|
||||
el: "Τελειώνει",
|
||||
es: "Acabado",
|
||||
et: "Lõpeta",
|
||||
fi: "Loppuun",
|
||||
fr: "Finition",
|
||||
hu: "Befejezés",
|
||||
it: "Finitura",
|
||||
lt: "Apdaila",
|
||||
lv: "Apdare",
|
||||
mk: "Заврши",
|
||||
nl: "Afwerking",
|
||||
no: "Ferdig",
|
||||
pt: "Acabamento",
|
||||
ru: "Отделка",
|
||||
sk: "Povrch",
|
||||
sl: "Zaključek",
|
||||
sq: "Finish",
|
||||
sv: "Avsluta",
|
||||
tr: "Bitir",
|
||||
uk: "Оздоблення"
|
||||
}
|
||||
};
|
||||
|
||||
function _t(s) {
|
||||
return T[s][t[cur].language] || T[s]['en'];
|
||||
}
|
||||
|
||||
function step(n) {
|
||||
|
||||
cur = n;
|
||||
$('.tourStep, .tourBg').remove();
|
||||
|
||||
if (!t[n]) {
|
||||
return;
|
||||
}
|
||||
|
||||
$('body').append([
|
||||
'<div class="tourStep popover" step="' + n + '">',
|
||||
'<div class="arrow"></div>',
|
||||
'<div class="card">',
|
||||
'<div class="card-header">',
|
||||
!t[n].close ? '' : '<button class="tourClose btn-close float-end">× </button>',
|
||||
'</div>',
|
||||
'<div class="card-body">',
|
||||
t[n].content,
|
||||
'</div>',
|
||||
'<div class="card-footer">',
|
||||
'<div class="pull-right">',
|
||||
'<div class="tourPrev btn btn-default btn-sm">' + _t('Previous') + '</div> ',
|
||||
'<div class="tourNext btn btn-primary btn-sm">' + _t('Next') + '</div>',
|
||||
'</div>',
|
||||
'</div>',
|
||||
'</div>',
|
||||
'</div>'
|
||||
].join(''));
|
||||
|
||||
var el = $('.tourStep')
|
||||
.addClass(t[n].position)
|
||||
.css({
|
||||
minWidth: 250
|
||||
}),
|
||||
x = 0,
|
||||
y = 0;
|
||||
|
||||
if (t[n].element && !!t[n].element.length) {
|
||||
var x1 = 1e6,
|
||||
y1 = 1e6,
|
||||
x2 = 0,
|
||||
y2 = 0;
|
||||
|
||||
t[n].element.each(function(k, v) {
|
||||
var ofs = $(v).offset();
|
||||
x1 = Math.min(x1, ofs.left + t[n].forceCorrectionLeft);
|
||||
y1 = Math.min(y1, ofs.top + t[n].forceCorrectionTop);
|
||||
|
||||
x2 = Math.max(x2, ofs.left + t[n].forceCorrectionLeft + t[n].forceCorrectionWidth
|
||||
+ parseInt($(v).css('border-left-width'))
|
||||
+ parseInt($(v).css('padding-left'))
|
||||
+ $(v).width()
|
||||
+ parseInt($(v).css('padding-right'))
|
||||
+ parseInt($(v).css('border-right-width'))
|
||||
);
|
||||
|
||||
y2 = Math.max(y2, ofs.top + t[n].forceCorrectionTop + t[n].forceCorrectionHeight
|
||||
+ parseInt($(v).css('border-top-width'))
|
||||
+ parseInt($(v).css('padding-top'))
|
||||
+ $(v).height()
|
||||
+ parseInt($(v).css('padding-bottom'))
|
||||
+ parseInt($(v).css('border-bottom-width'))
|
||||
);
|
||||
});
|
||||
|
||||
switch (t[n].position) {
|
||||
case 'top':
|
||||
y = y1 - el.height();
|
||||
x = ((x1 + x2) >> 1) - (el.width() >> 1);
|
||||
break;
|
||||
|
||||
case 'right':
|
||||
y = ((y1 + y2) >> 1) - (el.height()>> 1);
|
||||
x = x2;
|
||||
break;
|
||||
|
||||
case 'left':
|
||||
y = ((y1 + y2) >> 1) - (el.height()>> 1);
|
||||
x = x1 - el.width();
|
||||
break;
|
||||
|
||||
case 'bottom':
|
||||
y = y2;
|
||||
x = ((x1 + x2) >> 1) - (el.width() >> 1);
|
||||
break;
|
||||
};
|
||||
};
|
||||
|
||||
el
|
||||
.css({
|
||||
position: 'absolute',
|
||||
left: x,
|
||||
top: y
|
||||
})
|
||||
.show();
|
||||
|
||||
if (t[n].spotlight) {
|
||||
var p = t[n].padding;
|
||||
$('body').append(Array(5).join('<div class="tourBg"></div>'));
|
||||
|
||||
var pos = [
|
||||
{
|
||||
bottom: 'auto',
|
||||
height: y1 - p
|
||||
},
|
||||
{
|
||||
top: y2 + p,
|
||||
height: $(document).height() - y2 - p
|
||||
},
|
||||
{
|
||||
right: 'auto',
|
||||
bottom: 'auto',
|
||||
top: y1 - p,
|
||||
width: x1 - p,
|
||||
height: 2 * p + y2 - y1
|
||||
},
|
||||
{
|
||||
left: x2 + p,
|
||||
bottom: 'auto',
|
||||
top: y1 - p,
|
||||
height: 2 * p + y2 - y1
|
||||
}
|
||||
];
|
||||
|
||||
$('.tourBg')
|
||||
.css({
|
||||
position: 'absolute',
|
||||
zIndex: 1000,
|
||||
top: 0,
|
||||
bottom: 0,
|
||||
right: 0,
|
||||
left: 0,
|
||||
background: '#000',
|
||||
opacity: 0.3
|
||||
}).each(function(k, v){
|
||||
$(v).css(pos[k]);
|
||||
});
|
||||
}
|
||||
|
||||
if (!!t[n].scroll) {
|
||||
var my = ((Math.min(y, y1) + Math.max(y + el.height(), y2)) >> 1) - ($(window).height() >> 1),
|
||||
mx = ((Math.min(x, x1) + Math.max(x + el.width(), x2)) >> 1) - ($(window).width() >> 1);
|
||||
|
||||
$('html, body').animate({
|
||||
scrollTop: Math.max(0, Math.min(y, y1, my)),
|
||||
scrollLeft: Math.max(0, Math.min(x, x1, mx))
|
||||
});
|
||||
}
|
||||
|
||||
if (!n) {
|
||||
$('.tourPrev').remove();
|
||||
}
|
||||
|
||||
if (n > t.length - 2) {
|
||||
$('.tourNext').text(_t('Finish'));
|
||||
}
|
||||
|
||||
$('.tourStep')
|
||||
.on('click', '.tourNext:not([disabled])', Tour.next)
|
||||
.on('click', '.tourPrev:not([disabled])', Tour.prev)
|
||||
.on('click', '.tourClose:not([disabled])', Tour.close);
|
||||
|
||||
(t[n].onstep || Tour.onstep || function(){})(t[n]);
|
||||
}
|
||||
|
||||
$(window).on('resize', function() {
|
||||
if (!!Tour.onresize) {
|
||||
Tour.onresize();
|
||||
}
|
||||
});
|
||||
|
||||
return {
|
||||
run: function(tour, options) {
|
||||
try {
|
||||
t = [];
|
||||
cur = 0;
|
||||
|
||||
o = {
|
||||
close: true,
|
||||
content: '',
|
||||
language: 'en',
|
||||
padding: 5,
|
||||
position: 'right',
|
||||
scroll: true,
|
||||
spotlight: true,
|
||||
forceCorrectionLeft: 0,
|
||||
forceCorrectionTop: 0,
|
||||
forceCorrectionWidth: 0,
|
||||
forceCorrectionHeight: 0,
|
||||
onstep: null,
|
||||
};
|
||||
|
||||
for (var k in options) {
|
||||
o[k] = options[k];
|
||||
}
|
||||
|
||||
$(tour).each(function(k, v) {
|
||||
for (var kk in o) {
|
||||
v[kk] = v[kk] || o[kk];
|
||||
};
|
||||
|
||||
if (v.element && !!v.element.length) {
|
||||
t.push(v);
|
||||
}
|
||||
});
|
||||
|
||||
step(cur);
|
||||
|
||||
if (!!Tour.onstart) {
|
||||
Tour.onstart();
|
||||
}
|
||||
} catch(e) {}
|
||||
},
|
||||
|
||||
next: function() {
|
||||
step(cur + 1);
|
||||
|
||||
if (cur == t.length) {
|
||||
if (!!Tour.onfinish) {
|
||||
Tour.onfinish();
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
prev: function(){
|
||||
step(cur - 1);
|
||||
},
|
||||
|
||||
current: function(){
|
||||
return cur;
|
||||
},
|
||||
|
||||
close: function(){
|
||||
step(-1);
|
||||
|
||||
if (!!Tour.onclose) {
|
||||
Tour.onclose();
|
||||
}
|
||||
},
|
||||
|
||||
onstart: null,
|
||||
onfinish: null,
|
||||
onclose: null,
|
||||
onstep: null,
|
||||
|
||||
onresize: function() {
|
||||
var n = cur - 1;
|
||||
step(-1);
|
||||
cur = n;
|
||||
|
||||
setTimeout(function() {
|
||||
Tour.next();
|
||||
}, 20);
|
||||
}
|
||||
};
|
||||
})();
|
||||
@@ -0,0 +1,73 @@
|
||||
console.log('zoomrotate: Start');
|
||||
|
||||
(function(){
|
||||
var defaults, extend;
|
||||
console.log('zoomrotate: Init defaults');
|
||||
defaults = {
|
||||
zoom: 1,
|
||||
rotate: 0,
|
||||
debug: true
|
||||
};
|
||||
extend = function() {
|
||||
var args, target, i, object, property;
|
||||
args = Array.prototype.slice.call(arguments);
|
||||
target = args.shift() || {};
|
||||
for (i in args) {
|
||||
object = args[i];
|
||||
for (property in object) {
|
||||
if (object.hasOwnProperty(property)) {
|
||||
if (typeof object[property] === 'object') {
|
||||
target[property] = extend(target[property], object[property]);
|
||||
} else {
|
||||
target[property] = object[property];
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
return target;
|
||||
};
|
||||
|
||||
/**
|
||||
* register the zoomrotate plugin
|
||||
*/
|
||||
videojs.plugin('zoomrotate', function(settings){
|
||||
if (defaults.debug) console.log('zoomrotate: Register init');
|
||||
|
||||
var options, player, video, poster;
|
||||
options = extend(defaults, settings);
|
||||
|
||||
/* Grab the necessary DOM elements */
|
||||
player = this.el();
|
||||
video = this.el().getElementsByTagName('video')[0];
|
||||
poster = this.el().getElementsByTagName('div')[1]; // div vjs-poster
|
||||
|
||||
if (options.debug) console.log('zoomrotate: '+video.style);
|
||||
if (options.debug) console.log('zoomrotate: '+poster.style);
|
||||
if (options.debug) console.log('zoomrotate: '+options.rotate);
|
||||
if (options.debug) console.log('zoomrotate: '+options.zoom);
|
||||
|
||||
/* Array of possible browser specific settings for transformation */
|
||||
var properties = ['transform', 'WebkitTransform', 'MozTransform',
|
||||
'msTransform', 'OTransform'],
|
||||
prop = properties[0];
|
||||
|
||||
/* Iterators */
|
||||
var i,j;
|
||||
|
||||
/* Find out which CSS transform the browser supports */
|
||||
for(i=0,j=properties.length;i<j;i++){
|
||||
if(typeof player.style[properties[i]] !== 'undefined'){
|
||||
prop = properties[i];
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
/* Let's do it */
|
||||
player.style.overflow = 'hidden';
|
||||
video.style[prop]='scale('+options.zoom+') rotate('+options.rotate+'deg)';
|
||||
poster.style[prop]='scale('+options.zoom+') rotate('+options.rotate+'deg)';
|
||||
if (options.debug) console.log('zoomrotate: Register end');
|
||||
});
|
||||
})();
|
||||
|
||||
console.log('zoomrotate: End');
|
||||
Reference in New Issue
Block a user