You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 

16 lines
5.7 KiB

/*!
jQuery timebar plugin
@name timebar.js
@author pulkitchadha (pulkitchadha27@gmail.com]
@version 1.0
@date 28/03/2018
@category jQuery Plugin
@copyright (c) 2018 pulkitchadha (pulkitchadha)
@license Licensed under the MIT (http://www.opensource.org/licenses/mit-license.php) license.
*/
(function(a){var b,c,d;d=function(e,f){return function(){return e.apply(f,arguments)}},c={element:null,totalTimeInSecond:0,cuepoints:[],width:0,globalPageX:0,selectedTime:0,multiSelect:!1,showCuepoints:!0,stepBars:100,timeIntervals:10,barClicked:null,cuepointClicked:null,beforeCreate:null,created:null,beforeMount:null,mounted:null,beforeUpdate:null,updated:null,beforeAddCuepoint:null,afterAddCuepoint:null,beforeUpdateCuepoint:null,afterUpdateCuepoint:null,beforeDeleteCuepoint:null,afterDeleteCuepoint:null},b=function(){function f(g,h){var j=this;a.extend(!0,this,c,h),this.element=g,this.init=d(this.init,this),this.update=d(this.update,this),this.getSelectedTime=d(this.getSelectedTime,this),this.setSelectedTime=d(this.setSelectedTime,this),this.getTotalTime=d(this.getTotalTime,this),this.setTotalTime=d(this.setTotalTime,this),this.getWidth=d(this.getWidth,this),this.setWidth=d(this.setWidth,this),this.getActualWidth=d(this.getActualWidth,this),this.formatTime=d(this.formatTime,this),this.addCuepoints=d(this.addCuepoints,this),this.deleteSelectedCuepoints=d(this.deleteSelectedCuepoints,this),this.updateSelectedCuepoint=d(this.updateSelectedCuepoint,this),this.showHideCuepoints=d(this.showHideCuepoints,this),a(this.element).on('click','.step',function(){j.setSelectedTime(a(this).data('time')),'function'==typeof j.barClicked&&j.barClicked.call(this,j.getSelectedTime())}),a(this.element).on('click','.steps-bar',function(k){j._barClicked(this,k,j)}),a(this.element).on('click','.pointer',function(){j._cuepointClicked(this,j)})}return f.prototype.update=function(g){a.extend(!0,this,g)},f.prototype.getSelectedTime=function(){return this.selectedTime},f.prototype.setSelectedTime=function(g){if(!g&&0!==g)throw new Error('please pass the valid time');return this.selectedTime=parseInt(g),this.timebarInstance},f.prototype.getTotalTime=function(){return this.totalTimeInSecond},f.prototype.setTotalTime=function(g){if(!g)throw new Error('please pass the valid time');return this.totalTimeInSecond=parseInt(g),this.timebarInstance},f.prototype.getWidth=function(){return this.width},f.prototype.setWidth=function(g){if(!g)throw new Error('please pass the valid width');return this.width=g,g=this.getActualWidth()+57,a('.timeline-cover').css('width',g+'px'),this.timebarInstance},f.prototype.getActualWidth=function(){let g=this.width;return g=parseInt(g.replace(/px|%/g,'')),g},f.prototype.getCuepoints=function(){return this.cuepoints},f.prototype.formatTime=function(g){return this.toDuration(g)},f.prototype.addCuepoints=function(g){if(!g)throw new Error('please pass the valid time');if(g=parseInt(g),!this.cuepoints.includes(g))this.cuepoints.push(g),this.markCuepoints(g);else throw new Error('Cuepoint already exists');return this.timebarInstance},f.prototype.deleteSelectedCuepoints=function(){const g=this.cuepoints,h=[];if(a('.pointerSelected').each(function(){const j=a(this).attr('id');h.push(parseInt(j))}),h.length)this.cuepoints=g.filter(j=>!h.includes(j)),a('.pointerSelected').remove();else throw new Error('No Cuepoint is selected');return this.timebarInstance},f.prototype.updateSelectedCuepoint=function(g){const h=[];if(a('.pointerSelected').each(function(){const j=a(this).attr('id');h.push(parseInt(j))}),1<h.length)throw new Error('Please select only one cuepoint to update');return this.deleteSelectedCuepoints(),this.addCuepoints(g),this.timebarInstance},f.prototype.showHideCuepoints=function(g){if(!g)throw new Error('please pass a valid value');return this.parseBoolean(g)?a('.pointer').show():a('.pointer').hide(),this.timebarInstance},f.prototype.init=function(){let g=`<div class='timeline-cover'>
<div id='draggable'></div>
<div class='timeline-bar'>
<div class='steps-bar clearfix'></div>
</div>
</div>`;a(this.element).append(g),this.setWidth(this.width);let h=this.totalTimeInSecond/this.stepBars,j=0;for(let l=0;l<=this.stepBars;l++)a('.steps-bar').append(`<div class="step" data-time=${j}><span class="step-border"></span></div>`),j+=h;let k=this.totalTimeInSecond/this.timeIntervals;for(let l=0;l<=this.timeIntervals;l++){const m=this.toDuration(Math.round(k*l)),n=10*l+1;a(`.step:nth-child(${n})`).append(`<span class="time-instant">${m}</span>`)}this.markCuepoints(this.cuepoints),this.showCuepoints||a('.pointer').hide()},f.prototype.toDuration=function(g){let h=Math.floor(g/3600),j=Math.floor((g-3600*h)/60),k=g-3600*h-60*j;10>h&&(h='0'+Math.round(h)),10>j&&(j='0'+Math.round(j)),10>k&&(k='0'+Math.round(k));const l=0==h?j+':'+k:h+':'+j+':'+k;return l},f.prototype.markCuepoints=function(g=[]){const h=this,j=Array.isArray(g)?g:[g];a.each(j,function(k,l){const m=100*l/h.totalTimeInSecond;a('.timeline-bar').append(`<div class="pointer" style="left:${m}%" data-time="${l}"></div>`)})},f.prototype._barClicked=function(g,h){const k=a(g).offset(),l=h.pageX-k.left;a('.pointer').removeClass('pointerSelected'),a('#draggable').css({left:`${l}px`})},f.prototype._cuepointClicked=function(g,h){a(g).hasClass('pointerSelected')?a(g).removeClass('pointerSelected'):a(g).addClass('pointerSelected'),h.setSelectedTime(a(g).data('time')),'function'==typeof h.pointerClicked&&h.pointerClicked.call(g,h.getSelectedTime())},f.prototype.parseBoolean=function(g){return'true'===g.toLowerCase()},f}(),a.fn.timebar=function(e){return this.timebarInstance?this.timebarInstance.update(e||{}):this.timebarInstance=new b(this,e||{}),this.timebarInstance.init(),this.timebarInstance}})(jQuery);