1(function ($) { 2 $.fn.TreeSixtyImageRotate = function (options) { 3 let base = this; 4 5 let settings = $.extend({ 6 // These are the defaults. 7 totalFrames: 36, // Total number of image you have 8 endFrame: 36, // end frame for the auto spin animation 9 currentFrame: 0, // This the start frame for auto spin 10 speed: 100, // speed of auto rotate option 11 dragSpeed: 6, // speed of rotation when dragging elements 12 progress: ".spinner", // selector to show the loading progress 13 extension: ".jpg", // extension for the images 14 imgPrefix: "", 15 navigation: true, // display navigation 16 spinner: true, // disable spinner for loading 17 imagesFolder: "images/", // path to folder with images 18 smallWidth: 400, // smaller width for images 19 smallHeight: 400, // smaller height for images 20 largeWidth: 800, // larger width for images 21 largeHeight: 800, // larger height for images 22 imagePlaceholderClass: "images-placeholder", // class for images placeholder 23 imgList: "threesixty-images-rotate" // selector for image list 24 }, options); 25 26 /** 27 * @method initTreeSixty 28 * The function starts creation process of TreeSixtyImageRotate 29 */ 30 base.initTreeSixty = function () { 31 base.css({ 32 "height": settings.smallHeight, 33 "width": settings.smallWidth, 34 "position": "relative", 35 "margin": "auto" 36 }); 37 if (settings.spinner) { 38 base.spinner("start"); 39 } 40 if (settings.navigation) { 41 base.createNavigation(); 42 } 43 let changeSlide = false, previousSlide = false, nextNext = false, xAxis, nextXAxis; 44 base.find(".images-list").on("mousedown touchstart", function (e) { 45 e.preventDefault(); 46 if (e.type === "mousedown") { 47 xAxis = e.pageX; 48 } else { 49 xAxis = e.originalEvent.touches[0].pageX; 50 } 51 changeSlide = true; 52 }).on("mousemove touchmove", function (e) { 53 if (changeSlide) { 54 if (e.type === "mousemove") { 55 nextXAxis = e.pageX; 56 } else { 57 nextXAxis = e.originalEvent.touches[0].pageX; 58 } 59 if (nextXAxis > xAxis + settings.dragSpeed) { 60 previousSlide = true; 61 xAxis = nextXAxis; 62 base.previous(); 63 } else if (nextXAxis < xAxis - settings.dragSpeed) { 64 nextNext = true; 65 xAxis = nextXAxis; 66 base.next(); 67 } 68 } 69 }).on("mouseleave mouseup touchend", function (e) { 70 changeSlide = false; 71 }); 72 if (settings.spinner) { 73 base.spinner("stop"); 74 } 75 }; 76 /** 77 * @method createNavigation 78 * Creates navigation menu for TreeSixtyImageRotate display 79 */ 80 base.createNavigation = function () { 81 let navigationBarWrapper, navigationBar, next, previous, playStop; 82 83 navigationBarWrapper = $("<div/>").attr("class", "navigation-bar-wrapper"); 84 85 navigationBar = $("<div/>").attr("class", "navigation-bar"); 86 87 next = $("<div/>").attr({ 88 "class": "navigation-bar-next" 89 }); 90 91 previous = $("<div/>").attr({ 92 "class": "navigation-bar-previous" 93 }); 94 95 playStop = $("<div/>").attr({ 96 "class": "navigation-bar-play" 97 }); 98 99 navigationBar.append(previous); 100 navigationBar.append(playStop); 101 navigationBar.append(next); 102 103 navigationBarWrapper.append(navigationBar); 104 105 base.append(navigationBarWrapper); 106 107 let nextInterval; 108 next.on("mousedown touchstart", function (e) { 109 e.preventDefault(); 110 nextInterval = setInterval(function () { 111 base.next() 112 }, settings.speed) 113 }).on("mouseleave mouseup touchend", function () { 114 clearInterval(nextInterval); 115 }); 116 117 let previousInterval; 118 previous.on("mousedown touchstart", function (e) { 119 e.preventDefault(); 120 previousInterval = setInterval(function () { 121 base.previous() 122 }, settings.speed) 123 }).on("mouseleave mouseup touchend", function () { 124 clearInterval(previousInterval); 125 }); 126 127 let play = false, playStopInterval; 128 playStop.on("mousedown touchstart", function (e) { 129 e.preventDefault(); 130 if (!play) { 131 base.find('.navigation-bar-play').addClass('navigation-bar-stop'); 132 play = true; 133 playStopInterval = setInterval(function () { 134 base.next() 135 }, settings.speed) 136 } else { 137 base.find('.navigation-bar-play').removeClass('navigation-bar-stop'); 138 play = false;
139 clearInterval(playStopInterval) 140 } 141 }); 142 143 }; 144 /** 145 * @method spinner 146 * Creates loader to be display during content creation 147 * Also can hide loader depending on status 148 */ 149 base.spinner = function (status) { 150 let spinner; 151 spinner = $("<div/>").attr({ 152 "class": "loading-spinner" 153 }); 154 base.append(spinner); 155 if (status === "start") { 156 let winWidth = $(window).width(); 157 if (winWidth > 991) { 158 base.find('.loading-spinner').css({ 159 "height": settings.smallHeight, 160 "width": settings.smallWidth, 161 }) 162 } else { 163 base.find('.loading-spinner').css({ 164 "max-height": settings.largeHeight, 165 "max-width": settings.largeWidth, 166 "height": winWidth, 167 "width": winWidth, 168 }); 169 } 170 } else if (status === "stop") { 171 base.find('.loading-spinner').css({ 172 "display": "none" 173 }); 174 } else { 175 console.log("Invalid status for spinner"); 176 } 177 }; 178 /** 179 * @method next 180 * Hide current image and next image 181 */ 182 base.next = function () { 183 let currentSlide = base.find(".active"); 184 let imgPositionClass = currentSlide.attr("class").split(/\s+/)[1]; 185 let imgPossition = parseInt(imgPositionClass.substring(6)); 186 imgPossition--; 187 if (imgPossition < 0) { 188 imgPossition = settings.totalFrames; 189 } 190 let nextImgClass = "image-" + imgPossition; 191 base.find("." + nextImgClass).addClass("active"); 192 currentSlide.removeClass("active"); 193 194 }; 195 /** 196 * @method previous 197 * Hide current image and previous image 198 */ 199 base.previous = function () { 200 let currentSlide = base.find(".active"); 201 let imgPositionClass = currentSlide.attr("class").split(/\s+/)[1]; 202 let imgPossition = parseInt(imgPositionClass.substring(6)); 203 imgPossition++; 204 if (imgPossition > settings.totalFrames) { 205 imgPossition = 0; 206 } 207 let nextImgClass = "image-" + imgPossition; 208 base.find("." + nextImgClass).addClass("active"); 209 currentSlide.removeClass("active"); 210 }; 211 /** 212 * @method togleFullScreen 213 * Activates and dissactivates full screen state 214 */ 215 base.togleFullScreen = function () { 216 if (!$(document)[0].fullscreenElement && 217 !$(document)[0].mozFullScreenElement && !$(document)[0].webkitFullscreenElement && !$(document)[0].msFullscreenElement) { // current working methods 218 if ($(this)[0].requestFullscreen) { 219 220 $(this)[0].requestFullscreen(); 221 } else if ($(this)[0].msRequestFullscreen) { 222 $(this)[0].msRequestFullscreen(); 223 } else if ($(this)[0].mozRequestFullScreen) { 224 $(this)[0].mozRequestFullScreen(); 225 } else if ($(this)[0].webkitRequestFullscreen) { 226 $(this)[0].webkitRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT); 227 } 228 } else { 229 if ($(document)[0].exitFullscreen) { 230 $(document)[0].exitFullscreen(); 231 } else if ($(document)[0].msExitFullscreen) { 232 $(document)[0].msExitFullscreen(); 233 } else if ($(document)[0].mozCancelFullScreen) { 234 $(document)[0].mozCancelFullScreen(); 235 } else if ($(document)[0].webkitExitFullscreen) { 236 $(document)[0].webkitExitFullscreen(); 237 } 238 } 239 }; 240 241 base.on('webkitfullscreenchange mozfullscreenchange fullscreenchange', function (e) { 242 base.resize(); 243 }); 244 $(window).resize(function (e) { 245 let winWidth = $(window).width(); 246 if (winWidth > 991) { 247 base.css({ 248 "height": settings.smallHeight, 249 "width": settings.smallWidth, 250 }) 251 } else { 252 base.css({ 253 "max-height": settings.largeHeight, 254 "max-width": settings.largeWidth, 255 "height": winWidth, 256 "width": winWidth, 257 }); 258 } 259 }); 260 $(document).ready(function (e) { 261 let winWidth = $(window).width(); 262 if (winWidth > 991) { 263 base.css({ 264 "height": settings.smallHeight, 265 "width": settings.smallWidth, 266 }) 267 } else { 268 base.css({ 269 "max-height": settings.largeHeight, 270 "max-width": settings.largeWidth, 271 "height": winWidth, 272 "width": winWidth, 273 }); 274 } 275 }); 276 277 return base; 278 }; 279}) 280(jQuery);
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.