Gists - JavaScript

On gists

Jquery tiny slider - binding via events

16.11.2018

JavaScript jQuery jQuery-plugins

slider.js #

(function($) {
  $.fn.slideshow = function(options) {


  return this.each(function() {
    var $img = $(this),
      current = 0;

		  function show(index) {
		  var total = options.images.length;

		  while(index < 0)
      {
		    index += total;
        
      }
		  while(index >= total)
      {
		    index -= total;
        
      }
		  current = index;
		  $img.attr('src', options.images[index]);
		}

		function prev() {
		  show(current - 1);
		}

		function next() {
		  show(current + 1);
		}
    
      $img.bind('prev', prev)
      .bind('next', next)
      .bind('goto',function(e, index) {
  			show( index );
		});


    });



   
  };
})(jQuery);

On gists

Formulář jako objekt - můj výtvor

14.11.2018

JavaScript-OOP JavaScript

formjs-object-my.js #


	(function() {
 
		var Form = {
			init: function(config) 
			{
				this.form            = config.form;
				this.mandatoryFields = this.form.find('input[name="name"], input[name="phone"], input[name="email"], input[name="date"], input[name="time"], input[name="persons"]');
				this.url             = this.form.attr('action');
				this.submitButton    = this.form.find('button');
				this.binds();
			},

			binds: function()
			{
				var self = this;
				this.submitButton.on('click', function(e){
					e.preventDefault();
					var formData = self.form.serialize();
					self.dispatch(formData);
				});
			},
			formFieldCleaner(formObject)
			{ 
				$(":input", formObject).not(":button, :submit, :reset, :hidden")
									   .val("")
									   .removeAttr("checked")
									   .removeAttr("selected"); 
			},
			showErrors: function(error)
			{
				var self = this;

				this.mandatoryFields.removeClass('-error');
				$('#form-message-success').html('')
										  .hide();
										  
				$('#form-message-error').show()
										.html(error.msg.join('<br />'));

				$.each(error.missingField, function(){

					self.form.find('input[name="'+this+'"]')
					              .addClass('-error');
				});
			

			},
			showSuccess: function(msg)
			{
				this.mandatoryFields.removeClass('-error');	
				this.formFieldCleaner(this.form);
				$('#form-message-error').html('')
										.hide();
										
				$('#form-message-success').show()
										  .html(msg)
										  .delay(5000)
										  .fadeOut(800);
			},
			dispatch: function(formData) 
			{
		
				
				var self = this;
				var xhr = $.post(this.url, formData);

				xhr.done(function(json){
					
					json = JSON.parse(json);

					// chyba
					if (json.error.state)
					{
						self.showErrors(json.error);
					}
					else
					{
						self.showSuccess(json.success.message);
					}


				});
			}
		};

		Form.init({
			form: $('#reservation-form')
		});

		})();

On gists

Is element in viewport?

9.11.2018

JavaScript Helpers-Filters-Plugins

is-in-viewport.js #

/**
 * Check if DOM element is in browsers view port
 * @param el The element
 * @return boolean
 */
function isInViewport(el) {
    var rect = el.getBoundingClientRect();

    return (
        rect.bottom >= 0 &&
        rect.right >= 0 &&

        rect.top <= (
            window.innerHeight ||
            document.documentElement.clientHeight) &&

        rect.left <= (
            window.innerWidth ||
            document.documentElement.clientWidth)
    );
}

On gists

Slick slider with thumbs

19.10.2018

JavaScript jQuery

example.js #

// https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.5.9/slick.min.js
// //cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js

 $('.slider-for').slick({
   slidesToShow: 1,
   slidesToScroll: 1,
   arrows: false,
   fade: true,
   asNavFor: '.slider-nav'
 });
 $('.slider-nav').slick({
   slidesToShow: 3,
   slidesToScroll: 1,
   asNavFor: '.slider-for',
   dots: true,
   focusOnSelect: true
 });

 $('a[data-slide]').click(function(e) {
   e.preventDefault();
   var slideno = $(this).data('slide');
   $('.slider-nav').slick('slickGoTo', slideno - 1);
 });

On gists

JS constructor + init immediately

13.6.2018

JavaScript-OOP JavaScript

demo.js #

