Gists - JavaScript

On gists

Twitter plugin by JW

24.4.2018

JavaScript jQuery jQuery-plugins

twitter.js #

// Utility
if ( typeof Object.create !== 'function' ) {
	Object.create = function( obj ) {
		function F() {};
		F.prototype = obj;
		return new F();
	};
}

(function( $, window, document, undefined ) {
	var Twitter = {
		init: function( options, elem ) {
			var self = this;

			self.elem = elem;
			self.$elem = $( elem );

			self.url = 'https://api.twitter.com/1.1/search/tweets.json';

			self.search = ( typeof options === 'string' )
				? options
				: options.search;

			self.options = $.extend( {}, $.fn.queryTwitter.options, options );

			self.refresh( 1 );
		},

		refresh: function( length ) {
			var self = this;

			setTimeout(function() {
				self.fetch().done(function( results ) {
					results = self.limit( results.results, self.options.limit );

					self.buildFrag( results );

					self.display();

					if ( typeof self.options.onComplete === 'function' ) {
						self.options.onComplete.apply( self.elem, arguments );
					}

					if ( self.options.refresh ) {
						self.refresh();
					}
				});
			}, length || self.options.refresh );
		},

		fetch: function() {
			return $.ajax({
				url: this.url,
				data: { q: this.search },
				dataType: 'jsonp'
			});
		},

		buildFrag: function( results ) {
			var self = this;

			self.tweets = $.map( results, function( obj, i) {
				return $( self.options.wrapEachWith ).append ( obj.text )[0];
			});
		},

		display: function() {
			var self = this;

			if ( self.options.transition === 'none' || !self.options.transition ) {
				self.$elem.html( self.tweets ); // that's available??
			} else {
				self.$elem[ self.options.transition ]( 500, function() {
					$(this).html( self.tweets )[ self.options.transition ]( 500 );
				});
			}
		},

		limit: function( obj, count ) {
			return obj.slice( 0, count );
		}
	};

	$.fn.queryTwitter = function( options ) {
		return this.each(function() {
			var twitter = Object.create( Twitter );
			
			twitter.init( options, this );

			$.data( this, 'queryTwitter', twitter );
		});
	};

	$.fn.queryTwitter.options = {
		search: '@tutspremium',
		wrapEachWith: '<li></li>',
		limit: 10,
		refresh: null,
		onComplete: null,
		transition: 'fadeToggle'
	};

})( jQuery, window, document );

On gists

Twitter object - @Jeffrey Wawy

24.4.2018

JavaScript jQuery

index.html #

