/ Gists

Gists

On gists

Twitter plugin by JW

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

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

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

•
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

Sass functions cheat sheet

SCSS

sass-functions.md #

Sass Functions Cheat Sheet

  1. RGB Functions
  2. HSL Functions
  3. Opacity Functions
  4. Other Color Functions
  5. List Functions
  6. Map Functions
  7. Selector Functions
  8. String Functions
  9. Number Functions
  10. Introspection Functions
  11. Miscel­laneous Functions

RGB Functions

rgb(­$red, $green, $blue) Creates a color from red, green, and blue values.

rgba­($red, $green, $blue, $alpha) Creates a color from red, green, blue, and alpha values.

red(­$co­lor) Gets the red component of a color.

gree­n($­col­or) Gets the green component of a color.

blue­($c­olor) Gets the blue component of a color.

mix(­$co­lor1, $color2, [$weig­ht]) Mixes two colors together.

==========

HSL Functions

hsl(­$hue, $satur­ation, $light­ness) Creates a color from hue, satura­tion, and lightness values.

hsla­($hue, $satur­ation, $light­ness, $alpha) Creates a color from hue, satura­tion, lightness, and alpha values.

hue(­$co­lor) Gets the hue component of a color.

satu­rat­ion­($c­olor) Gets the saturation component of a color.

ligh­tne­ss(­$co­lor) Gets the lightness component of a color.

adju­st-­hue­($c­olor, $degre­es) Changes the hue of a color.

ligh­ten­($c­olor, $amount) Makes a color lighter.

dark­en(­$color, $amount) Makes a color darker.

satu­rat­e($­color, $amount) Makes a color more saturated.

desa­tur­ate­($c­olor, $amount) Makes a color less saturated.

gray­sca­le(­$co­lor) Converts a color to grayscale.

comp­lem­ent­($c­olor) Returns the complement of a color.

inve­rt(­$co­lor) Returns the inverse of a color.

==========

Opacity Functions

alph­a($­color) / opacit­y($­col­or) Gets the alpha component (opacity) of a color.

rgba­($c­olor, $alpha) Changes the alpha component for a color.

opac­ify­($c­olor, $amount) / fade-i­n($­color, $amount) Makes a color more opaque.

tran­spa­ren­tiz­e($­color, $amount) / fade-o­ut(­$color, $amount) Makes a color more transp­arent.

==========

Other Color Functions

Visit Sass Functions.

==========

List Functions

Visit Sass Functions.

==========

Map Functions

Visit Sass Functions.

==========

Selector Functions

sele­cto­r-n­est­($s­ele­cto­rs...) Nests selector beneath one another like they would be nested in the styles­heet.

sele­cto­r-r­epl­ace­($s­ele­ctor, $original, $repla­cem­ent) Replaces $original with $repla­cement within $selector.

More at Sass Functions.

==========

String Functions

unqu­ote­($s­tri­ng) Removes quotes from a string.

quot­e($­str­ing) Adds quotes to a string.

str-­len­gth­($s­tri­ng) Returns the number of characters in a string.

More at Sass Functions.

==========

Number Functions

perc­ent­age­($n­umb­er) Converts a unitless number to a percen­tage.

roun­d($­num­ber) Rounds a number to the nearest whole number.

ceil­($n­umb­er) Rounds a number up to the next whole number.

floo­r($­num­ber) Rounds a number down to the previous whole number.

abs(­$nu­mber) Returns the absolute value of a number.

min(­$nu­mbe­rs...) Finds the minimum of several numbers.

max(­$nu­mbe­rs...) Finds the maximum of several numbers.

rand­om(­[$l­imi­t]) Returns a random number.

==========

Introspection Functions

feat­ure­-ex­ist­s($­fea­ture) Returns whether a feature exists in the current Sass runtime.

vari­abl­e-e­xis­ts(­$na­me) Returns whether a variable with the given name exists in the current scope.

glob­al-­var­iab­le-­exi­sts­($n­ame) Returns whether a variable with the given name exists in the global scope.

func­tio­n-e­xis­ts(­$na­me) Returns whether a function with the given name exists.

mixi­n-e­xis­ts(­$na­me) Returns whether a mixin with the given name exists.

insp­ect­($v­alue) Returns the string repres­ent­ation of a value as it would be repres­ented in Sass.

type­-of­($v­alue) Returns the type of a value.

unit­($n­umb­er) Returns the unit(s) associated with a number.

unit­les­s($­num­ber) Returns whether a number has units.

comp­ara­ble­($n­umber1, $numbe­r2) Returns whether two numbers can be added, subtra­cted, or compared.

call­($name, $args…) Dynami­cally calls a Sass function.

==========

Miscel­laneous Functions

if($­con­dition, $if-true, $if-fa­lse) Returns one of two values, depending on whether or not $condition is true.

uniq­ue-­id() Returns a unique CSS identi­fier.

On gists

Nette: Ajaxové ovládání komponenty

Nette AJAX

readme.md #

Nette ajaxové komponenty a snippety

Instalace

  1. Nette sandbox: https://github.com/nette/sandbox
  2. Nette ajax: https://github.com/vojtech-dobes/nette.ajax.js
  3. nette.ajax.js a spinner.ajax.js přidáme do šablony @layout.latte
  4. Nahradíme soubory HomepagePresenteru
  5. Někam (např. app/components) umístíme komponentu
On gists

Ul to select (for responsive navigation)

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)

JavaScript jQuery

nested.css #

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

is element in view while a scrolling?

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

ghost-element-vertical-align.css

SCSS CSS trick

ghost-element-vertical-align.css #

/* This parent can be any width and height */
.block {
  text-align: center;

  /* May want to do this if there is risk the container may be narrower than the element inside */
  white-space: nowrap;
}
 
/* The ghost, nudged to maintain perfect centering */
.block:before {
  content: '';
  display: inline-block;
  height: 100%;
  vertical-align: middle;
  margin-right: -0.25em; /* Adjusts for spacing */
}

/* The element to be centered, can also be of any width and height */ 
.centered {
  display: inline-block;
  vertical-align: middle;
  width: 300px;
}