1)
var Abc = function(aProperty,bProperty){
    this.aProperty = aProperty;
    this.bProperty = bProperty;
    this.init = function(){
        // Do things here.
    }
    this.init();
}; 
var currentAbc = new Abc(obj,obj);


2)
var Abc = function(aProperty,bProperty){
   function privateInit(){ console.log(this.aProperty);}   
   this.aProperty = aProperty;
   this.bProperty = bProperty;

   privateInit.apply(this);
};


3)
var Abc = function(aProperty,bProperty){
    this.aProperty = aProperty;
    this.bProperty = bProperty;

    //init
    (function () {
        // Perform some operation
    }.call(this));
}; 
var currentAbc = new Abc(obj,obj);

On gists

local/session storage - get/set object wrapper

12.5.2018

JavaScript JSON

get-setObject.js #

Storage.prototype.setObject = function(key, value) {
    this.setItem(key, JSON.stringify(value));
}

Storage.prototype.getObject = function(key) {
    var value = this.getItem(key);
    return value && JSON.parse(value);
}

On gists

Closures in JavaScript

11.5.2018 • 12.5.2018 (aktualizováno)

JavaScript

in-loop.js #

// https://diskuse.jakpsatweb.cz/?action=vthread&forum=8&topic=103393

for(var i=0; stylNameArray.length>i; i++) {
   (function(){
     var n = i;
     neco[i].onclick = function() {
      zmenaStylu("styl_pozadi_oken_0" + n);
    }
   })();
} 


for(var i=0; stylNameArray.length>i; i++) {
   (function(i){
     neco[i].onclick = function() {
      zmenaStylu("styl_pozadi_oken_0" + i);
    }
   })(i);
}

On gists

jQuery.stringify() utility

11.5.2018

JavaScript

jQuery.stringify.js #


/**
 * converted stringify() to jQuery plugin.
 * serializes a simple object to a JSON formatted string.
 * Note: stringify() is different from jQuery.serialize() which URLEncodes form elements

 * UPDATES:
 *      Added a fix to skip over Object.prototype members added by the prototype.js library
 * USAGE:
 *  jQuery.ajax({
 *	    data : {serialized_object : jQuery.stringify (JSON_Object)},
 *		success : function (data) {
 *
 *		}
 *   });
 *
 * CREDITS: http://blogs.sitepointstatic.com/examples/tech/json-serialization/json-serialization.js
 */
jQuery.extend({
    stringify  : function stringify(obj) {
        var t = typeof (obj);
        if (t != "object" || obj === null) {
            // simple data type
            if (t == "string") obj = '"' + obj + '"';
            return String(obj);
        } else {
            // recurse array or object
            var n, v, json = [], arr = (obj && obj.constructor == Array);

            for (n in obj) {
                v = obj[n];
                t = typeof(v);
                if (obj.hasOwnProperty(n)) {
                    if (t == "string") v = '"' + v + '"'; else if (t == "object" && v !== null) v = jQuery.stringify(v);
                    json.push((arr ? "" : '"' + n + '":') + String(v));
                }
            }
            return (arr ? "[" : "{") + String(json) + (arr ? "]" : "}");
        }
    }
});

On gists

Events - target/currentTarget/delegateTarget

10.5.2018

JavaScript jQuery

example.html #

// CLICK on button

<div class="box">
    <button>Button</button>
</div>


$( "body" ).on( "click", ".box", function(e) {
    e.delegateTarget; // body
    e.currentTarget;  // .box
    e.target;         // button
});

On gists

PubSub events

27.4.2018

JavaScript jQuery

2.html #

<!doctype html>
<html>
<head>
	<meta charset=utf-8>
	<title>Custom Events</title>
</head>
<body>

<h1>Hi There</h1>


<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>


<script>
	
// PubSub
(function( $ ) {
	var o = $( {} );
	$.each({
		trigger: 'publish',
		on: 'subscribe',
		off: 'unsubscribe'
	}, function( key, val ) {
		jQuery[val] = function() {
			o[key].apply( o, arguments );
		};
	});
})( jQuery );
$.getJSON('http://search.twitter.com/search.json?q=dogs&callback=?', function( results) { 
	$.publish( 'twitter/results', results );
});
// ...
$.subscribe( 'twitter/results', function( e, results ) {
	$('body').html(
		$.map( results.results, function( obj, index) {
			return '<li>' + obj.text + '</li>';
		}).join('')
	);
});
</script>

</body>
</html>