Gists - JavaScript

On gists

Use event with function and data // ukazka pouziti eventu, funkce, data

16.9.2015 • 8.8.2022 (aktualizováno)

JavaScript jQuery

use-events-with-data.js #

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8" />
	<title>TEST</title>
	<script src="jquery.js"></script>
	<style>
	


	</style>
</head>
<body>




<div id="result"></div>


<button id="button1" data-color="red">Červené</button>
<button id="button2" data-color="green">Zelené</button>




<script>

//------------------------------------------------------------
//1 zpusob - data atribut
$('button').on('click', function(){

	$("#result").text($(this).text()).css("color", $(this).data('color'));
});




//------------------------------------------------------------
//2 zpusob - vlastni funkci
var handler = function(text, color) {

	$("#result").text(text).css("color", color);
};

$('#button1').on('click', function(){
	handler('Červené', 'red'); // misto Červené muzu pouzit $(this).text(), ale demonstruji ukazku parametru viz dale
});

$('#button2').on('click', function(){
	handler('Zelené', 'green'); // misto Červené muzu pouzit $(this).text(), ale demonstruji ukazku parametru viz dale
});


//------------------------------------------------------------
//3 zpusob - vlastni funkci ale ne pomoci anonymni, ale trosku ugly
var handler = function(text, color) {

	return function() {

		$("#result").text(text).css("color", color);
	}
};

$('#button1').on('click', handler('Červené', 'red'));
$('#button2').on('click', handler('Zelené', 'green'));


//------------------------------------------------------------
//4 zpusob pres user data / bindovani / trigger
$("button").on("setColor", function(e, color, txt){

	$("#result").text(txt).css("color", color);

});

$("#button1").on("click", function(){

	$(this).trigger("setColor", ['red', 'Červené']);
});

$("#button2").on("click", function(){

	$(this).trigger("setColor", ['green', 'Zelené']);
});



//------------------------------------------------------------
//5 event data
var handler = function(e) {
	
	$("#result").text(e.data.text).css("color", e.data.color);
	
};

$("#button1").on("click", {text:'Červené', color:'red'}, handler);
$("#button2").on("click", {text:'Zelené', color:'green'}, handler);



//------------------------------------------------------------
// 6 event, ale ne v data ale rovnou do e.nazev
$("#button1").on("click", function(e){
	$("#result").text(e.text).css("color", e.color);
});

$("#button1").trigger({type:'click', text:'Červené', color:'red'});




//------------------------------------------------------------
// 7 $.event object, vlastni data soucasti eventu, @link: https://jsbin.com/memoriyate/edit?html,js


$('body').on('logged logged2', function(e) {

	console.log(e);
});

// 1 moznost
var event = jQuery.Event( "logged" );
event.user1 = "a";
event.pass1 = "b";
$( "body" ).trigger( event );

// 2 moznost
$( "body" ).trigger({
  type:"logged2",
  user:"a2",
  pass:"b2"
});



</script>

</body>
</html>

On gists

PHP - Sanitize a multidimensional array

6.8.2015 • 29.8.2015 (aktualizováno)

JavaScript

php-sanitize-multidimensional-ar #

<?php

/**
 * Sanitize a multidimensional array
 *
 * @uses htmlspecialchars
 *
 * @param (array)
 * @return (array) the sanitized array
 */
function purica_array ($data = array()) {
	if (!is_array($data) || !count($data)) {
		return array();
	}

	foreach ($data as $k => $v) {
		if (!is_array($v) && !is_object($v)) {
			$data[$k] = htmlspecialchars(trim($v));
		}
		if (is_array($v)) {
			$data[$k] = purica_array($v);
		}
	}

	return $data;
}

On gists

event.js

26.3.2015 • 29.8.2015 (aktualizováno)

JavaScript

example.js #

$(window).on('resizeEnd', function() {
    console.log('IMMA RESIZED 100 MILLI-FOCKING-SECONDS AGO');
});

On gists

Resize window with timeout (for responsive testing)

26.3.2015 • 29.8.2015 (aktualizováno)

JavaScript

