Gists
On gists
JavaScript-OOP
JavaScript
JS constructor + init immediately
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
jQuery
Multiple animation with one finish callback
demo.js #
$(document).ready(function () {
animate([$('#one'), $('#two'), $('#three')], finished);
});
function finished() {
$('body').append('Finished');
}
function animate(list, callback) {
if (list.length === 0) {
callback();
return;
}
$el = list.shift();
$el.animate({left: '+=200'}, 1000, function () {
animate(list, callback);
});
}
On gists
PHP
DateTime
DateTimeTest.php #
<?php
require_once __DIR__ . '/DateTime.php';
class DateTimeTest extends \PHPUnit_Framework_TestCase
{
public function providerSetDate()
{
$now = new \MyNamespace\DateTime();
return array(
array('2014-02-28', 31, 2),
array('2014-02-01', 1, 2),
array('2014-06-30', 31, 6),
array($now->format('Y-m-d'), null, null, null),
);
}
/**
* @test
* @dataProvider providerSetDate
*/
public function setDate($result, $day, $month, $year = '2014')
{
$dateTime = new \MyNamespace\DateTime();
$dateTime->setDate($year, $month, $day);
$this->assertEquals($result, $dateTime->format('Y-m-d'));
}
public function providerModify()
{
return array(
array('2014-02-28', '0 day 0 month 0 year'),
array('2014-01-28', 'next month'),
array('2014-01-28', 'next months'),
array('2014-01-02', '+1 month', '2014-02-02'),
array('2014-01-31', '1 months'),
array('2014-03-31', '-1 month'),
array('2012-02-29', '24 month'),
array('2016-02-29', '-24 months'),
array('2014-02-27', 'next day'),
array('2014-02-27', '1 day'),
array('2014-02-27', '+1 day'),
array('2013-02-01', '-1 day next month next year'),
array('2013-01-27', '1 day 1 month 1 year'),
array('2015-04-01', '-1 day -1 month -1 year'),
array('2011-12-26', '2 day 2 month 2 year'),
array('2011-12-31', '2 month 2 year'),
);
}
/**
* @test
* @dataProvider providerModify
*/
public function modify($date, $shift, $result = '2014-02-28')
{
$dateTime = new \MyNamespace\DateTime($date);
$dateTime->modify($shift);
$this->assertEquals($result, $dateTime->format('Y-m-d'));
}
/**
* @test
* @expectedException PHPUnit_Framework_Error_Warning
*/
public function modifyError()
{
$dateTime = new \MyNamespace\DateTime();
$dateTime->modify('2 month sdfg year');
}
}
On gists
Quantity queries
•
CSS
CSS trick
examples.css #
/*
@see: https://www.hongkiat.com/blog/quantity-queries-css-quantity-aware/
*/
/* "At-least" query */
ul li:nth-last-child(n+5),
ul li:nth-last-child(n+5) ~ li {
background-color: orange;
}
/* "At-most" query */
ul li:nth-last-child(-n+5):first-child,
ul li:nth-last-child(-n+5):first-child ~ li {
background-color: orange;
}
/* "Between" query */
ul li:nth-last-child(n+5):nth-last-child(-n+6):first-child,
ul li:nth-last-child(n+5):nth-last-child(-n+6):first-child ~ li {
background-color: orange;
}
/* OR */
/* https://quantityqueries.com/ */
/* at-least 2 */
li:nth-last-child(n+2), li:nth-last-child(n+2) ~ li { }
/* at-most 2 */
li:nth-last-child(-n+2):first-child, li:nth-last-child(-n+2):first-child ~ li { }
/* at least / at most 2 - 4 */
li:nth-last-child(n+2):nth-last-child(-n+4):first-child, li:nth-last-child(n+2):nth-last-child(-n+4):first-child ~ li { }
On gists
JavaScript
JSON
local/session storage - get/set object wrapper
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
•
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
JavaScript
jQuery.stringify() utility
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
JavaScript
jQuery
Events - target/currentTarget/delegateTarget
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
JavaScript
jQuery
PubSub events
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>