Permalink
Browse files

Initial commit

  • Loading branch information...
0 parents commit eb97efb5d874126decdd18fb5929da55b416fb8d @Toumal committed Jun 24, 2011
Showing with 2,163 additions and 0 deletions.
  1. +108 −0 jCropWidget.php
  2. +50 −0 readme.txt
  3. BIN resources/Jcrop.gif
  4. +35 −0 resources/jquery.Jcrop.css
  5. +1,600 −0 resources/jquery.Jcrop.js
  6. +246 −0 resources/jquery.Jcrop.min.js
  7. +123 −0 resources/jquery.color.js
  8. +1 −0 views/jcrop.php
@@ -0,0 +1,108 @@
+<?php
+/**
+ * Displays an image with jCrop sizing controls
+ */
+class jCropWidget extends CWidget {
+
+ /**
+ * Specifies the image URL that is displayed in the <img> tag
+ * @var string $imageUrl
+ */
+ public $imageUrl;
+
+ /**
+ * The alt text for the image
+ * @var string $imageAlt
+ */
+ public $imageAlt;
+
+ /**
+ * The id of the form input element for the X coordinate
+ * @var int $formElementX
+ */
+ public $formElementX;
+
+ /**
+ * The id of the form input element for the Y coordinate
+ * @var int $formElementY
+ */
+ public $formElementY;
+
+ /**
+ * The id of the form input element for the width value
+ * @var int $formElementWidth
+ */
+ public $formElementWidth;
+
+ /**
+ * The id of the form input element for the height value
+ * @var int $formElementHeight
+ */
+ public $formElementHeight;
+
+ /**
+ * key => value options that are rendered into the <img> tag
+ * @var array
+ */
+ public $htmlOptions = array();
+
+ /**
+ * key => options passed to JCrop
+ * @var array
+ */
+ public $jCropOptions = array();
+
+ /**
+ * counter to keep track of the global variables and IDs
+ * @var int
+ */
+ private static $_COUNT = 1;
+
+
+ public function init() {
+ }
+
+ public function run() {
+
+ $assetPrefix = Yii::app()->assetManager->publish(dirname(__FILE__).'/resources', true, 0, defined('YII_DEBUG'));
+
+ Yii::app()->clientScript->registerScriptFile(Yii::app()->assetManager->publish(Yii::getPathOfAlias('application.components.assets').'/sfanimate.class.js'));
+
+ Yii::app()->clientScript->registerScriptFile($assetPrefix.'/jquery.Jcrop.min.js');
+ Yii::app()->clientScript->registerScriptFile($assetPrefix.'/jquery.color.js');
+ Yii::app()->clientScript->registerCssFile($assetPrefix.'/jquery.Jcrop.css');
+
+ $count = self::$_COUNT;
+
+ if(array_key_exists('id', $this->htmlOptions)) {
+ $id = $this->htmlOptions['id'];
+ } else {
+ $id = 'yii-jcrop';
+ }
+ $id.= '-'.$count;
+ $this->htmlOptions['id'] = $id;
+
+ $this->jCropOptions['onChange'] = 'js:updateCoords'.$count;
+ $this->jCropOptions['onSelect'] = 'js:updateCoords'.$count;
+ $options=CJavaScript::encode($this->jCropOptions);
+ $js = <<<EOF
+jQuery("#{$id}").Jcrop({$options});
+EOF;
+ $updateCoordsCode = <<<EOF
+ function updateCoords{$count}(c)
+ {
+ jQuery('#{$this->formElementX}').val(c.x);
+ jQuery('#{$this->formElementY}').val(c.y);
+ jQuery('#{$this->formElementWidth}').val(c.w);
+ jQuery('#{$this->formElementHeight}').val(c.h);
+ };
+EOF;
+
+ Yii::app()->clientScript->registerScript('updateCoords'.$count,$updateCoordsCode, CClientScript::POS_BEGIN);
+ Yii::app()->clientScript->registerScript('Yii.'.get_class($this).'#'.$id, $js, CClientScript::POS_LOAD);
+ $this->render('jcrop', array('url'=>$this->imageUrl, 'alt'=>$this->imageAlt, 'htmlOptions' => $this->htmlOptions, 'id'=>$id));
+
+ self::$_COUNT++;
+ }
+
+}
@@ -0,0 +1,50 @@
+=======================
+Yii JCrop Extension
+(c)2011 Toumal
+toumaltheorca@gmail.com
+=======================
+
+
+This extension offers a non-intrusive yii extension that allows you to use the JCrop jQuery plugin in your yii project.
+I say unintrusive because other extensions auto-insert the form fields and buttons for you, which in many cases might not be what you want.
+This extension focuses on the minimum required to get you up and running, letting you do your own bells and whistles if you want to.
+
+
+Usage:
+======
+
+Copy/extract the yii-jcrop folder into your protected/extensions/ directory.
+
+This is an example view that uses the widget:
+
+<?php echo SFHtml::errorSummary($form); ?>
+<?=CHtml::beginForm(null, 'POST')?>
+<? //$form in this example is of type AvatarForm, containing variables for the crop area's x, y, width and height, hence the corresponding widget form element parameters ?>
+<?=CHtml::activeHiddenField($form, 'cropID');?>
+<?=CHtml::activeHiddenField($form, 'cropX', array('value' => '0'));?>
+<?=CHtml::activeHiddenField($form, 'cropY', array('value' => '0'));?>
+<?=CHtml::activeHiddenField($form, 'cropW', array('value' => '100'));?>
+<?=CHtml::activeHiddenField($form, 'cropH', array('value' => '100'));?>
+<?$this->widget('ext.yii-jcrop.jCropWidget',array(
+ 'imageUrl'=>CHtml::normalizeUrl(array('/path/to/image.jpg')),
+ 'formElementX'=>'AvatarForm_cropX',
+ 'formElementY'=>'AvatarForm_cropY',
+ 'formElementWidth'=>'AvatarForm_cropW',
+ 'formElementHeight'=>'AvatarForm_cropH',
+ 'jCropOptions'=>array(
+ //See the jCrop manual for available jCrop parameters
+ 'aspectRatio'=>1,
+ 'boxWidth'=>400,
+ 'boxHeight'=>400,
+ 'setSelect'=>array(0, 0, 100, 100),
+ ),
+ )
+);
+?>
+<?=CHtml::submitButton('Crop Avatar'); ?>
+<?=CHtml::endForm()?>
+
+
+You are free to use any jCrop parameter in the jCropOptions array.
+If you specify javascript callback function names in such a parameter, don't forget to start them with "js:"
+
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
@@ -0,0 +1,35 @@
+/* Fixes issue here http://code.google.com/p/jcrop/issues/detail?id=1 */
+.jcrop-holder { text-align: left; }
+
+.jcrop-vline, .jcrop-hline
+{
+ font-size: 0px;
+ position: absolute;
+ background: white url('Jcrop.gif') top left repeat;
+}
+.jcrop-vline { height: 100%; width: 1px !important; }
+.jcrop-hline { width: 100%; height: 1px !important; }
+.jcrop-vline.right { right: 0px; }
+.jcrop-hline.bottom { bottom: 0px; }
+.jcrop-handle {
+ font-size: 1px;
+ width: 7px !important;
+ height: 7px !important;
+ border: 1px #eee solid;
+ background-color: #333;
+}
+
+.jcrop-tracker { width: 100%; height: 100%; }
+
+.custom .jcrop-vline,
+.custom .jcrop-hline
+{
+ background: yellow;
+}
+.custom .jcrop-handle
+{
+ border-color: black;
+ background-color: #C7BB00;
+ -moz-border-radius: 3px;
+ -webkit-border-radius: 3px;
+}
Oops, something went wrong.

0 comments on commit eb97efb

Please sign in to comment.