resize-timeout3.js #

 
$(window).resize( function() {
if( timer ) {
clearTimeout(timer);
}
 
var timer = setTimeout( function() {
// On Resize Code Goes Here
}, 100 );
});

On gists

gulpfile.js

3.3.2015 • 29.8.2015 (aktualizováno)

JavaScript

gulpfile.js #

var gulp = require('gulp');
var less = require('gulp-less');
var sourcemaps = require('gulp-sourcemaps');
var rename = require('gulp-rename');
var neon = require('neon-js');
var uglify = require('gulp-uglify');
var concat = require('gulp-concat');
var fs = require('fs');
var livereload = require('gulp-livereload');
var gulpFilter = require('gulp-filter');
var gulpif = require('gulp-if');
var autoprefixer = require('gulp-autoprefixer');
var runSequence = require('run-sequence');
var gzip = require('gulp-gzip');
var tar = require('gulp-tar');
var path = require('path');
var addsrc = require('gulp-add-src');
var shell = require('gulp-shell');

var options = {
	autoprefix: false,
	sourcemaps: true,
	compress: false
};

var files = ['app/**', 'temp/.*', 'vendor/**', 'www/**', 'www/webtemp/.*', 'composer.*', 'console', 'update',
	'!dist', '!www/vendor/**', '!app/config/config.local.neon', '!www/webtemp/css*', '!www/webtemp/js*', '!**/tests/**',
	'!www/images/**', 'www/images/.*',
	'!www/assets/**/*.less', '!www/dist/**/*.map', '!vendor/*/*/vendor/**', '!vendor/*/*/tests/**', '!vendor/*/*/Tests/**',
	'!vendor/videlalvaro/php-amqplib/PhpAmqpLib/Tests/**', '!vendor/symfony/*/*/*/*/Tests/**', '!vendor/**/composer.lock',
	'!vendor/*/*/docs/**'
];

var buildLess = function (module) {
	return gulp.src('www/assets/' + module + '/style/main.less')
		.pipe(gulpif(options.sourcemaps, sourcemaps.init()))
		.pipe(less({
			relativeUrls: true,
			compress: options.compress,
			rootpath: '/assets/' + module + '/style/'
		}))
		.pipe(rename(function (path) {
			path.basename = "style";
		}))
		.pipe(gulpif(options.sourcemaps, sourcemaps.write('./', {
			includeContent: true,
			sourceRoot: "/assets/" + module + "/style/"
		})))
		.pipe(gulpif(options.autoprefix, autoprefixer({cascade: false})))
		.pipe(gulp.dest('./www/dist/' + module))
		.pipe(gulpFilter(['*.css']))
		.pipe(livereload());
};

gulp.task('less:front', function () {
	return buildLess('front');
});
gulp.task('less:admin', function () {
	return buildLess('admin');
});

gulp.task('less', ['less:front', 'less:admin']);

var buildJs = function (module) {
	var content = fs.readFileSync("./www/assets/" + module + "/js.neon", 'utf8');
	var data = neon.decode(content);

	return gulp.src(data.values(), {base: 'www/'})
		.pipe(sourcemaps.init())
		.pipe(uglify({compress: options.compress, mangle: options.compress}))
		.pipe(concat("output.js"))
		.pipe(sourcemaps.write('./', {
			sourceRoot: "/"
		}))
		.pipe(gulp.dest('www/dist/' + module))
		.pipe(livereload());

};

gulp.task('js:admin', function () {
	return buildJs('admin');
});
gulp.task('js:front', function () {
	return buildJs('front');
});

gulp.task('js', ['js:front', 'js:admin']);

gulp.task('watch', function () {
	livereload.listen();

	gulp.watch('www/assets/front/**/*.less', ['less:front']);
	gulp.watch(['www/**/*.less', '!www/assets/front/**/*'], ['less']);
	gulp.watch(['www/assets/front/**/*.js'], ['js:front']);
	gulp.watch(['www/**/*.js', '!www/dist/**/*.js', '!www/webtemp/**/*.js', '!www/assets/front/**/*'], ['uglify']);
});


gulp.task('compress', function () {
	return gulp.src(files, {base: '.'})
		.pipe(addsrc('www/vendor/font-awesome/fonts/**', {base: '.'}))
		.pipe(tar('update.tar'))
		.pipe(gzip())
		.pipe(gulp.dest('./dist'));
});

