1. Christian Salazar
  2. imagegallery1

Commits

christiansalazar  committed f024099

first release

  • Participants
  • Branches master

Comments (0)

Files changed (8)

File .gitignore

View file
+*.swp

File ImageGallery1.php

View file
+<?php
+/**
+ * ImageGallery1
+ *
+ *	Presents an image list (css & jQuery based) containing a delete control
+ *	and a select control for each image in order to mark it as the default 
+ *	image for your selected model or simply to indicate the image deletion.
+ *
+ *	Delete button:
+ *	Is a button located at the bottom-right of each image, when pressed an
+ *	action is fired, is your responsability to delete the referenced image.
+ *
+ *	Select radio button:	
+ *	Is located at the left-bottom of each image, when clicked an action is
+ *	fired and is your responsability to make it the default image for your 
+ *	model.
+ *
+ *	the action form required in your controller is as follow:	
+ *	
+ *		public function actionMyAction($modelid, $id, $action){
+ *			// ..do something based on 'action'..
+ *			if($action == 'select') { ..mark the image $id as default..  } 
+ *			if($action == 'delete') { ... delete the image ref by $id... }
+ *		}
+ *
+ *	as an example usage:
+ *
+ *	$this->widget('ext.imagegallery1.ImageGallery',array(
+ *		'images'=>array("<img alt='120' src='bla'>",...more images....),
+ *		'action'=>array('/site/myaction'),	
+ *		'modelId'=>'article12',		// $model->primarykey (as an example)
+ *		'selectedImageId'=>'120',	// the ID for your image...any unique ID
+ *		'onSuccess'=>'function(data){  }',
+ *		'onError'=>'function(e){ alert(e);  }',
+ *	));
+ *
+ *
+ *
+ * @uses CWidget
+ * @author Christian Salazar <christiansalazarh@gmail.com> 
+ * @license BSD LICENSE http://opensource.org/licenses/bsd-license.php
+ */
+class ImageGallery1 extends CWidget {
+
+	public $id;
+	public $images;	// image tag array, identified by its ALT tag
+	public $action;	// array url
+	public $selectedImageId; // the default image marked as selected.
+	public $modelId;	// passed back to the action as 'modelid' URL argument
+	public $confirmDeleteMessage='Confirma eliminar esta imagen ?';
+	public $selectTitle = 'Marque para indicar que es la imagen por defecto';
+
+	public $onSuccess;
+	public $onError;
+	private $_baseUrl;
+
+	public function init(){
+		parent::init();
+		if($this->id == null)
+			$this->id = 'imagegallery10';
+		if($this->onSuccess == null)
+			$this->onSuccess = "function(){}";
+		if($this->onError == null)
+			$this->onError = "function(){}";
+	}
+
+	public function run(){
+		$this->_prepararAssets();
+		echo 
+"
+<div id={$this->id} class='img1-holder'>
+";
+
+	$loading = $this->_baseUrl.'/loading.gif';
+	$delete  = $this->_baseUrl.'/delete.png';
+
+foreach($this->images as $img)
+	echo 
+"
+<div class='img1-item'>
+	<div class='img1-image'>{$img}</div>
+	<div class='img1-control'>
+		<input title='{$this->selectTitle}' type='radio' name='img1def' value=''>
+		<img class='wait' src='{$loading}'>
+		<img class='delete' src='{$delete}'>
+	</div>
+</div>
+";
+
+echo "
+</div>
+";
+		$options = CJavaScript::encode(array(
+			'confirmDeleteMessage'=>$this->confirmDeleteMessage,
+			'action'=>CHtml::normalizeUrl($this->action),
+			'selectedid'=>$this->selectedImageId,
+			'modelid'=>$this->modelId,
+			'id'=>$this->id,
+			'onSuccess'=>new CJavaScriptExpression($this->onSuccess),
+			'onError'=>new CJavaScriptExpression($this->onError),
+		));
+		Yii::app()->getClientScript()->registerScript("imagegallery1_corescript"
+				,"new ImageGallery1({$options})");
+
+	}// end run()
+	public function _prepararAssets(){
+		$localAssetsDir = dirname(__FILE__) . '/assets';
+		$this->_baseUrl = Yii::app()->getAssetManager()->publish(
+				$localAssetsDir);
+        $cs = Yii::app()->getClientScript();
+        $cs->registerCoreScript('jquery');
+		foreach(scandir($localAssetsDir) as $f){
+			$_f = strtolower($f);
+			if(strstr($_f,".swp"))
+				continue;
+			if(strstr($_f,".js"))
+				$cs->registerScriptFile($this->_baseUrl."/".$_f);
+			if(strstr($_f,".css"))
+				$cs->registerCssFile($this->_baseUrl."/".$_f);
+		}
+	}
+}

File README.md

