1/** 2 * author : Ä°lker YILMAZ 3 * url : https://github.com/kuantal/Multiple-circular-player 4 * inspired by https://github.com/frumbert/circular-player 5 */ 6(function (root, factory) { 7 8 if (typeof define === 'function' && define.amd) { 9 define(factory); 10 } else if (typeof exports === 'object') { 11 module.exports = factory; 12 } else { 13 root.lunar = factory(); 14 } 15})(this, function () { 16 17 'use strict'; 18 19 var lunar = {}; 20 21 lunar.hasClass = function (elem, name) { 22 return new RegExp('(\\s|^)' + name + '(\\s|$)').test(elem.attr('class')); 23 }; 24 25 lunar.addClass = function (elem, name) { 26 !lunar.hasClass(elem, name) && elem.attr('class', (!!elem.getAttribute('class') ? elem.getAttribute('class') + ' ' : '') + name); 27 }; 28 29 lunar.removeClass = function (elem, name) { 30 var remove = elem.attr('class').replace(new RegExp('(\\s|^)' + name + '(\\s|$)', 'g'), '$2'); 31 lunar.hasClass(elem, name) && elem.attr('class', remove); 32 }; 33 34 lunar.toggleClass = function (elem, name) { 35 lunar[lunar.hasClass(elem, name) ? 'removeClass' : 'addClass'](elem, name); 36 }; 37 38 lunar.className = function (elem, name) { 39 elem.attr('class', name); 40 console.log('className', elem); 41 }; 42 43 return lunar; 44 45}); 46 47(function ($) { 48 49 var _ = { 50 51 cursorPoint: function (evt, el) { 52 _.settings.pt.x = evt.clientX; 53 _.settings.pt.y = evt.clientY; 54 var playObject = el.find('svg').attr('id'); 55 playObject = document.getElementById(playObject); 56 return _.settings.pt.matrixTransform(playObject.getScreenCTM().inverse()); 57 }, 58 59 angle: function (ex, ey) { 60 var dy = ey - 50; // 100; 61 var dx = ex - 50; // 100; 62 var theta = Math.atan2(dy, dx); // range (-PI, PI] 63 theta *= 180 / Math.PI; // rads to degs, range (-180, 180] 64 theta = theta + 90; // in our case we are animating from the top, so we offset by the rotation value; 65 if (theta < 0) theta = 360 + theta; // range [0, 360) 66 return theta; 67 }, 68 69 setGraphValue: function (obj, val, el) { 70 71 var audioObj = el.find(_.settings.audioObj), 72 pc = _.settings.pc, 73 dash = pc - parseFloat(((val / audioObj[0].duration) * pc), 10); 74 75 $(obj).css('strokeDashoffset', dash); 76 77 if (val === 0) { 78 $(obj).addClass(obj, 'done'); 79 if (obj === $(_.settings.progress)) $(obj).attr('class', 'ended'); 80 } 81 }, 82 83 reportPosition: function (el, audioId) { 84 var progress = el.find(_.settings.progress), 85 audio = el.find(_.settings.audioObj); 86 87 _.setGraphValue(progress, audioId.currentTime, el); 88 89 90//***************************************************************** 91// Player-Reset bei Ende #interact 92//***************************************************************** 93 94 if (audioId.currentTime == audioId.duration) { 95 96 audioId.currentTime = 0 97 audioId.pause(); 98 audioIdName = audioId.id 99 $("#" + audioIdName.replace("audio", "playable")).attr('class', 'not-started playable'); 100 //$("#backanimation").fadeTo(3000,0.4); 101 effectStop(); 102 }; 103 104//***************************************************************** 105 106 107 }, 108 109 stopAllSounds: function () { 110 111 document.addEventListener('play', function (e) { 112 var audios = document.getElementsByTagName('audio'); 113 for (var i = 0, len = audios.length; i < len; i++) { 114 115 if (audios[i] != e.target) { 116 //reset other players #interact 117 audios[i].pause(); 118 $(audios[i]).parent('div').find('.playing').attr('class', 'paused'); 119 audios[i].currentTime = 0 120 } 121 122 } 123 }, true); 124 }, 125 126 settings: {}, 127 128 /**
129 * Main Function for plugin 130 * @param options 131 */ 132 init: function (options) { 133 134 /** 135 * Default Options 136 */ 137 138 /* #interact*/ 139 var templateOrig = ['<svg viewBox="0 0 100 100" id="playable" version="1.1" xmlns="http://www.w3.org/2000/svg" width="34" height="34" data-play="playable" class="not-started playable">', 140 141 /* BORDER, PROGRESS */ 142 '<g class="shape">', 143 '<circle class="progress-track" cx="50" cy="50" r="43" stroke="#6d6e70" stroke-opacity="0.95" stroke-linecap="round" fill="none" stroke-width="8"/>', 144 '<circle class="precache-bar" cx="50" cy="50" r="43" stroke="#6d6e70" stroke-opacity="0.7" stroke-linecap="round" fill="none" stroke-width="8" transform="rotate(-90 50 50)"/>', 145 '<circle class="progress-bar" cx="50" cy="50" r="43" stroke="#c8998a" stroke-opacity="1" stroke-linecap="round" fill="none" stroke-width="8" transform="rotate(-90 50 50)"/>', 146 '</g>', 147 '<circle class="controls" cx="50" cy="50" r="45" stroke="none" fill="#FFF" opacity="0.0" pointer-events="all"/>', 148 149 /* PAUSE ICON */ 150 '<g class="control pause">', 151 '<line x1="40" y1="35" x2="40" y2="65" stroke="#FFF" fill="none" stroke-width="8" stroke-linecap="round"/>', 152 '<line x1="60" y1="35" x2="60" y2="65" stroke="#FFF" fill="none" stroke-width="8" stroke-linecap="round"/>', 153 '</g>', 154 155 /* PLAY ICON */ 156 '<g class="control play">', 157 '<polygon points="45,35 65,50 45,65" fill="#FFF" stroke-width="0"></polygon>', 158 '</g>', 159 160 '<g class="control stop">', 161 '<rect x="35" y="35" width="30" height="30" stroke="#FFF" fill="none" stroke-width="1"/>', 162 '</g>', 163 164 '</svg>']; 165 166 templateOrig = templateOrig.join(' '); 167 168 $.each(this, function (a, b) { 169 170 var audio = $(this).find('audio'); 171 audio.attr('id', 'audio' + (a+1)); /* #idAnpassung */ 172 template = templateOrig.replace('width="34"','width="'+ audio.data('size') +'"'); /* #interact */ 173 template = template.replace('height="34"','height="'+ audio.data('size') +'"'); 174 template = template.replace('id="playable"', 'id="playable' + (a+1) + '"'); /* #interact */ 175 $(this).append(template); 176 177 }); 178 179 var svgId = $(this).find('svg').attr('id'); 180 svgId = document.getElementById(svgId); 181 182 _.defaults = { 183 this : this, 184 thisSelector: this.selector.toString(), 185 playObj : 'playable', 186 progress : '.progress-bar', 187 precache : '.precache-bar', 188 audioObj : 'audio', 189 controlsObj : '.controls', 190 pt : svgId.createSVGPoint(), 191 pc : 298.1371428256714 // 2 pi r 192 }; 193 194 lunar = {}; 195 196 _.settings = $.extend({}, _.defaults, options); 197 198 //#interact: select "tr" anstatt ".controls" 199 // $(_.settings.controlsObj).on('click', function (e) { 200 $("tr[id^='trackRow']").on('click', function (e) { 201 202 203 //#interact: select #trackRowX svg anstatt 204 //var el = $(e.currentTarget).closest($(_.settings.thisSelector)); 205 var el = $("#" + e.currentTarget.id + " svg").closest($(_.settings.thisSelector)); 206 207 var obj = { 208 el : el, 209 activeAudio: el.find(_.settings.audioObj), 210 playObj : el.find('[data-play]'), 211 precache : el.find(_.settings.precache) 212 }; 213 214 obj.class = obj.playObj.attr('class'); 215 strPlayingStatus = obj.class.replace('playable', '').trim(); 216 217 switch (strPlayingStatus) { 218 219 case 'not-started': 220 _.stopAllSounds(); 221 obj.activeAudio[0].play(); 222 var audioId = document.getElementById(obj.activeAudio.attr('id')); 223 audioId.addEventListener('timeupdate', function (e) { 224 _.reportPosition(el, audioId) 225 }); 226 obj.playObj.attr('class', 'playing'); 227 effectPlay(); 228 break; 229 case 'playing': 230 obj.playObj.attr('class', 'playable paused'); 231 obj.activeAudio[0].pause(); 232 $(audioId).off('timeupdate'); 233 effectStop(); 234 break; 235 236 case 'paused': 237 obj.playObj.attr('class', 'playable playing'); 238 obj.activeAudio[0].play(); 239 effectPlay(); 240 break; 241 242 case 'ended': 243 obj.playObj.attr('class', 'not-started playable'); 244 obj.activeAudio.off('timeupdate', _.reportPosition); 245 //effectStop; vgl. Player-Reset 246 break; 247 } 248 }); 249 250 $(_.defaults.audioObj).on('progress', function (e) { 251 if (this.buffered.length > 0) { 252 var end = this.buffered.end(this.buffered.length - 1); 253 var cache = $(e.currentTarget).parent().find(_.settings.precache), 254 el = $(this).closest($(_.settings.thisSelector)); 255 _.setGraphValue(cache, end, el); 256 } 257 }); 258 259 } 260 261 }; 262 263 // Add Plugin to Jquery 264 $.fn.mediaPlayer = function (methodOrOptions) { 265 if (_[methodOrOptions]) { 266 return _[methodOrOptions].apply(this, Array.prototype.slice.call(arguments, 1)); 267 } else if (typeof methodOrOptions === 'object' || !methodOrOptions) { 268 // Default to "init" 269 return _.init.apply(this, arguments); 270 } else { 271 $.error('Method ' + methodOrOptions + ' does not exist on jQuery.mediaPlayer'); 272 } 273 }; 274})(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.