gulp.task('optimize', function () {
	return gulp.src(['composer.json'])
		.pipe(shell('composer dump-autoload -o'));
});

gulp.task('build', function () {
	options.compress = true;
	options.autoprefix = true;
	options.sourcemaps = false;
	runSequence(
		['js', 'less', 'optimize'],
		'compress'
	);
});

On gists

HTML v IE 8, klasické i vlastní značky jako elementy

19.2.2015 • 29.8.2015 (aktualizováno)

JavaScript

fn.js #

<!--[if lte IE 8]>
<script>
var znacky = "article aside audio bb canvas datagrid datalist details dialog eventsource figure footer header hgroup mark menu meter nav output progress section time video";
znacky.replace(/\w+/g, function(znacka){document.createElement(znacka)});
</script>
<![endif]-->

On gists

Sort a list alphabetically

29.1.2014 • 29.8.2015 (aktualizováno)

JavaScript jQuery jQuery-plugins

JS: Sort a list alphabetically #

$(function() {
    $.fn.sortList = function() {
    var mylist = $(this);
    var listitems = $('li', mylist).get();
    listitems.sort(function(a, b) {
        var compA = $(a).text().toUpperCase();
        var compB = $(b).text().toUpperCase();
        return (compA < compB) ? -1 : 1;
    });
    $.each(listitems, function(i, itm) {
        mylist.append(itm);
    });
   }

    $("ul#demoOne").sortList();

});

On gists

JS: text makes safe

30.10.2013 • 26.12.2015 (aktualizováno)

JavaScript

gistfile1.txt #

function makeSafe(thisText, allowSpace){
        var w = "!@#$%^&*()+=[]\\\';,./{}|\":<>?";
        var s = 'abcdefghijklmnopqrstuvwxyz0123456789-';
        var x = new Array('àáâãäå', 'çč', 'èéêëě','š','ř','ž','á', 'ìíîï', 'ñ', 'ðóòôõöø', 'ùúûüů', 'ýÿ',' ','.');
        var r = new Array('a', 'c', 'e','s','r','z','a', 'i', 'n', 'o', 'u', 'y','-','-');
 
        if(allowSpace){
                s = s + ' ';
        }
 
        thisText = thisText.toLowerCase();
        var newText = new Array();
 
        for (i = 0; i < thisText.length; i++){
                thisChar = thisText.charAt(i);
                if(w.indexOf(thisChar) == -1){
                        if(s.match(''+thisChar+'')){
                                newText[i] = thisChar;
                        }else{
                                for (j = 0; j < x.length; j++){
                                        if(x[j].match(thisChar)){
                                                newText[i] = r[j];
                                        }
                                }
                        }
                }
        }
 
        return newText.join('');
}

On gists

JavaScript: only num in input

11.10.2013 • 25.12.2015 (aktualizováno)

JavaScript

gistfile1.js #

<input onkeypress="return !isNaN(String.fromCharCode(event.charCode || event.keyCode))">

On gists

JavaScript: string fns prototypes

10.10.2013 • 25.12.2015 (aktualizováno)

JavaScript-OOP JavaScript Helpers-Filters-Plugins

js-fns-prototypes.js #

// stripslashes    
String.prototype.stripslashes = function(){
    return this.replace(/<.*?>/g, '');
    };
    String.prototype.htmlspecialchars = function(){
    var str = this.replace(/&/g, '&amp;');
    str = str.replace(/</g, '&lt;');
    str = str.replace(/>/g, '&gt;');
    str = str.replace(/"/g, '&quot;');
    return str;
    };

// htmlspecialchars
    var str = '<b>my personal website:</b> ';
    str += '<a href="http://www.jonasjohn.de/">jonasjohn.de</a>';
    document.write("Original string (html): '" + str + "'<br/><br/>");
    var str_no_html = str.stripslashes();
    document.write("- String without HTML tags: '" + str_no_html + "'<br/>");
    var str_hsc = str.htmlspecialchars();
    document.write("- String with converted HTML tags: '" + str_hsc + "'");