1(function ($) { 2 'use strict'; 3 4 if (!$.fn.slickNav) { 5 $.fn.slickNav = function (item, ops) { 6 var defaults = { 7 parentNode: false, 8 circle: false, 9 circleSize: '30px', 10 circleBorder: '1px', 11 circleTrack: 'rgba(0, 0, 0, .2)', 12 progress: false, 13 progressWidth: '150px', 14 progressHeight: '3px', 15 progressTrack: '#000', 16 progressFill: '#fff', 17 dotSize: '5px', 18 dotDefaultColor: '#ccc', 19 dotColor: '#f00', 20 controls: true, 21 controlsOnly: false, 22 duration: 5000, 23 }; 24 25 var settings = $.extend({}, defaults, ops); 26 27 var $this = this; 28 var wrap = document.createElement('div'); 29 var dotsWrap = document.createElement('div'); 30 var progressWrap = document.createElement('div'); 31 var btnsWrap = document.createElement('div'); 32 33 var _duration = 'all linear ' + settings.duration + 'ms'; 34 var _circleXY = parseInt(settings.circleSize) / 2; 35 var _circleBorder = parseInt(settings.circleBorder); 36 var _circleR = _circleXY - _circleBorder; 37 var _circumference = Math.PI * (parseInt(settings.circleSize) - parseInt(settings.circleBorder) * 2); 38 39 var $childLength = 0; 40 41 $.each($this.find(item), function (idx, ele) { 42 if (!$(ele).hasClass('slick-cloned')) { 43 $childLength++; 44 } 45 }); 46 47 var activeFunc = function () {}; 48 49 var currentIdx = 0; 50 51 wrap.classList.add('slick-nav'); 52 progressWrap.classList.add('slick-nav__progress'); 53 dotsWrap.classList.add('slick-nav__dots'); 54 btnsWrap.classList.add('slick-nav__btns'); 55 56 var btnsHTML = 57 '<button type="button" class="slick-nav__prev" style="cursor: pointer;">prev</button><button type="button" class="slick-nav__pause" style="cursor: pointer;">pause</button><button type="button" class="slick-nav__next" style="cursor: pointer;">next</button>'; 58 $(btnsWrap).append(btnsHTML).css({ 59 'display': 'flex', 60 'align-items': 'center', 61 }); 62 63 if (settings.controls) { 64 $(wrap).append(btnsWrap); 65 } 66 67 if (settings.circle && settings.progress) { 68 throw Error('progressì circle ìì±ì ê°ì´ ì¬ì©í ì ììµëë¤.'); 69 } 70 71 if (!settings.controlsOnly) { 72 if (settings.progress) { 73 // Progress Bar 74 parseProgress(); 75 76 activeFunc = function () { 77 activeProgress(currentIdx); 78 }; 79 } else { 80 if (settings.circle) { 81 // Dots 82 parseCircles(); 83 } else { 84 parseDots(); 85 } 86 87 activeFunc = function () { 88 activeDots(currentIdx); 89 }; 90 } 91 } 92 93 function parseCircles() { 94 $(wrap).css({ 95 'display': 'flex', 96 'align-items': 'center', 97 }); 98 99 for (var i = 0; i < $childLength; i++) { 100 var dotStr = 101 '<button type="button" class="circle"><div class="circle__dot"></div><svg class="circle__track"><circle cx=' + 102 _circleXY + 103 ' cy=' + 104 _circleXY + 105 ' r=' + 106 _circleR + 107 '></circle></svg><svg class="circle__fill"><circle cx=' + 108 _circleXY + 109 ' cy=' + 110 _circleXY + 111 ' r=' + 112 _circleR + 113 '></circle></button>'; 114 $(dotsWrap).append(dotStr); 115 } 116 117 $(dotsWrap) 118 .find('.circle') 119 .css({ 120 'fill': 'none', 121 'transform-origin': 'center', 122 'stroke-width': settings.circleBorder, 123 'width': settings.circleSize, 124 'height': settings.circleSize, 125 'position': 'relative', 126 'cursor': 'pointer', 127 'padding': 0, 128 'outline': 0, 129 'border': 'none', 130 'background': 'none', 131 }) 132 .end() 133 .find('.circle__dot') 134 .css({ 135 'width': settings.dotSize, 136 'height': settings.dotSize, 137 'background-color': settings.dotDefaultColor, 138 'border-radius': '50%', 139 'position': 'absolute', 140 'top': '50%', 141 'left': '50%', 142 'transform': 'translate(-50%, -50%)', 143 }) 144 .end() 145 .find('svg') 146 .css({ 147 'stroke-dasharray': _circumference, 148 'position': 'absolute', 149 'top': 0, 150 'left': 0, 151 'width': '100%', 152 'height': '100%', 153 }) 154 .end() 155 .find('.circle__track') 156 .css({ 157 'opacity': 0, 158 'z-index': 0, 159 'transition': 'all linear .15s', 160 }) 161 .find('circle') 162 .css({ 163 stroke: settings.circleTrack, 164 }) 165 .end() 166 .end() 167 .find('.circle__fill') 168 .css({ 169 'z-index': 1, 170 'stroke-dashoffset': _circumference, 171 'transform': 'rotate(270deg)', 172 }) 173 .find('circle') 174 .css({ 175 stroke: settings.dotColor, 176 }); 177 178 $(wrap).prepend(dotsWrap); 179 } 180 181 function parseDots() { 182 $(wrap).css({ 183 'display': 'flex', 184 'align-items': 'center', 185 }); 186 187 for (var i = 0; i < $childLength; i++) { 188 var dotStr = '<button type="button" class="circle"><div class="circle__dot"></div></button>'; 189 $(dotsWrap) 190 .append(dotStr) 191 .find('.circle') 192 .css({ 193 padding: 0, 194 outline: 0, 195 border: 'none', 196 background: 'none', 197 cursor: 'pointer', 198 }) 199 .find('.circle__dot') 200 .css({ 201 'width': settings.dotSize, 202 'height': settings.dotSize, 203 'background-color': settings.dotDefaultColor, 204 'border-radius': '50%', 205 }); 206 } 207 208 $(wrap).prepend(dotsWrap); 209 } 210 211 function parseProgress() { 212 $(wrap).css({ 213 'display': 'flex', 214 'align-items': 'center', 215 }); 216 217 var total = $childLength < 10 ? '0' + $childLength : $childLength; 218 219 var progressHTML = 220 '<p class="progress__current">01</p><div class="progress__track"><div class="progress__fill"></div></div><p class="progress__total">
220' + 221 total + 222 '</p>'; 223 224 $(progressWrap) 225 .append(progressHTML) 226 .css({ 227 'display': 'flex', 228 'align-items': 'center', 229 }) 230 .find('.progress__track') 231 .css({ 232 'position': 'relative', 233 'width': settings.progressWidth, 234 'height': settings.progressHeight, 235 'background-color': settings.progressTrack, 236 }) 237 .find('.progress__fill') 238 .css({ 239 'position': 'absolute', 240 'top': 0, 241 'left': 0, 242 'width': '0%', 243 'height': '100%', 244 'background-color': settings.progressFill, 245 }); 246 247 $(wrap).prepend(progressWrap); 248 } 249 250 function activeProgress(idx) { 251 idx += 1; 252 idx = idx < 10 ? '0' + idx : idx; 253 254 if ($(progressWrap).hasClass('active')) { 255 $(progressWrap).find('.progress__fill').css({ 256 width: '100%', 257 transition: _duration, 258 }); 259 } else { 260 $(progressWrap).find('.progress__fill').css({ 261 width: '0%', 262 transition: 'auto', 263 }); 264 } 265 266 $(progressWrap).find('.progress__current').text(idx); 267 } 268 269 function activeDots(idx) { 270 $.each($(dotsWrap).find('.circle'), function (i, v) { 271 if (settings.circle) { 272 if ($(v).hasClass('active')) { 273 $(v) 274 .find('.circle__dot') 275 .css({ 276 'background-color': settings.dotColor, 277 }) 278 .end() 279 .find('.circle__track') 280 .css({ 281 opacity: 1, 282 }) 283 .end() 284 .find('.circle__fill') 285 .css({ 286 'transition': _duration, 287 'stroke-dashoffset': '0', 288 }); 289 } else { 290 $(v) 291 .find('.circle__dot') 292 .css({ 293 'background-color': settings.dotDefaultColor, 294 }) 295 .end() 296 .find('.circle__track') 297 .css({ 298 opacity: 0, 299 }) 300 .end() 301 .find('.circle__fill') 302 .css({ 303 'transition': 'none', 304 'stroke-dashoffset': _circumference, 305 }); 306 } 307 } else { 308 if ($(v).hasClass('active')) { 309 $(v).find('.circle__dot').css({ 310 'background-color': settings.dotColor, 311 }); 312 } else { 313 $(v).find('.circle__dot').css({ 314 'background-color': settings.dotDefaultColor, 315 }); 316 } 317 } 318 }); 319 } 320 321 function init() { 322 if (settings.parentNode) { 323 $(settings.parentNode).append($(wrap)); 324 } else { 325 $this.append($(wrap)); 326 } 327 328 $(dotsWrap) 329 .find('.circle') 330 .on('click', function () { 331 var idx = $(this).index(); 332 $this.slick('slickGoTo', idx); 333 }); 334 335 $(btnsWrap) 336 .find('.slick-nav__prev') 337 .on('click', function () { 338 $this.slick('slickPrev'); 339 }); 340 341 $(btnsWrap) 342 .find('.slick-nav__next') 343 .on('click', function () { 344 $this.slick('slickNext'); 345 }); 346 347 $(btnsWrap) 348 .find('.slick-nav__pause') 349 .on('click', function () { 350 if (!$(this).hasClass('paused')) { 351 $(this).addClass('paused').text('play'); 352 $this.slick('slickPause'); 353 $(dotsWrap).find('.circle').removeClass('active'); 354 $(progressWrap).removeClass('active'); 355 356 activeFunc(currentIdx); 357 } else { 358 $(this).removeClass('paused').text('pause'); 359 $this.slick('slickPlay').slick('slickNext'); 360 } 361 }); 362 363 $this.on('beforeChange', function (e, s, c, n) { 364 currentIdx = n; 365 366 $(progressWrap).removeClass('active'); 367 $(dotsWrap).find('.circle').removeClass('active'); 368 $(dotsWrap).find('.circle').eq(n).addClass('active'); 369 370 activeFunc(currentIdx); 371 }); 372 373 $this.on('afterChange', function (e, s, c) { 374 currentIdx = c; 375 376 $(progressWrap).addClass('active'); 377 activeFunc(currentIdx); 378 }); 379 380 $(window).on('load', function () { 381 $(dotsWrap).find('.circle').eq(0).addClass('active'); 382 $(progressWrap).addClass('active'); 383 384 activeFunc(0); 385 }); 386 } 387 388 init(); 389 390 return this; 391 }; 392 } 393})(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.