PHP Dosya Yöneticisi

/**
 * Progress Bar wrapper.
 * 
 * @author Htmlstream 
 * @version 1.0
 * @requires appear.js (v1.0.3)
 *
 */
;(function($){
	'use strict';

$.HSCore.components.HSProgressBar = {

/**
		 * 
		 * 
		 * @var Object _baseConfig
		 */
		_baseConfig : {
			bounds: -100,
			debounce: 10,
			time: 1000,
			fps: 60,
			rtl: false,
			direction: 'horizontal',
			useProgressElement: false,
			indicatorSelector: 'progress-bar-indicator',
			moveElementSelector: false,
			moveElementTo: 'currentPosition',
			onChange: function(value){},
			beforeUpdate: function(){},
			afterUpdate: function(){},
			onMoveElementChange: function(value){},
			beforeMoveElementUpdate: function(){},
			afterMoveElementUpdate: function(){}
		},

/**
		 * 
		 * 
		 * @var jQuery _pageCollection
		 */
		_pageCollection : $(),

/**
		 * Initialization of Progress Bar wrapper.
		 * 
		 * @param String selector (optional)
		 * @param Object config (optional)
		 *
		 * @return jQuery currentCollection - collection of initialized items.
		 */
		init: function(selector, config){

if(!(selector && $(selector).length)) return;

this.extendHorizontalProgressBar();
			this.extendVerticalProgressBar();

return this._initProgressBar(selector, config && $.isPlainObject(config) ? $.extend(true, {}, this._baseConfig, config) : this._baseConfig);

/**
		 * 
		 * Initialization of each Progress Bar of the page.
		 *
		 * @return undefined
		 */
		_initProgressBar: function(selector, config) {

var self = this,
					currentCollection = $();

appear({

bounds: config['bounds'],
				debounce: config['debounce'],

init: function() {

$(selector).each(function(i, el) {

var $this = $(el);

if(config['direction'] === 'horizontal') {

$this.data('ProgressBar', new self.HorizontalProgressBar($this, config));

}
						else {

$this.data('ProgressBar', new self.VerticalProgressBar($this, config));

}

currentCollection = currentCollection.add($this);
						self._pageCollection = self._pageCollection.add($this);

});

elements: function() {

return document.querySelectorAll(selector);

appear: function(el) {

// console.log( $(el).data('ProgressBar'), $(el).data('value') );

$(el).data('ProgressBar').update($(el).data('value'));

}

});

return currentCollection;

/**
		 * Constructor Function of Horizontal Progress Bar
		 * 
		 * @param jQuery element
		 * @param Object config
		 *
		 */
		HorizontalProgressBar: function(element, config) {

this.element = element;
			this.indicator = this.element.find( config.indicatorSelector );

this.config = config;
			this.moveElement = config['moveElementSelector'] ? element.parent().find(config['moveElementSelector']) : $();

if(this.moveElement.length) {

if(config['rtl']) {
					this.moveElement.css({
						'left': 'auto',
					 	'right': 0,
					 	'margin-right': this.moveElement.outerWidth() / -2
					});
				}
				else {
					this.moveElement.css({
					 	'left': 0,
					 	'margin-left': this.moveElement.outerWidth() / -2
					});
				}

}

if(this.config.useProgressElement) {
				this.element.data( 'value', this.element.attr( 'value' ) );
				this.element.attr('value', 0);
			}
			else {
				this.element.data(
					'value', 
					this.indicator.length ? Math.round( this.indicator.outerWidth() / this.element.outerWidth() * 100 ) : 0
				);
				this.indicator.css('width', '0%');
			}

/**
		 * Constructor Function of Vertical Progress Bar
		 * 
		 * @param jQuery element
		 * @param Object config
		 *
		 */
		VerticalProgressBar: function(element, config) {

this.element = element;
			this.config = config;
			this.indicator = element.find(config['indicatorSelector']);

if(!this.indicator.length) return;

element.data('value', parseInt(this.indicator.css('height'), 10) / this.indicator.parent().outerHeight() * 100);
			this.indicator.css('height', 0);

/**
		 * Extends HorizontalProgressBar.
		 *
		 * @return undefined
		 */
		extendHorizontalProgressBar: function() {

/**
			 * Sets new value of the Progress Bar.
			 * 
			 * @param Number value
			 *
			 * @return undefined
			 */
			this.HorizontalProgressBar.prototype.update = function(value) {

var self = this;

if( this.config.useProgressElement ) {

var fps = (this.config['time'] / this.config['fps']),
							iterationValue = parseInt(value / fps, 10),
							counter = 0,
							self = this;

if(iterationValue == 0) iterationValue = 1;

this.config.beforeUpdate.call(this.element);
					if(this.moveElement.length) this.config.beforeMoveElementUpdate.call(this.moveElement);

if(self.config.moveElementSelector && self.config['moveElementTo'] == 'end') {

var mCounter = 0,
								mIterationValue = parseInt(100 / fps, 10);

if(mIterationValue == 0) mIterationValue = 1;

var mCounterId = setInterval(function() {

self.moveSubElement(mCounter+=mIterationValue);
							if(self.moveElement.length) self.config.onMoveElementChange.call(self.moveElement, mCounter+=mIterationValue);

if(mCounter > 100) {
								clearInterval(mCounterId);
								self.moveSubElement(100);
								if(self.moveElement.length) self.config.afterMoveElementUpdate.call(self.moveElement);
							}

}, fps);

}

this.element.data('intervalId', setInterval(function(){

var currentValue = counter += iterationValue;

self.element.attr('value', currentValue);
						self.config.onChange.call(self.element, currentValue);

if(self.config.moveElementSelector && self.config['moveElementTo'] == 'currentPosition') self.moveSubElement(currentValue);

if(counter > value) {

self.element.attr('value', value);
							if(self.config.moveElementSelector && self.config['moveElementTo'] == 'currentPosition') self.moveSubElement(value);
							clearInterval(self.element.data('intervalId'));
							self.config.afterUpdate.call(self.element);

}

}, fps));
				}
				else {
					if( this.indicator.length ) {
						this.indicator.stop().animate({
							'width': value + '%'
						}, {
							duration: self.config.time,
							complete: function() {
								self.config.afterUpdate.call(self.element);
							}
						});
					}
				}

};

/**
			 * 
			 * 
			 * @param 
			 *
			 * @return 
			 */
			this.HorizontalProgressBar.prototype.moveSubElement = function(value, duration) {

if(!this.moveElement.length) return;

var self = this;

this.moveElement.css(this.config['rtl'] ? 'right' : 'left', value + '%');

};

/**
		 * Extends VerticalProgressBars.
		 * 
		 *
		 * @return undefined
		 */
		extendVerticalProgressBar: function() {

/**
			 * Sets new value of the Progress Bar.
			 * 
			 * @param Number value
			 *
			 * @return undefined
			 */
			this.VerticalProgressBar.prototype.update = function(value) {

this.indicator.stop().animate({
					height: value + '%'
				});
				
			}

/**
		 * Returns full collection of all initialized progress bars.
		 * 
		 *
		 * @return jQuery _pageCollection
		 */
		get: function() {

return this._pageCollection;

/**
		 * Returns API of the progress bar by index in collection.
		 * 
		 * @param Number index
		 *
		 * @return HorizontalProgressBar | VerticalProgressBar
		 */
		getAPI: function(index) {

if(this._pageCollection.eq(index).length) return this._pageCollection.eq(index).data('ProgressBar');

return null;

}

};

})(jQuery);

İptal

📁 PHP Dosya Yöneticisi

📝 hs.progress-bar.js

📝 hs.progress-bar.js

📝 Yeniden Adlandır

🔐 Dosya İzinleri (chmod)