View file
+Image Gallery1
+==============
+
+by:
+
+Christian Salazar. christiansalazarh@gmail.com	@yiienespanol, dic. 2012.
+
+![Screen Capture]
+(https://bitbucket.org/christiansalazarh/imagegallery1/downloads/screenshot.png "Screen Capture")
+
+[http://opensource.org/licenses/bsd-license.php](http://opensource.org/licenses/bsd-license.php "http://opensource.org/licenses/bsd-license.php")
+
+[Repository at Bit Bucket !](https://bitbucket.org/christiansalazarh/imagegallery1/ 
+ "Repository at Bit Bucket !")
+
+#Requirement: 
+
+Yii  1.1.11
+
+
+#What it does ?
+
+This widget Presents an image list (css & jQuery based) containing a delete 
+icon and a select radio button for each image passed in the 'image' argument,
+when a user press this buttons your controller is informed via ajax action and
+manipulates the selected image (mark it as default image for your model or
+simply delete the image, in server side of course).
+
+The Delete button:
+Is a button located at the bottom-right of each image, when pressed an
+action is fired, is your responsability to delete the referenced image on
+server side.
+
+The Select radio button:	
+Is located at the left-bottom of each image, when clicked an action is
+fired and is your responsability to make it the default image for your 
+model.
+
+#Usage
+
+## Insert and configure the Widget.
+
+~~~
+[php]
+$this->widget('ext.imagegallery1.ImageGallery',array(
+	'images'=>array("<img alt='120' src='bla'>",...more images....),
+	'action'=>array('/site/myaction'),	
+	'modelId'=>'article12',		// $model->primarykey (as an example)
+	'selectedImageId'=>'120',	// the ID for your image...any unique ID
+	'onSuccess'=>'function(data){  }',
+	'onError'=>'function(e){ alert(e);  }',
+));
+~~~
+
+## Handling the request.
+
+~~~
+[php]
+	/**
+	 	the widget invokes this action whenever a user press the delete
+		button or the select radio button.
+
+		arguments:
+	
+		$action:	'delete' or 'select'.
+		$modelid:	the same value passed to the widget in 'modelId'.
+		$id:		the unique id image identificator.
+
+		you must act in response to $action.
+	 */
+	public function actionMyAction($modelid, $id, $action){
+		// ..do something based on the $action argument
+		/	
+		if($action == 'select') { ..mark the image $id as default..  } 
+		if($action == 'delete') { ... delete the image ref by $id... }
+	}
+~~~
+

File assets/delete.png

Added
New image

File assets/imagegallery1.css

View file
+.img1-holder {
+	overflow: auto;
+}
+.img1-item {
+	overflow: auto;
+	float: left;
+	margin-right: 10px;
+	margin-bottom: 10px;
+	border-radius: 5px;
+	border: 3px solid gray;
+	padding: 5px;
+	background-color: #ddd;	
+}
+.img1-control img.delete {
+	cursor: pointer;
+	float: right;
+}
+.img1-control img.wait {
+	display: none;
+}
+

File assets/imagegallery1.js

View file
+// el codigo JS del widget
+//
+var ImageGallery1 = function(options){
+	var divMayor = $('#'+options.id);
+	var ajaxcmd = function(action,postdata,callback){
+		var result=false;
+		var nocache=function(){
+			var dateObject = new Date();
+			var uuid = dateObject.getTime();
+			return "&nocache="+uuid;
+		}
+		jQuery.ajax({
+			url: action+nocache(),
+			type: 'post',
+			async: true,
+			contentType: "application/json",
+			data: postdata,
+			success: function(data, textStatus, jqXHR){
+				result = data;
+				if(callback != null)
+					callback(true, data);
+			},
+			error: function(jqXHR, textStatus, errorThrown){
+				callback(false, jqXHR.responseText);
+				return false;
+			},
+		});
+		return result;
+	}
+
+	var control_image = function(img, input, id, control){
+		var wait = img.parent().parent().find('img.wait');
+		wait.show();
+		input.attr('disabled','disabled');
+		input.data('busy',true);
+		img.data('busy',true);
+		ajaxcmd(options.action+'&modelid='+options.modelid
+				+'&id='+id+'&action='+control, '',
+		function(ok, data){
+			if(ok){
+				options.onSuccess(data);	
+			}else{
+				options.onError(data);
+			}
+			wait.hide();
+			input.attr('disabled',null);
+			input.data('busy',false);
+			img.data('busy',false);
+			if(ok && (control=='delete')){
+				var div = img.parent().parent();
+				div.remove();
+			}else{
+				if(ok && (control == 'select')){
+					// ?
+				}
+			}
+		});
+	}
+
+	divMayor.find('input').each(function(){
+		var input = $(this);
+		input.click(function(){
+			var img = $(this).parent().parent().find('.img1-image img');
+			var id = img.attr('alt');
+			if(img.data('busy')==true)
+				return;
+			control_image(img, $(this), id,'select');
+		});		
+	});
+
+	divMayor.find('img.delete').each(function(){
+		var delimg = $(this);
+		delimg.click(function(){
+			var img = $(this).parent().parent().find('.img1-image img');
+			var input = $(this).parent().parent().find('.img1-image input');
+			var id = img.attr('alt');
+			if(img.data('busy')==true)
+				return;
+			if(confirm(options.confirmDeleteMessage)){
+				control_image(img,input,id,'delete');
+			}
+		});		
+	});
+
+	// mark default image at startup
+	divMayor.find('.img1-item').each(function(){
+		var id = $(this).find('.img1-image img').attr('alt');
+		if(id == options.selectedid){
+			var input = $(this).find('.img1-control input');
+			input.attr('checked','checked');
+		}
+	});		
+
+
+};

File assets/loading.gif

Added
New image

File screenshot.png

Added
New image