Category Archives: Plugin

Ajax Upload Plugin – Uploadifive

Document:

http://www.uploadify.com/documentation/

Usage:

<?php 
for($i = 1; $i <= 6; $i++): 
	$file_name = 'file' . $i;
?>
<div class="file-wrap">
	<button class="button  bt-delete" type="button" data-project-id="<?=val($project, 'id')?>" data-index="<?=$i-1?>">Delete</button>
	
	<input id="file_upload<?=$i?>" name="file_upload" type="file" multiple="true" class="bt-select uploadifive">
	
	<span class="file_name"></span>

	<?php 
	if(isset($files[$i-1]) == false || $files[$i-1] == false){
		$class = 'off';
		$url = '#';
		$name = '';
	}else{
		$class = '';
		$url = $files[$i-1];
		$name = basename($url);
	}
	?>
	<a href="<?=$url?>" class="file-link <?=$class?>" target="_blank"><?=$name?></a>

	<div id="queue<?=$i?>" class="queue"></div>
</div>
<?php endfor; ?>

<?php

for($i = 1; $i <= 6; $i++):

$file_name = 'file' . $i;

<button class="button bt-delete" type="button" data-project-id="<?=val($project, 'id')?>" data-index="<?=$i-1?>">Delete</button>

<input id="file_upload<?=$i?>" name="file_upload" type="file" multiple="true" class="bt-select uploadifive">

<?php

if(isset($files[$i-1]) == false || $files[$i-1] == false){

$class = 'off';

$url = '#';

$name = '';

}else{

$class = '';

$url = $files[$i-1];

$name = basename($url);

}

<a href="<?=$url?>" class="file-link <?=$class?>" target="_blank"><?=$name?></a>

<div id="queue<?=$i?>" class="queue"></div>

</div>

<?php endfor; ?>

var upload_app = function(){

    function init(){
        init_uploadfive();

		$('.file-wrap').each(function(index){
			var $wrap = $(this);

			var $link = $wrap.find('.file-link');
			//console.log($link.hasClass('off'));
			if($link.hasClass('off') == true){//no uploaded file
				upload_switch('on', $wrap);
			}else{
				upload_switch('off', $wrap);
			}
		});

		$('.bt-delete').on('click', function(e){
			var $this = $(this);

			if(confirm('Are you sure?')){
				delete_file($this.data('project-id'), $this.data('index'));
			}
		});
    }

    function init_uploadfive(){
    	<?php $timestamp = time();?>
    	$('.file-wrap').each(function(index){
			var $wrap = $(this);

	    	$wrap.find('.uploadifive').uploadifive({
				'auto'             : true,
				'buttonClass': 'button', 
				'height': 50, 
				'width': 165, 
				'queueID'          : $wrap.find('.queue').attr('id'),
				'buttonText': 'Select', 
				'checkScript'      : false,
				'formData'         : {
				   'timestamp' : '<?php echo $timestamp;?>',
				   'token'     : "<?php echo md5('unique_salt' . $timestamp);?>", 
				   'pid': '<?=$project->id?>', 
				   'index': index
				},
				'uploadScript'     : '<?=BASE_URL?>api/members_f/upload_ex_files/',
				'onAddQueueItem' : function(file) {
					$wrap.find('.file_name').show().html(file.name);
				},
				'onUploadComplete' : function(file, data) { 
					//console.log(file);//File info
					//console.log(data);//From server

					data = $.parseJSON(data);
					if(data == null){
						alert(data);
						return false;
					}

					if(data.status == 'fail'){
						alert(data.message);
						return false;
					}

					var res = data.response;

					$wrap.find('.uploadifive').uploadifive('clearQueue');
					$wrap.find('.file_name').hide();
					$wrap.find('.file-link').show().html(file.name).attr('href', res.file_url);
					$wrap.find('.uploadifive-button').hide();
					$wrap.find('.bt-delete').show();
				}
			});
		});
    }

    function upload_switch(mode, $wrap){
    	if(mode == 'on'){
    		$wrap.find('.uploadifive-button').show();
			$wrap.find('.bt-delete').hide();
			$wrap.find('.file-link').hide();
    	}else{
    		$wrap.find('.uploadifive-button').hide();
			$wrap.find('.bt-delete').show();
			$wrap.find('.file-link').show();
    	}
    }

    function delete_file(pid, index){
		var params = {
			pid: pid, 
			index: index
		}

		$.post(base_url + 'api/members_f/delete_ex_files', params, function(data){
			//console.log(data);
			if(typeof data.status == 'undefined'){
				alert(data);
				return;
			}

			if(data.status == 'fail'){
				alert(data.message);
				return;
			}
			
			var $bt = $('.bt-delete[data-index="' + index + '"]');
			var $wrap = $('.file-wrap').has($bt);
			upload_switch('on', $wrap);
		});
	}
 
    return {
        init: init
    }
}();

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

