1/** 2 * jQuery Angle View v1.3 3 * 4 * @author Dymyw <[email protected]> 5 * @since 2013-12-23 6 * @version 2014-09-03 7 */ 8 9(function($) { 10 // plugin definition 11 $.fn.angle = function(configs) { 12 if ('object' === typeof configs) { 13 return this.each(function() { 14 new $.angle(this, configs); 15 }); 16 } else { 17 var $angle = this.data('angle'); 18 switch (configs) { 19 case 'resize': 20 $angle.init(); break; 21 } 22 } 23 }; 24 25 /** 26 * plugin defaults - added as a property on our plugin function 27 * 28 * @param float speed show speed, default: 2 29 * @param boolean drag mouse drag or mouse over 30 * @param selector previous click to display the previous 31 * @param selector next click to display the next 32 * @param integer current set the display one 33 * @param get_image get image: js array object 34 * @param after after: exec after every angle slide 35 */ 36 $.fn.angle.defaults = { 37 speed: 2, 38 drag: false, 39 previous: '', 40 next: '', 41 current: 0, 42 get_image: function() {}, 43 after: function() {} 44 }; 45 46 // object instance 47 $.angle = function(container, configs) { 48 var options = $.extend({}, $.fn.angle.defaults, configs); 49 // store a reference to the slider object 50 var $angle = $(container); 51 $.data(container, 'angle', $angle); 52 53 var width, firstImage, imageLeft, allImage, imageCount, changeWidth; 54 55 var step = 0; 56 var currentStep = 0; 57 var currentImage; 58 $angle.attr('data-current', options.current); 59 60 var start = false;
61 var startDrag = false; 62 var startTouch = false; 63 var isScrolling; 64 var load = true; 65 66 var init = function() { 67 // get the parentNode width 68 width = $(container.parentNode).css('width'); 69 if (!width || width.indexOf('%') !== -1) { 70 width = container.parentNode.getBoundingClientRect().width || container.parentNode.offsetWidth; 71 } 72 width = parseInt(width); 73 //$angle.width(width); 74 75 firstImage = $angle.find('img:first'); 76 imageLeft = firstImage.offset().left; 77 allImage = $angle.find('img'); 78 allImage.each(function(i) { 79// $(this).width(width); 80 $(this).attr('data-id', i); 81 }); 82 imageCount = allImage.size(); 83 changeWidth = parseInt(width / imageCount / options.speed); 84 allImage.toggle(); 85 currentImage = $angle.data('current'); 86 allImage.eq(currentImage).toggle(); 87 }; 88 89 var loading = function() { 90 load = false; 91 var images = options.get_image(); 92 if ('object' === typeof images) { 93 var ulString = ''; 94 for (var i in images) { 95 ulString += '<li><img src="' + images[i] + '" /></li>'; 96 } 97 $(container).children('ul').html(ulString); 98 init(); 99 mouseEvent(); 100 } 101 }; 102 103 if (options.previous) { 104 $(options.previous).click(function() { 105 if (load) { loading(); } 106 prev(); 107 }); 108 } 109 if (options.next) { 110 $(options.next).click(function() { 111 if (load) { loading(); } 112 next(); 113 }); 114 } 115 116 var prev = function() { 117 allImage.eq(currentImage).toggle(); 118 currentImage = circle(currentImage - 1); 119 allImage.eq(currentImage).toggle(); 120 $angle.attr('data-current', currentImage); 121 // callback function after 122 _loadFn(options.after()); 123 }; 124 125 var next = function() { 126 allImage.eq(currentImage).toggle(); 127 currentImage = circle(currentImage + 1); 128 allImage.eq(currentImage).toggle(); 129 $angle.attr('data-current', currentImage); 130 // callback function after 131 _loadFn(options.after()); 132 }; 133 134 var circle = function(index) { 135 return (imageCount + (index % imageCount)) % imageCount; 136 }; 137 138 // touch event 139 var bindTouchEvent = { 140 handleEvent: function(event) { 141 switch (event.type) { 142 case 'touchstart': 143 this.start(event); 144 break; 145 case 'touchmove': 146 this.move(event); 147 break; 148 case 'touchend': 149 this.end(); 150 break; 151 } 152 }, 153 154 start: function(event) { 155 startTouch = true; 156 157 if (startTouch) { 158 var touchs = event.touches[0]; 159 startPos = { 160 x: touchs.pageX, 161 y: touchs.pageY 162 }; 163 164 if (load) { loading(); } 165 step = currentStep = parseInt((startPos.x - imageLeft) / changeWidth); 166 167 // used for testing first move event 168 isScrolling = undefined; 169 170 // reset delta and end measurements 171 delta = {}; 172 173 // attach touchmove and touchend listeners 174 container.addEventListener('touchmove', this, false); 175 container.addEventListener('touchend', this, false); 176 } 177 }, 178 179 move: function(event) { 180 if (startTouch) { 181 var touchs = event.touches[0]; 182 delta = {
183 x: touchs.pageX - startPos.x, 184 y: touchs.pageY - startPos.y 185 }; 186 187 // determine if scrolling test has run - one time test 188 if ('undefined' === typeof isScrolling) { 189 isScrolling = !!(isScrolling || Math.abs(delta.x) < Math.abs(delta.y)); 190 } 191 192 if (!isScrolling) { 193 event.preventDefault(); 194 195 currentStep = parseInt((touchs.pageX - imageLeft) / changeWidth); 196 if (currentStep !== step) { 197 currentStep > step ? next() : prev(); 198 step = currentStep; 199 } 200 } 201 } 202 }, 203 204 end: function() { 205 startTouch = false; 206 207 // kill touchmove and touchend event listeners until touchstart called again 208 container.removeEventListener('touchmove', this, false); 209 container.removeEventListener('touchend', this, false); 210 } 211 }; 212 213 // bind mouse event 214 var mouseEvent = function() { 215 if (options.drag) { 216 var dragX = null; 217 // all images are forbidden to drag 218 for (i in document.images) 219 document.images[i].ondragstart = function() {return false;}; 220 221 $(container).mousedown(function(event) { 222 startDrag = true; 223 224 if (startDrag) { 225 dragX = event.screenX; 226 227 if (load) { loading(); } 228 step = currentStep = parseInt((dragX - imageLeft) / changeWidth); 229 } 230 }); 231 232 $(container).mousemove(function(event) { 233 if (startDrag && dragX) { 234 event.preventDefault(); 235 236 currentStep = parseInt((event.screenX - imageLeft) / changeWidth); 237 if (currentStep !== step) { 238 currentStep > step ? next() : prev(); 239 step = currentStep; 240 } 241 } 242 }); 243 244 $(container).mouseup(function() { 245 start = false;
246 dragX = null; 247 }); 248 } else { 249 $(container).mouseover(function(event) { 250 start = true; 251 252 if (start) { 253 if (load) { loading(); } 254 step = currentStep = parseInt((event.screenX - imageLeft) / changeWidth); 255 } 256 }); 257 258 $(container).mousemove(function(event) { 259 if (start) { 260 currentStep = parseInt((event.screenX - imageLeft) / changeWidth); 261 if (currentStep !== step) { 262 currentStep > step ? next() : prev(); 263 step = currentStep; 264 } 265 } 266 }); 267 268 $(container).mouseout(function() { 269 start = false; 270 }); 271 } 272 }; 273 274 // bind touch event 275 if ('ontouchstart' in window) { 276 container.addEventListener('touchstart', bindTouchEvent, false); 277 } 278 279 $angle.setPosition = function(i) { 280 this.find("img[data-id='" + i + "']").css('display', 'inline'); 281 this.find("img[data-id!='" + i + "']").css('display', 'none'); 282 $angle.attr('data-current', i); 283 currentImage = i; 284 }; 285 286 var _loadFn = function(fn) { 287 setTimeout(function() { 288 fn; 289 }, 0); 290 }; 291 292 init(); 293 mouseEvent(); 294 }; 295 296 // private function - debugging 297 function debug(obj) { 298 if (window.console && window.console.log) 299 window.console.log(obj); 300 } 301})(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.