Jump to content

Featured Replies

Posted
comment_152456

Добра, делаю расширение для браузера с форумом ipb. Поставил кнопку с прогресбаром, но она по итогу никак не запускает нужную ссылку.  Сам же браузер кричит, что ошибок в js дофига, хоть целиком удалять.. Что не так я делаю и как мне установить открытие ссылки по окончанию работы бара?

<a id="actionButton" class="progress-button" data-loading="Working.." data-finished="Finished!" data-type="background-bar">PLAY GEN</a></div>
$(document).ready(function(){

	$('.progress-button').progressInitialize();

	$('#submitButton').click(function(e){
		e.preventDefault();

		$(this).progressTimed(2);
	});

	$('#actionButton').click(function(e){
		e.preventDefault();
		$(this).progressTimed(2);
	});

	$('#generateButton').one('click', function(e){
		e.preventDefault();

		// It can take a callback

		var button = $(this);
		button.progressTimed(3, function(){


			button.click(function(){
				alert('Showing how a callback works!');
			});
		});
	});


	var controlButton = $('#controlButton');

	controlButton.click(function(e){
		e.preventDefault();

		controlButton.progressStart();
	});

	$('.command.increment').click(function(){


		controlButton.progressIncrement();
	});

	$('.command.set-to-1').click(function(){

		controlButton.progressSet(1);
	});

	$('.command.set-to-50').click(function(){
		controlButton.progressSet(50);
	});

	$('.command.finish').click(function(){

		controlButton.progressFinish();
	});

});


(function($){


	$.fn.progressInitialize = function(){

		return this.each(function(){

			var button = $(this),
				progress = 0;

			var options = $.extend({
				type:'background-horizontal',
				loading: 'Loading..',
				finished: 'Done!'
			}, button.data());

			button.attr({'data-loading': options.loading, 'data-finished': options.finished});

			var bar = $('<span class="tz-bar ' + options.type + '">').appendTo(button);


			button.on('progress', function(e, val, absolute, finish){

				if(!button.hasClass('in-progress')){

					bar.show();
					progress = 0;
					button.removeClass('finished').addClass('in-progress')
				}

				if(absolute){
					progress = val;
				}
				else{
					progress += val;
				}

				if(progress >= 100){
					progress = 100;
				}

				if(finish){

					button.removeClass('in-progress').addClass('finished');

					bar.delay(500).fadeOut(function(){

						// Trigger the custom progress-finish event
						button.trigger('progress-finish');
						setProgress(0);
					});

				}

				setProgress(progress);
			});

			function setProgress(percentage){
				bar.filter('.background-horizontal,.background-bar').width(percentage+'%');
				bar.filter('.background-vertical').height(percentage+'%');
			}

		});

	};

	$.fn.progressStart = function(){

		var button = this.first(),
			last_progress = new Date().getTime();

		if(button.hasClass('in-progress')){
			// Don't start it a second time!
			return this;
		}

		button.on('progress', function(){
			last_progress = new Date().getTime();
		});


		var interval = window.setInterval(function(){

			if( new Date().getTime() > 5000+last_progress){

				button.progressIncrement(5);
			}

		}, 500);

		button.on('progress-finish',function(){
			window.clearInterval(interval);
		});

		return button.progressIncrement(10);
	};

	$.fn.progressFinish = function(){
		return this.first().progressSet(100);
	};

	$.fn.progressIncrement = function(val){

		val = val || 10;

		var button = this.first();

		button.trigger('progress',[val])

		return this;
	};

	$.fn.progressSet = function(val){
		val = val || 10;

		var finish = false;
		if(val >= 100){
			finish = true;
		}

		return this.first().trigger('progress',[val, true, finish]);
	};


	$.fn.progressTimed = function(seconds, cb){

		var button = this.first(),
			bar = button.find('.tz-bar');

		if(button.is('.in-progress')){
			return this;
		}


		bar.css('transition', seconds+'s linear');
		button.progressSet(99);

		window.setTimeout(function(){
			bar.css('transition','');
			button.progressFinish();

			if($.isFunction(cb)){
				cb();
			}

		}, seconds*10000);
	};

})(jQuery);

 

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.


Guest
Ответить в этой теме...

Последние посетители 0

  • No registered users viewing this page.