var upload_app = function(){

function init(){

init_uploadfive();

$('.file-wrap').each(function(index){

var $wrap = $(this);

var $link = $wrap.find('.file-link');

//console.log($link.hasClass('off'));

if($link.hasClass('off') == true){//no uploaded file

upload_switch('on', $wrap);

}else{

upload_switch('off', $wrap);

}

});

$('.bt-delete').on('click', function(e){

var $this = $(this);

if(confirm('Are you sure?')){

delete_file($this.data('project-id'), $this.data('index'));

}

});

}

function init_uploadfive(){

<?php $timestamp = time();?>

$('.file-wrap').each(function(index){

var $wrap = $(this);

$wrap.find('.uploadifive').uploadifive({

'auto' : true,

'buttonClass': 'button',

'height': 50,

'width': 165,

'queueID' : $wrap.find('.queue').attr('id'),

'buttonText': 'Select',

'checkScript' : false,

'formData' : {

'timestamp' : '<?php echo $timestamp;?>',

'token' : "<?php echo md5('unique_salt' . $timestamp);?>",

'pid': '<?=$project->id?>',

'index': index

'uploadScript' : '<?=BASE_URL?>api/members_f/upload_ex_files/',

'onAddQueueItem' : function(file) {

$wrap.find('.file_name').show().html(file.name);

'onUploadComplete' : function(file, data) {

//console.log(file);//File info

//console.log(data);//From server

data = $.parseJSON(data);

if(data == null){

alert(data);

return false;

}

if(data.status == 'fail'){

alert(data.message);

return false;

}

var res = data.response;

$wrap.find('.uploadifive').uploadifive('clearQueue');

$wrap.find('.file_name').hide();

$wrap.find('.file-link').show().html(file.name).attr('href', res.file_url);

$wrap.find('.uploadifive-button').hide();

$wrap.find('.bt-delete').show();

}

});

}

function upload_switch(mode, $wrap){

if(mode == 'on'){

$wrap.find('.uploadifive-button').show();

$wrap.find('.bt-delete').hide();

$wrap.find('.file-link').hide();

}else{

$wrap.find('.uploadifive-button').hide();

$wrap.find('.bt-delete').show();

$wrap.find('.file-link').show();

}

function delete_file(pid, index){

var params = {

pid: pid,

index: index

}

$.post(base_url + 'api/members_f/delete_ex_files', params, function(data){

//console.log(data);

if(typeof data.status == 'undefined'){

alert(data);

return;

}

if(data.status == 'fail'){

alert(data.message);

return;

}

var $bt = $('.bt-delete[data-index="' + index + '"]');

var $wrap = $('.file-wrap').has($bt);

upload_switch('on', $wrap);

});

}

return {

init: init

}

}();

Select2 – Best select plugin

Official:

https://select2.github.io/

How to set value:

$field.val(value);
$field.trigger('change.select2');

1 2	$field.val(value); $field.trigger('change.select2');

Multiple Select (Like tags)

<select class="select2 multiple" multiple="multiple">
<option value="1">1</option>
<option value="2">2</option>
</select>

</select>

$('.select2.multiple').select2("destroy");//If necessary
$('.select2.multiple').select2();

1 2	$('.select2.multiple').select2("destroy");//If necessary $('.select2.multiple').select2();

Responsive Grid Layout (拼貼版型)

http://megafoliopro.themepunch.com/

Sliders

Slick
http://kenwheeler.github.io/slick/

bxSlider Advance

var sliders = {};
$('.page-news-slider').each(function(index){
	var $this = $(this);

	sliders['slider_' + index] = $this.bxSlider({
		controls: false,
		slideWidth: 345,
		moveSlides: 1,
		minSlides: 1,
		maxSlides: 1,
		slideMargin: 0,
		auto: true
	});
});

//Some other place
sliders['slider_0'].reloadSlider();

//Or
sliders['slider_0'].destroySlider();

var sliders = {};

$('.page-news-slider').each(function(index){

var $this = $(this);

sliders['slider_' + index] = $this.bxSlider({

controls: false,

slideWidth: 345,

moveSlides: 1,

minSlides: 1,

maxSlides: 1,

slideMargin: 0,

auto: true

});

//Some other place

sliders['slider_0'].reloadSlider();

//Or

sliders['slider_0'].destroySlider();

jquery cookie plugin

https://github.com/carhartl/jquery-cookie

//7 days
$.cookie('name', 'value', { expires: 7, path: '/' });

//Read
$.cookie('name');

//Remove
$.removeCookie('name'); // => true

//7 days

$.cookie('name', 'value', { expires: 7, path: '/' });

//Read

$.cookie('name');

//Remove

$.removeCookie('name'); // => true

TinyMCE

function init_editor(){
	tinymce.init({
		selector: "textarea.tinymce", 
		plugins: [
         "advlist autolink link image lists charmap print preview hr anchor pagebreak spellchecker",
         "searchreplace wordcount visualblocks visualchars code fullscreen insertdatetime media nonbreaking",
         "save table contextmenu directionality emoticons template paste textcolor responsivefilemanager"
		], 
		toolbar: "insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image | preview media fullpage fullscreen | forecolor backcolor responsivefilemanager", 
		//external_filemanager_path: "/assets/admin/plugins/filemanager/",
		external_filemanager_path: base_url + "assets/admin/plugins/filemanager/",
		filemanager_title:"Responsive Filemanager" ,
		external_plugins: { 
			"filemanager" : "plugins/responsivefilemanager/plugin.min.js"
		}, 
		relative_urls: false, 
		remove_script_host : false, 
		link_class_list: [
	        {title: 'None', value: ''},
	        {title: '按鈕', value: 'custom mybtn'}
	    ], 
	    //Prevent replacing space with &nbsp;
	    entity_encoding: 'raw',
	    style_formats: [
			{ title: 'H1', block: 'h1', classes:'custom-style'},
			{ title: 'H2', block: 'h2', classes:'custom-style'},
			{ title: 'H3', block: 'h3', classes:'custom-style'},
			{ title: 'H4', block: 'h4', classes:'custom-style'},
			{ title: 'H5', block: 'h5', classes:'custom-style'},
			{ title: 'H6', block: 'h6', classes:'custom-style'}
			//{ title: '區塊小標', block: 'h3', styles: {color: '#9458e4'}},
			//{ title: '底線紫色標題', block: 'h2', classes:'custom underline-subject' }
		]
	});
	//console.log(base_url);
}

function init_editor(){

tinymce.init({

selector: "textarea.tinymce",

plugins: [

"advlist autolink link image lists charmap print preview hr anchor pagebreak spellchecker",

"searchreplace wordcount visualblocks visualchars code fullscreen insertdatetime media nonbreaking",

"save table contextmenu directionality emoticons template paste textcolor responsivefilemanager"

//external_filemanager_path: "/assets/admin/plugins/filemanager/",

external_filemanager_path: base_url + "assets/admin/plugins/filemanager/",

filemanager_title:"Responsive Filemanager" ,

external_plugins: {

"filemanager" : "plugins/responsivefilemanager/plugin.min.js"

relative_urls: false,

remove_script_host : false,

link_class_list: [

{title: 'None', value: ''},

{title: '按鈕', value: 'custom mybtn'}

//Prevent replacing space with  

entity_encoding: 'raw',

style_formats: [

{ title: 'H1', block: 'h1', classes:'custom-style'},

{ title: 'H2', block: 'h2', classes:'custom-style'},

{ title: 'H3', block: 'h3', classes:'custom-style'},

{ title: 'H4', block: 'h4', classes:'custom-style'},

{ title: 'H5', block: 'h5', classes:'custom-style'},

{ title: 'H6', block: 'h6', classes:'custom-style'}

//{ title: '區塊小標', block: 'h3', styles: {color: '#9458e4'}},

//{ title: '底線紫色標題', block: 'h2', classes:'custom underline-subject' }

]

});

//console.log(base_url);

}

Predefined Link Classes

Full Screen Plugin

http://www.tinymce.com/wiki.php/Plugin:fullscreen

jQuery Flot Chart – Click Handler

	show_group_report: function(data){
		var wrap = this;
		var d1 = data.data;
		var labels = data.labels;

		$.plot($("#group_report"), [
			{
				label: 'Clicks', 
				data:d1, 
				bars: {show:true}
			}
		], {
			series: {
				//lines:{show:true}, 
				//points: {show:true}
			}, 
			xaxis: {
				ticks: labels, 
				tickDecimals: 0, 
				tickFormatter: function(val, axis){
					return val + 'test';
				}
			}, 
			grid: {
	            hoverable: true, 
	            clickable: true
	        }, 
	        tooltip: true, 
	        tooltipOpts: {
	        	//%s: label | X: %x | Y: %y | 3rd value of data array: %ct(Custom tooltip)
	            content: '%ct: %y clicks',
	            shifts: {
	                x: -60,
	                y: 25
	            }
	        }
		});

		$("#group_report").bind("plotclick", function (event, pos, item) {
			if (item) {
				var index = item.dataIndex;
				var data = item.series.data[index];
				//data[index] example: [1, "174", "成田機場@blog", "3537"]
				//console.log(data);
				$('#md_group h3').html(data[2]);
				wrap.get_group_daily_data(data[3], $("#from_date").val(), $("#to_date").val());
			}
		});
	}

show_group_report: function(data){

var wrap = this;

var d1 = data.data;

var labels = data.labels;

$.plot($("#group_report"), [

{

label: 'Clicks',

data:d1,

bars: {show:true}

}

], {

series: {

//lines:{show:true},

//points: {show:true}

xaxis: {

ticks: labels,

tickDecimals: 0,

tickFormatter: function(val, axis){

return val + 'test';

}

grid: {

hoverable: true,

clickable: true

tooltip: true,

tooltipOpts: {

//%s: label | X: %x | Y: %y | 3rd value of data array: %ct(Custom tooltip)

content: '%ct: %y clicks',

shifts: {

x: -60,

y: 25

}

});

$("#group_report").bind("plotclick", function (event, pos, item) {

if (item) {

var index = item.dataIndex;

var data = item.series.data[index];

//data[index] example: [1, "174", "成田機場@blog", "3537"]

//console.log(data);

$('#md_group h3').html(data[2]);

wrap.get_group_daily_data(data[3], $("#from_date").val(), $("#to_date").val());

}

});

}

tinyMap to handle Google Map

http://app.essoduke.org/tinyMap/

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script src="js/jquery.tinyMap.min.js"></script>

<div id="gmap" style="width: 100%; height: 440px"></div>

Javascript

function init_map(){
	map = $('#gmap');
	map.tinyMap({
		zoom: 3,
		scrollwheel: false,
	    marker: [
	        {addr: ['33.882648', '130.879787'], text: 'Kyomachi Shop', 'id': 'Kyomachi Shop'},
	        {addr: ['33.885827', '130.880040'], text: 'Uomachi Shop', 'id': 'Uomachi Shop'},
	        {addr: ['33.885411', '130.882519'], text: 'COLET Shop', 'id': 'COLET Shop'},
	        {addr: ['25.042333', '121.544913'], text: 'Taipei SOGO Branch', 'id': 'Taipei SOGO Branch'},
	        {addr: ['25.040868', '121.565605'], text: 'Taipei HanKyu Branch', 'id': 'Taipei HanKyu Branch'},
	        {addr: ['1.274893', '103.843510'], text: '100AM Shop', 'id': '100AM Shop'},
	        {addr: ['1.301506', '103.838549'], text: '313somerset Shop', 'id': '313somerset Shop'},
	        {addr: ['31.205884', '121.467854'], text: 'SunMoonLightCenter', 'id': 'SunMoonLightCenter'},
			{addr: ['31.233118', '121.411928'], text: 'GLOBAL HARBOR', 'id': 'GLOBAL HARBOR'}
		]
	});


	$('#gmapcontrols button').on('click', function(e){
		var obj = $(this),
	        id = obj.text(),
	        m = {},
	        marker = {},
	        markers = [],
	        i = 0;
	    // 取得 tinyMap 實例
	    m = map.data('tinyMap');
	    // 取得所有標記
	    markers = m._markers;
	    close_all_markers();

	    for (i = 0; i < markers.length; i += 1) {
	        marker = markers[i];
	        // 若標記 id 符合則開啟 infoWindow
	        if (id === marker.id) {
	            marker.infoWindow.open(m.map, marker);
	            // 移動地圖
	            m.map.panTo(marker.position);
	            map.tinyMap('modify', {zoom:15})
	            break;
	        }
	    }
	});
}

function close_all_markers(){
	// 取得 tinyMap 實例
    m = map.data('tinyMap');
    // 取得所有標記
    markers = m._markers;

    for (i = 0; i < markers.length; i++) {
        marker = markers[i];
        // 關閉所有 infoWindow
        marker.infoWindow.close();
    }
}

function init_map(){

map = $('#gmap');

map.tinyMap({

zoom: 3,

scrollwheel: false,

marker: [

{addr: ['33.882648', '130.879787'], text: 'Kyomachi Shop', 'id': 'Kyomachi Shop'},

{addr: ['33.885827', '130.880040'], text: 'Uomachi Shop', 'id': 'Uomachi Shop'},

{addr: ['33.885411', '130.882519'], text: 'COLET Shop', 'id': 'COLET Shop'},

{addr: ['25.042333', '121.544913'], text: 'Taipei SOGO Branch', 'id': 'Taipei SOGO Branch'},

{addr: ['25.040868', '121.565605'], text: 'Taipei HanKyu Branch', 'id': 'Taipei HanKyu Branch'},

{addr: ['1.274893', '103.843510'], text: '100AM Shop', 'id': '100AM Shop'},

{addr: ['1.301506', '103.838549'], text: '313somerset Shop', 'id': '313somerset Shop'},

{addr: ['31.205884', '121.467854'], text: 'SunMoonLightCenter', 'id': 'SunMoonLightCenter'},

{addr: ['31.233118', '121.411928'], text: 'GLOBAL HARBOR', 'id': 'GLOBAL HARBOR'}

]

});

$('#gmapcontrols button').on('click', function(e){

var obj = $(this),

id = obj.text(),

m = {},

marker = {},

markers = [],

i = 0;

// 取得 tinyMap 實例

m = map.data('tinyMap');

// 取得所有標記

markers = m._markers;

close_all_markers();

for (i = 0; i < markers.length; i += 1) {

marker = markers[i];

// 若標記 id 符合則開啟 infoWindow

if (id === marker.id) {

marker.infoWindow.open(m.map, marker);

// 移動地圖

m.map.panTo(marker.position);

map.tinyMap('modify', {zoom:15})

break;

}

});

}

function close_all_markers(){

// 取得 tinyMap 實例

m = map.data('tinyMap');

// 取得所有標記

markers = m._markers;

for (i = 0; i < markers.length; i++) {

marker = markers[i];

// 關閉所有 infoWindow

marker.infoWindow.close();

}

ckEditor Usages

Get value using jQuery:

CKEDITOR.instances['content'].getData()

1	CKEDITOR.instances['content'].getData()

Reference:

http://stackoverflow.com/questions/3799317/how-can-i-get-content-of-ckeditor-using-jquery

Using ckEditor in bootstrap modal:

$.fn.modal.Constructor.prototype.enforceFocus = function () {
    var $modalElement = this.$element;
    $(document).on('focusin.modal', function (e) {
        var $parent = $(e.target.parentNode);
        if ($modalElement[0] !== e.target && !$modalElement.has(e.target).length
            // add whatever conditions you need here:
            &&
            !$parent.hasClass('cke_dialog_ui_input_select') && !$parent.hasClass('cke_dialog_ui_input_text')) {
            $modalElement.focus()
        }
    })
};

$.fn.modal.Constructor.prototype.enforceFocus = function () {

var $modalElement = this.$element;

$(document).on('focusin.modal', function (e) {

var $parent = $(e.target.parentNode);

if ($modalElement[0] !== e.target && !$modalElement.has(e.target).length

// add whatever conditions you need here:

!$parent.hasClass('cke_dialog_ui_input_select') && !$parent.hasClass('cke_dialog_ui_input_text')) {

$modalElement.focus()

}

})

};

Reference:

http://stackoverflow.com/questions/22637455/how-to-use-ckeditor-in-a-bootstrap-modal

Rex's Personal Site

This site is built on WordPress and contains personal notes, photos and videos

Category Archives: Plugin

Ajax Upload Plugin – Uploadifive

Select2 – Best select plugin

Multiple Select (Like tags)

Responsive Grid Layout (拼貼版型)

Sliders

bxSlider Advance

jquery cookie plugin

TinyMCE

Predefined Link Classes

Full Screen Plugin

jQuery Flot Chart – Click Handler

tinyMap to handle Google Map

ckEditor Usages

Get value using jQuery:

Using ckEditor in bootstrap modal:

September 2017
M	T	W	T	F	S	S
« Aug
				1	2	3
4	5	6	7	8	9	10
11	12	13	14	15	16	17
18	19	20	21	22	23	24
25	26	27	28	29	30