Some checks failed
Build and Deploy Angular App (Artifacts, Gitea-safe) / test (push) Failing after 1m39s
Build and Deploy Angular App (Artifacts, Gitea-safe) / build (push) Has been skipped
Build and Deploy Angular App (Artifacts, Gitea-safe) / scan (push) Has been skipped
Build and Deploy Angular App (Artifacts, Gitea-safe) / deploy (push) Has been skipped
4288 lines
160 KiB
Plaintext
4288 lines
160 KiB
Plaintext
/// <reference path="Jssor.js" />
|
|
|
|
/*
|
|
* Jssor.Slider 19.0
|
|
* http://www.jssor.com/
|
|
*
|
|
* Licensed under the MIT license:
|
|
* http://www.opensource.org/licenses/MIT
|
|
*
|
|
* TERMS OF USE - Jssor.Slider
|
|
*
|
|
* Copyright 2014 Jssor
|
|
*
|
|
* Permission is hereby granted, free of charge, to any person obtaining
|
|
* a copy of this software and associated documentation files (the
|
|
* "Software"), to deal in the Software without restriction, including
|
|
* without limitation the rights to use, copy, modify, merge, publish,
|
|
* distribute, sublicense, and/or sell copies of the Software, and to
|
|
* permit persons to whom the Software is furnished to do so, subject to
|
|
* the following conditions:
|
|
*
|
|
* The above copyright notice and this permission notice shall be
|
|
* included in all copies or substantial portions of the Software.
|
|
*
|
|
* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
|
|
* EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
|
|
* MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
|
|
* NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
|
|
* LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
|
|
* OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
|
|
* WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
|
|
*/
|
|
|
|
|
|
var $JssorSlideshowFormations$ = window.$JssorSlideshowFormations$ = new function () {
|
|
var _This = this;
|
|
|
|
//Constants +++++++
|
|
|
|
var COLUMN_INCREASE = 0;
|
|
var COLUMN_DECREASE = 1;
|
|
var ROW_INCREASE = 2;
|
|
var ROW_DECREASE = 3;
|
|
|
|
var DIRECTION_HORIZONTAL = 0x0003;
|
|
var DIRECTION_VERTICAL = 0x000C;
|
|
|
|
var TO_LEFT = 0x0001;
|
|
var TO_RIGHT = 0x0002;
|
|
var TO_TOP = 0x0004;
|
|
var TO_BOTTOM = 0x0008;
|
|
|
|
var FROM_LEFT = 0x0100;
|
|
var FROM_TOP = 0x0200;
|
|
var FROM_RIGHT = 0x0400;
|
|
var FROM_BOTTOM = 0x0800;
|
|
|
|
var ASSEMBLY_BOTTOM_LEFT = FROM_BOTTOM + TO_LEFT;
|
|
var ASSEMBLY_BOTTOM_RIGHT = FROM_BOTTOM + TO_RIGHT;
|
|
var ASSEMBLY_TOP_LEFT = FROM_TOP + TO_LEFT;
|
|
var ASSEMBLY_TOP_RIGHT = FROM_TOP + TO_RIGHT;
|
|
var ASSEMBLY_LEFT_TOP = FROM_LEFT + TO_TOP;
|
|
var ASSEMBLY_LEFT_BOTTOM = FROM_LEFT + TO_BOTTOM;
|
|
var ASSEMBLY_RIGHT_TOP = FROM_RIGHT + TO_TOP;
|
|
var ASSEMBLY_RIGHT_BOTTOM = FROM_RIGHT + TO_BOTTOM;
|
|
|
|
//Constants -------
|
|
|
|
//Formation Definition +++++++
|
|
function isToLeft(roadValue) {
|
|
return (roadValue & TO_LEFT) == TO_LEFT;
|
|
}
|
|
|
|
function isToRight(roadValue) {
|
|
return (roadValue & TO_RIGHT) == TO_RIGHT;
|
|
}
|
|
|
|
function isToTop(roadValue) {
|
|
return (roadValue & TO_TOP) == TO_TOP;
|
|
}
|
|
|
|
function isToBottom(roadValue) {
|
|
return (roadValue & TO_BOTTOM) == TO_BOTTOM;
|
|
}
|
|
|
|
function PushFormationOrder(arr, order, formationItem) {
|
|
formationItem.push(order);
|
|
arr[order] = arr[order] || [];
|
|
arr[order].push(formationItem);
|
|
}
|
|
|
|
_This.$FormationStraight = function (transition) {
|
|
var cols = transition.$Cols;
|
|
var rows = transition.$Rows;
|
|
var formationDirection = transition.$Assembly;
|
|
var count = transition.$Count;
|
|
var a = [];
|
|
var i = 0;
|
|
var col = 0;
|
|
var r = 0;
|
|
var cl = cols - 1;
|
|
var rl = rows - 1;
|
|
var il = count - 1;
|
|
var cr;
|
|
var order;
|
|
for (r = 0; r < rows; r++) {
|
|
for (col = 0; col < cols; col++) {
|
|
cr = r + ',' + col;
|
|
switch (formationDirection) {
|
|
case ASSEMBLY_BOTTOM_LEFT:
|
|
order = il - (col * rows + (rl - r));
|
|
break;
|
|
case ASSEMBLY_RIGHT_TOP:
|
|
order = il - (r * cols + (cl - col));
|
|
break;
|
|
case ASSEMBLY_TOP_LEFT:
|
|
order = il - (col * rows + r);
|
|
case ASSEMBLY_LEFT_TOP:
|
|
order = il - (r * cols + col);
|
|
break;
|
|
case ASSEMBLY_BOTTOM_RIGHT:
|
|
order = col * rows + r;
|
|
break;
|
|
case ASSEMBLY_LEFT_BOTTOM:
|
|
order = r * cols + (cl - col);
|
|
break;
|
|
case ASSEMBLY_TOP_RIGHT:
|
|
order = col * rows + (rl - r);
|
|
break;
|
|
default:
|
|
order = r * cols + col;
|
|
break; //ASSEMBLY_RIGHT_BOTTOM
|
|
}
|
|
PushFormationOrder(a, order, [r, col]);
|
|
}
|
|
}
|
|
|
|
return a;
|
|
};
|
|
|
|
_This.$FormationSwirl = function (transition) {
|
|
var cols = transition.$Cols;
|
|
var rows = transition.$Rows;
|
|
var formationDirection = transition.$Assembly;
|
|
var count = transition.$Count;
|
|
var a = [];
|
|
var hit = [];
|
|
var i = 0;
|
|
var col = 0;
|
|
var r = 0;
|
|
var cl = cols - 1;
|
|
var rl = rows - 1;
|
|
var il = count - 1;
|
|
var cr;
|
|
var courses;
|
|
var course = 0;
|
|
switch (formationDirection) {
|
|
case ASSEMBLY_BOTTOM_LEFT:
|
|
col = cl;
|
|
r = 0;
|
|
courses = [ROW_INCREASE, COLUMN_DECREASE, ROW_DECREASE, COLUMN_INCREASE];
|
|
break;
|
|
case ASSEMBLY_RIGHT_TOP:
|
|
col = 0;
|
|
r = rl;
|
|
courses = [COLUMN_INCREASE, ROW_DECREASE, COLUMN_DECREASE, ROW_INCREASE];
|
|
break;
|
|
case ASSEMBLY_TOP_LEFT:
|
|
col = cl;
|
|
r = rl;
|
|
courses = [ROW_DECREASE, COLUMN_DECREASE, ROW_INCREASE, COLUMN_INCREASE];
|
|
break;
|
|
case ASSEMBLY_LEFT_TOP:
|
|
col = cl;
|
|
r = rl;
|
|
courses = [COLUMN_DECREASE, ROW_DECREASE, COLUMN_INCREASE, ROW_INCREASE];
|
|
break;
|
|
case ASSEMBLY_BOTTOM_RIGHT:
|
|
col = 0;
|
|
r = 0;
|
|
courses = [ROW_INCREASE, COLUMN_INCREASE, ROW_DECREASE, COLUMN_DECREASE];
|
|
break;
|
|
case ASSEMBLY_LEFT_BOTTOM:
|
|
col = cl;
|
|
r = 0;
|
|
courses = [COLUMN_DECREASE, ROW_INCREASE, COLUMN_INCREASE, ROW_DECREASE];
|
|
break;
|
|
case ASSEMBLY_TOP_RIGHT:
|
|
col = 0;
|
|
r = rl;
|
|
courses = [ROW_DECREASE, COLUMN_INCREASE, ROW_INCREASE, COLUMN_DECREASE];
|
|
break;
|
|
default:
|
|
col = 0;
|
|
r = 0;
|
|
courses = [COLUMN_INCREASE, ROW_INCREASE, COLUMN_DECREASE, ROW_DECREASE];
|
|
break; //ASSEMBLY_RIGHT_BOTTOM
|
|
}
|
|
i = 0;
|
|
while (i < count) {
|
|
cr = r + ',' + col;
|
|
if (col >= 0 && col < cols && r >= 0 && r < rows && !hit[cr]) {
|
|
//a[cr] = i++;
|
|
hit[cr] = true;
|
|
PushFormationOrder(a, i++, [r, col]);
|
|
}
|
|
else {
|
|
switch (courses[course++ % courses.length]) {
|
|
case COLUMN_INCREASE:
|
|
col--;
|
|
break;
|
|
case ROW_INCREASE:
|
|
r--;
|
|
break;
|
|
case COLUMN_DECREASE:
|
|
col++;
|
|
break;
|
|
case ROW_DECREASE:
|
|
r++;
|
|
break;
|
|
}
|
|
}
|
|
|
|
switch (courses[course % courses.length]) {
|
|
case COLUMN_INCREASE:
|
|
col++;
|
|
break;
|
|
case ROW_INCREASE:
|
|
r++;
|
|
break;
|
|
case COLUMN_DECREASE:
|
|
col--;
|
|
break;
|
|
case ROW_DECREASE:
|
|
r--;
|
|
break;
|
|
}
|
|
}
|
|
|
|
return a;
|
|
};
|
|
|
|
_This.$FormationZigZag = function (transition) {
|
|
var cols = transition.$Cols;
|
|
var rows = transition.$Rows;
|
|
var formationDirection = transition.$Assembly;
|
|
var count = transition.$Count;
|
|
var a = [];
|
|
var i = 0;
|
|
var col = 0;
|
|
var r = 0;
|
|
var cl = cols - 1;
|
|
var rl = rows - 1;
|
|
var il = count - 1;
|
|
var cr;
|
|
var courses;
|
|
var course = 0;
|
|
switch (formationDirection) {
|
|
case ASSEMBLY_BOTTOM_LEFT:
|
|
col = cl;
|
|
r = 0;
|
|
courses = [ROW_INCREASE, COLUMN_DECREASE, ROW_DECREASE, COLUMN_DECREASE];
|
|
break;
|
|
case ASSEMBLY_RIGHT_TOP:
|
|
col = 0;
|
|
r = rl;
|
|
courses = [COLUMN_INCREASE, ROW_DECREASE, COLUMN_DECREASE, ROW_DECREASE];
|
|
break;
|
|
case ASSEMBLY_TOP_LEFT:
|
|
col = cl;
|
|
r = rl;
|
|
courses = [ROW_DECREASE, COLUMN_DECREASE, ROW_INCREASE, COLUMN_DECREASE];
|
|
break;
|
|
case ASSEMBLY_LEFT_TOP:
|
|
col = cl;
|
|
r = rl;
|
|
courses = [COLUMN_DECREASE, ROW_DECREASE, COLUMN_INCREASE, ROW_DECREASE];
|
|
break;
|
|
case ASSEMBLY_BOTTOM_RIGHT:
|
|
col = 0;
|
|
r = 0;
|
|
courses = [ROW_INCREASE, COLUMN_INCREASE, ROW_DECREASE, COLUMN_INCREASE];
|
|
break;
|
|
case ASSEMBLY_LEFT_BOTTOM:
|
|
col = cl;
|
|
r = 0;
|
|
courses = [COLUMN_DECREASE, ROW_INCREASE, COLUMN_INCREASE, ROW_INCREASE];
|
|
break;
|
|
case ASSEMBLY_TOP_RIGHT:
|
|
col = 0;
|
|
r = rl;
|
|
courses = [ROW_DECREASE, COLUMN_INCREASE, ROW_INCREASE, COLUMN_INCREASE];
|
|
break;
|
|
default:
|
|
col = 0;
|
|
r = 0;
|
|
courses = [COLUMN_INCREASE, ROW_INCREASE, COLUMN_DECREASE, ROW_INCREASE];
|
|
break; //ASSEMBLY_RIGHT_BOTTOM
|
|
}
|
|
i = 0;
|
|
while (i < count) {
|
|
cr = r + ',' + col;
|
|
if (col >= 0 && col < cols && r >= 0 && r < rows && typeof (a[cr]) == 'undefined') {
|
|
PushFormationOrder(a, i++, [r, col]);
|
|
//a[cr] = i++;
|
|
switch (courses[course % courses.length]) {
|
|
case COLUMN_INCREASE:
|
|
col++;
|
|
break;
|
|
case ROW_INCREASE:
|
|
r++;
|
|
break;
|
|
case COLUMN_DECREASE:
|
|
col--;
|
|
break;
|
|
case ROW_DECREASE:
|
|
r--;
|
|
break;
|
|
}
|
|
}
|
|
else {
|
|
switch (courses[course++ % courses.length]) {
|
|
case COLUMN_INCREASE:
|
|
col--;
|
|
break;
|
|
case ROW_INCREASE:
|
|
r--;
|
|
break;
|
|
case COLUMN_DECREASE:
|
|
col++;
|
|
break;
|
|
case ROW_DECREASE:
|
|
r++;
|
|
break;
|
|
}
|
|
switch (courses[course++ % courses.length]) {
|
|
case COLUMN_INCREASE:
|
|
col++;
|
|
break;
|
|
case ROW_INCREASE:
|
|
r++;
|
|
break;
|
|
case COLUMN_DECREASE:
|
|
col--;
|
|
break;
|
|
case ROW_DECREASE:
|
|
r--;
|
|
break;
|
|
}
|
|
}
|
|
}
|
|
return a;
|
|
};
|
|
|
|
_This.$FormationStraightStairs = function (transition) {
|
|
var cols = transition.$Cols;
|
|
var rows = transition.$Rows;
|
|
var formationDirection = transition.$Assembly;
|
|
var count = transition.$Count;
|
|
var a = [];
|
|
var i = 0;
|
|
var col = 0;
|
|
var r = 0;
|
|
var cl = cols - 1;
|
|
var rl = rows - 1;
|
|
var il = count - 1;
|
|
var cr;
|
|
switch (formationDirection) {
|
|
case ASSEMBLY_BOTTOM_LEFT:
|
|
case ASSEMBLY_TOP_RIGHT:
|
|
case ASSEMBLY_TOP_LEFT:
|
|
case ASSEMBLY_BOTTOM_RIGHT:
|
|
var C = 0;
|
|
var R = 0;
|
|
break;
|
|
case ASSEMBLY_LEFT_BOTTOM:
|
|
case ASSEMBLY_RIGHT_TOP:
|
|
case ASSEMBLY_LEFT_TOP:
|
|
case ASSEMBLY_RIGHT_BOTTOM:
|
|
var C = cl;
|
|
var R = 0;
|
|
break;
|
|
default:
|
|
formationDirection = ASSEMBLY_RIGHT_BOTTOM;
|
|
var C = cl;
|
|
var R = 0;
|
|
break;
|
|
}
|
|
col = C;
|
|
r = R;
|
|
while (i < count) {
|
|
cr = r + ',' + col;
|
|
if (isToTop(formationDirection) || isToRight(formationDirection)) {
|
|
PushFormationOrder(a, il - i++, [r, col]);
|
|
//a[cr] = il - i++;
|
|
}
|
|
else {
|
|
PushFormationOrder(a, i++, [r, col]);
|
|
//a[cr] = i++;
|
|
}
|
|
switch (formationDirection) {
|
|
case ASSEMBLY_BOTTOM_LEFT:
|
|
case ASSEMBLY_TOP_RIGHT:
|
|
col--;
|
|
r++;
|
|
break;
|
|
case ASSEMBLY_TOP_LEFT:
|
|
case ASSEMBLY_BOTTOM_RIGHT:
|
|
col++;
|
|
r--;
|
|
break;
|
|
case ASSEMBLY_LEFT_BOTTOM:
|
|
case ASSEMBLY_RIGHT_TOP:
|
|
col--;
|
|
r--;
|
|
break;
|
|
case ASSEMBLY_RIGHT_BOTTOM:
|
|
case ASSEMBLY_LEFT_TOP:
|
|
default:
|
|
col++;
|
|
r++;
|
|
break;
|
|
}
|
|
if (col < 0 || r < 0 || col > cl || r > rl) {
|
|
switch (formationDirection) {
|
|
case ASSEMBLY_BOTTOM_LEFT:
|
|
case ASSEMBLY_TOP_RIGHT:
|
|
C++;
|
|
break;
|
|
case ASSEMBLY_LEFT_BOTTOM:
|
|
case ASSEMBLY_RIGHT_TOP:
|
|
case ASSEMBLY_TOP_LEFT:
|
|
case ASSEMBLY_BOTTOM_RIGHT:
|
|
R++;
|
|
break;
|
|
case ASSEMBLY_RIGHT_BOTTOM:
|
|
case ASSEMBLY_LEFT_TOP:
|
|
default:
|
|
C--;
|
|
break;
|
|
}
|
|
if (C < 0 || R < 0 || C > cl || R > rl) {
|
|
switch (formationDirection) {
|
|
case ASSEMBLY_BOTTOM_LEFT:
|
|
case ASSEMBLY_TOP_RIGHT:
|
|
C = cl;
|
|
R++;
|
|
break;
|
|
case ASSEMBLY_TOP_LEFT:
|
|
case ASSEMBLY_BOTTOM_RIGHT:
|
|
R = rl;
|
|
C++;
|
|
break;
|
|
case ASSEMBLY_LEFT_BOTTOM:
|
|
case ASSEMBLY_RIGHT_TOP: R = rl; C--;
|
|
break;
|
|
case ASSEMBLY_RIGHT_BOTTOM:
|
|
case ASSEMBLY_LEFT_TOP:
|
|
default:
|
|
C = 0;
|
|
R++;
|
|
break;
|
|
}
|
|
if (R > rl)
|
|
R = rl;
|
|
else if (R < 0)
|
|
R = 0;
|
|
else if (C > cl)
|
|
C = cl;
|
|
else if (C < 0)
|
|
C = 0;
|
|
}
|
|
r = R;
|
|
col = C;
|
|
}
|
|
}
|
|
return a;
|
|
};
|
|
|
|
_This.$FormationSquare = function (transition) {
|
|
var cols = transition.$Cols || 1;
|
|
var rows = transition.$Rows || 1;
|
|
var arr = [];
|
|
var i = 0;
|
|
var col;
|
|
var r;
|
|
var dc;
|
|
var dr;
|
|
var cr;
|
|
dc = cols < rows ? (rows - cols) / 2 : 0;
|
|
dr = cols > rows ? (cols - rows) / 2 : 0;
|
|
cr = Math.round(Math.max(cols / 2, rows / 2)) + 1;
|
|
for (col = 0; col < cols; col++) {
|
|
for (r = 0; r < rows; r++)
|
|
PushFormationOrder(arr, cr - Math.min(col + 1 + dc, r + 1 + dr, cols - col + dc, rows - r + dr), [r, col]);
|
|
}
|
|
return arr;
|
|
};
|
|
|
|
_This.$FormationRectangle = function (transition) {
|
|
var cols = transition.$Cols || 1;
|
|
var rows = transition.$Rows || 1;
|
|
var arr = [];
|
|
var i = 0;
|
|
var col;
|
|
var r;
|
|
var cr;
|
|
cr = Math.round(Math.min(cols / 2, rows / 2)) + 1;
|
|
for (col = 0; col < cols; col++) {
|
|
for (r = 0; r < rows; r++)
|
|
PushFormationOrder(arr, cr - Math.min(col + 1, r + 1, cols - col, rows - r), [r, col]);
|
|
}
|
|
return arr;
|
|
};
|
|
|
|
_This.$FormationRandom = function (transition) {
|
|
var a = [];
|
|
var r, col, i;
|
|
for (r = 0; r < transition.$Rows; r++) {
|
|
for (col = 0; col < transition.$Cols; col++)
|
|
PushFormationOrder(a, Math.ceil(100000 * Math.random()) % 13, [r, col]);
|
|
}
|
|
|
|
return a;
|
|
};
|
|
|
|
_This.$FormationCircle = function (transition) {
|
|
var cols = transition.$Cols || 1;
|
|
var rows = transition.$Rows || 1;
|
|
var arr = [];
|
|
var i = 0;
|
|
var col;
|
|
var r;
|
|
var hc = cols / 2 - 0.5;
|
|
var hr = rows / 2 - 0.5;
|
|
for (col = 0; col < cols; col++) {
|
|
for (r = 0; r < rows; r++)
|
|
PushFormationOrder(arr, Math.round(Math.sqrt(Math.pow(col - hc, 2) + Math.pow(r - hr, 2))), [r, col]);
|
|
}
|
|
return arr;
|
|
};
|
|
|
|
_This.$FormationCross = function (transition) {
|
|
var cols = transition.$Cols || 1;
|
|
var rows = transition.$Rows || 1;
|
|
var arr = [];
|
|
var i = 0;
|
|
var col;
|
|
var r;
|
|
var hc = cols / 2 - 0.5;
|
|
var hr = rows / 2 - 0.5;
|
|
for (col = 0; col < cols; col++) {
|
|
for (r = 0; r < rows; r++)
|
|
PushFormationOrder(arr, Math.round(Math.min(Math.abs(col - hc), Math.abs(r - hr))), [r, col]);
|
|
}
|
|
return arr;
|
|
};
|
|
|
|
_This.$FormationRectangleCross = function (transition) {
|
|
var cols = transition.$Cols || 1;
|
|
var rows = transition.$Rows || 1;
|
|
var arr = [];
|
|
var i = 0;
|
|
var col;
|
|
var r;
|
|
var hc = cols / 2 - 0.5;
|
|
var hr = rows / 2 - 0.5;
|
|
var cr = Math.max(hc, hr) + 1;
|
|
for (col = 0; col < cols; col++) {
|
|
for (r = 0; r < rows; r++)
|
|
PushFormationOrder(arr, Math.round(cr - Math.max(hc - Math.abs(col - hc), hr - Math.abs(r - hr))) - 1, [r, col]);
|
|
}
|
|
return arr;
|
|
};
|
|
};
|
|
|
|
var $JssorSlideshowRunner$ = window.$JssorSlideshowRunner$ = function (slideContainer, slideContainerWidth, slideContainerHeight, slideshowOptions, isTouchDevice) {
|
|
|
|
var _SelfSlideshowRunner = this;
|
|
|
|
//var _State = 0; //-1 fullfill, 0 clean, 1 initializing, 2 stay, 3 playing
|
|
var _EndTime;
|
|
|
|
var _SliderFrameCount;
|
|
|
|
var _SlideshowPlayerBelow;
|
|
var _SlideshowPlayerAbove;
|
|
|
|
var _PrevItem;
|
|
var _SlideItem;
|
|
|
|
var _TransitionIndex = 0;
|
|
var _TransitionsOrder = slideshowOptions.$TransitionsOrder;
|
|
|
|
var _SlideshowTransition;
|
|
|
|
var _SlideshowPerformance = 8;
|
|
|
|
//#region Private Methods
|
|
function EnsureTransitionInstance(options, slideshowInterval) {
|
|
|
|
var slideshowTransition = {
|
|
$Interval: slideshowInterval, //Delay to play next frame
|
|
$Duration: 1, //Duration to finish the entire transition
|
|
$Delay: 0, //Delay to assembly blocks
|
|
$Cols: 1, //Number of columns
|
|
$Rows: 1, //Number of rows
|
|
$Opacity: 0, //Fade block or not
|
|
$Zoom: 0, //Zoom block or not
|
|
$Clip: 0, //Clip block or not
|
|
$Move: false, //Move block or not
|
|
$SlideOut: false, //Slide the previous slide out to display next slide instead
|
|
//$FlyDirection: 0, //Specify fly transform with direction
|
|
$Reverse: false, //Reverse the assembly or not
|
|
$Formation: $JssorSlideshowFormations$.$FormationRandom, //Shape that assembly blocks as
|
|
$Assembly: 0x0408, //The way to assembly blocks ASSEMBLY_RIGHT_BOTTOM
|
|
$ChessMode: { $Column: 0, $Row: 0 }, //Chess move or fly direction
|
|
$Easing: $JssorEasing$.$EaseSwing, //Specify variation of speed during transition
|
|
$Round: {},
|
|
$Blocks: [],
|
|
$During: {}
|
|
};
|
|
|
|
$Jssor$.$Extend(slideshowTransition, options);
|
|
|
|
slideshowTransition.$Count = slideshowTransition.$Cols * slideshowTransition.$Rows;
|
|
if ($Jssor$.$IsFunction(slideshowTransition.$Easing))
|
|
slideshowTransition.$Easing = { $Default: slideshowTransition.$Easing };
|
|
|
|
slideshowTransition.$FramesCount = Math.ceil(slideshowTransition.$Duration / slideshowTransition.$Interval);
|
|
|
|
slideshowTransition.$GetBlocks = function (width, height) {
|
|
width /= slideshowTransition.$Cols;
|
|
height /= slideshowTransition.$Rows;
|
|
var wh = width + 'x' + height;
|
|
if (!slideshowTransition.$Blocks[wh]) {
|
|
slideshowTransition.$Blocks[wh] = { $Width: width, $Height: height };
|
|
for (var col = 0; col < slideshowTransition.$Cols; col++) {
|
|
for (var r = 0; r < slideshowTransition.$Rows; r++)
|
|
slideshowTransition.$Blocks[wh][r + ',' + col] = { $Top: r * height, $Right: col * width + width, $Bottom: r * height + height, $Left: col * width };
|
|
}
|
|
}
|
|
|
|
return slideshowTransition.$Blocks[wh];
|
|
};
|
|
|
|
if (slideshowTransition.$Brother) {
|
|
slideshowTransition.$Brother = EnsureTransitionInstance(slideshowTransition.$Brother, slideshowInterval);
|
|
slideshowTransition.$SlideOut = true;
|
|
}
|
|
|
|
return slideshowTransition;
|
|
}
|
|
//#endregion
|
|
|
|
//#region Private Classes
|
|
function JssorSlideshowPlayer(slideContainer, slideElement, slideTransition, beginTime, slideContainerWidth, slideContainerHeight) {
|
|
var _Self = this;
|
|
|
|
var _Block;
|
|
var _StartStylesArr = {};
|
|
var _AnimationStylesArrs = {};
|
|
var _AnimationBlockItems = [];
|
|
var _StyleStart;
|
|
var _StyleEnd;
|
|
var _StyleDif;
|
|
var _ChessModeColumn = slideTransition.$ChessMode.$Column || 0;
|
|
var _ChessModeRow = slideTransition.$ChessMode.$Row || 0;
|
|
|
|
var _Blocks = slideTransition.$GetBlocks(slideContainerWidth, slideContainerHeight);
|
|
var _FormationInstance = GetFormation(slideTransition);
|
|
var _MaxOrder = _FormationInstance.length - 1;
|
|
var _Period = slideTransition.$Duration + slideTransition.$Delay * _MaxOrder;
|
|
var _EndTime = beginTime + _Period;
|
|
|
|
var _SlideOut = slideTransition.$SlideOut;
|
|
var _IsIn;
|
|
|
|
//_EndTime += $Jssor$.$IsBrowserChrome() ? 260 : 50;
|
|
_EndTime += 50;
|
|
|
|
//#region Private Methods
|
|
|
|
function GetFormation(transition) {
|
|
|
|
var formationInstance = transition.$Formation(transition);
|
|
|
|
return transition.$Reverse ? formationInstance.reverse() : formationInstance;
|
|
|
|
}
|
|
//#endregion
|
|
|
|
_Self.$EndTime = _EndTime;
|
|
|
|
_Self.$ShowFrame = function (time) {
|
|
time -= beginTime;
|
|
|
|
var isIn = time < _Period;
|
|
|
|
if (isIn || _IsIn) {
|
|
_IsIn = isIn;
|
|
|
|
if (!_SlideOut)
|
|
time = _Period - time;
|
|
|
|
var frameIndex = Math.ceil(time / slideTransition.$Interval);
|
|
|
|
$Jssor$.$Each(_AnimationStylesArrs, function (value, index) {
|
|
|
|
var itemFrameIndex = Math.max(frameIndex, value.$Min);
|
|
itemFrameIndex = Math.min(itemFrameIndex, value.length - 1);
|
|
|
|
if (value.$LastFrameIndex != itemFrameIndex) {
|
|
if (!value.$LastFrameIndex && !_SlideOut) {
|
|
$Jssor$.$ShowElement(_AnimationBlockItems[index]);
|
|
}
|
|
else if (itemFrameIndex == value.$Max && _SlideOut) {
|
|
$Jssor$.$HideElement(_AnimationBlockItems[index]);
|
|
}
|
|
value.$LastFrameIndex = itemFrameIndex;
|
|
$Jssor$.$SetStylesEx(_AnimationBlockItems[index], value[itemFrameIndex]);
|
|
}
|
|
});
|
|
}
|
|
};
|
|
|
|
//constructor
|
|
{
|
|
slideElement = $Jssor$.$CloneNode(slideElement);
|
|
//$Jssor$.$RemoveAttribute(slideElement, "id");
|
|
if ($Jssor$.$IsBrowserIe9Earlier()) {
|
|
var hasImage = !slideElement["no-image"];
|
|
var slideChildElements = $Jssor$.$FindChildrenByTag(slideElement);
|
|
$Jssor$.$Each(slideChildElements, function (slideChildElement) {
|
|
if (hasImage || slideChildElement["jssor-slider"])
|
|
$Jssor$.$CssOpacity(slideChildElement, $Jssor$.$CssOpacity(slideChildElement), true);
|
|
});
|
|
}
|
|
|
|
$Jssor$.$Each(_FormationInstance, function (formationItems, order) {
|
|
$Jssor$.$Each(formationItems, function (formationItem) {
|
|
var row = formationItem[0];
|
|
var col = formationItem[1];
|
|
{
|
|
var columnRow = row + ',' + col;
|
|
|
|
var chessHorizontal = false;
|
|
var chessVertical = false;
|
|
var chessRotate = false;
|
|
|
|
if (_ChessModeColumn && col % 2) {
|
|
if (_ChessModeColumn & 3/*$JssorDirection$.$IsHorizontal(_ChessModeColumn)*/) {
|
|
chessHorizontal = !chessHorizontal;
|
|
}
|
|
if (_ChessModeColumn & 12/*$JssorDirection$.$IsVertical(_ChessModeColumn)*/) {
|
|
chessVertical = !chessVertical;
|
|
}
|
|
|
|
if (_ChessModeColumn & 16)
|
|
chessRotate = !chessRotate;
|
|
}
|
|
|
|
if (_ChessModeRow && row % 2) {
|
|
if (_ChessModeRow & 3/*$JssorDirection$.$IsHorizontal(_ChessModeRow)*/) {
|
|
chessHorizontal = !chessHorizontal;
|
|
}
|
|
if (_ChessModeRow & 12/*$JssorDirection$.$IsVertical(_ChessModeRow)*/) {
|
|
chessVertical = !chessVertical;
|
|
}
|
|
if (_ChessModeRow & 16)
|
|
chessRotate = !chessRotate;
|
|
}
|
|
|
|
slideTransition.$Top = slideTransition.$Top || (slideTransition.$Clip & 4);
|
|
slideTransition.$Bottom = slideTransition.$Bottom || (slideTransition.$Clip & 8);
|
|
slideTransition.$Left = slideTransition.$Left || (slideTransition.$Clip & 1);
|
|
slideTransition.$Right = slideTransition.$Right || (slideTransition.$Clip & 2);
|
|
|
|
var topBenchmark = chessVertical ? slideTransition.$Bottom : slideTransition.$Top;
|
|
var bottomBenchmark = chessVertical ? slideTransition.$Top : slideTransition.$Bottom;
|
|
var leftBenchmark = chessHorizontal ? slideTransition.$Right : slideTransition.$Left;
|
|
var rightBenchmark = chessHorizontal ? slideTransition.$Left : slideTransition.$Right;
|
|
|
|
slideTransition.$Clip = topBenchmark || bottomBenchmark || leftBenchmark || rightBenchmark;
|
|
|
|
_StyleDif = {};
|
|
_StyleEnd = { $Top: 0, $Left: 0, $Opacity: 1, $Width: slideContainerWidth, $Height: slideContainerHeight };
|
|
_StyleStart = $Jssor$.$Extend({}, _StyleEnd);
|
|
_Block = $Jssor$.$Extend({}, _Blocks[columnRow]);
|
|
|
|
if (slideTransition.$Opacity) {
|
|
_StyleEnd.$Opacity = 2 - slideTransition.$Opacity;
|
|
}
|
|
|
|
if (slideTransition.$ZIndex) {
|
|
_StyleEnd.$ZIndex = slideTransition.$ZIndex;
|
|
_StyleStart.$ZIndex = 0;
|
|
}
|
|
|
|
var allowClip = slideTransition.$Cols * slideTransition.$Rows > 1 || slideTransition.$Clip;
|
|
|
|
if (slideTransition.$Zoom || slideTransition.$Rotate) {
|
|
var allowRotate = true;
|
|
if ($Jssor$.$IsBrowserIe9Earlier()) {
|
|
if (slideTransition.$Cols * slideTransition.$Rows > 1)
|
|
allowRotate = false;
|
|
else
|
|
allowClip = false;
|
|
}
|
|
|
|
if (allowRotate) {
|
|
_StyleEnd.$Zoom = slideTransition.$Zoom ? slideTransition.$Zoom - 1 : 1;
|
|
_StyleStart.$Zoom = 1;
|
|
|
|
if ($Jssor$.$IsBrowserIe9Earlier() || $Jssor$.$IsBrowserOpera())
|
|
_StyleEnd.$Zoom = Math.min(_StyleEnd.$Zoom, 2);
|
|
|
|
var rotate = slideTransition.$Rotate;
|
|
|
|
_StyleEnd.$Rotate = rotate * 360 * ((chessRotate) ? -1 : 1);
|
|
_StyleStart.$Rotate = 0;
|
|
}
|
|
}
|
|
|
|
if (allowClip) {
|
|
if (slideTransition.$Clip) {
|
|
var clipScale = slideTransition.$ScaleClip || 1;
|
|
var blockOffset = _Block.$Offset = {};
|
|
if (topBenchmark && bottomBenchmark) {
|
|
blockOffset.$Top = _Blocks.$Height / 2 * clipScale;
|
|
blockOffset.$Bottom = -blockOffset.$Top;
|
|
}
|
|
else if (topBenchmark) {
|
|
blockOffset.$Bottom = -_Blocks.$Height * clipScale;
|
|
}
|
|
else if (bottomBenchmark) {
|
|
blockOffset.$Top = _Blocks.$Height * clipScale;
|
|
}
|
|
|
|
if (leftBenchmark && rightBenchmark) {
|
|
blockOffset.$Left = _Blocks.$Width / 2 * clipScale;
|
|
blockOffset.$Right = -blockOffset.$Left;
|
|
}
|
|
else if (leftBenchmark) {
|
|
blockOffset.$Right = -_Blocks.$Width * clipScale;
|
|
}
|
|
else if (rightBenchmark) {
|
|
blockOffset.$Left = _Blocks.$Width * clipScale;
|
|
}
|
|
}
|
|
|
|
_StyleDif.$Clip = _Block;
|
|
_StyleStart.$Clip = _Blocks[columnRow];
|
|
}
|
|
|
|
//fly
|
|
{
|
|
var chessHor = chessHorizontal ? 1 : -1;
|
|
var chessVer = chessVertical ? 1 : -1;
|
|
|
|
if (slideTransition.x)
|
|
_StyleEnd.$Left += slideContainerWidth * slideTransition.x * chessHor;
|
|
|
|
if (slideTransition.y)
|
|
_StyleEnd.$Top += slideContainerHeight * slideTransition.y * chessVer;
|
|
}
|
|
|
|
$Jssor$.$Each(_StyleEnd, function (propertyEnd, property) {
|
|
if ($Jssor$.$IsNumeric(propertyEnd)) {
|
|
if (propertyEnd != _StyleStart[property]) {
|
|
_StyleDif[property] = propertyEnd - _StyleStart[property];
|
|
}
|
|
}
|
|
});
|
|
|
|
_StartStylesArr[columnRow] = _SlideOut ? _StyleStart : _StyleEnd;
|
|
|
|
var animationStylesArr = [];
|
|
var framesCount = slideTransition.$FramesCount;
|
|
var virtualFrameCount = Math.round(order * slideTransition.$Delay / slideTransition.$Interval);
|
|
_AnimationStylesArrs[columnRow] = new Array(virtualFrameCount);
|
|
_AnimationStylesArrs[columnRow].$Min = virtualFrameCount;
|
|
_AnimationStylesArrs[columnRow].$Max = virtualFrameCount + framesCount - 1;
|
|
|
|
for (var frameN = 0; frameN <= framesCount; frameN++) {
|
|
var styleFrameN = $Jssor$.$Cast(_StyleStart, _StyleDif, frameN / framesCount, slideTransition.$Easing, slideTransition.$During, slideTransition.$Round, { $Move: slideTransition.$Move, $OriginalWidth: slideContainerWidth, $OriginalHeight: slideContainerHeight })
|
|
|
|
styleFrameN.$ZIndex = styleFrameN.$ZIndex || 1;
|
|
|
|
_AnimationStylesArrs[columnRow].push(styleFrameN);
|
|
}
|
|
|
|
} //for
|
|
});
|
|
});
|
|
|
|
_FormationInstance.reverse();
|
|
$Jssor$.$Each(_FormationInstance, function (formationItems) {
|
|
$Jssor$.$Each(formationItems, function (formationItem) {
|
|
var row = formationItem[0];
|
|
var col = formationItem[1];
|
|
|
|
var columnRow = row + ',' + col;
|
|
|
|
var image = slideElement;
|
|
if (col || row)
|
|
image = $Jssor$.$CloneNode(slideElement);
|
|
|
|
$Jssor$.$SetStyles(image, _StartStylesArr[columnRow]);
|
|
$Jssor$.$CssOverflow(image, "hidden");
|
|
|
|
$Jssor$.$CssPosition(image, "absolute");
|
|
slideContainer.$AddClipElement(image);
|
|
_AnimationBlockItems[columnRow] = image;
|
|
$Jssor$.$ShowElement(image, !_SlideOut);
|
|
});
|
|
});
|
|
}
|
|
}
|
|
|
|
function SlideshowProcessor() {
|
|
var _SelfSlideshowProcessor = this;
|
|
var _CurrentTime = 0;
|
|
|
|
$JssorAnimator$.call(_SelfSlideshowProcessor, 0, _EndTime);
|
|
|
|
_SelfSlideshowProcessor.$OnPositionChange = function (oldPosition, newPosition) {
|
|
if ((newPosition - _CurrentTime) > _SlideshowPerformance) {
|
|
_CurrentTime = newPosition;
|
|
|
|
_SlideshowPlayerAbove && _SlideshowPlayerAbove.$ShowFrame(newPosition);
|
|
_SlideshowPlayerBelow && _SlideshowPlayerBelow.$ShowFrame(newPosition);
|
|
}
|
|
};
|
|
|
|
_SelfSlideshowProcessor.$Transition = _SlideshowTransition;
|
|
}
|
|
//#endregion
|
|
|
|
//member functions
|
|
_SelfSlideshowRunner.$GetTransition = function (slideCount) {
|
|
var n = 0;
|
|
|
|
var transitions = slideshowOptions.$Transitions;
|
|
|
|
var transitionCount = transitions.length;
|
|
|
|
if (_TransitionsOrder) { /*Sequence*/
|
|
//if (transitionCount > slideCount && ($Jssor$.$IsBrowserChrome() || $Jssor$.$IsBrowserSafari() || $Jssor$.$IsBrowserFireFox())) {
|
|
// transitionCount -= transitionCount % slideCount;
|
|
//}
|
|
n = _TransitionIndex++ % transitionCount;
|
|
}
|
|
else { /*Random*/
|
|
n = Math.floor(Math.random() * transitionCount);
|
|
}
|
|
|
|
transitions[n] && (transitions[n].$Index = n);
|
|
|
|
return transitions[n];
|
|
};
|
|
|
|
_SelfSlideshowRunner.$Initialize = function (slideIndex, prevIndex, slideItem, prevItem, slideshowTransition) {
|
|
$JssorDebug$.$Execute(function () {
|
|
if (_SlideshowPlayerBelow) {
|
|
$JssorDebug$.$Fail("slideshow runner has not been cleared.");
|
|
}
|
|
});
|
|
|
|
_SlideshowTransition = slideshowTransition;
|
|
|
|
slideshowTransition = EnsureTransitionInstance(slideshowTransition, _SlideshowPerformance);
|
|
|
|
_SlideItem = slideItem;
|
|
_PrevItem = prevItem;
|
|
|
|
var prevSlideElement = prevItem.$Item;
|
|
var currentSlideElement = slideItem.$Item;
|
|
prevSlideElement["no-image"] = !prevItem.$Image;
|
|
currentSlideElement["no-image"] = !slideItem.$Image;
|
|
|
|
var slideElementAbove = prevSlideElement;
|
|
var slideElementBelow = currentSlideElement;
|
|
|
|
var slideTransitionAbove = slideshowTransition;
|
|
var slideTransitionBelow = slideshowTransition.$Brother || EnsureTransitionInstance({}, _SlideshowPerformance);
|
|
|
|
if (!slideshowTransition.$SlideOut) {
|
|
slideElementAbove = currentSlideElement;
|
|
slideElementBelow = prevSlideElement;
|
|
}
|
|
|
|
var shift = slideTransitionBelow.$Shift || 0;
|
|
|
|
_SlideshowPlayerBelow = new JssorSlideshowPlayer(slideContainer, slideElementBelow, slideTransitionBelow, Math.max(shift - slideTransitionBelow.$Interval, 0), slideContainerWidth, slideContainerHeight);
|
|
_SlideshowPlayerAbove = new JssorSlideshowPlayer(slideContainer, slideElementAbove, slideTransitionAbove, Math.max(slideTransitionBelow.$Interval - shift, 0), slideContainerWidth, slideContainerHeight);
|
|
|
|
_SlideshowPlayerBelow.$ShowFrame(0);
|
|
_SlideshowPlayerAbove.$ShowFrame(0);
|
|
|
|
_EndTime = Math.max(_SlideshowPlayerBelow.$EndTime, _SlideshowPlayerAbove.$EndTime);
|
|
|
|
_SelfSlideshowRunner.$Index = slideIndex;
|
|
};
|
|
|
|
_SelfSlideshowRunner.$Clear = function () {
|
|
slideContainer.$Clear();
|
|
_SlideshowPlayerBelow = null;
|
|
_SlideshowPlayerAbove = null;
|
|
};
|
|
|
|
_SelfSlideshowRunner.$GetProcessor = function () {
|
|
var slideshowProcessor = null;
|
|
|
|
if (_SlideshowPlayerAbove)
|
|
slideshowProcessor = new SlideshowProcessor();
|
|
|
|
return slideshowProcessor;
|
|
};
|
|
|
|
//Constructor
|
|
{
|
|
if ($Jssor$.$IsBrowserIe9Earlier() || $Jssor$.$IsBrowserOpera() || (isTouchDevice && $Jssor$.$WebKitVersion() < 537)) {
|
|
_SlideshowPerformance = 16;
|
|
}
|
|
|
|
$JssorObject$.call(_SelfSlideshowRunner);
|
|
$JssorAnimator$.call(_SelfSlideshowRunner, -10000000, 10000000);
|
|
}
|
|
};
|
|
|
|
var $JssorSlider$ = window.$JssorSlider$ = function (elmt, options) {
|
|
var _SelfSlider = this;
|
|
|
|
//#region Private Classes
|
|
//Conveyor
|
|
function Conveyor() {
|
|
var _SelfConveyor = this;
|
|
$JssorAnimator$.call(_SelfConveyor, -100000000, 200000000);
|
|
|
|
_SelfConveyor.$GetCurrentSlideInfo = function () {
|
|
var positionDisplay = _SelfConveyor.$GetPosition_Display();
|
|
var virtualIndex = Math.floor(positionDisplay);
|
|
var slideIndex = GetRealIndex(virtualIndex);
|
|
var slidePosition = positionDisplay - Math.floor(positionDisplay);
|
|
|
|
return { $Index: slideIndex, $VirtualIndex: virtualIndex, $Position: slidePosition };
|
|
};
|
|
|
|
_SelfConveyor.$OnPositionChange = function (oldPosition, newPosition) {
|
|
|
|
var index = Math.floor(newPosition);
|
|
if (index != newPosition && newPosition > oldPosition)
|
|
index++;
|
|
|
|
ResetNavigator(index, true);
|
|
|
|
_SelfSlider.$TriggerEvent($JssorSlider$.$EVT_POSITION_CHANGE, GetRealIndex(newPosition), GetRealIndex(oldPosition), newPosition, oldPosition);
|
|
};
|
|
}
|
|
//Conveyor
|
|
|
|
//Carousel
|
|
function Carousel() {
|
|
var _SelfCarousel = this;
|
|
|
|
$JssorAnimator$.call(_SelfCarousel, 0, 0, { $LoopLength: _SlideCount });
|
|
|
|
//Carousel Constructor
|
|
{
|
|
$Jssor$.$Each(_SlideItems, function (slideItem) {
|
|
(_Loop & 1) && slideItem.$SetLoopLength(_SlideCount);
|
|
_SelfCarousel.$Chain(slideItem);
|
|
slideItem.$Shift(_ParkingPosition / _StepLength);
|
|
});
|
|
}
|
|
}
|
|
//Carousel
|
|
|
|
//Slideshow
|
|
function Slideshow() {
|
|
var _SelfSlideshow = this;
|
|
var _Wrapper = _SlideContainer.$Elmt;
|
|
|
|
$JssorAnimator$.call(_SelfSlideshow, -1, 2, { $Easing: $JssorEasing$.$EaseLinear, $Setter: { $Position: SetPosition }, $LoopLength: _SlideCount }, _Wrapper, { $Position: 1 }, { $Position: -2 });
|
|
|
|
_SelfSlideshow.$Wrapper = _Wrapper;
|
|
|
|
//Slideshow Constructor
|
|
{
|
|
$JssorDebug$.$Execute(function () {
|
|
$Jssor$.$Attribute(_SlideContainer.$Elmt, "debug-id", "slide_container");
|
|
});
|
|
}
|
|
}
|
|
//Slideshow
|
|
|
|
//CarouselPlayer
|
|
function CarouselPlayer(carousel, slideshow) {
|
|
var _SelfCarouselPlayer = this;
|
|
var _FromPosition;
|
|
var _ToPosition;
|
|
var _Duration;
|
|
var _StandBy;
|
|
var _StandByPosition;
|
|
|
|
$JssorAnimator$.call(_SelfCarouselPlayer, -100000000, 200000000, { $IntervalMax: 100 });
|
|
|
|
_SelfCarouselPlayer.$OnStart = function () {
|
|
_IsSliding = true;
|
|
_LoadingTicket = null;
|
|
|
|
//EVT_SWIPE_START
|
|
_SelfSlider.$TriggerEvent($JssorSlider$.$EVT_SWIPE_START, GetRealIndex(_Conveyor.$GetPosition()), _Conveyor.$GetPosition());
|
|
};
|
|
|
|
_SelfCarouselPlayer.$OnStop = function () {
|
|
|
|
_IsSliding = false;
|
|
_StandBy = false;
|
|
|
|
var currentSlideInfo = _Conveyor.$GetCurrentSlideInfo();
|
|
|
|
//EVT_SWIPE_END
|
|
_SelfSlider.$TriggerEvent($JssorSlider$.$EVT_SWIPE_END, GetRealIndex(_Conveyor.$GetPosition()), _Conveyor.$GetPosition());
|
|
|
|
if (!currentSlideInfo.$Position) {
|
|
OnPark(currentSlideInfo.$VirtualIndex, _CurrentSlideIndex);
|
|
}
|
|
};
|
|
|
|
_SelfCarouselPlayer.$OnPositionChange = function (oldPosition, newPosition) {
|
|
|
|
var toPosition;
|
|
|
|
if (_StandBy)
|
|
toPosition = _StandByPosition;
|
|
else {
|
|
toPosition = _ToPosition;
|
|
|
|
if (_Duration) {
|
|
var interPosition = newPosition / _Duration;
|
|
toPosition = _Options.$SlideEasing(interPosition) * (_ToPosition - _FromPosition) + _FromPosition;
|
|
}
|
|
}
|
|
|
|
_Conveyor.$GoToPosition(toPosition);
|
|
};
|
|
|
|
_SelfCarouselPlayer.$PlayCarousel = function (fromPosition, toPosition, duration, callback) {
|
|
$JssorDebug$.$Execute(function () {
|
|
if (_SelfCarouselPlayer.$IsPlaying())
|
|
$JssorDebug$.$Fail("The carousel is already playing.");
|
|
});
|
|
|
|
_FromPosition = fromPosition;
|
|
_ToPosition = toPosition;
|
|
_Duration = duration;
|
|
|
|
_Conveyor.$GoToPosition(fromPosition);
|
|
_SelfCarouselPlayer.$GoToPosition(0);
|
|
|
|
_SelfCarouselPlayer.$PlayToPosition(duration, callback);
|
|
};
|
|
|
|
_SelfCarouselPlayer.$StandBy = function (standByPosition) {
|
|
_StandBy = true;
|
|
_StandByPosition = standByPosition;
|
|
_SelfCarouselPlayer.$Play(standByPosition, null, true);
|
|
};
|
|
|
|
_SelfCarouselPlayer.$SetStandByPosition = function (standByPosition) {
|
|
_StandByPosition = standByPosition;
|
|
};
|
|
|
|
_SelfCarouselPlayer.$MoveCarouselTo = function (position) {
|
|
_Conveyor.$GoToPosition(position);
|
|
};
|
|
|
|
//CarouselPlayer Constructor
|
|
{
|
|
_Conveyor = new Conveyor();
|
|
|
|
_Conveyor.$Combine(carousel);
|
|
_Conveyor.$Combine(slideshow);
|
|
}
|
|
}
|
|
//CarouselPlayer
|
|
|
|
//SlideContainer
|
|
function SlideContainer() {
|
|
var _Self = this;
|
|
var elmt = CreatePanel();
|
|
|
|
$Jssor$.$CssZIndex(elmt, 0);
|
|
$Jssor$.$Css(elmt, "pointerEvents", "none");
|
|
|
|
_Self.$Elmt = elmt;
|
|
|
|
_Self.$AddClipElement = function (clipElement) {
|
|
$Jssor$.$AppendChild(elmt, clipElement);
|
|
$Jssor$.$ShowElement(elmt);
|
|
};
|
|
|
|
_Self.$Clear = function () {
|
|
$Jssor$.$HideElement(elmt);
|
|
$Jssor$.$Empty(elmt);
|
|
};
|
|
}
|
|
//SlideContainer
|
|
|
|
//SlideItem
|
|
function SlideItem(slideElmt, slideIndex) {
|
|
|
|
var _SelfSlideItem = this;
|
|
|
|
var _CaptionSliderIn;
|
|
var _CaptionSliderOut;
|
|
var _CaptionSliderCurrent;
|
|
var _IsCaptionSliderPlayingWhenDragStart;
|
|
|
|
var _Wrapper;
|
|
var _BaseElement = slideElmt;
|
|
|
|
var _LoadingScreen;
|
|
|
|
var _ImageItem;
|
|
var _ImageElmts = [];
|
|
var _LinkItemOrigin;
|
|
var _LinkItem;
|
|
var _ImageLoading;
|
|
var _ImageLoaded;
|
|
var _ImageLazyLoading;
|
|
var _ContentRefreshed;
|
|
|
|
var _Processor;
|
|
|
|
var _PlayerInstanceElement;
|
|
var _PlayerInstance;
|
|
|
|
var _SequenceNumber; //for debug only
|
|
|
|
$JssorAnimator$.call(_SelfSlideItem, -_DisplayPieces, _DisplayPieces + 1, { $SlideItemAnimator: true });
|
|
|
|
function ResetCaptionSlider(fresh) {
|
|
_CaptionSliderOut && _CaptionSliderOut.$Revert();
|
|
_CaptionSliderIn && _CaptionSliderIn.$Revert();
|
|
|
|
RefreshContent(slideElmt, fresh);
|
|
_ContentRefreshed = true;
|
|
|
|
_CaptionSliderIn = new _CaptionSliderOptions.$Class(slideElmt, _CaptionSliderOptions, 1);
|
|
$JssorDebug$.$LiveStamp(_CaptionSliderIn, "caption_slider_" + _CaptionSliderCount + "_in");
|
|
_CaptionSliderOut = new _CaptionSliderOptions.$Class(slideElmt, _CaptionSliderOptions);
|
|
$JssorDebug$.$LiveStamp(_CaptionSliderOut, "caption_slider_" + _CaptionSliderCount + "_out");
|
|
|
|
$JssorDebug$.$Execute(function () {
|
|
_CaptionSliderCount++;
|
|
});
|
|
|
|
_CaptionSliderOut.$GoToPosition(0);
|
|
_CaptionSliderIn.$GoToPosition(0);
|
|
}
|
|
|
|
function EnsureCaptionSliderVersion() {
|
|
if (_CaptionSliderIn.$Version < _CaptionSliderOptions.$Version) {
|
|
ResetCaptionSlider();
|
|
}
|
|
}
|
|
|
|
//event handling begin
|
|
function LoadImageCompleteEventHandler(completeCallback, loadingScreen, image) {
|
|
if (!_ImageLoaded) {
|
|
_ImageLoaded = true;
|
|
|
|
if (_ImageItem && image) {
|
|
var imageWidth = image.width;
|
|
var imageHeight = image.height;
|
|
var fillWidth = imageWidth;
|
|
var fillHeight = imageHeight;
|
|
|
|
if (imageWidth && imageHeight && _Options.$FillMode) {
|
|
|
|
//0 stretch, 1 contain (keep aspect ratio and put all inside slide), 2 cover (keep aspect ratio and cover whole slide), 4 actual size, 5 contain for large image, actual size for small image, default value is 0
|
|
if (_Options.$FillMode & 3 && (!(_Options.$FillMode & 4) || imageWidth > _SlideWidth || imageHeight > _SlideHeight)) {
|
|
var fitHeight = false;
|
|
var ratio = _SlideWidth / _SlideHeight * imageHeight / imageWidth;
|
|
|
|
if (_Options.$FillMode & 1) {
|
|
fitHeight = (ratio > 1);
|
|
}
|
|
else if (_Options.$FillMode & 2) {
|
|
fitHeight = (ratio < 1);
|
|
}
|
|
fillWidth = fitHeight ? imageWidth * _SlideHeight / imageHeight : _SlideWidth;
|
|
fillHeight = fitHeight ? _SlideHeight : imageHeight * _SlideWidth / imageWidth;
|
|
}
|
|
|
|
$Jssor$.$CssWidth(_ImageItem, fillWidth);
|
|
$Jssor$.$CssHeight(_ImageItem, fillHeight);
|
|
$Jssor$.$CssTop(_ImageItem, (_SlideHeight - fillHeight) / 2);
|
|
$Jssor$.$CssLeft(_ImageItem, (_SlideWidth - fillWidth) / 2);
|
|
}
|
|
|
|
$Jssor$.$CssPosition(_ImageItem, "absolute");
|
|
|
|
_SelfSlider.$TriggerEvent($JssorSlider$.$EVT_LOAD_END, slideIndex);
|
|
}
|
|
}
|
|
|
|
$Jssor$.$HideElement(loadingScreen);
|
|
completeCallback && completeCallback(_SelfSlideItem);
|
|
}
|
|
|
|
function LoadSlideshowImageCompleteEventHandler(nextIndex, nextItem, slideshowTransition, loadingTicket) {
|
|
if (loadingTicket == _LoadingTicket && _CurrentSlideIndex == slideIndex && _AutoPlay) {
|
|
if (!_Frozen) {
|
|
var nextRealIndex = GetRealIndex(nextIndex);
|
|
_SlideshowRunner.$Initialize(nextRealIndex, slideIndex, nextItem, _SelfSlideItem, slideshowTransition);
|
|
nextItem.$HideContentForSlideshow();
|
|
_Slideshow.$Locate(nextRealIndex, 1);
|
|
_Slideshow.$GoToPosition(nextRealIndex);
|
|
_CarouselPlayer.$PlayCarousel(nextIndex, nextIndex, 0);
|
|
}
|
|
}
|
|
}
|
|
|
|
function SlideReadyEventHandler(loadingTicket) {
|
|
if (loadingTicket == _LoadingTicket && _CurrentSlideIndex == slideIndex) {
|
|
|
|
if (!_Processor) {
|
|
var slideshowProcessor = null;
|
|
if (_SlideshowRunner) {
|
|
if (_SlideshowRunner.$Index == slideIndex)
|
|
slideshowProcessor = _SlideshowRunner.$GetProcessor();
|
|
else
|
|
_SlideshowRunner.$Clear();
|
|
}
|
|
|
|
EnsureCaptionSliderVersion();
|
|
|
|
_Processor = new Processor(slideElmt, slideIndex, slideshowProcessor, _SelfSlideItem.$GetCaptionSliderIn(), _SelfSlideItem.$GetCaptionSliderOut());
|
|
_Processor.$SetPlayer(_PlayerInstance);
|
|
}
|
|
|
|
!_Processor.$IsPlaying() && _Processor.$Replay();
|
|
}
|
|
}
|
|
|
|
function ParkEventHandler(currentIndex, previousIndex, manualActivate) {
|
|
if (currentIndex == slideIndex) {
|
|
|
|
if (currentIndex != previousIndex)
|
|
_SlideItems[previousIndex] && _SlideItems[previousIndex].$ParkOut();
|
|
else
|
|
!manualActivate && _Processor && _Processor.$AdjustIdleOnPark();
|
|
|
|
_PlayerInstance && _PlayerInstance.$Enable();
|
|
|
|
//park in
|
|
var loadingTicket = _LoadingTicket = $Jssor$.$GetNow();
|
|
_SelfSlideItem.$LoadImage($Jssor$.$CreateCallback(null, SlideReadyEventHandler, loadingTicket));
|
|
}
|
|
else {
|
|
var distance = Math.abs(slideIndex - currentIndex);
|
|
var loadRange = _DisplayPieces + _Options.$LazyLoading - 1;
|
|
if (!_ImageLazyLoading || distance <= loadRange) {
|
|
_SelfSlideItem.$LoadImage();
|
|
}
|
|
}
|
|
}
|
|
|
|
function SwipeStartEventHandler() {
|
|
if (_CurrentSlideIndex == slideIndex && _Processor) {
|
|
_Processor.$Stop();
|
|
_PlayerInstance && _PlayerInstance.$Quit();
|
|
_PlayerInstance && _PlayerInstance.$Disable();
|
|
_Processor.$OpenSlideshowPanel();
|
|
}
|
|
}
|
|
|
|
function FreezeEventHandler() {
|
|
if (_CurrentSlideIndex == slideIndex && _Processor) {
|
|
_Processor.$Stop();
|
|
}
|
|
}
|
|
|
|
function ContentClickEventHandler(event) {
|
|
if (_LastDragSucceded) {
|
|
$Jssor$.$StopEvent(event);
|
|
|
|
var checkElement = $Jssor$.$EvtSrc(event);
|
|
while (checkElement && slideElmt !== checkElement) {
|
|
if (checkElement.tagName == "A") {
|
|
$Jssor$.$CancelEvent(event);
|
|
}
|
|
try {
|
|
checkElement = checkElement.parentNode;
|
|
} catch (e) {
|
|
// Firefox sometimes fires events for XUL elements, which throws
|
|
// a "permission denied" error. so this is not a child.
|
|
break;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
function SlideClickEventHandler(event) {
|
|
if (!_LastDragSucceded) {
|
|
_SelfSlider.$TriggerEvent($JssorSlider$.$EVT_CLICK, slideIndex, event);
|
|
}
|
|
}
|
|
|
|
function PlayerAvailableEventHandler() {
|
|
_PlayerInstance = _PlayerInstanceElement.pInstance;
|
|
_Processor && _Processor.$SetPlayer(_PlayerInstance);
|
|
}
|
|
|
|
_SelfSlideItem.$LoadImage = function (completeCallback, loadingScreen) {
|
|
loadingScreen = loadingScreen || _LoadingScreen;
|
|
|
|
if (_ImageElmts.length && !_ImageLoaded) {
|
|
|
|
$Jssor$.$ShowElement(loadingScreen);
|
|
|
|
if (!_ImageLoading) {
|
|
_ImageLoading = true;
|
|
_SelfSlider.$TriggerEvent($JssorSlider$.$EVT_LOAD_START, slideIndex);
|
|
|
|
$Jssor$.$Each(_ImageElmts, function (imageElmt) {
|
|
|
|
if (!$Jssor$.$Attribute(imageElmt, "src")) {
|
|
imageElmt.src = $Jssor$.$AttributeEx(imageElmt, "src2");
|
|
$Jssor$.$CssDisplay(imageElmt, imageElmt["display-origin"]);
|
|
}
|
|
});
|
|
}
|
|
$Jssor$.$LoadImages(_ImageElmts, _ImageItem, $Jssor$.$CreateCallback(null, LoadImageCompleteEventHandler, completeCallback, loadingScreen));
|
|
}
|
|
else {
|
|
LoadImageCompleteEventHandler(completeCallback, loadingScreen);
|
|
}
|
|
};
|
|
|
|
_SelfSlideItem.$GoForNextSlide = function () {
|
|
|
|
var index = slideIndex;
|
|
if (_Options.$AutoPlaySteps < 0)
|
|
index -= _SlideCount;
|
|
|
|
var nextIndex = index + _Options.$AutoPlaySteps * _PlayReverse;
|
|
|
|
if (_Loop & 2) {
|
|
//Rewind
|
|
nextIndex = GetRealIndex(nextIndex);
|
|
}
|
|
if (!(_Loop & 1)) {
|
|
//Stop at threshold
|
|
nextIndex = Math.max(0, Math.min(nextIndex, _SlideCount - _DisplayPieces));
|
|
}
|
|
|
|
if (nextIndex != slideIndex) {
|
|
if (_SlideshowRunner) {
|
|
var slideshowTransition = _SlideshowRunner.$GetTransition(_SlideCount);
|
|
|
|
if (slideshowTransition) {
|
|
var loadingTicket = _LoadingTicket = $Jssor$.$GetNow();
|
|
|
|
var nextItem = _SlideItems[GetRealIndex(nextIndex)];
|
|
return nextItem.$LoadImage($Jssor$.$CreateCallback(null, LoadSlideshowImageCompleteEventHandler, nextIndex, nextItem, slideshowTransition, loadingTicket), _LoadingScreen);
|
|
}
|
|
}
|
|
|
|
PlayTo(nextIndex);
|
|
}
|
|
};
|
|
|
|
_SelfSlideItem.$TryActivate = function () {
|
|
ParkEventHandler(slideIndex, slideIndex, true);
|
|
};
|
|
|
|
_SelfSlideItem.$ParkOut = function () {
|
|
//park out
|
|
_PlayerInstance && _PlayerInstance.$Quit();
|
|
_PlayerInstance && _PlayerInstance.$Disable();
|
|
_SelfSlideItem.$UnhideContentForSlideshow();
|
|
_Processor && _Processor.$Abort();
|
|
_Processor = null;
|
|
ResetCaptionSlider();
|
|
};
|
|
|
|
//for debug only
|
|
_SelfSlideItem.$StampSlideItemElements = function (stamp) {
|
|
stamp = _SequenceNumber + "_" + stamp;
|
|
|
|
$JssorDebug$.$Execute(function () {
|
|
if (_ImageItem)
|
|
$Jssor$.$Attribute(_ImageItem, "debug-id", stamp + "_slide_item_image_id");
|
|
|
|
$Jssor$.$Attribute(slideElmt, "debug-id", stamp + "_slide_item_item_id");
|
|
});
|
|
|
|
$JssorDebug$.$Execute(function () {
|
|
$Jssor$.$Attribute(_Wrapper, "debug-id", stamp + "_slide_item_wrapper_id");
|
|
});
|
|
|
|
$JssorDebug$.$Execute(function () {
|
|
$Jssor$.$Attribute(_LoadingScreen, "debug-id", stamp + "_loading_container_id");
|
|
});
|
|
};
|
|
|
|
_SelfSlideItem.$HideContentForSlideshow = function () {
|
|
$Jssor$.$HideElement(slideElmt);
|
|
};
|
|
|
|
_SelfSlideItem.$UnhideContentForSlideshow = function () {
|
|
$Jssor$.$ShowElement(slideElmt);
|
|
};
|
|
|
|
_SelfSlideItem.$EnablePlayer = function () {
|
|
_PlayerInstance && _PlayerInstance.$Enable();
|
|
};
|
|
|
|
function RefreshContent(elmt, fresh, level) {
|
|
$JssorDebug$.$Execute(function () {
|
|
if ($Jssor$.$Attribute(elmt, "jssor-slider"))
|
|
$JssorDebug$.$Log("Child slider found.");
|
|
});
|
|
|
|
if ($Jssor$.$Attribute(elmt, "jssor-slider"))
|
|
return;
|
|
|
|
level = level || 0;
|
|
|
|
if (!_ContentRefreshed) {
|
|
if (elmt.tagName == "IMG") {
|
|
_ImageElmts.push(elmt);
|
|
|
|
if (!$Jssor$.$Attribute(elmt, "src")) {
|
|
_ImageLazyLoading = true;
|
|
elmt["display-origin"] = $Jssor$.$CssDisplay(elmt);
|
|
$Jssor$.$HideElement(elmt);
|
|
}
|
|
}
|
|
if ($Jssor$.$IsBrowserIe9Earlier()) {
|
|
$Jssor$.$CssZIndex(elmt, ($Jssor$.$CssZIndex(elmt) || 0) + 1);
|
|
}
|
|
if (_Options.$HWA && $Jssor$.$WebKitVersion()) {
|
|
if ($Jssor$.$WebKitVersion() < 534 || (!_SlideshowEnabled && !$Jssor$.$IsBrowserChrome())) {
|
|
$Jssor$.$EnableHWA(elmt);
|
|
}
|
|
}
|
|
}
|
|
|
|
var childElements = $Jssor$.$Children(elmt);
|
|
|
|
$Jssor$.$Each(childElements, function (childElement, i) {
|
|
|
|
var childTagName = childElement.tagName;
|
|
var uAttribute = $Jssor$.$AttributeEx(childElement, "u");
|
|
if (uAttribute == "player" && !_PlayerInstanceElement) {
|
|
_PlayerInstanceElement = childElement;
|
|
if (_PlayerInstanceElement.pInstance) {
|
|
PlayerAvailableEventHandler();
|
|
}
|
|
else {
|
|
$Jssor$.$AddEvent(_PlayerInstanceElement, "dataavailable", PlayerAvailableEventHandler);
|
|
}
|
|
}
|
|
|
|
if (uAttribute == "caption") {
|
|
if (!$Jssor$.$IsBrowserIE() && !fresh) {
|
|
|
|
//if (childTagName == "A") {
|
|
// $Jssor$.$RemoveEvent(childElement, "click", ContentClickEventHandler);
|
|
// $Jssor$.$Attribute(childElement, "jssor-content", null);
|
|
//}
|
|
|
|
var captionElement = $Jssor$.$CloneNode(childElement, false, true);
|
|
$Jssor$.$InsertBefore(captionElement, childElement, elmt);
|
|
$Jssor$.$RemoveElement(childElement, elmt);
|
|
childElement = captionElement;
|
|
|
|
fresh = true;
|
|
}
|
|
}
|
|
else if (!_ContentRefreshed && !level && !_ImageItem) {
|
|
|
|
if (childTagName == "A") {
|
|
if ($Jssor$.$AttributeEx(childElement, "u") == "image") {
|
|
_ImageItem = $Jssor$.$FindChildByTag(childElement, "IMG");
|
|
|
|
$JssorDebug$.$Execute(function () {
|
|
if (!_ImageItem) {
|
|
$JssorDebug$.$Error("slide html code definition error, no 'IMG' found in a 'image with link' slide.\r\n" + elmt.outerHTML);
|
|
}
|
|
});
|
|
}
|
|
else {
|
|
_ImageItem = $Jssor$.$FindChild(childElement, "image", true);
|
|
}
|
|
|
|
if (_ImageItem) {
|
|
_LinkItemOrigin = childElement;
|
|
$Jssor$.$SetStyles(_LinkItemOrigin, _StyleDef);
|
|
|
|
_LinkItem = $Jssor$.$CloneNode(_LinkItemOrigin, true);
|
|
//$Jssor$.$AddEvent(_LinkItem, "click", ContentClickEventHandler);
|
|
|
|
$Jssor$.$CssDisplay(_LinkItem, "block");
|
|
$Jssor$.$SetStyles(_LinkItem, _StyleDef);
|
|
$Jssor$.$CssOpacity(_LinkItem, 0);
|
|
$Jssor$.$Css(_LinkItem, "backgroundColor", "#000");
|
|
}
|
|
}
|
|
else if (childTagName == "IMG" && $Jssor$.$AttributeEx(childElement, "u") == "image") {
|
|
_ImageItem = childElement;
|
|
}
|
|
|
|
if (_ImageItem) {
|
|
_ImageItem.border = 0;
|
|
$Jssor$.$SetStyles(_ImageItem, _StyleDef);
|
|
}
|
|
}
|
|
|
|
//if (!$Jssor$.$Attribute(childElement, "jssor-content")) {
|
|
// //cancel click event on <A> element when a drag of slide succeeded
|
|
// $Jssor$.$AddEvent(childElement, "click", ContentClickEventHandler);
|
|
// $Jssor$.$Attribute(childElement, "jssor-content", true);
|
|
//}
|
|
|
|
RefreshContent(childElement, fresh, level +1);
|
|
});
|
|
}
|
|
|
|
_SelfSlideItem.$OnInnerOffsetChange = function (oldOffset, newOffset) {
|
|
var slidePosition = _DisplayPieces - newOffset;
|
|
|
|
SetPosition(_Wrapper, slidePosition);
|
|
|
|
//following lines are for future usage, not ready yet
|
|
//if (!_IsDragging || !_IsCaptionSliderPlayingWhenDragStart) {
|
|
// var _DealWithParallax;
|
|
// if (IsCurrentSlideIndex(slideIndex)) {
|
|
// if (_CaptionSliderOptions.$PlayOutMode == 2)
|
|
// _DealWithParallax = true;
|
|
// }
|
|
// else {
|
|
// if (!_CaptionSliderOptions.$PlayInMode) {
|
|
// //PlayInMode: 0 none
|
|
// _CaptionSliderIn.$GoToEnd();
|
|
// }
|
|
// //else if (_CaptionSliderOptions.$PlayInMode == 1) {
|
|
// // //PlayInMode: 1 chain
|
|
// // _CaptionSliderIn.$GoToPosition(0);
|
|
// //}
|
|
// else if (_CaptionSliderOptions.$PlayInMode == 2) {
|
|
// //PlayInMode: 2 parallel
|
|
// _DealWithParallax = true;
|
|
// }
|
|
// }
|
|
|
|
// if (_DealWithParallax) {
|
|
// _CaptionSliderIn.$GoToPosition((_CaptionSliderIn.$GetPosition_OuterEnd() - _CaptionSliderIn.$GetPosition_OuterBegin()) * Math.abs(newOffset - 1) * .8 + _CaptionSliderIn.$GetPosition_OuterBegin());
|
|
// }
|
|
//}
|
|
};
|
|
|
|
_SelfSlideItem.$GetCaptionSliderIn = function () {
|
|
return _CaptionSliderIn;
|
|
};
|
|
|
|
_SelfSlideItem.$GetCaptionSliderOut = function () {
|
|
return _CaptionSliderOut;
|
|
};
|
|
|
|
_SelfSlideItem.$Index = slideIndex;
|
|
|
|
$JssorObject$.call(_SelfSlideItem);
|
|
|
|
//SlideItem Constructor
|
|
{
|
|
|
|
var thumb = $Jssor$.$FindChild(slideElmt, "thumb", true);
|
|
if (thumb) {
|
|
_SelfSlideItem.$Thumb = $Jssor$.$CloneNode(thumb);
|
|
$Jssor$.$RemoveAttribute(thumb, "id");
|
|
$Jssor$.$HideElement(thumb);
|
|
}
|
|
$Jssor$.$ShowElement(slideElmt);
|
|
|
|
_LoadingScreen = $Jssor$.$CloneNode(_LoadingContainer);
|
|
$Jssor$.$CssZIndex(_LoadingScreen, 1000);
|
|
|
|
//cancel click event on <A> element when a drag of slide succeeded
|
|
$Jssor$.$AddEvent(slideElmt, "click", SlideClickEventHandler);
|
|
|
|
ResetCaptionSlider(true);
|
|
|
|
_SelfSlideItem.$Image = _ImageItem;
|
|
_SelfSlideItem.$Link = _LinkItem;
|
|
|
|
_SelfSlideItem.$Item = slideElmt;
|
|
|
|
_SelfSlideItem.$Wrapper = _Wrapper = slideElmt;
|
|
$Jssor$.$AppendChild(_Wrapper, _LoadingScreen);
|
|
|
|
_SelfSlider.$On(203, ParkEventHandler);
|
|
_SelfSlider.$On(28, FreezeEventHandler);
|
|
_SelfSlider.$On(24, SwipeStartEventHandler);
|
|
|
|
$JssorDebug$.$Execute(function () {
|
|
_SequenceNumber = _SlideItemCreatedCount++;
|
|
});
|
|
|
|
$JssorDebug$.$Execute(function () {
|
|
$Jssor$.$Attribute(_Wrapper, "debug-id", "slide-" + slideIndex);
|
|
});
|
|
}
|
|
}
|
|
//SlideItem
|
|
|
|
//Processor
|
|
function Processor(slideElmt, slideIndex, slideshowProcessor, captionSliderIn, captionSliderOut) {
|
|
|
|
var _SelfProcessor = this;
|
|
|
|
var _ProgressBegin = 0;
|
|
var _SlideshowBegin = 0;
|
|
var _SlideshowEnd;
|
|
var _CaptionInBegin;
|
|
var _IdleBegin;
|
|
var _IdleEnd;
|
|
var _ProgressEnd;
|
|
|
|
var _IsSlideshowRunning;
|
|
var _IsRollingBack;
|
|
|
|
var _PlayerInstance;
|
|
var _IsPlayerOnService;
|
|
|
|
var slideItem = _SlideItems[slideIndex];
|
|
|
|
$JssorAnimator$.call(_SelfProcessor, 0, 0);
|
|
|
|
function UpdateLink() {
|
|
|
|
$Jssor$.$Empty(_LinkContainer);
|
|
|
|
if (_ShowLink && _IsSlideshowRunning && slideItem.$Link) {
|
|
$Jssor$.$AppendChild(_LinkContainer, slideItem.$Link);
|
|
}
|
|
|
|
$Jssor$.$ShowElement(_LinkContainer, !_IsSlideshowRunning && slideItem.$Image);
|
|
}
|
|
|
|
function ProcessCompleteEventHandler() {
|
|
|
|
if (_IsRollingBack) {
|
|
_IsRollingBack = false;
|
|
_SelfSlider.$TriggerEvent($JssorSlider$.$EVT_ROLLBACK_END, slideIndex, _IdleEnd, _ProgressBegin, _IdleBegin, _IdleEnd, _ProgressEnd);
|
|
_SelfProcessor.$GoToPosition(_IdleBegin);
|
|
}
|
|
|
|
_SelfProcessor.$Replay();
|
|
}
|
|
|
|
function PlayerSwitchEventHandler(isOnService) {
|
|
_IsPlayerOnService = isOnService;
|
|
|
|
_SelfProcessor.$Stop();
|
|
_SelfProcessor.$Replay();
|
|
}
|
|
|
|
_SelfProcessor.$Replay = function () {
|
|
|
|
var currentPosition = _SelfProcessor.$GetPosition_Display();
|
|
|
|
if (!_IsDragging && !_IsSliding && !_IsPlayerOnService && _CurrentSlideIndex == slideIndex) {
|
|
|
|
if (!currentPosition) {
|
|
if (_SlideshowEnd && !_IsSlideshowRunning) {
|
|
_IsSlideshowRunning = true;
|
|
|
|
_SelfProcessor.$OpenSlideshowPanel(true);
|
|
|
|
_SelfSlider.$TriggerEvent($JssorSlider$.$EVT_SLIDESHOW_START, slideIndex, _ProgressBegin, _SlideshowBegin, _SlideshowEnd, _ProgressEnd);
|
|
}
|
|
|
|
UpdateLink();
|
|
}
|
|
|
|
var toPosition;
|
|
var stateEvent = $JssorSlider$.$EVT_STATE_CHANGE;
|
|
|
|
if (currentPosition != _ProgressEnd) {
|
|
if (currentPosition == _IdleEnd) {
|
|
toPosition = _ProgressEnd;
|
|
}
|
|
else if (currentPosition == _IdleBegin) {
|
|
toPosition = _IdleEnd;
|
|
}
|
|
else if (!currentPosition) {
|
|
toPosition = _IdleBegin;
|
|
}
|
|
else if (currentPosition > _IdleEnd) {
|
|
_IsRollingBack = true;
|
|
toPosition = _IdleEnd;
|
|
stateEvent = $JssorSlider$.$EVT_ROLLBACK_START;
|
|
}
|
|
else {
|
|
//continue from break (by drag or lock)
|
|
toPosition = _SelfProcessor.$GetPlayToPosition();
|
|
}
|
|
}
|
|
|
|
_SelfSlider.$TriggerEvent(stateEvent, slideIndex, currentPosition, _ProgressBegin, _IdleBegin, _IdleEnd, _ProgressEnd);
|
|
|
|
var allowAutoPlay = _AutoPlay && (!_HoverToPause || _NotOnHover);
|
|
|
|
if (currentPosition == _ProgressEnd) {
|
|
(_IdleEnd != _ProgressEnd && !(_HoverToPause & 12) || allowAutoPlay) && slideItem.$GoForNextSlide();
|
|
}
|
|
else if (allowAutoPlay || currentPosition != _IdleEnd) {
|
|
_SelfProcessor.$PlayToPosition(toPosition, ProcessCompleteEventHandler);
|
|
}
|
|
}
|
|
};
|
|
|
|
_SelfProcessor.$AdjustIdleOnPark = function () {
|
|
if (_IdleEnd == _ProgressEnd && _IdleEnd == _SelfProcessor.$GetPosition_Display())
|
|
_SelfProcessor.$GoToPosition(_IdleBegin);
|
|
};
|
|
|
|
_SelfProcessor.$Abort = function () {
|
|
_SlideshowRunner && _SlideshowRunner.$Index == slideIndex && _SlideshowRunner.$Clear();
|
|
|
|
var currentPosition = _SelfProcessor.$GetPosition_Display();
|
|
if (currentPosition < _ProgressEnd) {
|
|
_SelfSlider.$TriggerEvent($JssorSlider$.$EVT_STATE_CHANGE, slideIndex, -currentPosition - 1, _ProgressBegin, _IdleBegin, _IdleEnd, _ProgressEnd);
|
|
}
|
|
};
|
|
|
|
_SelfProcessor.$OpenSlideshowPanel = function (open) {
|
|
if (slideshowProcessor) {
|
|
$Jssor$.$CssOverflow(_SlideshowPanel, open && slideshowProcessor.$Transition.$Outside ? "" : "hidden");
|
|
}
|
|
};
|
|
|
|
_SelfProcessor.$OnInnerOffsetChange = function (oldPosition, newPosition) {
|
|
|
|
if (_IsSlideshowRunning && newPosition >= _SlideshowEnd) {
|
|
_IsSlideshowRunning = false;
|
|
UpdateLink();
|
|
slideItem.$UnhideContentForSlideshow();
|
|
_SlideshowRunner.$Clear();
|
|
|
|
_SelfSlider.$TriggerEvent($JssorSlider$.$EVT_SLIDESHOW_END, slideIndex, _ProgressBegin, _SlideshowBegin, _SlideshowEnd, _ProgressEnd);
|
|
}
|
|
|
|
_SelfSlider.$TriggerEvent($JssorSlider$.$EVT_PROGRESS_CHANGE, slideIndex, newPosition, _ProgressBegin, _IdleBegin, _IdleEnd, _ProgressEnd);
|
|
};
|
|
|
|
_SelfProcessor.$SetPlayer = function (playerInstance) {
|
|
if (playerInstance && !_PlayerInstance) {
|
|
_PlayerInstance = playerInstance;
|
|
|
|
playerInstance.$On($JssorPlayer$.$EVT_SWITCH, PlayerSwitchEventHandler);
|
|
}
|
|
};
|
|
|
|
//Processor Constructor
|
|
{
|
|
if (slideshowProcessor) {
|
|
_SelfProcessor.$Chain(slideshowProcessor);
|
|
}
|
|
|
|
_SlideshowEnd = _SelfProcessor.$GetPosition_OuterEnd();
|
|
_CaptionInBegin = _SelfProcessor.$GetPosition_OuterEnd();
|
|
_SelfProcessor.$Chain(captionSliderIn);
|
|
_IdleBegin = captionSliderIn.$GetPosition_OuterEnd();
|
|
_IdleEnd = _IdleBegin + ($Jssor$.$ParseFloat($Jssor$.$AttributeEx(slideElmt, "idle")) || _AutoPlayInterval);
|
|
|
|
captionSliderOut.$Shift(_IdleEnd);
|
|
_SelfProcessor.$Combine(captionSliderOut);
|
|
_ProgressEnd = _SelfProcessor.$GetPosition_OuterEnd();
|
|
}
|
|
}
|
|
//Processor
|
|
//#endregion
|
|
|
|
function SetPosition(elmt, position) {
|
|
var orientation = _DragOrientation > 0 ? _DragOrientation : _PlayOrientation;
|
|
var x = _StepLengthX * position * (orientation & 1);
|
|
var y = _StepLengthY * position * ((orientation >> 1) & 1);
|
|
|
|
x = Math.round(x);
|
|
y = Math.round(y);
|
|
|
|
$Jssor$.$CssLeft(elmt, x);
|
|
$Jssor$.$CssTop(elmt, y);
|
|
}
|
|
|
|
//#region Event handling begin
|
|
|
|
function RecordFreezePoint() {
|
|
_CarouselPlaying_OnFreeze = _IsSliding;
|
|
_PlayToPosition_OnFreeze = _CarouselPlayer.$GetPlayToPosition();
|
|
_Position_OnFreeze = _Conveyor.$GetPosition();
|
|
}
|
|
|
|
function Freeze() {
|
|
RecordFreezePoint();
|
|
|
|
if (_IsDragging || !_NotOnHover && (_HoverToPause & 12)) {
|
|
_CarouselPlayer.$Stop();
|
|
|
|
_SelfSlider.$TriggerEvent($JssorSlider$.$EVT_FREEZE);
|
|
}
|
|
}
|
|
|
|
function Unfreeze(byDrag) {
|
|
|
|
if (!_IsDragging && (_NotOnHover || !(_HoverToPause & 12)) && !_CarouselPlayer.$IsPlaying()) {
|
|
|
|
var currentPosition = _Conveyor.$GetPosition();
|
|
var toPosition = Math.ceil(_Position_OnFreeze);
|
|
|
|
if (byDrag && Math.abs(_DragOffsetTotal) >= _Options.$MinDragOffsetToSlide) {
|
|
toPosition = Math.ceil(currentPosition);
|
|
toPosition += _DragIndexAdjust;
|
|
}
|
|
|
|
if (!(_Loop & 1)) {
|
|
toPosition = Math.min(_SlideCount - _DisplayPieces, Math.max(toPosition, 0));
|
|
}
|
|
|
|
var t = Math.abs(toPosition - currentPosition);
|
|
t = 1 - Math.pow(1 - t, 5);
|
|
|
|
if (!_LastDragSucceded && _CarouselPlaying_OnFreeze) {
|
|
_CarouselPlayer.$Continue(_PlayToPosition_OnFreeze);
|
|
}
|
|
else if (currentPosition == toPosition) {
|
|
_CurrentSlideItem.$EnablePlayer();
|
|
_CurrentSlideItem.$TryActivate();
|
|
}
|
|
else {
|
|
|
|
_CarouselPlayer.$PlayCarousel(currentPosition, toPosition, t * _SlideDuration);
|
|
}
|
|
}
|
|
}
|
|
|
|
function PreventDragSelectionEvent(event) {
|
|
if (!$Jssor$.$AttributeEx($Jssor$.$EvtSrc(event), "nodrag")) {
|
|
$Jssor$.$CancelEvent(event);
|
|
}
|
|
}
|
|
|
|
function OnTouchStart(event) {
|
|
OnDragStart(event, 1);
|
|
}
|
|
|
|
function OnDragStart(event, touch) {
|
|
event = $Jssor$.$GetEvent(event);
|
|
var eventSrc = $Jssor$.$EvtSrc(event);
|
|
|
|
if (!_DragOrientationRegistered && !$Jssor$.$AttributeEx(eventSrc, "nodrag") && RegisterDrag() && (!touch || event.touches.length == 1)) {
|
|
_IsDragging = true;
|
|
_DragInvalid = false;
|
|
_LoadingTicket = null;
|
|
|
|
$Jssor$.$AddEvent(document, touch ? "touchmove" : "mousemove", OnDragMove);
|
|
|
|
_LastTimeMoveByDrag = $Jssor$.$GetNow() - 50;
|
|
|
|
_LastDragSucceded = 0;
|
|
Freeze();
|
|
|
|
if (!_CarouselPlaying_OnFreeze)
|
|
_DragOrientation = 0;
|
|
|
|
if (touch) {
|
|
var touchPoint = event.touches[0];
|
|
_DragStartMouseX = touchPoint.clientX;
|
|
_DragStartMouseY = touchPoint.clientY;
|
|
}
|
|
else {
|
|
var mousePoint = $Jssor$.$MousePosition(event);
|
|
|
|
_DragStartMouseX = mousePoint.x;
|
|
_DragStartMouseY = mousePoint.y;
|
|
}
|
|
|
|
_DragOffsetTotal = 0;
|
|
_DragOffsetLastTime = 0;
|
|
_DragIndexAdjust = 0;
|
|
|
|
//Trigger EVT_DRAGSTART
|
|
_SelfSlider.$TriggerEvent($JssorSlider$.$EVT_DRAG_START, GetRealIndex(_Position_OnFreeze), _Position_OnFreeze, event);
|
|
}
|
|
}
|
|
|
|
function OnDragMove(event) {
|
|
if (_IsDragging) {
|
|
event = $Jssor$.$GetEvent(event);
|
|
|
|
var actionPoint;
|
|
|
|
if (event.type != "mousemove") {
|
|
var touch = event.touches[0];
|
|
actionPoint = { x: touch.clientX, y: touch.clientY };
|
|
}
|
|
else {
|
|
actionPoint = $Jssor$.$MousePosition(event);
|
|
}
|
|
|
|
if (actionPoint) {
|
|
var distanceX = actionPoint.x - _DragStartMouseX;
|
|
var distanceY = actionPoint.y - _DragStartMouseY;
|
|
|
|
|
|
if (Math.floor(_Position_OnFreeze) != _Position_OnFreeze)
|
|
_DragOrientation = _DragOrientation || (_PlayOrientation & _DragOrientationRegistered);
|
|
|
|
if ((distanceX || distanceY) && !_DragOrientation) {
|
|
if (_DragOrientationRegistered == 3) {
|
|
if (Math.abs(distanceY) > Math.abs(distanceX)) {
|
|
_DragOrientation = 2;
|
|
}
|
|
else
|
|
_DragOrientation = 1;
|
|
}
|
|
else {
|
|
_DragOrientation = _DragOrientationRegistered;
|
|
}
|
|
|
|
if (_IsTouchDevice && _DragOrientation == 1 && Math.abs(distanceY) - Math.abs(distanceX) > 3) {
|
|
_DragInvalid = true;
|
|
}
|
|
}
|
|
|
|
if (_DragOrientation) {
|
|
var distance = distanceY;
|
|
var stepLength = _StepLengthY;
|
|
|
|
if (_DragOrientation == 1) {
|
|
distance = distanceX;
|
|
stepLength = _StepLengthX;
|
|
}
|
|
|
|
if (!(_Loop & 1)) {
|
|
if (distance > 0) {
|
|
var normalDistance = stepLength * _CurrentSlideIndex;
|
|
var sqrtDistance = distance - normalDistance;
|
|
if (sqrtDistance > 0) {
|
|
distance = normalDistance + Math.sqrt(sqrtDistance) * 5;
|
|
}
|
|
}
|
|
|
|
if (distance < 0) {
|
|
var normalDistance = stepLength * (_SlideCount - _DisplayPieces - _CurrentSlideIndex);
|
|
var sqrtDistance = -distance - normalDistance;
|
|
|
|
if (sqrtDistance > 0) {
|
|
distance = -normalDistance - Math.sqrt(sqrtDistance) * 5;
|
|
}
|
|
}
|
|
}
|
|
|
|
if (_DragOffsetTotal - _DragOffsetLastTime < -2) {
|
|
_DragIndexAdjust = 0;
|
|
}
|
|
else if (_DragOffsetTotal - _DragOffsetLastTime > 2) {
|
|
_DragIndexAdjust = -1;
|
|
}
|
|
|
|
_DragOffsetLastTime = _DragOffsetTotal;
|
|
_DragOffsetTotal = distance;
|
|
_PositionToGoByDrag = _Position_OnFreeze - _DragOffsetTotal / stepLength / (_ScaleRatio || 1);
|
|
|
|
if (_DragOffsetTotal && _DragOrientation && !_DragInvalid) {
|
|
$Jssor$.$CancelEvent(event);
|
|
if (!_IsSliding) {
|
|
_CarouselPlayer.$StandBy(_PositionToGoByDrag);
|
|
}
|
|
else
|
|
_CarouselPlayer.$SetStandByPosition(_PositionToGoByDrag);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
function OnDragEnd() {
|
|
UnregisterDrag();
|
|
|
|
if (_IsDragging) {
|
|
|
|
_IsDragging = false;
|
|
|
|
_LastTimeMoveByDrag = $Jssor$.$GetNow();
|
|
|
|
$Jssor$.$RemoveEvent(document, "mousemove", OnDragMove);
|
|
$Jssor$.$RemoveEvent(document, "touchmove", OnDragMove);
|
|
|
|
_LastDragSucceded = _DragOffsetTotal;
|
|
|
|
_CarouselPlayer.$Stop();
|
|
|
|
var currentPosition = _Conveyor.$GetPosition();
|
|
|
|
//Trigger EVT_DRAG_END
|
|
_SelfSlider.$TriggerEvent($JssorSlider$.$EVT_DRAG_END, GetRealIndex(currentPosition), currentPosition, GetRealIndex(_Position_OnFreeze), _Position_OnFreeze);
|
|
|
|
(_HoverToPause & 12) && RecordFreezePoint();
|
|
|
|
Unfreeze(true);
|
|
}
|
|
}
|
|
|
|
function SlidesClickEventHandler(event) {
|
|
if (_LastDragSucceded) {
|
|
$Jssor$.$StopEvent(event);
|
|
|
|
var checkElement = $Jssor$.$EvtSrc(event);
|
|
while (checkElement && _SlidesContainer !== checkElement) {
|
|
if (checkElement.tagName == "A") {
|
|
$Jssor$.$CancelEvent(event);
|
|
}
|
|
try {
|
|
checkElement = checkElement.parentNode;
|
|
} catch (e) {
|
|
// Firefox sometimes fires events for XUL elements, which throws
|
|
// a "permission denied" error. so this is not a child.
|
|
break;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
//#endregion
|
|
|
|
function SetCurrentSlideIndex(index) {
|
|
_PrevSlideItem = _SlideItems[_CurrentSlideIndex];
|
|
_PreviousSlideIndex = _CurrentSlideIndex;
|
|
_CurrentSlideIndex = GetRealIndex(index);
|
|
_CurrentSlideItem = _SlideItems[_CurrentSlideIndex];
|
|
ResetNavigator(index);
|
|
return _CurrentSlideIndex;
|
|
}
|
|
|
|
function OnPark(slideIndex, prevIndex) {
|
|
_DragOrientation = 0;
|
|
|
|
SetCurrentSlideIndex(slideIndex);
|
|
|
|
//Trigger EVT_PARK
|
|
_SelfSlider.$TriggerEvent($JssorSlider$.$EVT_PARK, GetRealIndex(slideIndex), prevIndex);
|
|
}
|
|
|
|
function ResetNavigator(index, temp) {
|
|
_TempSlideIndex = index;
|
|
$Jssor$.$Each(_Navigators, function (navigator) {
|
|
navigator.$SetCurrentIndex(GetRealIndex(index), index, temp);
|
|
});
|
|
}
|
|
|
|
function RegisterDrag() {
|
|
var dragRegistry = $JssorSlider$.$DragRegistry || 0;
|
|
var dragOrientation = _DragEnabled;
|
|
if (_IsTouchDevice)
|
|
(dragOrientation & 1) && (dragOrientation &= 1);
|
|
$JssorSlider$.$DragRegistry |= dragOrientation;
|
|
|
|
return (_DragOrientationRegistered = dragOrientation & ~dragRegistry);
|
|
}
|
|
|
|
function UnregisterDrag() {
|
|
if (_DragOrientationRegistered) {
|
|
$JssorSlider$.$DragRegistry &= ~_DragEnabled;
|
|
_DragOrientationRegistered = 0;
|
|
}
|
|
}
|
|
|
|
function CreatePanel() {
|
|
var div = $Jssor$.$CreateDiv();
|
|
|
|
$Jssor$.$SetStyles(div, _StyleDef);
|
|
$Jssor$.$CssPosition(div, "absolute");
|
|
|
|
return div;
|
|
}
|
|
|
|
function GetRealIndex(index) {
|
|
return (index % _SlideCount + _SlideCount) % _SlideCount;
|
|
}
|
|
|
|
function IsCurrentSlideIndex(index) {
|
|
return GetRealIndex(index) == _CurrentSlideIndex;
|
|
}
|
|
|
|
function IsPreviousSlideIndex(index) {
|
|
return GetRealIndex(index) == _PreviousSlideIndex;
|
|
}
|
|
|
|
//Navigation Request Handler
|
|
function NavigationClickHandler(index, relative) {
|
|
var toIndex = index;
|
|
|
|
if (relative) {
|
|
if (!_Loop) {
|
|
//Stop at threshold
|
|
toIndex = Math.min(Math.max(toIndex + _TempSlideIndex, 0), _SlideCount - _DisplayPieces);
|
|
relative = false;
|
|
}
|
|
else if (_Loop & 2) {
|
|
//Rewind
|
|
toIndex = GetRealIndex(toIndex + _TempSlideIndex);
|
|
relative = false;
|
|
}
|
|
}
|
|
else if (_Loop) {
|
|
toIndex = _SelfSlider.$GetVirtualIndex(toIndex);
|
|
}
|
|
|
|
PlayTo(toIndex, _Options.$SlideDuration, relative);
|
|
}
|
|
|
|
function ShowNavigators() {
|
|
$Jssor$.$Each(_Navigators, function (navigator) {
|
|
navigator.$Show(navigator.$Options.$ChanceToShow <= _NotOnHover);
|
|
});
|
|
}
|
|
|
|
function MainContainerMouseLeaveEventHandler() {
|
|
if (!_NotOnHover) {
|
|
|
|
//$JssorDebug$.$Log("mouseleave");
|
|
|
|
_NotOnHover = 1;
|
|
|
|
ShowNavigators();
|
|
|
|
if (!_IsDragging) {
|
|
(_HoverToPause & 12) && Unfreeze();
|
|
(_HoverToPause & 3) && _SlideItems[_CurrentSlideIndex].$TryActivate();
|
|
}
|
|
}
|
|
}
|
|
|
|
function MainContainerMouseEnterEventHandler() {
|
|
|
|
if (_NotOnHover) {
|
|
|
|
//$JssorDebug$.$Log("mouseenter");
|
|
|
|
_NotOnHover = 0;
|
|
|
|
ShowNavigators();
|
|
|
|
_IsDragging || !(_HoverToPause & 12) || Freeze();
|
|
}
|
|
}
|
|
|
|
function AdjustSlidesContainerSize() {
|
|
_StyleDef = { $Width: _SlideWidth, $Height: _SlideHeight, $Top: 0, $Left: 0 };
|
|
|
|
$Jssor$.$Each(_SlideElmts, function (slideElmt, i) {
|
|
|
|
$Jssor$.$SetStyles(slideElmt, _StyleDef);
|
|
$Jssor$.$CssPosition(slideElmt, "absolute");
|
|
$Jssor$.$CssOverflow(slideElmt, "hidden");
|
|
|
|
$Jssor$.$HideElement(slideElmt);
|
|
});
|
|
|
|
$Jssor$.$SetStyles(_LoadingContainer, _StyleDef);
|
|
}
|
|
|
|
function PlayToOffset(offset, slideDuration) {
|
|
PlayTo(offset, slideDuration, true);
|
|
}
|
|
|
|
function PlayTo(slideIndex, slideDuration, relative) {
|
|
/// <summary>
|
|
/// PlayTo( slideIndex [, slideDuration] ); //Play slider to position 'slideIndex' within a period calculated base on 'slideDuration'.
|
|
/// </summary>
|
|
/// <param name="slideIndex" type="Number">
|
|
/// slide slideIndex or position will be playing to
|
|
/// </param>
|
|
/// <param name="slideDuration" type="Number" optional="true">
|
|
/// base slide duration in milliseconds to calculate the whole duration to complete this play request.
|
|
/// default value is '$SlideDuration' value which is specified when initialize the slider.
|
|
/// </param>
|
|
/// http://msdn.microsoft.com/en-us/library/vstudio/bb385682.aspx
|
|
/// http://msdn.microsoft.com/en-us/library/vstudio/hh542720.aspx
|
|
if (_CarouselEnabled && (!_IsDragging && (_NotOnHover || !(_HoverToPause & 12)) || _Options.$NaviQuitDrag)) {
|
|
_IsSliding = true;
|
|
_IsDragging = false;
|
|
_CarouselPlayer.$Stop();
|
|
|
|
{
|
|
//Slide Duration
|
|
if (slideDuration == undefined)
|
|
slideDuration = _SlideDuration;
|
|
|
|
var positionDisplay = _Carousel.$GetPosition_Display();
|
|
var positionTo = slideIndex;
|
|
if (relative) {
|
|
positionTo = positionDisplay + slideIndex;
|
|
if (slideIndex > 0)
|
|
positionTo = Math.ceil(positionTo);
|
|
else
|
|
positionTo = Math.floor(positionTo);
|
|
}
|
|
|
|
if (_Loop & 2) {
|
|
//Rewind
|
|
positionTo = GetRealIndex(positionTo);
|
|
}
|
|
if (!(_Loop & 1)) {
|
|
//Stop at threshold
|
|
positionTo = Math.max(0, Math.min(positionTo, _SlideCount - _DisplayPieces));
|
|
}
|
|
|
|
var positionOffset = (positionTo - positionDisplay) % _SlideCount;
|
|
positionTo = positionDisplay + positionOffset;
|
|
|
|
var duration = positionDisplay == positionTo ? 0 : slideDuration * Math.abs(positionOffset);
|
|
duration = Math.min(duration, slideDuration * _DisplayPieces * 1.5);
|
|
|
|
_CarouselPlayer.$PlayCarousel(positionDisplay, positionTo, duration || 1);
|
|
}
|
|
}
|
|
}
|
|
|
|
//private functions
|
|
|
|
//member functions
|
|
|
|
_SelfSlider.$PlayTo = PlayTo;
|
|
|
|
_SelfSlider.$GoTo = function (slideIndex) {
|
|
/// <summary>
|
|
/// instance.$GoTo( slideIndex ); //Go to the specifed slide immediately with no play.
|
|
/// </summary>
|
|
//PlayTo(slideIndex, 1);
|
|
_Conveyor.$GoToPosition(slideIndex);
|
|
};
|
|
|
|
_SelfSlider.$Next = function () {
|
|
/// <summary>
|
|
/// instance.$Next(); //Play the slider to next slide.
|
|
/// </summary>
|
|
PlayToOffset(1);
|
|
};
|
|
|
|
_SelfSlider.$Prev = function () {
|
|
/// <summary>
|
|
/// instance.$Prev(); //Play the slider to previous slide.
|
|
/// </summary>
|
|
PlayToOffset(-1);
|
|
};
|
|
|
|
_SelfSlider.$Pause = function () {
|
|
/// <summary>
|
|
/// instance.$Pause(); //Pause the slider, prevent it from auto playing.
|
|
/// </summary>
|
|
_AutoPlay = false;
|
|
};
|
|
|
|
_SelfSlider.$Play = function () {
|
|
/// <summary>
|
|
/// instance.$Play(); //Start auto play if the slider is currently paused.
|
|
/// </summary>
|
|
if (!_AutoPlay) {
|
|
_AutoPlay = true;
|
|
_SlideItems[_CurrentSlideIndex] && _SlideItems[_CurrentSlideIndex].$TryActivate();
|
|
}
|
|
};
|
|
|
|
_SelfSlider.$SetSlideshowTransitions = function (transitions) {
|
|
/// <summary>
|
|
/// instance.$SetSlideshowTransitions( transitions ); //Reset slideshow transitions for the slider.
|
|
/// </summary>
|
|
$JssorDebug$.$Execute(function () {
|
|
if (!transitions || !transitions.length) {
|
|
$JssorDebug$.$Error("Can not set slideshow transitions, no transitions specified.");
|
|
}
|
|
});
|
|
|
|
//$Jssor$.$TranslateTransitions(transitions); //for old transition compatibility
|
|
_Options.$SlideshowOptions.$Transitions = transitions;
|
|
};
|
|
|
|
_SelfSlider.$SetCaptionTransitions = function (transitions) {
|
|
/// <summary>
|
|
/// instance.$SetCaptionTransitions( transitions ); //Reset caption transitions for the slider.
|
|
/// </summary>
|
|
$JssorDebug$.$Execute(function () {
|
|
if (!transitions || !transitions.length) {
|
|
$JssorDebug$.$Error("Can not set caption transitions, no transitions specified");
|
|
}
|
|
});
|
|
|
|
//$Jssor$.$TranslateTransitions(transitions); //for old transition compatibility
|
|
_CaptionSliderOptions.$CaptionTransitions = transitions;
|
|
_CaptionSliderOptions.$Version = $Jssor$.$GetNow();
|
|
};
|
|
|
|
_SelfSlider.$SlidesCount = function () {
|
|
/// <summary>
|
|
/// instance.$SlidesCount(); //Retrieve slides count of the slider.
|
|
/// </summary>
|
|
return _SlideElmts.length;
|
|
};
|
|
|
|
_SelfSlider.$CurrentIndex = function () {
|
|
/// <summary>
|
|
/// instance.$CurrentIndex(); //Retrieve current slide index of the slider.
|
|
/// </summary>
|
|
return _CurrentSlideIndex;
|
|
};
|
|
|
|
_SelfSlider.$IsAutoPlaying = function () {
|
|
/// <summary>
|
|
/// instance.$IsAutoPlaying(); //Retrieve auto play status of the slider.
|
|
/// </summary>
|
|
return _AutoPlay;
|
|
};
|
|
|
|
_SelfSlider.$IsDragging = function () {
|
|
/// <summary>
|
|
/// instance.$IsDragging(); //Retrieve drag status of the slider.
|
|
/// </summary>
|
|
return _IsDragging;
|
|
};
|
|
|
|
_SelfSlider.$IsSliding = function () {
|
|
/// <summary>
|
|
/// instance.$IsSliding(); //Retrieve right<-->left sliding status of the slider.
|
|
/// </summary>
|
|
return _IsSliding;
|
|
};
|
|
|
|
_SelfSlider.$IsMouseOver = function () {
|
|
/// <summary>
|
|
/// instance.$IsMouseOver(); //Retrieve mouse over status of the slider.
|
|
/// </summary>
|
|
return !_NotOnHover;
|
|
};
|
|
|
|
_SelfSlider.$LastDragSucceded = function () {
|
|
/// <summary>
|
|
/// instance.$IsLastDragSucceded(); //Retrieve last drag succeded status, returns 0 if failed, returns drag offset if succeded
|
|
/// </summary>
|
|
return _LastDragSucceded;
|
|
};
|
|
|
|
function OriginalWidth() {
|
|
/// <summary>
|
|
/// instance.$OriginalWidth(); //Retrieve original width of the slider.
|
|
/// </summary>
|
|
return $Jssor$.$CssWidth(_ScaleWrapper || elmt);
|
|
}
|
|
|
|
function OriginalHeight() {
|
|
/// <summary>
|
|
/// instance.$OriginalHeight(); //Retrieve original height of the slider.
|
|
/// </summary>
|
|
return $Jssor$.$CssHeight(_ScaleWrapper || elmt);
|
|
}
|
|
|
|
_SelfSlider.$OriginalWidth = _SelfSlider.$GetOriginalWidth = OriginalWidth;
|
|
|
|
_SelfSlider.$OriginalHeight = _SelfSlider.$GetOriginalHeight = OriginalHeight;
|
|
|
|
function Scale(dimension, isHeight) {
|
|
/// <summary>
|
|
/// instance.$ScaleWidth(); //Retrieve scaled dimension the slider currently displays.
|
|
/// instance.$ScaleWidth( dimension ); //Scale the slider to new width and keep aspect ratio.
|
|
/// </summary>
|
|
|
|
if (dimension == undefined)
|
|
return $Jssor$.$CssWidth(elmt);
|
|
|
|
if (!_ScaleWrapper) {
|
|
$JssorDebug$.$Execute(function () {
|
|
var originalWidthStr = $Jssor$.$Css(elmt, "width");
|
|
var originalHeightStr = $Jssor$.$Css(elmt, "height");
|
|
var originalWidth = $Jssor$.$CssP(elmt, "width");
|
|
var originalHeight = $Jssor$.$CssP(elmt, "height");
|
|
|
|
if (!originalWidthStr || originalWidthStr.indexOf("px") == -1) {
|
|
$JssorDebug$.$Fail("Cannot scale jssor slider, 'width' of 'outer container' not specified. Please specify 'width' in pixel. e.g. 'width: 600px;'");
|
|
}
|
|
|
|
if (!originalHeightStr || originalHeightStr.indexOf("px") == -1) {
|
|
$JssorDebug$.$Fail("Cannot scale jssor slider, 'height' of 'outer container' not specified. Please specify 'height' in pixel. e.g. 'height: 300px;'");
|
|
}
|
|
|
|
if (originalWidthStr.indexOf('%') != -1) {
|
|
$JssorDebug$.$Fail("Cannot scale jssor slider, 'width' of 'outer container' not valid. Please specify 'width' in pixel. e.g. 'width: 600px;'");
|
|
}
|
|
|
|
if (originalHeightStr.indexOf('%') != -1) {
|
|
$JssorDebug$.$Fail("Cannot scale jssor slider, 'height' of 'outer container' not valid. Please specify 'height' in pixel. e.g. 'height: 300px;'");
|
|
}
|
|
|
|
if (!originalWidth) {
|
|
$JssorDebug$.$Fail("Cannot scale jssor slider, 'width' of 'outer container' not valid. 'width' of 'outer container' should be positive number. e.g. 'width: 600px;'");
|
|
}
|
|
|
|
if (!originalHeight) {
|
|
$JssorDebug$.$Fail("Cannot scale jssor slider, 'height' of 'outer container' not valid. 'height' of 'outer container' should be positive number. e.g. 'height: 300px;'");
|
|
}
|
|
});
|
|
|
|
var innerWrapper = $Jssor$.$CreateDiv(document);
|
|
$Jssor$.$ClassName(innerWrapper, $Jssor$.$ClassName(elmt));
|
|
$Jssor$.$CssCssText(innerWrapper, $Jssor$.$CssCssText(elmt));
|
|
$Jssor$.$CssDisplay(innerWrapper, "block");
|
|
|
|
$Jssor$.$CssPosition(innerWrapper, "relative");
|
|
$Jssor$.$CssTop(innerWrapper, 0);
|
|
$Jssor$.$CssLeft(innerWrapper, 0);
|
|
$Jssor$.$CssOverflow(innerWrapper, "visible");
|
|
|
|
_ScaleWrapper = $Jssor$.$CreateDiv(document);
|
|
|
|
$Jssor$.$CssPosition(_ScaleWrapper, "absolute");
|
|
$Jssor$.$CssTop(_ScaleWrapper, 0);
|
|
$Jssor$.$CssLeft(_ScaleWrapper, 0);
|
|
$Jssor$.$CssWidth(_ScaleWrapper, $Jssor$.$CssWidth(elmt));
|
|
$Jssor$.$CssHeight(_ScaleWrapper, $Jssor$.$CssHeight(elmt));
|
|
$Jssor$.$SetStyleTransformOrigin(_ScaleWrapper, "0 0");
|
|
|
|
$Jssor$.$AppendChild(_ScaleWrapper, innerWrapper);
|
|
|
|
var children = $Jssor$.$Children(elmt);
|
|
$Jssor$.$AppendChild(elmt, _ScaleWrapper);
|
|
|
|
$Jssor$.$Css(elmt, "backgroundImage", "");
|
|
|
|
//var noMoveElmts = {
|
|
// "navigator": _BulletNavigatorOptions && _BulletNavigatorOptions.$Scale == false,
|
|
// "arrowleft": _ArrowNavigatorOptions && _ArrowNavigatorOptions.$Scale == false,
|
|
// "arrowright": _ArrowNavigatorOptions && _ArrowNavigatorOptions.$Scale == false,
|
|
// "thumbnavigator": _ThumbnailNavigatorOptions && _ThumbnailNavigatorOptions.$Scale == false,
|
|
// "thumbwrapper": _ThumbnailNavigatorOptions && _ThumbnailNavigatorOptions.$Scale == false
|
|
//};
|
|
|
|
$Jssor$.$Each(children, function (child) {
|
|
$Jssor$.$AppendChild($Jssor$.$AttributeEx(child, "noscale") ? elmt : innerWrapper, child);
|
|
//$Jssor$.$AppendChild(noMoveElmts[$Jssor$.$AttributeEx(child, "u")] ? elmt : innerWrapper, child);
|
|
});
|
|
}
|
|
|
|
$JssorDebug$.$Execute(function () {
|
|
if (!dimension || dimension < 0) {
|
|
$JssorDebug$.$Fail("'$ScaleWidth' error, 'dimension' should be positive value.");
|
|
}
|
|
});
|
|
|
|
$JssorDebug$.$Execute(function () {
|
|
if (!_InitialScrollWidth) {
|
|
_InitialScrollWidth = _SelfSlider.$Elmt.scrollWidth;
|
|
}
|
|
});
|
|
|
|
_ScaleRatio = dimension / (isHeight ? $Jssor$.$CssHeight : $Jssor$.$CssWidth)(_ScaleWrapper);
|
|
$Jssor$.$CssScale(_ScaleWrapper, _ScaleRatio);
|
|
|
|
var scaleWidth = isHeight ? (_ScaleRatio * OriginalWidth()) : dimension;
|
|
var scaleHeight = isHeight ? dimension : (_ScaleRatio * OriginalHeight());
|
|
|
|
$Jssor$.$CssWidth(elmt, scaleWidth);
|
|
$Jssor$.$CssHeight(elmt, scaleHeight);
|
|
|
|
$Jssor$.$Each(_Navigators, function (navigator) {
|
|
navigator.$Relocate(scaleWidth, scaleHeight);
|
|
});
|
|
}
|
|
|
|
_SelfSlider.$ScaleHeight = _SelfSlider.$GetScaleHeight = function (height) {
|
|
/// <summary>
|
|
/// instance.$ScaleHeight(); //Retrieve scaled height the slider currently displays.
|
|
/// instance.$ScaleHeight( dimension ); //Scale the slider to new height and keep aspect ratio.
|
|
/// </summary>
|
|
|
|
if (height == undefined)
|
|
return $Jssor$.$CssHeight(elmt);
|
|
|
|
Scale(height, true);
|
|
};
|
|
|
|
_SelfSlider.$ScaleWidth = _SelfSlider.$SetScaleWidth = _SelfSlider.$GetScaleWidth = Scale;
|
|
|
|
_SelfSlider.$GetVirtualIndex = function (index) {
|
|
var parkingIndex = Math.ceil(GetRealIndex(_ParkingPosition / _StepLength));
|
|
var displayIndex = GetRealIndex(index - _TempSlideIndex + parkingIndex);
|
|
|
|
if (displayIndex > _DisplayPieces) {
|
|
if (index - _TempSlideIndex > _SlideCount / 2)
|
|
index -= _SlideCount;
|
|
else if (index - _TempSlideIndex <= -_SlideCount / 2)
|
|
index += _SlideCount;
|
|
}
|
|
else {
|
|
index = _TempSlideIndex + displayIndex - parkingIndex;
|
|
}
|
|
|
|
return index;
|
|
};
|
|
|
|
//member functions
|
|
|
|
$JssorObject$.call(_SelfSlider);
|
|
|
|
$JssorDebug$.$Execute(function () {
|
|
var outerContainerElmt = $Jssor$.$GetElement(elmt);
|
|
if (!outerContainerElmt)
|
|
$JssorDebug$.$Fail("Outer container '" + elmt + "' not found.");
|
|
});
|
|
|
|
//initialize member variables
|
|
_SelfSlider.$Elmt = elmt = $Jssor$.$GetElement(elmt);
|
|
//initialize member variables
|
|
|
|
var _InitialScrollWidth; //for debug only
|
|
var _CaptionSliderCount = 1; //for debug only
|
|
|
|
var _Options = $Jssor$.$Extend({
|
|
$FillMode: 0, //[Optional] The way to fill image in slide, 0 stretch, 1 contain (keep aspect ratio and put all inside slide), 2 cover (keep aspect ratio and cover whole slide), 4 actual size, 5 contain for large image, actual size for small image, default value is 0
|
|
$LazyLoading: 1, //[Optional] For image with lazy loading format (<IMG src2="url" .../>), by default it will be loaded only when the slide comes.
|
|
//But an integer value (maybe 0, 1, 2 or 3) indicates that how far of nearby slides should be loaded immediately as well, default value is 1.
|
|
$StartIndex: 0, //[Optional] Index of slide to display when initialize, default value is 0
|
|
$AutoPlay: false, //[Optional] Whether to auto play, default value is false
|
|
$Loop: 1, //[Optional] Enable loop(circular) of carousel or not, 0: stop, 1: loop, 2 rewind, default value is 1
|
|
$HWA: true, //[Optional] Enable hardware acceleration or not, default value is true
|
|
$NaviQuitDrag: true,
|
|
$AutoPlaySteps: 1, //[Optional] Steps to go of every play (this options applys only when slideshow disabled), default value is 1
|
|
$AutoPlayInterval: 3000, //[Optional] Interval to play next slide since the previous stopped if a slideshow is auto playing, default value is 3000
|
|
$PauseOnHover: 1, //[Optional] Whether to pause when mouse over if a slider is auto playing, 0 no pause, 1 pause for desktop, 2 pause for touch device, 3 pause for desktop and touch device, 4 freeze for desktop, 8 freeze for touch device, 12 freeze for desktop and touch device, default value is 1
|
|
|
|
$SlideDuration: 500, //[Optional] Specifies default duration (swipe) for slide in milliseconds, default value is 400
|
|
$SlideEasing: $JssorEasing$.$EaseOutQuad, //[Optional] Specifies easing for right to left animation, default value is $JssorEasing$.$EaseOutQuad
|
|
$MinDragOffsetToSlide: 20, //[Optional] Minimum drag offset that trigger slide, default value is 20
|
|
$SlideSpacing: 0, //[Optional] Space between each slide in pixels, default value is 0
|
|
$DisplayPieces: 1, //[Optional] Number of pieces to display (the slideshow would be disabled if the value is set to greater than 1), default value is 1
|
|
$ParkingPosition: 0, //[Optional] The offset position to park slide (this options applys only when slideshow disabled), default value is 0.
|
|
$UISearchMode: 1, //[Optional] The way (0 parellel, 1 recursive, default value is recursive) to search UI components (slides container, loading screen, navigator container, arrow navigator container, thumbnail navigator container etc.
|
|
$PlayOrientation: 1, //[Optional] Orientation to play slide (for auto play, navigation), 1 horizental, 2 vertical, 5 horizental reverse, 6 vertical reverse, default value is 1
|
|
$DragOrientation: 1 //[Optional] Orientation to drag slide, 0 no drag, 1 horizental, 2 vertical, 3 both, default value is 1 (Note that the $DragOrientation should be the same as $PlayOrientation when $DisplayPieces is greater than 1, or parking position is not 0)
|
|
|
|
}, options);
|
|
|
|
//going to use $Idle instead of $AutoPlayInterval
|
|
if (_Options.$Idle != undefined)
|
|
_Options.$AutoPlayInterval = _Options.$Idle;
|
|
|
|
//going to use $Cols instead of $DisplayPieces
|
|
if (_Options.$Cols != undefined)
|
|
_Options.$DisplayPieces = _Options.$Cols;
|
|
|
|
//Sodo statement for development time intellisence only
|
|
$JssorDebug$.$Execute(function () {
|
|
_Options = $Jssor$.$Extend({
|
|
$ArrowKeyNavigation: undefined,
|
|
$SlideWidth: undefined,
|
|
$SlideHeight: undefined,
|
|
$SlideshowOptions: undefined,
|
|
$CaptionSliderOptions: undefined,
|
|
$BulletNavigatorOptions: undefined,
|
|
$ArrowNavigatorOptions: undefined,
|
|
$ThumbnailNavigatorOptions: undefined
|
|
},
|
|
_Options);
|
|
});
|
|
|
|
var _PlayOrientation = _Options.$PlayOrientation & 3;
|
|
var _PlayReverse = (_Options.$PlayOrientation & 4) / -4 || 1;
|
|
|
|
var _SlideshowOptions = _Options.$SlideshowOptions;
|
|
var _CaptionSliderOptions = $Jssor$.$Extend({ $Class: $JssorCaptionSliderBase$, $PlayInMode: 1, $PlayOutMode: 1 }, _Options.$CaptionSliderOptions);
|
|
//$Jssor$.$TranslateTransitions(_CaptionSliderOptions.$CaptionTransitions); //for old transition compatibility
|
|
var _BulletNavigatorOptions = _Options.$BulletNavigatorOptions;
|
|
var _ArrowNavigatorOptions = _Options.$ArrowNavigatorOptions;
|
|
var _ThumbnailNavigatorOptions = _Options.$ThumbnailNavigatorOptions;
|
|
|
|
$JssorDebug$.$Execute(function () {
|
|
if (_SlideshowOptions && !_SlideshowOptions.$Class) {
|
|
$JssorDebug$.$Fail("Option $SlideshowOptions error, class not specified.");
|
|
}
|
|
});
|
|
|
|
$JssorDebug$.$Execute(function () {
|
|
if (_Options.$CaptionSliderOptions && !_Options.$CaptionSliderOptions.$Class) {
|
|
$JssorDebug$.$Fail("Option $CaptionSliderOptions error, class not specified.");
|
|
}
|
|
});
|
|
|
|
$JssorDebug$.$Execute(function () {
|
|
if (_BulletNavigatorOptions && !_BulletNavigatorOptions.$Class) {
|
|
$JssorDebug$.$Fail("Option $BulletNavigatorOptions error, class not specified.");
|
|
}
|
|
});
|
|
|
|
$JssorDebug$.$Execute(function () {
|
|
if (_ArrowNavigatorOptions && !_ArrowNavigatorOptions.$Class) {
|
|
$JssorDebug$.$Fail("Option $ArrowNavigatorOptions error, class not specified.");
|
|
}
|
|
});
|
|
|
|
$JssorDebug$.$Execute(function () {
|
|
if (_ThumbnailNavigatorOptions && !_ThumbnailNavigatorOptions.$Class) {
|
|
$JssorDebug$.$Fail("Option $ThumbnailNavigatorOptions error, class not specified.");
|
|
}
|
|
});
|
|
|
|
var _UISearchNoDeep = !_Options.$UISearchMode;
|
|
var _ScaleWrapper;
|
|
var _SlidesContainer = $Jssor$.$FindChild(elmt, "slides", _UISearchNoDeep);
|
|
var _LoadingContainer = $Jssor$.$FindChild(elmt, "loading", _UISearchNoDeep) || $Jssor$.$CreateDiv(document);
|
|
|
|
var _BulletNavigatorContainer = $Jssor$.$FindChild(elmt, "navigator", _UISearchNoDeep);
|
|
|
|
var _ArrowLeft = $Jssor$.$FindChild(elmt, "arrowleft", _UISearchNoDeep);
|
|
var _ArrowRight = $Jssor$.$FindChild(elmt, "arrowright", _UISearchNoDeep);
|
|
|
|
var _ThumbnailNavigatorContainer = $Jssor$.$FindChild(elmt, "thumbnavigator", _UISearchNoDeep);
|
|
|
|
$JssorDebug$.$Execute(function () {
|
|
//if (_BulletNavigatorOptions && !_BulletNavigatorContainer) {
|
|
// throw new Error("$BulletNavigatorOptions specified but bullet navigator container (<div u=\"navigator\" ...) not defined.");
|
|
//}
|
|
if (_BulletNavigatorContainer && !_BulletNavigatorOptions) {
|
|
throw new Error("Bullet navigator container defined but $BulletNavigatorOptions not specified.");
|
|
}
|
|
|
|
//if (_ArrowNavigatorOptions) {
|
|
// if (!_ArrowLeft) {
|
|
// throw new Error("$ArrowNavigatorOptions specified, but arrowleft (<span u=\"arrowleft\" ...) not defined.");
|
|
// }
|
|
|
|
// if (!_ArrowRight) {
|
|
// throw new Error("$ArrowNavigatorOptions specified, but arrowright (<span u=\"arrowright\" ...) not defined.");
|
|
// }
|
|
//}
|
|
|
|
if ((_ArrowLeft || _ArrowRight) && !_ArrowNavigatorOptions) {
|
|
throw new Error("arrowleft or arrowright defined, but $ArrowNavigatorOptions not specified.");
|
|
}
|
|
|
|
//if (_ThumbnailNavigatorOptions && !_ThumbnailNavigatorContainer) {
|
|
// throw new Error("$ThumbnailNavigatorOptions specified, but thumbnail navigator container (<div u=\"thumbnavigator\" ...) not defined.");
|
|
//}
|
|
|
|
if (_ThumbnailNavigatorContainer && !_ThumbnailNavigatorOptions) {
|
|
throw new Error("Thumbnail navigator container defined, but $ThumbnailNavigatorOptions not specified.");
|
|
}
|
|
});
|
|
|
|
var _SlidesContainerWidth = $Jssor$.$CssWidth(_SlidesContainer);
|
|
var _SlidesContainerHeight = $Jssor$.$CssHeight(_SlidesContainer);
|
|
|
|
$JssorDebug$.$Execute(function () {
|
|
if (isNaN(_SlidesContainerWidth))
|
|
$JssorDebug$.$Fail("Width of slides container wrong specification, it should be specified in pixel (like style='width: 600px;').");
|
|
|
|
if (_SlidesContainerWidth == undefined)
|
|
$JssorDebug$.$Fail("Width of slides container not specified, it should be specified in pixel (like style='width: 600px;').");
|
|
|
|
if (isNaN(_SlidesContainerHeight))
|
|
$JssorDebug$.$Fail("Height of slides container wrong specification, it should be specified in pixel (like style='height: 300px;').");
|
|
|
|
if (_SlidesContainerHeight == undefined)
|
|
$JssorDebug$.$Fail("Height of slides container not specified, it should be specified in pixel (like style='height: 300px;').");
|
|
|
|
var slidesContainerOverflow = $Jssor$.$CssOverflow(_SlidesContainer);
|
|
var slidesContainerOverflowX = $Jssor$.$Css(_SlidesContainer, "overflowX");
|
|
var slidesContainerOverflowY = $Jssor$.$Css(_SlidesContainer, "overflowY");
|
|
if (slidesContainerOverflow != "hidden" && (slidesContainerOverflowX != "hidden" || slidesContainerOverflowY != "hidden"))
|
|
$JssorDebug$.$Fail("Overflow of slides container wrong specification, it should be specified as 'hidden' (style='overflow:hidden;').");
|
|
});
|
|
|
|
$JssorDebug$.$Execute(function () {
|
|
if (!$Jssor$.$IsNumeric(_Options.$DisplayPieces))
|
|
$JssorDebug$.$Fail("Option $DisplayPieces error, it should be a numeric value and greater than or equal to 1.");
|
|
|
|
if (_Options.$DisplayPieces < 1)
|
|
$JssorDebug$.$Fail("Option $DisplayPieces error, it should be greater than or equal to 1.");
|
|
|
|
if (_Options.$DisplayPieces > 1 && _Options.$DragOrientation && _Options.$DragOrientation != _PlayOrientation)
|
|
$JssorDebug$.$Fail("Option $DragOrientation error, it should be 0 or the same of $PlayOrientation when $DisplayPieces is greater than 1.");
|
|
|
|
if (!$Jssor$.$IsNumeric(_Options.$ParkingPosition))
|
|
$JssorDebug$.$Fail("Option $ParkingPosition error, it should be a numeric value.");
|
|
|
|
if (_Options.$ParkingPosition && _Options.$DragOrientation && _Options.$DragOrientation != _PlayOrientation)
|
|
$JssorDebug$.$Fail("Option $DragOrientation error, it should be 0 or the same of $PlayOrientation when $ParkingPosition is not equal to 0.");
|
|
});
|
|
|
|
var _StyleDef;
|
|
|
|
var _SlideElmts = [];
|
|
|
|
{
|
|
var slideElmts = $Jssor$.$Children(_SlidesContainer);
|
|
$Jssor$.$Each(slideElmts, function (slideElmt) {
|
|
if (slideElmt.tagName == "DIV" && !$Jssor$.$AttributeEx(slideElmt, "u")) {
|
|
_SlideElmts.push(slideElmt);
|
|
}
|
|
else if ($Jssor$.$IsBrowserIe9Earlier()) {
|
|
$Jssor$.$CssZIndex(slideElmt, ($Jssor$.$CssZIndex(slideElmt) || 0) + 1);
|
|
}
|
|
});
|
|
}
|
|
|
|
$JssorDebug$.$Execute(function () {
|
|
if (_SlideElmts.length < 1) {
|
|
$JssorDebug$.$Error("Slides html code definition error, there must be at least 1 slide to initialize a slider.");
|
|
}
|
|
});
|
|
|
|
var _SlideItemCreatedCount = 0; //for debug only
|
|
var _SlideItemReleasedCount = 0; //for debug only
|
|
|
|
var _PreviousSlideIndex;
|
|
var _CurrentSlideIndex = -1;
|
|
var _TempSlideIndex;
|
|
var _PrevSlideItem;
|
|
var _CurrentSlideItem;
|
|
var _SlideCount = _SlideElmts.length;
|
|
|
|
var _SlideWidth = _Options.$SlideWidth || _SlidesContainerWidth;
|
|
var _SlideHeight = _Options.$SlideHeight || _SlidesContainerHeight;
|
|
|
|
var _SlideSpacing = _Options.$SlideSpacing;
|
|
var _StepLengthX = _SlideWidth + _SlideSpacing;
|
|
var _StepLengthY = _SlideHeight + _SlideSpacing;
|
|
var _StepLength = (_PlayOrientation & 1) ? _StepLengthX : _StepLengthY;
|
|
var _DisplayPieces = Math.min(_Options.$DisplayPieces, _SlideCount);
|
|
|
|
var _SlideshowPanel;
|
|
var _CurrentBoardIndex = 0;
|
|
var _DragOrientation;
|
|
var _DragOrientationRegistered;
|
|
var _DragInvalid;
|
|
|
|
var _Navigators = [];
|
|
var _BulletNavigator;
|
|
var _ArrowNavigator;
|
|
var _ThumbnailNavigator;
|
|
|
|
var _ShowLink;
|
|
|
|
var _Frozen;
|
|
var _AutoPlay;
|
|
var _AutoPlaySteps = _Options.$AutoPlaySteps;
|
|
var _HoverToPause = _Options.$PauseOnHover;
|
|
var _AutoPlayInterval = _Options.$AutoPlayInterval;
|
|
var _SlideDuration = _Options.$SlideDuration;
|
|
|
|
var _SlideshowRunnerClass;
|
|
var _TransitionsOrder;
|
|
|
|
var _SlideshowEnabled;
|
|
var _ParkingPosition;
|
|
var _CarouselEnabled = _DisplayPieces < _SlideCount;
|
|
var _Loop = _CarouselEnabled ? _Options.$Loop : 0;
|
|
|
|
var _DragEnabled;
|
|
var _LastDragSucceded;
|
|
|
|
var _NotOnHover = 1; //0 Hovering, 1 Not hovering
|
|
|
|
//Variable Definition
|
|
var _IsSliding;
|
|
var _IsDragging;
|
|
var _LoadingTicket;
|
|
|
|
|
|
//The X position of mouse/touch when a drag start
|
|
var _DragStartMouseX = 0;
|
|
//The Y position of mouse/touch when a drag start
|
|
var _DragStartMouseY = 0;
|
|
var _DragOffsetTotal;
|
|
var _DragOffsetLastTime;
|
|
var _DragIndexAdjust;
|
|
|
|
var _Carousel;
|
|
var _Conveyor;
|
|
var _Slideshow;
|
|
var _CarouselPlayer;
|
|
var _SlideContainer = new SlideContainer();
|
|
var _ScaleRatio;
|
|
|
|
//$JssorSlider$ Constructor
|
|
{
|
|
_AutoPlay = _Options.$AutoPlay;
|
|
_SelfSlider.$Options = options;
|
|
|
|
AdjustSlidesContainerSize();
|
|
|
|
$Jssor$.$Attribute(elmt, "jssor-slider", true);
|
|
|
|
$Jssor$.$CssZIndex(_SlidesContainer, $Jssor$.$CssZIndex(_SlidesContainer) || 0);
|
|
$Jssor$.$CssPosition(_SlidesContainer, "absolute");
|
|
_SlideshowPanel = $Jssor$.$CloneNode(_SlidesContainer, true);
|
|
$Jssor$.$InsertBefore(_SlideshowPanel, _SlidesContainer);
|
|
|
|
if (_SlideshowOptions) {
|
|
_ShowLink = _SlideshowOptions.$ShowLink;
|
|
_SlideshowRunnerClass = _SlideshowOptions.$Class;
|
|
|
|
$JssorDebug$.$Execute(function () {
|
|
if (!_SlideshowOptions.$Transitions || !_SlideshowOptions.$Transitions.length) {
|
|
$JssorDebug$.$Error("Invalid '$SlideshowOptions', no '$Transitions' specified.");
|
|
}
|
|
});
|
|
|
|
_SlideshowEnabled = _DisplayPieces == 1 && _SlideCount > 1 && _SlideshowRunnerClass && (!$Jssor$.$IsBrowserIE() || $Jssor$.$BrowserVersion() >= 8);
|
|
}
|
|
|
|
_ParkingPosition = (_SlideshowEnabled || _DisplayPieces >= _SlideCount || !(_Loop & 1)) ? 0 : _Options.$ParkingPosition;
|
|
|
|
_DragEnabled = ((_DisplayPieces > 1 || _ParkingPosition) ? _PlayOrientation : -1) & _Options.$DragOrientation;
|
|
|
|
//SlideBoard
|
|
var _SlideboardElmt = _SlidesContainer;
|
|
var _SlideItems = [];
|
|
|
|
var _SlideshowRunner;
|
|
var _LinkContainer;
|
|
|
|
var _Device = $Jssor$.$Device();
|
|
var _IsTouchDevice = _Device.$Touchable;
|
|
|
|
var _LastTimeMoveByDrag;
|
|
var _Position_OnFreeze;
|
|
var _CarouselPlaying_OnFreeze;
|
|
var _PlayToPosition_OnFreeze;
|
|
var _PositionToGoByDrag;
|
|
|
|
//SlideBoard Constructor
|
|
{
|
|
if (_Device.$TouchActionAttr) {
|
|
$Jssor$.$Css(_SlideboardElmt, _Device.$TouchActionAttr, [null, "pan-y", "pan-x", "none"][_DragEnabled] || "");
|
|
}
|
|
|
|
_Slideshow = new Slideshow();
|
|
|
|
if (_SlideshowEnabled)
|
|
_SlideshowRunner = new _SlideshowRunnerClass(_SlideContainer, _SlideWidth, _SlideHeight, _SlideshowOptions, _IsTouchDevice);
|
|
|
|
$Jssor$.$AppendChild(_SlideshowPanel, _Slideshow.$Wrapper);
|
|
$Jssor$.$CssOverflow(_SlidesContainer, "hidden");
|
|
|
|
//link container
|
|
{
|
|
_LinkContainer = CreatePanel();
|
|
$Jssor$.$Css(_LinkContainer, "backgroundColor", "#000");
|
|
$Jssor$.$CssOpacity(_LinkContainer, 0);
|
|
$Jssor$.$InsertBefore(_LinkContainer, _SlideboardElmt.firstChild, _SlideboardElmt);
|
|
}
|
|
|
|
for (var i = 0; i < _SlideElmts.length; i++) {
|
|
var slideElmt = _SlideElmts[i];
|
|
var slideItem = new SlideItem(slideElmt, i);
|
|
_SlideItems.push(slideItem);
|
|
}
|
|
|
|
$Jssor$.$HideElement(_LoadingContainer);
|
|
|
|
$JssorDebug$.$Execute(function () {
|
|
$Jssor$.$Attribute(_LoadingContainer, "debug-id", "loading-container");
|
|
});
|
|
|
|
_Carousel = new Carousel();
|
|
_CarouselPlayer = new CarouselPlayer(_Carousel, _Slideshow);
|
|
|
|
$JssorDebug$.$Execute(function () {
|
|
$Jssor$.$Attribute(_SlideboardElmt, "debug-id", "slide-board");
|
|
});
|
|
|
|
if (_DragEnabled) {
|
|
$Jssor$.$AddEvent(_SlidesContainer, "mousedown", OnDragStart);
|
|
$Jssor$.$AddEvent(_SlidesContainer, "touchstart", OnTouchStart);
|
|
$Jssor$.$AddEvent(_SlidesContainer, "dragstart", PreventDragSelectionEvent);
|
|
$Jssor$.$AddEvent(_SlidesContainer, "selectstart", PreventDragSelectionEvent);
|
|
$Jssor$.$AddEvent(document, "mouseup", OnDragEnd);
|
|
$Jssor$.$AddEvent(document, "touchend", OnDragEnd);
|
|
$Jssor$.$AddEvent(document, "touchcancel", OnDragEnd);
|
|
$Jssor$.$AddEvent(window, "blur", OnDragEnd);
|
|
}
|
|
}
|
|
//SlideBoard
|
|
|
|
_HoverToPause &= (_IsTouchDevice ? 10 : 5);
|
|
|
|
//Bullet Navigator
|
|
if (_BulletNavigatorContainer && _BulletNavigatorOptions) {
|
|
_BulletNavigator = new _BulletNavigatorOptions.$Class(_BulletNavigatorContainer, _BulletNavigatorOptions, OriginalWidth(), OriginalHeight());
|
|
_Navigators.push(_BulletNavigator);
|
|
}
|
|
|
|
//Arrow Navigator
|
|
if (_ArrowNavigatorOptions && _ArrowLeft && _ArrowRight) {
|
|
_ArrowNavigatorOptions.$Loop = _Loop;
|
|
_ArrowNavigatorOptions.$DisplayPieces = _DisplayPieces;
|
|
_ArrowNavigator = new _ArrowNavigatorOptions.$Class(_ArrowLeft, _ArrowRight, _ArrowNavigatorOptions, OriginalWidth(), OriginalHeight());
|
|
_Navigators.push(_ArrowNavigator);
|
|
}
|
|
|
|
//Thumbnail Navigator
|
|
if (_ThumbnailNavigatorContainer && _ThumbnailNavigatorOptions) {
|
|
_ThumbnailNavigatorOptions.$StartIndex = _Options.$StartIndex;
|
|
_ThumbnailNavigator = new _ThumbnailNavigatorOptions.$Class(_ThumbnailNavigatorContainer, _ThumbnailNavigatorOptions);
|
|
_Navigators.push(_ThumbnailNavigator);
|
|
}
|
|
|
|
$Jssor$.$Each(_Navigators, function (navigator) {
|
|
navigator.$Reset(_SlideCount, _SlideItems, _LoadingContainer);
|
|
navigator.$On($JssorNavigatorEvents$.$NAVIGATIONREQUEST, NavigationClickHandler);
|
|
});
|
|
|
|
Scale(OriginalWidth());
|
|
|
|
$Jssor$.$AddEvent(_SlidesContainer, "click", SlidesClickEventHandler);
|
|
$Jssor$.$AddEvent(elmt, "mouseout", $Jssor$.$MouseOverOutFilter(MainContainerMouseLeaveEventHandler, elmt));
|
|
$Jssor$.$AddEvent(elmt, "mouseover", $Jssor$.$MouseOverOutFilter(MainContainerMouseEnterEventHandler, elmt));
|
|
|
|
ShowNavigators();
|
|
|
|
//Keyboard Navigation
|
|
if (_Options.$ArrowKeyNavigation) {
|
|
$Jssor$.$AddEvent(document, "keydown", function (e) {
|
|
if (e.keyCode == 37/*$JssorKeyCode$.$LEFT*/) {
|
|
//Arrow Left
|
|
PlayToOffset(-1);
|
|
}
|
|
else if (e.keyCode == 39/*$JssorKeyCode$.$RIGHT*/) {
|
|
//Arrow Right
|
|
PlayToOffset(1);
|
|
}
|
|
});
|
|
}
|
|
|
|
var startPosition = _Options.$StartIndex;
|
|
if (!(_Loop & 1)) {
|
|
startPosition = Math.max(0, Math.min(startPosition, _SlideCount - _DisplayPieces));
|
|
}
|
|
_CarouselPlayer.$PlayCarousel(startPosition, startPosition, 0);
|
|
}
|
|
};
|
|
var $JssorSlideo$ = window.$JssorSlideo$ = $JssorSlider$;
|
|
|
|
$JssorSlider$.$EVT_CLICK = 21;
|
|
$JssorSlider$.$EVT_DRAG_START = 22;
|
|
$JssorSlider$.$EVT_DRAG_END = 23;
|
|
$JssorSlider$.$EVT_SWIPE_START = 24;
|
|
$JssorSlider$.$EVT_SWIPE_END = 25;
|
|
|
|
$JssorSlider$.$EVT_LOAD_START = 26;
|
|
$JssorSlider$.$EVT_LOAD_END = 27;
|
|
$JssorSlider$.$EVT_FREEZE = 28;
|
|
|
|
$JssorSlider$.$EVT_POSITION_CHANGE = 202;
|
|
$JssorSlider$.$EVT_PARK = 203;
|
|
|
|
$JssorSlider$.$EVT_SLIDESHOW_START = 206;
|
|
$JssorSlider$.$EVT_SLIDESHOW_END = 207;
|
|
|
|
$JssorSlider$.$EVT_PROGRESS_CHANGE = 208;
|
|
$JssorSlider$.$EVT_STATE_CHANGE = 209;
|
|
$JssorSlider$.$EVT_ROLLBACK_START = 210;
|
|
$JssorSlider$.$EVT_ROLLBACK_END = 211;
|
|
|
|
//(function ($) {
|
|
// jQuery.fn.jssorSlider = function (options) {
|
|
// return this.each(function () {
|
|
// return $(this).data('jssorSlider') || $(this).data('jssorSlider', new $JssorSlider$(this, options));
|
|
// });
|
|
// };
|
|
//})(jQuery);
|
|
|
|
//window.jQuery && (jQuery.fn.jssorSlider = function (options) {
|
|
// return this.each(function () {
|
|
// return jQuery(this).data('jssorSlider') || jQuery(this).data('jssorSlider', new $JssorSlider$(this, options));
|
|
// });
|
|
//});
|
|
|
|
//$JssorBulletNavigator$
|
|
var $JssorNavigatorEvents$ = {
|
|
$NAVIGATIONREQUEST: 1,
|
|
$INDEXCHANGE: 2,
|
|
$RESET: 3
|
|
};
|
|
|
|
var $JssorBulletNavigator$ = window.$JssorBulletNavigator$ = function (elmt, options, containerWidth, containerHeight) {
|
|
var self = this;
|
|
$JssorObject$.call(self);
|
|
|
|
elmt = $Jssor$.$GetElement(elmt);
|
|
|
|
var _Count;
|
|
var _Length;
|
|
var _Width;
|
|
var _Height;
|
|
var _CurrentIndex;
|
|
var _CurrentInnerIndex = 0;
|
|
var _Options;
|
|
var _Steps;
|
|
var _Lanes;
|
|
var _SpacingX;
|
|
var _SpacingY;
|
|
var _Orientation;
|
|
var _ItemPrototype;
|
|
var _PrototypeWidth;
|
|
var _PrototypeHeight;
|
|
|
|
var _ButtonElements = [];
|
|
var _Buttons = [];
|
|
|
|
function Highlight(index) {
|
|
if (index != -1)
|
|
_Buttons[index].$Selected(index == _CurrentInnerIndex);
|
|
}
|
|
|
|
function OnNavigationRequest(index) {
|
|
self.$TriggerEvent($JssorNavigatorEvents$.$NAVIGATIONREQUEST, index * _Steps);
|
|
}
|
|
|
|
self.$Elmt = elmt;
|
|
self.$GetCurrentIndex = function () {
|
|
return _CurrentIndex;
|
|
};
|
|
|
|
self.$SetCurrentIndex = function (index) {
|
|
if (index != _CurrentIndex) {
|
|
var lastInnerIndex = _CurrentInnerIndex;
|
|
var innerIndex = Math.floor(index / _Steps);
|
|
_CurrentInnerIndex = innerIndex;
|
|
_CurrentIndex = index;
|
|
|
|
Highlight(lastInnerIndex);
|
|
Highlight(innerIndex);
|
|
|
|
//self.$TriggerEvent($JssorNavigatorEvents$.$INDEXCHANGE, index);
|
|
}
|
|
};
|
|
|
|
self.$Show = function (hide) {
|
|
$Jssor$.$ShowElement(elmt, hide);
|
|
};
|
|
|
|
var _Located;
|
|
self.$Relocate = function (containerWidth, containerHeight) {
|
|
if (!_Located || _Options.$Scale == false) {
|
|
var containerWidth = $Jssor$.$ParentNode(elmt).clientWidth;
|
|
var containerHeight = $Jssor$.$ParentNode(elmt).clientHeight;
|
|
|
|
if (_Options.$AutoCenter & 1) {
|
|
$Jssor$.$CssLeft(elmt, (containerWidth - _Width) / 2);
|
|
}
|
|
if (_Options.$AutoCenter & 2) {
|
|
$Jssor$.$CssTop(elmt, (containerHeight - _Height) / 2);
|
|
}
|
|
|
|
_Located = true;
|
|
}
|
|
};
|
|
|
|
var _Initialized;
|
|
self.$Reset = function (length) {
|
|
if (!_Initialized) {
|
|
_Length = length;
|
|
_Count = Math.ceil(length / _Steps);
|
|
_CurrentInnerIndex = 0;
|
|
|
|
var itemOffsetX = _PrototypeWidth + _SpacingX;
|
|
var itemOffsetY = _PrototypeHeight + _SpacingY;
|
|
|
|
var maxIndex = Math.ceil(_Count / _Lanes) - 1;
|
|
|
|
_Width = _PrototypeWidth + itemOffsetX * (!_Orientation ? maxIndex : _Lanes - 1);
|
|
_Height = _PrototypeHeight + itemOffsetY * (_Orientation ? maxIndex : _Lanes - 1);
|
|
|
|
$Jssor$.$CssWidth(elmt, _Width);
|
|
$Jssor$.$CssHeight(elmt, _Height);
|
|
|
|
for (var buttonIndex = 0; buttonIndex < _Count; buttonIndex++) {
|
|
|
|
var numberDiv = $Jssor$.$CreateSpan();
|
|
$Jssor$.$InnerText(numberDiv, buttonIndex + 1);
|
|
|
|
var div = $Jssor$.$BuildElement(_ItemPrototype, "numbertemplate", numberDiv, true);
|
|
$Jssor$.$CssPosition(div, "absolute");
|
|
|
|
var columnIndex = buttonIndex % (maxIndex + 1);
|
|
$Jssor$.$CssLeft(div, !_Orientation ? itemOffsetX * columnIndex : buttonIndex % _Lanes * itemOffsetX);
|
|
$Jssor$.$CssTop(div, _Orientation ? itemOffsetY * columnIndex : Math.floor(buttonIndex / (maxIndex + 1)) * itemOffsetY);
|
|
|
|
$Jssor$.$AppendChild(elmt, div);
|
|
_ButtonElements[buttonIndex] = div;
|
|
|
|
if (_Options.$ActionMode & 1)
|
|
$Jssor$.$AddEvent(div, "click", $Jssor$.$CreateCallback(null, OnNavigationRequest, buttonIndex));
|
|
|
|
if (_Options.$ActionMode & 2)
|
|
$Jssor$.$AddEvent(div, "mouseover", $Jssor$.$MouseOverOutFilter($Jssor$.$CreateCallback(null, OnNavigationRequest, buttonIndex), div));
|
|
|
|
_Buttons[buttonIndex] = $Jssor$.$Buttonize(div);
|
|
}
|
|
|
|
//self.$TriggerEvent($JssorNavigatorEvents$.$RESET);
|
|
_Initialized = true;
|
|
}
|
|
};
|
|
|
|
//JssorBulletNavigator Constructor
|
|
{
|
|
self.$Options = _Options = $Jssor$.$Extend({
|
|
$SpacingX: 0,
|
|
$SpacingY: 0,
|
|
$Orientation: 1,
|
|
$ActionMode: 1
|
|
}, options);
|
|
|
|
//Sodo statement for development time intellisence only
|
|
$JssorDebug$.$Execute(function () {
|
|
_Options = $Jssor$.$Extend({
|
|
$Steps: undefined,
|
|
$Lanes: undefined
|
|
}, _Options);
|
|
});
|
|
|
|
_ItemPrototype = $Jssor$.$FindChild(elmt, "prototype");
|
|
|
|
$JssorDebug$.$Execute(function () {
|
|
if (!_ItemPrototype)
|
|
$JssorDebug$.$Fail("Navigator item prototype not defined.");
|
|
|
|
if (isNaN($Jssor$.$CssWidth(_ItemPrototype))) {
|
|
$JssorDebug$.$Fail("Width of 'navigator item prototype' not specified.");
|
|
}
|
|
|
|
if (isNaN($Jssor$.$CssHeight(_ItemPrototype))) {
|
|
$JssorDebug$.$Fail("Height of 'navigator item prototype' not specified.");
|
|
}
|
|
});
|
|
|
|
_PrototypeWidth = $Jssor$.$CssWidth(_ItemPrototype);
|
|
_PrototypeHeight = $Jssor$.$CssHeight(_ItemPrototype);
|
|
|
|
$Jssor$.$RemoveElement(_ItemPrototype, elmt);
|
|
|
|
_Steps = _Options.$Steps || 1;
|
|
_Lanes = _Options.$Lanes || 1;
|
|
_SpacingX = _Options.$SpacingX;
|
|
_SpacingY = _Options.$SpacingY;
|
|
_Orientation = _Options.$Orientation - 1;
|
|
|
|
if (_Options.$Scale == false) {
|
|
$Jssor$.$Attribute(elmt, "noscale", true);
|
|
}
|
|
}
|
|
};
|
|
|
|
var $JssorArrowNavigator$ = window.$JssorArrowNavigator$ = function (arrowLeft, arrowRight, options, containerWidth, containerHeight) {
|
|
var self = this;
|
|
$JssorObject$.call(self);
|
|
|
|
$JssorDebug$.$Execute(function () {
|
|
|
|
if (!arrowLeft)
|
|
$JssorDebug$.$Fail("Option '$ArrowNavigatorOptions' spepcified, but UI 'arrowleft' not defined. Define 'arrowleft' to enable direct navigation, or remove option '$ArrowNavigatorOptions' to disable direct navigation.");
|
|
|
|
if (!arrowRight)
|
|
$JssorDebug$.$Fail("Option '$ArrowNavigatorOptions' spepcified, but UI 'arrowright' not defined. Define 'arrowright' to enable direct navigation, or remove option '$ArrowNavigatorOptions' to disable direct navigation.");
|
|
|
|
if (isNaN($Jssor$.$CssWidth(arrowLeft))) {
|
|
$JssorDebug$.$Fail("Width of 'arrow left' not specified.");
|
|
}
|
|
|
|
if (isNaN($Jssor$.$CssWidth(arrowRight))) {
|
|
$JssorDebug$.$Fail("Width of 'arrow right' not specified.");
|
|
}
|
|
|
|
if (isNaN($Jssor$.$CssHeight(arrowLeft))) {
|
|
$JssorDebug$.$Fail("Height of 'arrow left' not specified.");
|
|
}
|
|
|
|
if (isNaN($Jssor$.$CssHeight(arrowRight))) {
|
|
$JssorDebug$.$Fail("Height of 'arrow right' not specified.");
|
|
}
|
|
});
|
|
|
|
var _Hide;
|
|
var _Length;
|
|
var _CurrentIndex;
|
|
var _Options;
|
|
var _Steps;
|
|
var _ArrowWidth = $Jssor$.$CssWidth(arrowLeft);
|
|
var _ArrowHeight = $Jssor$.$CssHeight(arrowLeft);
|
|
|
|
function OnNavigationRequest(steps) {
|
|
self.$TriggerEvent($JssorNavigatorEvents$.$NAVIGATIONREQUEST, steps, true);
|
|
}
|
|
|
|
function ShowArrows(hide) {
|
|
$Jssor$.$ShowElement(arrowLeft, hide || !options.$Loop && _CurrentIndex == 0);
|
|
$Jssor$.$ShowElement(arrowRight, hide || !options.$Loop && _CurrentIndex >= _Length - options.$DisplayPieces);
|
|
|
|
_Hide = hide;
|
|
}
|
|
|
|
self.$GetCurrentIndex = function () {
|
|
return _CurrentIndex;
|
|
};
|
|
|
|
self.$SetCurrentIndex = function (index, virtualIndex, temp) {
|
|
if (temp) {
|
|
_CurrentIndex = virtualIndex;
|
|
}
|
|
else {
|
|
_CurrentIndex = index;
|
|
|
|
ShowArrows(_Hide);
|
|
}
|
|
//self.$TriggerEvent($JssorNavigatorEvents$.$INDEXCHANGE, index);
|
|
};
|
|
|
|
self.$Show = ShowArrows;
|
|
|
|
var _Located;
|
|
self.$Relocate = function (conainerWidth, containerHeight) {
|
|
if (!_Located || _Options.$Scale == false) {
|
|
|
|
var containerWidth = $Jssor$.$ParentNode(arrowLeft).clientWidth;
|
|
var containerHeight = $Jssor$.$ParentNode(arrowLeft).clientHeight;
|
|
|
|
if (_Options.$AutoCenter & 1) {
|
|
$Jssor$.$CssLeft(arrowLeft, (containerWidth - _ArrowWidth) / 2);
|
|
$Jssor$.$CssLeft(arrowRight, (containerWidth - _ArrowWidth) / 2);
|
|
}
|
|
|
|
if (_Options.$AutoCenter & 2) {
|
|
$Jssor$.$CssTop(arrowLeft, (containerHeight - _ArrowHeight) / 2);
|
|
$Jssor$.$CssTop(arrowRight, (containerHeight - _ArrowHeight) / 2);
|
|
}
|
|
|
|
_Located = true;
|
|
}
|
|
};
|
|
|
|
var _Initialized;
|
|
self.$Reset = function (length) {
|
|
_Length = length;
|
|
_CurrentIndex = 0;
|
|
|
|
if (!_Initialized) {
|
|
|
|
$Jssor$.$AddEvent(arrowLeft, "click", $Jssor$.$CreateCallback(null, OnNavigationRequest, -_Steps));
|
|
$Jssor$.$AddEvent(arrowRight, "click", $Jssor$.$CreateCallback(null, OnNavigationRequest, _Steps));
|
|
|
|
$Jssor$.$Buttonize(arrowLeft);
|
|
$Jssor$.$Buttonize(arrowRight);
|
|
|
|
_Initialized = true;
|
|
}
|
|
|
|
//self.$TriggerEvent($JssorNavigatorEvents$.$RESET);
|
|
};
|
|
|
|
//JssorArrowNavigator Constructor
|
|
{
|
|
self.$Options = _Options = $Jssor$.$Extend({
|
|
$Steps: 1
|
|
}, options);
|
|
|
|
_Steps = _Options.$Steps;
|
|
|
|
if (_Options.$Scale == false) {
|
|
$Jssor$.$Attribute(arrowLeft, "noscale", true);
|
|
$Jssor$.$Attribute(arrowRight, "noscale", true);
|
|
}
|
|
}
|
|
};
|
|
|
|
//$JssorThumbnailNavigator$
|
|
var $JssorThumbnailNavigator$ = window.$JssorThumbnailNavigator$ = function (elmt, options) {
|
|
var _Self = this;
|
|
var _Length;
|
|
var _Count;
|
|
var _CurrentIndex;
|
|
var _Options;
|
|
var _NavigationItems = [];
|
|
|
|
var _Width;
|
|
var _Height;
|
|
var _Lanes;
|
|
var _SpacingX;
|
|
var _SpacingY;
|
|
var _PrototypeWidth;
|
|
var _PrototypeHeight;
|
|
var _DisplayPieces;
|
|
|
|
var _Slider;
|
|
var _CurrentMouseOverIndex = -1;
|
|
|
|
var _SlidesContainer;
|
|
var _ThumbnailPrototype;
|
|
|
|
$JssorObject$.call(_Self);
|
|
elmt = $Jssor$.$GetElement(elmt);
|
|
|
|
function NavigationItem(item, index) {
|
|
var self = this;
|
|
var _Wrapper;
|
|
var _Button;
|
|
var _Thumbnail;
|
|
|
|
function Highlight(mouseStatus) {
|
|
_Button.$Selected(_CurrentIndex == index);
|
|
}
|
|
|
|
function OnNavigationRequest(byMouseOver, event) {
|
|
if (byMouseOver || !_Slider.$LastDragSucceded()) {
|
|
//var tail = _Lanes - index % _Lanes;
|
|
//var slideVirtualIndex = _Slider.$GetVirtualIndex((index + tail) / _Lanes - 1);
|
|
//var itemVirtualIndex = slideVirtualIndex * _Lanes + _Lanes - tail;
|
|
//_Self.$TriggerEvent($JssorNavigatorEvents$.$NAVIGATIONREQUEST, itemVirtualIndex);
|
|
|
|
_Self.$TriggerEvent($JssorNavigatorEvents$.$NAVIGATIONREQUEST, index);
|
|
}
|
|
|
|
//$JssorDebug$.$Log("navigation request");
|
|
}
|
|
|
|
$JssorDebug$.$Execute(function () {
|
|
self.$Wrapper = undefined;
|
|
});
|
|
|
|
self.$Index = index;
|
|
|
|
self.$Highlight = Highlight;
|
|
|
|
//NavigationItem Constructor
|
|
{
|
|
_Thumbnail = item.$Thumb || item.$Image || $Jssor$.$CreateDiv();
|
|
self.$Wrapper = _Wrapper = $Jssor$.$BuildElement(_ThumbnailPrototype, "thumbnailtemplate", _Thumbnail, true);
|
|
|
|
_Button = $Jssor$.$Buttonize(_Wrapper);
|
|
if (_Options.$ActionMode & 1)
|
|
$Jssor$.$AddEvent(_Wrapper, "click", $Jssor$.$CreateCallback(null, OnNavigationRequest, 0));
|
|
if (_Options.$ActionMode & 2)
|
|
$Jssor$.$AddEvent(_Wrapper, "mouseover", $Jssor$.$MouseOverOutFilter($Jssor$.$CreateCallback(null, OnNavigationRequest, 1), _Wrapper));
|
|
}
|
|
}
|
|
|
|
_Self.$GetCurrentIndex = function () {
|
|
return _CurrentIndex;
|
|
};
|
|
|
|
_Self.$SetCurrentIndex = function (index, virtualIndex, temp) {
|
|
var oldIndex = _CurrentIndex;
|
|
_CurrentIndex = index;
|
|
if (oldIndex != -1)
|
|
_NavigationItems[oldIndex].$Highlight();
|
|
_NavigationItems[index].$Highlight();
|
|
|
|
if (!temp) {
|
|
_Slider.$PlayTo(_Slider.$GetVirtualIndex(Math.floor(virtualIndex / _Lanes)));
|
|
}
|
|
};
|
|
|
|
_Self.$Show = function (hide) {
|
|
$Jssor$.$ShowElement(elmt, hide);
|
|
};
|
|
|
|
_Self.$Relocate = $Jssor$.$EmptyFunction;
|
|
|
|
var _Initialized;
|
|
_Self.$Reset = function (length, items, loadingContainer) {
|
|
if (!_Initialized) {
|
|
_Length = length;
|
|
_Count = Math.ceil(_Length / _Lanes);
|
|
_CurrentIndex = -1;
|
|
_DisplayPieces = Math.min(_DisplayPieces, items.length);
|
|
|
|
var horizontal = _Options.$Orientation & 1;
|
|
|
|
var slideWidth = _PrototypeWidth + (_PrototypeWidth + _SpacingX) * (_Lanes - 1) * (1 - horizontal);
|
|
var slideHeight = _PrototypeHeight + (_PrototypeHeight + _SpacingY) * (_Lanes - 1) * horizontal;
|
|
|
|
var slidesContainerWidth = slideWidth + (slideWidth + _SpacingX) * (_DisplayPieces - 1) * horizontal;
|
|
var slidesContainerHeight = slideHeight + (slideHeight + _SpacingY) * (_DisplayPieces - 1) * (1 - horizontal);
|
|
|
|
$Jssor$.$CssPosition(_SlidesContainer, "absolute");
|
|
$Jssor$.$CssOverflow(_SlidesContainer, "hidden");
|
|
if (_Options.$AutoCenter & 1) {
|
|
$Jssor$.$CssLeft(_SlidesContainer, (_Width - slidesContainerWidth) / 2);
|
|
}
|
|
if (_Options.$AutoCenter & 2) {
|
|
$Jssor$.$CssTop(_SlidesContainer, (_Height - slidesContainerHeight) / 2);
|
|
}
|
|
//$JssorDebug$.$Execute(function () {
|
|
// if (!_Options.$AutoCenter) {
|
|
// var slidesContainerTop = $Jssor$.$CssTop(_SlidesContainer);
|
|
// var slidesContainerLeft = $Jssor$.$CssLeft(_SlidesContainer);
|
|
|
|
// if (isNaN(slidesContainerTop)) {
|
|
// $JssorDebug$.$Fail("Position 'top' wrong specification of thumbnail navigator slides container (<div u=\"thumbnavigator\">...<div u=\"slides\">), \r\nwhen option $ThumbnailNavigatorOptions.$AutoCenter set to 0, it should be specified in pixel (like <div u=\"slides\" style=\"top: 0px;\">)");
|
|
// }
|
|
|
|
// if (isNaN(slidesContainerLeft)) {
|
|
// $JssorDebug$.$Fail("Position 'left' wrong specification of thumbnail navigator slides container (<div u=\"thumbnavigator\">...<div u=\"slides\">), \r\nwhen option $ThumbnailNavigatorOptions.$AutoCenter set to 0, it should be specified in pixel (like <div u=\"slides\" style=\"left: 0px;\">)");
|
|
// }
|
|
// }
|
|
//});
|
|
$Jssor$.$CssWidth(_SlidesContainer, slidesContainerWidth);
|
|
$Jssor$.$CssHeight(_SlidesContainer, slidesContainerHeight);
|
|
|
|
var slideItemElmts = [];
|
|
$Jssor$.$Each(items, function (item, index) {
|
|
var navigationItem = new NavigationItem(item, index);
|
|
var navigationItemWrapper = navigationItem.$Wrapper;
|
|
|
|
var columnIndex = Math.floor(index / _Lanes);
|
|
var laneIndex = index % _Lanes;
|
|
|
|
$Jssor$.$CssLeft(navigationItemWrapper, (_PrototypeWidth + _SpacingX) * laneIndex * (1 - horizontal));
|
|
$Jssor$.$CssTop(navigationItemWrapper, (_PrototypeHeight + _SpacingY) * laneIndex * horizontal);
|
|
|
|
if (!slideItemElmts[columnIndex]) {
|
|
slideItemElmts[columnIndex] = $Jssor$.$CreateDiv();
|
|
$Jssor$.$AppendChild(_SlidesContainer, slideItemElmts[columnIndex]);
|
|
}
|
|
|
|
$Jssor$.$AppendChild(slideItemElmts[columnIndex], navigationItemWrapper);
|
|
|
|
_NavigationItems.push(navigationItem);
|
|
});
|
|
|
|
var thumbnailSliderOptions = $Jssor$.$Extend({
|
|
$HWA: false,
|
|
$AutoPlay: false,
|
|
$NaviQuitDrag: false,
|
|
$SlideWidth: slideWidth,
|
|
$SlideHeight: slideHeight,
|
|
$SlideSpacing: _SpacingX * horizontal + _SpacingY * (1 - horizontal),
|
|
$MinDragOffsetToSlide: 12,
|
|
$SlideDuration: 200,
|
|
$PauseOnHover: 1,
|
|
$PlayOrientation: _Options.$Orientation,
|
|
$DragOrientation: _Options.$DisableDrag ? 0 : _Options.$Orientation
|
|
}, _Options);
|
|
|
|
_Slider = new $JssorSlider$(elmt, thumbnailSliderOptions);
|
|
|
|
_Initialized = true;
|
|
}
|
|
|
|
//_Self.$TriggerEvent($JssorNavigatorEvents$.$RESET);
|
|
};
|
|
|
|
//JssorThumbnailNavigator Constructor
|
|
{
|
|
_Self.$Options = _Options = $Jssor$.$Extend({
|
|
$SpacingX: 3,
|
|
$SpacingY: 3,
|
|
$DisplayPieces: 1,
|
|
$Orientation: 1,
|
|
$AutoCenter: 3,
|
|
$ActionMode: 1
|
|
}, options);
|
|
|
|
//going to use $Rows instead of $Lanes
|
|
if (_Options.$Rows != undefined)
|
|
_Options.$Lanes = _Options.$Rows;
|
|
|
|
//Sodo statement for development time intellisence only
|
|
$JssorDebug$.$Execute(function () {
|
|
_Options = $Jssor$.$Extend({
|
|
$Lanes: undefined,
|
|
$Width: undefined,
|
|
$Height: undefined
|
|
}, _Options);
|
|
});
|
|
|
|
_Width = $Jssor$.$CssWidth(elmt);
|
|
_Height = $Jssor$.$CssHeight(elmt);
|
|
|
|
$JssorDebug$.$Execute(function () {
|
|
if (!_Width)
|
|
$JssorDebug$.$Fail("width of 'thumbnavigator' container not specified.");
|
|
if (!_Height)
|
|
$JssorDebug$.$Fail("height of 'thumbnavigator' container not specified.");
|
|
});
|
|
|
|
_SlidesContainer = $Jssor$.$FindChild(elmt, "slides", true);
|
|
_ThumbnailPrototype = $Jssor$.$FindChild(_SlidesContainer, "prototype");
|
|
|
|
$JssorDebug$.$Execute(function () {
|
|
if (!_ThumbnailPrototype)
|
|
$JssorDebug$.$Fail("prototype of 'thumbnavigator' not defined.");
|
|
});
|
|
|
|
_PrototypeWidth = $Jssor$.$CssWidth(_ThumbnailPrototype);
|
|
_PrototypeHeight = $Jssor$.$CssHeight(_ThumbnailPrototype);
|
|
|
|
$Jssor$.$RemoveElement(_ThumbnailPrototype, _SlidesContainer);
|
|
|
|
_Lanes = _Options.$Lanes || 1;
|
|
_SpacingX = _Options.$SpacingX;
|
|
_SpacingY = _Options.$SpacingY;
|
|
_DisplayPieces = _Options.$DisplayPieces;
|
|
|
|
if (_Options.$Scale == false) {
|
|
$Jssor$.$Attribute(elmt, "noscale", true);
|
|
}
|
|
}
|
|
};
|
|
|
|
//$JssorCaptionSliderBase$
|
|
function $JssorCaptionSliderBase$() {
|
|
$JssorAnimator$.call(this, 0, 0);
|
|
this.$Revert = $Jssor$.$EmptyFunction;
|
|
}
|
|
|
|
var $JssorCaptionSlider$ = window.$JssorCaptionSlider$ = function (container, captionSlideOptions, playIn) {
|
|
$JssorDebug$.$Execute(function () {
|
|
if (!captionSlideOptions.$CaptionTransitions) {
|
|
$JssorDebug$.$Error("'$CaptionSliderOptions' option error, '$CaptionSliderOptions.$CaptionTransitions' not specified.");
|
|
}
|
|
});
|
|
|
|
var _Self = this;
|
|
var _ImmediateOutCaptionHanger;
|
|
var _PlayMode = playIn ? captionSlideOptions.$PlayInMode : captionSlideOptions.$PlayOutMode;
|
|
|
|
var _CaptionTransitions = captionSlideOptions.$CaptionTransitions;
|
|
var _CaptionTuningFetcher = { $Transition: "t", $Delay: "d", $Duration: "du", x: "x", y: "y", $Rotate: "r", $Zoom: "z", $Opacity: "f", $BeginTime: "b" };
|
|
var _CaptionTuningTransfer = {
|
|
$Default: function (value, tuningValue) {
|
|
if (!isNaN(tuningValue.$Value))
|
|
value = tuningValue.$Value;
|
|
else
|
|
value *= tuningValue.$Percent;
|
|
|
|
return value;
|
|
},
|
|
$Opacity: function (value, tuningValue) {
|
|
return this.$Default(value - 1, tuningValue);
|
|
}
|
|
};
|
|
_CaptionTuningTransfer.$Zoom = _CaptionTuningTransfer.$Opacity;
|
|
|
|
$JssorAnimator$.call(_Self, 0, 0);
|
|
|
|
function GetCaptionItems(element, level) {
|
|
|
|
var itemsToPlay = [];
|
|
var lastTransitionName;
|
|
var namedTransitions = [];
|
|
var namedTransitionOrders = [];
|
|
|
|
function FetchRawTransition(captionElmt, index) {
|
|
var rawTransition = {};
|
|
|
|
$Jssor$.$Each(_CaptionTuningFetcher, function (fetchAttribute, fetchProperty) {
|
|
var attributeValue = $Jssor$.$AttributeEx(captionElmt, fetchAttribute + (index || ""));
|
|
if (attributeValue) {
|
|
var propertyValue = {};
|
|
|
|
if (fetchAttribute == "t") {
|
|
propertyValue.$Value = attributeValue;
|
|
}
|
|
else if (attributeValue.indexOf("%") + 1)
|
|
propertyValue.$Percent = $Jssor$.$ParseFloat(attributeValue) / 100;
|
|
else
|
|
propertyValue.$Value = $Jssor$.$ParseFloat(attributeValue);
|
|
|
|
rawTransition[fetchProperty] = propertyValue;
|
|
}
|
|
});
|
|
|
|
return rawTransition;
|
|
}
|
|
|
|
function GetRandomTransition() {
|
|
return _CaptionTransitions[Math.floor(Math.random() * _CaptionTransitions.length)];
|
|
}
|
|
|
|
function EvaluateCaptionTransition(transitionName) {
|
|
|
|
var transition;
|
|
|
|
if (transitionName == "*") {
|
|
transition = GetRandomTransition();
|
|
}
|
|
else if (transitionName) {
|
|
|
|
//indexed transition allowed, just the same as named transition
|
|
var tempTransition = _CaptionTransitions[$Jssor$.$ParseInt(transitionName)] || _CaptionTransitions[transitionName];
|
|
|
|
if ($Jssor$.$IsArray(tempTransition)) {
|
|
if (transitionName != lastTransitionName) {
|
|
lastTransitionName = transitionName;
|
|
namedTransitionOrders[transitionName] = 0;
|
|
|
|
namedTransitions[transitionName] = tempTransition[Math.floor(Math.random() * tempTransition.length)];
|
|
}
|
|
else {
|
|
namedTransitionOrders[transitionName]++;
|
|
}
|
|
|
|
tempTransition = namedTransitions[transitionName];
|
|
|
|
if ($Jssor$.$IsArray(tempTransition)) {
|
|
tempTransition = tempTransition.length && tempTransition[namedTransitionOrders[transitionName] % tempTransition.length];
|
|
|
|
if ($Jssor$.$IsArray(tempTransition)) {
|
|
//got transition from array level 3, random for all captions
|
|
tempTransition = tempTransition[Math.floor(Math.random() * tempTransition.length)];
|
|
}
|
|
//else {
|
|
// //got transition from array level 2, in sequence for all adjacent captions with same name specified
|
|
// transition = tempTransition;
|
|
//}
|
|
}
|
|
//else {
|
|
// //got transition from array level 1, random but same for all adjacent captions with same name specified
|
|
// transition = tempTransition;
|
|
//}
|
|
}
|
|
//else {
|
|
// //got transition directly from a simple transition object
|
|
// transition = tempTransition;
|
|
//}
|
|
|
|
transition = tempTransition;
|
|
|
|
if ($Jssor$.$IsString(transition))
|
|
transition = EvaluateCaptionTransition(transition);
|
|
}
|
|
|
|
return transition;
|
|
}
|
|
|
|
var captionElmts = $Jssor$.$Children(element);
|
|
$Jssor$.$Each(captionElmts, function (captionElmt, i) {
|
|
|
|
var transitionsWithTuning = [];
|
|
transitionsWithTuning.$Elmt = captionElmt;
|
|
var isCaption = $Jssor$.$AttributeEx(captionElmt, "u") == "caption";
|
|
|
|
$Jssor$.$Each(playIn ? [0, 3] : [2], function (j, k) {
|
|
|
|
if (isCaption) {
|
|
var transition;
|
|
var rawTransition;
|
|
|
|
if (j != 2 || !$Jssor$.$AttributeEx(captionElmt, "t3")) {
|
|
rawTransition = FetchRawTransition(captionElmt, j);
|
|
|
|
if (j == 2 && !rawTransition.$Transition) {
|
|
rawTransition.$Delay = rawTransition.$Delay || { $Value: 0 };
|
|
rawTransition = $Jssor$.$Extend(FetchRawTransition(captionElmt, 0), rawTransition);
|
|
}
|
|
}
|
|
|
|
if (rawTransition && rawTransition.$Transition) {
|
|
|
|
transition = EvaluateCaptionTransition(rawTransition.$Transition.$Value);
|
|
|
|
if (transition) {
|
|
|
|
//var transitionWithTuning = $Jssor$.$Extend({ $Delay: 0, $ScaleHorizontal: 1, $ScaleVertical: 1 }, transition);
|
|
var transitionWithTuning = $Jssor$.$Extend({ $Delay: 0 }, transition);
|
|
|
|
$Jssor$.$Each(rawTransition, function (rawPropertyValue, propertyName) {
|
|
var tuningPropertyValue = (_CaptionTuningTransfer[propertyName] || _CaptionTuningTransfer.$Default).apply(_CaptionTuningTransfer, [transitionWithTuning[propertyName], rawTransition[propertyName]]);
|
|
if (!isNaN(tuningPropertyValue))
|
|
transitionWithTuning[propertyName] = tuningPropertyValue;
|
|
});
|
|
|
|
if (!k) {
|
|
if (rawTransition.$BeginTime)
|
|
transitionWithTuning.$BeginTime = rawTransition.$BeginTime.$Value || 0;
|
|
else if ((_PlayMode) & 2)
|
|
transitionWithTuning.$BeginTime = 0;
|
|
}
|
|
}
|
|
}
|
|
|
|
transitionsWithTuning.push(transitionWithTuning);
|
|
}
|
|
|
|
if ((level % 2) && !k) {
|
|
transitionsWithTuning.$Children = GetCaptionItems(captionElmt, level + 1);
|
|
}
|
|
});
|
|
|
|
itemsToPlay.push(transitionsWithTuning);
|
|
});
|
|
|
|
return itemsToPlay;
|
|
}
|
|
|
|
function CreateAnimator(item, transition, immediateOut) {
|
|
|
|
var animatorOptions = {
|
|
$Easing: transition.$Easing,
|
|
$Round: transition.$Round,
|
|
$During: transition.$During,
|
|
$Reverse: playIn && !immediateOut
|
|
};
|
|
|
|
$JssorDebug$.$Execute(function () {
|
|
animatorOptions.$CaptionAnimator = true;
|
|
});
|
|
|
|
var captionItem = item;
|
|
var captionParent = $Jssor$.$ParentNode(item);
|
|
|
|
var captionItemWidth = $Jssor$.$CssWidth(captionItem);
|
|
var captionItemHeight = $Jssor$.$CssHeight(captionItem);
|
|
var captionParentWidth = $Jssor$.$CssWidth(captionParent);
|
|
var captionParentHeight = $Jssor$.$CssHeight(captionParent);
|
|
|
|
var fromStyles = {};
|
|
var difStyles = {};
|
|
var scaleClip = transition.$ScaleClip || 1;
|
|
|
|
//Opacity
|
|
if (transition.$Opacity) {
|
|
difStyles.$Opacity = 1 - transition.$Opacity;
|
|
}
|
|
|
|
animatorOptions.$OriginalWidth = captionItemWidth;
|
|
animatorOptions.$OriginalHeight = captionItemHeight;
|
|
|
|
//Transform
|
|
if (transition.$Zoom || transition.$Rotate) {
|
|
difStyles.$Zoom = (transition.$Zoom || 2) - 2;
|
|
|
|
if ($Jssor$.$IsBrowserIe9Earlier() || $Jssor$.$IsBrowserOpera()) {
|
|
difStyles.$Zoom = Math.min(difStyles.$Zoom, 1);
|
|
}
|
|
|
|
fromStyles.$Zoom = 1;
|
|
|
|
var rotate = transition.$Rotate || 0;
|
|
|
|
difStyles.$Rotate = rotate * 360;
|
|
fromStyles.$Rotate = 0;
|
|
}
|
|
//Clip
|
|
else if (transition.$Clip) {
|
|
var fromStyleClip = { $Top: 0, $Right: captionItemWidth, $Bottom: captionItemHeight, $Left: 0 };
|
|
var toStyleClip = $Jssor$.$Extend({}, fromStyleClip);
|
|
|
|
var blockOffset = toStyleClip.$Offset = {};
|
|
|
|
var topBenchmark = transition.$Clip & 4;
|
|
var bottomBenchmark = transition.$Clip & 8;
|
|
var leftBenchmark = transition.$Clip & 1;
|
|
var rightBenchmark = transition.$Clip & 2;
|
|
|
|
if (topBenchmark && bottomBenchmark) {
|
|
blockOffset.$Top = captionItemHeight / 2 * scaleClip;
|
|
blockOffset.$Bottom = -blockOffset.$Top;
|
|
}
|
|
else if (topBenchmark)
|
|
blockOffset.$Bottom = -captionItemHeight * scaleClip;
|
|
else if (bottomBenchmark)
|
|
blockOffset.$Top = captionItemHeight * scaleClip;
|
|
|
|
if (leftBenchmark && rightBenchmark) {
|
|
blockOffset.$Left = captionItemWidth / 2 * scaleClip;
|
|
blockOffset.$Right = -blockOffset.$Left;
|
|
}
|
|
else if (leftBenchmark)
|
|
blockOffset.$Right = -captionItemWidth * scaleClip;
|
|
else if (rightBenchmark)
|
|
blockOffset.$Left = captionItemWidth * scaleClip;
|
|
|
|
animatorOptions.$Move = transition.$Move;
|
|
difStyles.$Clip = toStyleClip;
|
|
fromStyles.$Clip = fromStyleClip;
|
|
}
|
|
|
|
//Fly
|
|
{
|
|
var toLeft = 0;
|
|
var toTop = 0;
|
|
|
|
if (transition.x)
|
|
toLeft -= captionParentWidth * transition.x;
|
|
|
|
if (transition.y)
|
|
toTop -= captionParentHeight * transition.y;
|
|
|
|
if (toLeft || toTop || animatorOptions.$Move) {
|
|
difStyles.$Left = toLeft;
|
|
difStyles.$Top = toTop;
|
|
}
|
|
}
|
|
|
|
//duration
|
|
var duration = transition.$Duration;
|
|
|
|
fromStyles = $Jssor$.$Extend(fromStyles, $Jssor$.$GetStyles(captionItem, difStyles));
|
|
|
|
animatorOptions.$Setter = $Jssor$.$StyleSetterEx();
|
|
|
|
return new $JssorAnimator$(transition.$Delay, duration, animatorOptions, captionItem, fromStyles, difStyles);
|
|
}
|
|
|
|
function CreateAnimators(streamLineLength, captionItems) {
|
|
|
|
$Jssor$.$Each(captionItems, function (captionItem, i) {
|
|
|
|
$JssorDebug$.$Execute(function () {
|
|
if (captionItem.length) {
|
|
var top = $Jssor$.$CssTop(captionItem.$Elmt);
|
|
var left = $Jssor$.$CssLeft(captionItem.$Elmt);
|
|
var width = $Jssor$.$CssWidth(captionItem.$Elmt);
|
|
var height = $Jssor$.$CssHeight(captionItem.$Elmt);
|
|
|
|
var error = null;
|
|
|
|
if (isNaN(top))
|
|
error = "Style 'top' for caption not specified. Please always specify caption like 'position: absolute; top: ...px; left: ...px; width: ...px; height: ...px;'.";
|
|
else if (isNaN(left))
|
|
error = "Style 'left' not specified. Please always specify caption like 'position: absolute; top: ...px; left: ...px; width: ...px; height: ...px;'.";
|
|
else if (isNaN(width))
|
|
error = "Style 'width' not specified. Please always specify caption like 'position: absolute; top: ...px; left: ...px; width: ...px; height: ...px;'.";
|
|
else if (isNaN(height))
|
|
error = "Style 'height' not specified. Please always specify caption like 'position: absolute; top: ...px; left: ...px; width: ...px; height: ...px;'.";
|
|
|
|
if (error)
|
|
$JssorDebug$.$Error("Caption " + (i + 1) + " definition error, \r\n" + error + "\r\n" + captionItem.$Elmt.outerHTML);
|
|
}
|
|
});
|
|
|
|
var animator;
|
|
var captionElmt = captionItem.$Elmt;
|
|
var transition = captionItem[0];
|
|
var transition3 = captionItem[1];
|
|
|
|
if (transition) {
|
|
|
|
animator = CreateAnimator(captionElmt, transition);
|
|
streamLineLength = animator.$Locate(transition.$BeginTime == undefined ? streamLineLength : transition.$BeginTime, 1);
|
|
}
|
|
|
|
streamLineLength = CreateAnimators(streamLineLength, captionItem.$Children);
|
|
|
|
if (transition3) {
|
|
var animator3 = CreateAnimator(captionElmt, transition3, 1);
|
|
animator3.$Locate(streamLineLength, 1);
|
|
_Self.$Combine(animator3);
|
|
_ImmediateOutCaptionHanger.$Combine(animator3);
|
|
}
|
|
|
|
if (animator)
|
|
_Self.$Combine(animator);
|
|
});
|
|
|
|
return streamLineLength;
|
|
}
|
|
|
|
_Self.$Revert = function () {
|
|
_Self.$GoToPosition(_Self.$GetPosition_OuterEnd() * (playIn || 0));
|
|
_ImmediateOutCaptionHanger.$GoToPosition(0);
|
|
};
|
|
|
|
//Constructor
|
|
{
|
|
_ImmediateOutCaptionHanger = new $JssorAnimator$(0, 0);
|
|
|
|
CreateAnimators(0, _PlayMode ? GetCaptionItems(container, 1) : []);
|
|
}
|
|
};
|
|
|
|
var $JssorCaptionSlideo$ = function (container, captionSlideoOptions, playIn) {
|
|
$JssorDebug$.$Execute(function () {
|
|
if (!captionSlideoOptions.$CaptionTransitions) {
|
|
$JssorDebug$.$Error("'$CaptionSlideoOptions' option error, '$CaptionSlideoOptions.$CaptionTransitions' not specified.");
|
|
}
|
|
else if (!$Jssor$.$IsArray(captionSlideoOptions.$CaptionTransitions)) {
|
|
$JssorDebug$.$Error("'$CaptionSlideoOptions' option error, '$CaptionSlideoOptions.$CaptionTransitions' is not an array.");
|
|
}
|
|
});
|
|
|
|
var _This = this;
|
|
|
|
var _Easings;
|
|
var _TransitionConverter = {};
|
|
var _CaptionTransitions = captionSlideoOptions.$CaptionTransitions;
|
|
|
|
$JssorAnimator$.call(_This, 0, 0);
|
|
|
|
function ConvertTransition(transition, isEasing) {
|
|
$Jssor$.$Each(transition, function (property, name) {
|
|
var performName = _TransitionConverter[name];
|
|
if (performName) {
|
|
if (isEasing || name == "e") {
|
|
if ($Jssor$.$IsNumeric(property)) {
|
|
property = _Easings[property];
|
|
}
|
|
else if ($Jssor$.$IsPlainObject(property)) {
|
|
ConvertTransition(property, true);
|
|
}
|
|
}
|
|
|
|
transition[performName] = property;
|
|
delete transition[name];
|
|
}
|
|
});
|
|
}
|
|
|
|
function GetCaptionItems(element, level) {
|
|
|
|
var itemsToPlay = [];
|
|
|
|
var captionElmts = $Jssor$.$Children(element);
|
|
$Jssor$.$Each(captionElmts, function (captionElmt, i) {
|
|
var isCaption = $Jssor$.$AttributeEx(captionElmt, "u") == "caption";
|
|
if (isCaption) {
|
|
var transitionName = $Jssor$.$AttributeEx(captionElmt, "t");
|
|
var transition = _CaptionTransitions[$Jssor$.$ParseInt(transitionName)] || _CaptionTransitions[transitionName];
|
|
|
|
var transitionName2 = $Jssor$.$AttributeEx(captionElmt, "t2");
|
|
var transition2 = _CaptionTransitions[$Jssor$.$ParseInt(transitionName2)] || _CaptionTransitions[transitionName2];
|
|
|
|
var itemToPlay = { $Elmt: captionElmt, $Transition: transition, $Transition2: transition2 };
|
|
if (level < 3) {
|
|
itemsToPlay.concat(GetCaptionItems(captionElmt, level + 1));
|
|
}
|
|
itemsToPlay.push(itemToPlay);
|
|
}
|
|
});
|
|
|
|
return itemsToPlay;
|
|
}
|
|
|
|
function CreateAnimator(captionElmt, transitions, lastStyles, forIn) {
|
|
|
|
$Jssor$.$Each(transitions, function (transition) {
|
|
ConvertTransition(transition);
|
|
|
|
var animatorOptions = {
|
|
$Easing: transition.$Easing,
|
|
$Round: transition.$Round,
|
|
$During: transition.$During,
|
|
$Setter: $Jssor$.$StyleSetterEx()
|
|
};
|
|
|
|
var fromStyles = $Jssor$.$Extend($Jssor$.$GetStyles(captionItem, transition), lastStyles);
|
|
|
|
var animator = new $JssorAnimator$(transition.b || 0, transition.d, animatorOptions, captionElmt, fromStyles, transition);
|
|
|
|
!forIn == !playIn && _This.$Combine(animator);
|
|
|
|
var castOptions;
|
|
lastStyles = $Jssor$.$Extend(lastStyles, $Jssor$.$Cast(fromStyles, transition, 1, animatorOptions.$Easing, animatorOptions.$During, animatorOptions.$Round, animatorOptions, castOptions));
|
|
});
|
|
|
|
return lastStyles;
|
|
}
|
|
|
|
function CreateAnimators(captionItems) {
|
|
|
|
$Jssor$.$Each(captionItems, function (captionItem, i) {
|
|
|
|
$JssorDebug$.$Execute(function () {
|
|
if (captionItem.length) {
|
|
var top = $Jssor$.$CssTop(captionItem.$Elmt);
|
|
var left = $Jssor$.$CssLeft(captionItem.$Elmt);
|
|
var width = $Jssor$.$CssWidth(captionItem.$Elmt);
|
|
var height = $Jssor$.$CssHeight(captionItem.$Elmt);
|
|
|
|
var error = null;
|
|
|
|
if (isNaN(top))
|
|
error = "style 'top' not specified";
|
|
else if (isNaN(left))
|
|
error = "style 'left' not specified";
|
|
else if (isNaN(width))
|
|
error = "style 'width' not specified";
|
|
else if (isNaN(height))
|
|
error = "style 'height' not specified";
|
|
|
|
if (error)
|
|
throw new Error("Caption " + (i + 1) + " definition error, " + error + ".\r\n" + captionItem.$Elmt.outerHTML);
|
|
}
|
|
});
|
|
|
|
var captionElmt = captionItem.$Elmt;
|
|
|
|
var captionItemWidth = $Jssor$.$CssWidth(captionItem);
|
|
var captionItemHeight = $Jssor$.$CssHeight(captionItem);
|
|
var captionParentWidth = $Jssor$.$CssWidth(captionParent);
|
|
var captionParentHeight = $Jssor$.$CssHeight(captionParent);
|
|
|
|
var lastStyles = { $Zoom: 1, $Rotate: 0, $Clip: { $Top: 0, $Right: captionItemWidth, $Bottom: captionItemHeight, $Left: 0 } };
|
|
|
|
lastStyles = CreateAnimator(captionElmt, captionItem.$Transition, lastStyles, true);
|
|
CreateAnimator(captionElmt, captionItem.$Transition2, lastStyles, false);
|
|
});
|
|
}
|
|
|
|
_This.$Revert = function () {
|
|
_This.$GoToPosition(-1, true);
|
|
}
|
|
|
|
//Constructor
|
|
{
|
|
_Easings = [
|
|
$JssorEasing$.$EaseSwing,
|
|
$JssorEasing$.$EaseLinear,
|
|
$JssorEasing$.$EaseInQuad,
|
|
$JssorEasing$.$EaseOutQuad,
|
|
$JssorEasing$.$EaseInOutQuad,
|
|
$JssorEasing$.$EaseInCubic,
|
|
$JssorEasing$.$EaseOutCubic,
|
|
$JssorEasing$.$EaseInOutCubic,
|
|
$JssorEasing$.$EaseInQuart,
|
|
$JssorEasing$.$EaseOutQuart,
|
|
$JssorEasing$.$EaseInOutQuart,
|
|
$JssorEasing$.$EaseInQuint,
|
|
$JssorEasing$.$EaseOutQuint,
|
|
$JssorEasing$.$EaseInOutQuint,
|
|
$JssorEasing$.$EaseInSine,
|
|
$JssorEasing$.$EaseOutSine,
|
|
$JssorEasing$.$EaseInOutSine,
|
|
$JssorEasing$.$EaseInExpo,
|
|
$JssorEasing$.$EaseOutExpo,
|
|
$JssorEasing$.$EaseInOutExpo,
|
|
$JssorEasing$.$EaseInCirc,
|
|
$JssorEasing$.$EaseOutCirc,
|
|
$JssorEasing$.$EaseInOutCirc,
|
|
$JssorEasing$.$EaseInElastic,
|
|
$JssorEasing$.$EaseOutElastic,
|
|
$JssorEasing$.$EaseInOutElastic,
|
|
$JssorEasing$.$EaseInBack,
|
|
$JssorEasing$.$EaseOutBack,
|
|
$JssorEasing$.$EaseInOutBack,
|
|
$JssorEasing$.$EaseInBounce,
|
|
$JssorEasing$.$EaseOutBounce,
|
|
$JssorEasing$.$EaseInOutBounce//,
|
|
//$JssorEasing$.$EaseGoBack,
|
|
//$JssorEasing$.$EaseInWave,
|
|
//$JssorEasing$.$EaseOutWave,
|
|
//$JssorEasing$.$EaseOutJump,
|
|
//$JssorEasing$.$EaseInJump
|
|
];
|
|
|
|
var translater = {
|
|
$Top: "y", //top
|
|
$Left: "x", //left
|
|
$Bottom: "m", //bottom
|
|
$Right: "t", //right
|
|
$Zoom: "s", //zoom/scale
|
|
$Rotate: "r", //rotate
|
|
$Opacity: "o", //opacity
|
|
$Easing: "e", //easing
|
|
$ZIndex: "i", //zindex
|
|
$Round: "rd", //round
|
|
$During: "du", //during
|
|
$Duration: "d"//, //duration
|
|
//$Begin: "b"
|
|
};
|
|
|
|
$Jssor$.$Each(translater, function (prop, newProp) {
|
|
_TransitionConverter[prop] = newProp;
|
|
});
|
|
|
|
CreateAnimators(GetCaptionItems(container, 1));
|
|
}
|
|
};
|
|
|
|
//Event Table
|
|
|
|
//$EVT_CLICK = 21; function(slideIndex[, event])
|
|
//$EVT_DRAG_START = 22; function(position[, virtualPosition, event])
|
|
//$EVT_DRAG_END = 23; function(position, startPosition[, virtualPosition, virtualStartPosition, event])
|
|
//$EVT_SWIPE_START = 24; function(position[, virtualPosition])
|
|
//$EVT_SWIPE_END = 25; function(position[, virtualPosition])
|
|
|
|
//$EVT_LOAD_START = 26; function(slideIndex)
|
|
//$EVT_LOAD_END = 27; function(slideIndex)
|
|
|
|
//$EVT_POSITION_CHANGE = 202; function(position, fromPosition[, virtualPosition, virtualFromPosition])
|
|
//$EVT_PARK = 203; function(slideIndex, fromIndex)
|
|
|
|
//$EVT_PROGRESS_CHANGE = 208; function(slideIndex, progress[, progressBegin, idleBegin, idleEnd, progressEnd])
|
|
//$EVT_STATE_CHANGE = 209; function(slideIndex, progress[, progressBegin, idleBegin, idleEnd, progressEnd])
|
|
|
|
//$EVT_ROLLBACK_START = 210; function(slideIndex, progress[, progressBegin, idleBegin, idleEnd, progressEnd])
|
|
//$EVT_ROLLBACK_END = 211; function(slideIndex, progress[, progressBegin, idleBegin, idleEnd, progressEnd])
|
|
|
|
//$EVT_SLIDESHOW_START = 206; function(slideIndex[, progressBegin, slideshowBegin, slideshowEnd, progressEnd])
|
|
//$EVT_SLIDESHOW_END = 207; function(slideIndex[, progressBegin, slideshowBegin, slideshowEnd, progressEnd])
|
|
|
|
//http://www.jssor.com/development/reference-api.html
|
|
|
|
|
|
//Patch
|
|
function sliderPatch(options,options2){
|
|
|
|
op = $.extend({
|
|
sliderId:"slider1_container",
|
|
sliderWidth:1200,
|
|
sliderHeight:450,
|
|
responsive:"true"
|
|
}, options2 || {});
|
|
|
|
var e=$("#"+op.sliderId),
|
|
sliderwidth=op.sliderWidth,
|
|
sliderheight=op.sliderHeight;
|
|
|
|
var jssor_slider = new $JssorSlider$(op.sliderId, options);
|
|
|
|
if(op.responsive=="true"){
|
|
function ScaleSlider() {
|
|
var parentWidth = jssor_slider.$Elmt.parentNode.clientWidth;
|
|
if (parentWidth){
|
|
jssor_slider.$ScaleWidth(Math.min(parentWidth, sliderwidth));
|
|
}
|
|
else{
|
|
window.setTimeout(ScaleSlider, 30);
|
|
}
|
|
}
|
|
ScaleSlider();
|
|
$(window).bind("load", ScaleSlider);
|
|
$(window).bind("resize", ScaleSlider);
|
|
$(window).bind("orientationchange", ScaleSlider);
|
|
}
|
|
var items=e.find(".item");
|
|
jssor_slider.$On($JssorSlider$.$EVT_PARK,function(slideIndex,fromIndex){
|
|
if(slideIndex==fromIndex) return;
|
|
if(items.eq(slideIndex).children(".html5video").length!=0){
|
|
var vb=e.find(".item").eq(slideIndex),
|
|
v=vb.find("video")[0],
|
|
vbtn=vb.find(".videoCover"),
|
|
vclo=vb.find(".closeButton");
|
|
if(op.VideoAutoPlay && items.eq(slideIndex).css("display")!="none" ){
|
|
jssor_slider.$Pause();
|
|
v.play();
|
|
vclo.show();
|
|
vbtn.hide();
|
|
}
|
|
vbtn.on("click",function(){
|
|
jssor_slider.$Pause();
|
|
v.play();
|
|
vclo.show();
|
|
vbtn.hide();
|
|
})
|
|
vclo.on("click",function(){
|
|
jssor_slider.$Play();
|
|
v.pause();
|
|
vbtn.show();
|
|
vclo.hide();
|
|
})
|
|
vb.find("video").on("click",function(){
|
|
jssor_slider.$Play();
|
|
v.pause();
|
|
vbtn.show();
|
|
vclo.hide();
|
|
})
|
|
}
|
|
if(items.eq(fromIndex).children(".html5video").length!=0){
|
|
items.eq(fromIndex).find("video")[0].pause();
|
|
items.eq(fromIndex).find(".videoCover").show();
|
|
items.eq(fromIndex).find(".closeButton").hide();
|
|
jssor_slider.$Play();
|
|
}
|
|
});
|
|
|
|
}
|