<!doctype html>
<html>
<head>
	<meta charset=utf-8>
	<title>Twitter</title>
	<style>
	body { width: 600px; margin: auto; }
	ul { list-style: none; }
	li { padding-bottom: 1em; }
	img { float: left; padding-right: 1em; }
	a { text-decoration: none; color: #333; }
	</style>
</head>
<body>

<ul id="biebster-tweets">
	<script id="tweets-template" type="text/x-handlebars-template">
		{{#each this}}
		<li>
			<img src="{{thumb}}" alt="{{author}}">
			<p><a href="{{url}}">{{tweet}}</a></p>
		</li>
		{{/each}}
	</script>		
</ul>


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

<script src="http://cloud.github.com/downloads/wycats/handlebars.js/handlebars-1.0.0.beta.6.js"></script>

<script>

(function() {

	var Twitter = {
		init: function( config ) {
			this.url = 'http://search.twitter.com/search.json?q=' + config.query + '&callback=?';
			this.template = config.template;
			this.container = config.container;

			this.fetch();
		},

		attachTemplate: function() {
			var template = Handlebars.compile( this.template );

			this.container.append( template( this.tweets ) );

		},

		fetch: function() {
			var self = this;

			$.getJSON( this.url, function( data ) {
				self.tweets = $.map( data.results, function( tweet ) {
					return {
						author: tweet.from_user,
						tweet: tweet.text,
						thumb: tweet.profile_image_url,
						url: 'http://twitter.com/' + tweet.from_user + '/status/' + tweet.id_str
					};
				});

				// For future lessons, research $.deferred, viewers. :)
				self.attachTemplate(); 
			});
		}
	};

	Twitter.init({
		template: $('#tweets-template').html(),
		container: $('#biebster-tweets'),
		query: 'Justin Bieber'
	});

})();

</script>


</body>
</html>

On gists

Jquery plugin with events

22.4.2018

JavaScript jQuery

demo.html #


What about using triggers? Does anyone know any drawback using them? The benefit is that all internal variables are accessible via the triggers, and the code is very simple.

See on jsfiddle.

Example usage
<div id="mydiv">This is the message container...</div>

<script>
    var mp = $("#mydiv").messagePlugin();

    // the plugin returns the element it is called on
    mp.trigger("messagePlugin.saySomething", "hello");

    // so defining the mp variable is not needed...
    $("#mydiv").trigger("messagePlugin.repeatLastMessage");
</script>

On gists

JS -OOP ways - SO + DJPW.cz

20.4.2018 • 8.8.2022 (aktualizováno)

JavaScript-OOP JavaScript

1.js #

// define the objects:
var objLit = {
  x: 0,
  y: 0,
  z: 0,
  add: function () {
    return this.x + this.y + this.z;
  }
};

var ObjCon = function(_x, _y, _z) {
  var x = _x; // private
  var y = _y; // private
  this.z = _z; // public
  this.add = function () {
    return x + y + this.z; // note x, y doesn't need this.
  };
};

// use the objects:
objLit.x = 3; 
objLit.y = 2; 
objLit.z = 1; 
console.log(objLit.add());    

var objConIntance = new ObjCon(5,4,3); // instantiate an objCon
console.log(objConIntance.add());
console.log((new ObjCon(7,8,9)).add()); // another instance of objCon
console.log(objConIntance.add()); // same result, not affected by previous line

On gists

Ul to select (for responsive navigation)

10.4.2018

JavaScript jQuery PHP Responsive

example.js #

$(function(){

    var select = $("select");
    $("nav a").each(function(){
        
        var $this = $(this);
        var text = $this.text();  
        var level = $this.parents("ul").length;
        var indent = '';
        if (level > 1)
        {
            indent = str_repeat("\u2013", level);
        }
        select.append('<option>'+indent + text+'</option>');
    
    
    });   



});


function str_repeat(string, times) {
  var repeatedString = "";
  while (times > 0) {
    repeatedString += string;
    times--;
  }
  return repeatedString;
}

On gists

Nested table rows (without nesting)

10.4.2018

JavaScript jQuery

nested.css #

.parent {
    color: green;
}
.child {
    color: blue;
}

On gists

is element in view while a scrolling?

9.4.2018

JavaScript jQuery

demo.html #

<h2>Scroll Down! &dArr;</h2>
<span></span>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>

On gists

jQuery - proxy

28.3.2018

JavaScript jQuery

jquery-proxy.js #

// immediately invoke fn
// nahrazka

 $('#myElement').click(function() {  
      (function(el){
         setTimeout(function() {
              // Problem! In this function "this" is not our element!
            el.addClass('colorme');
        }, 1000);
      })($(this)); // self executing function   
    });

On gists

form in popup

23.3.2018

JavaScript jQuery

form-in-poup.js #

$(document).ready(function() {
  $('#myform').submit(function() {
    window.open('', 'formpopup', 'width=400,height=400,resizeable,scrollbars');
    this.target = 'formpopup';
  });
});

On gists

JS - remove diacritics fn

19.3.2018

JavaScript Helpers-Filters-Plugins

make-url.js #

			function makeUrl(s)
			{

				var nodiac = { 'á': 'a', 'č': 'c', 'ď': 'd', 'é': 'e', 'ě': 'e', 'í': 'i', 'ň': 'n', 'ó': 'o', 'ř': 'r', 'š': 's', 'ť': 't', 'ú': 'u', 'ů': 'u', 'ý': 'y', 'ž': 'z' };
				s = s.toLowerCase();
			    var s2 = '';
			    for (var i=0; i < s.length; i++) {
			        s2 += (typeof nodiac[s.charAt(i)] != 'undefined' ? nodiac[s.charAt(i)] : s.charAt(i));
			    }

			    return s2;
			    //return s2.replace(/[^a-z0-9_]+/g, '-').replace(/^-|-$/g, '');
			}