Ticket #434: Uploader with Cropper.

install/sql/system.sql

@@ -2264,7 +2264,8 @@ INSERT INTO `sys_objects_uploader` (`object`, `active`, `override_class_name`, `
 ('sys_cmts_simple', 1, 'BxTemplCmtsUploaderSimple', ''),
 ('sys_settings_html5', 1, 'BxTemplStudioSettingsUploaderHTML5', ''),
 ('sys_builder_page_simple', 1, 'BxTemplStudioBuilderPageUploaderSimple', ''),
-('sys_builder_page_html5', 1, 'BxTemplStudioBuilderPageUploaderHTML5', '');
+('sys_builder_page_html5', 1, 'BxTemplStudioBuilderPageUploaderHTML5', ''),
+('sys_std_crop_cover', 1, 'BxTemplStudioUploaderCropCover', '');
 
 
 -- --------------------------------------------------------
@@ -3319,6 +3320,7 @@ INSERT INTO `sys_objects_transcoder` (`object`, `storage_object`, `source_type`,
 ('sys_icon_facebook', 'sys_images_resized', 'Storage', 'a:2:{s:6:"object";s:10:"sys_images";s:14:"disable_retina";b:1;}', 'no', '0', '0', '0', '', ''),
 ('sys_icon_favicon', 'sys_images_resized', 'Storage', 'a:1:{s:6:"object";s:10:"sys_images";}', 'no', '0', '0', '0', '', ''),
 ('sys_cover', 'sys_images_resized', 'Storage', 'a:1:{s:6:"object";s:10:"sys_images";}', 'no', '0', '0', '0', '', ''),
+('sys_cover_preview', 'sys_images_resized', 'Storage', 'a:1:{s:6:"object";s:10:"sys_images";}', 'no', '1', '2592000', '0', '', ''),
 ('sys_builder_page_preview', 'sys_images_resized', 'Storage', 'a:1:{s:6:"object";s:10:"sys_images";}', 'no', '1', '2592000', '0', '', ''),
 ('sys_builder_page_embed', 'sys_images_resized', 'Storage', 'a:1:{s:6:"object";s:10:"sys_images";}', 'no', '1', '2592000', '0', '', ''),
 ('sys_cmts_images_preview', 'sys_cmts_images_preview', 'Storage', 'a:1:{s:6:"object";s:15:"sys_cmts_images";}', 'no', '1', '2592000', '0', '', ''),
@@ -3362,6 +3364,7 @@ INSERT INTO `sys_transcoder_filters` (`transcoder_object`, `filter`, `filter_par
 ('sys_icon_facebook', 'Resize', 'a:4:{s:1:"w";s:3:"100";s:1:"h";s:3:"100";s:13:"square_resize";s:1:"1";s:10:"force_type";s:3:"png";}', '0'),
 ('sys_icon_favicon', 'Resize', 'a:4:{s:1:"w";s:2:"16";s:1:"h";s:2:"16";s:13:"square_resize";s:1:"1";s:10:"force_type";s:3:"png";}', '0'),
 ('sys_cover', 'Resize', 'a:3:{s:1:"w";s:4:"1920";s:1:"h";s:3:"720";s:10:"force_type";s:3:"png";}', '0'),
+('sys_cover_preview', 'Resize', 'a:3:{s:1:"w";s:3:"120";s:1:"h";s:2:"45";s:10:"force_type";s:3:"jpg";}', '0'),
 ('sys_builder_page_preview', 'Resize', 'a:4:{s:1:"w";s:3:"128";s:1:"h";s:3:"128";s:13:"square_resize";s:1:"1";s:10:"force_type";s:3:"jpg";}', '0'),
 ('sys_builder_page_embed', 'ResizeVar', '', '0'),
 ('sys_cmts_images_preview', 'Resize', 'a:4:{s:1:"w";s:3:"100";s:1:"h";s:3:"100";s:13:"square_resize";s:1:"1";s:10:"force_type";s:3:"jpg";}', '0'),

modules/boonex/ocean/data/template/studio/scripts/BxTemplStudioUploaderCropCover.php

@@ -0,0 +1,19 @@
+<?php defined('BX_DOL') or die('hack attempt');
+/**
+ * Copyright (c) BoonEx Pty Limited - http://www.boonex.com/
+ * CC-BY License - http://creativecommons.org/licenses/by/3.0/
+ *
+ * @defgroup    TridentView Trident Studio Representation classes
+ * @ingroup     TridentStudio
+ * @{
+ */
+
+class BxTemplStudioUploaderCropCover extends BxBaseStudioUploaderCropCover
+{
+    function __construct ($aObject, $sStorageObject, $sUniqId, $oTemplate)
+    {
+        parent::__construct($aObject, $sStorageObject, $sUniqId, $oTemplate);
+    }
+}
+
+/** @} */

modules/boonex/protean/data/template/studio/scripts/BxTemplStudioUploaderCropCover.php

@@ -0,0 +1,19 @@
+<?php defined('BX_DOL') or die('hack attempt');
+/**
+ * Copyright (c) BoonEx Pty Limited - http://www.boonex.com/
+ * CC-BY License - http://creativecommons.org/licenses/by/3.0/
+ *
+ * @defgroup    TridentView Trident Studio Representation classes
+ * @ingroup     TridentStudio
+ * @{
+ */
+
+class BxTemplStudioUploaderCropCover extends BxBaseStudioUploaderCropCover
+{
+    function __construct ($aObject, $sStorageObject, $sUniqId, $oTemplate)
+    {
+        parent::__construct($aObject, $sStorageObject, $sUniqId, $oTemplate);
+    }
+}
+
+/** @} */

studio/classes/BxDolStudioDesigner.php

@@ -177,26 +177,20 @@ class BxDolStudioDesigner extends BxTemplStudioPage
 
 	function submitCover(&$oForm)
     {
-        $iProfileId = getLoggedId();
-
-        $oStorage = BxDolStorage::getObjectInstance(BX_DOL_STORAGE_OBJ_IMAGES);
+        $iProfile = bx_get_logged_profile_id();
+        $oStorage = BxDolStorage::getObjectInstance($this->sCoverStorage);
 
         foreach($this->aCovers as $sCover => $aCover) {
-        	if(empty($_FILES[$sCover]['tmp_name']))
+            $iIdNew = $oForm->getCleanValue($sCover);
+        	if(empty($iIdNew))
         		continue;
 
-			$iId = (int)getParam($aCover['setting']);
-			if($iId != 0 && !$oStorage->deleteFile($iId, $iProfileId))
+			$iIdOld = (int)getParam($aCover['setting']);
+			if($iIdOld != 0 && !$oStorage->deleteFile($iIdOld, $iProfile))
 				return $this->getJsResult('_adm_dsg_err_remove_old_cover');
 
-			$iId = $oStorage->storeFileFromForm($_FILES[$sCover], true, $iProfileId);
-			if($iId === false) {
-				$this->oDb->setParam($aCover['setting'], 0);
-				return $this->getJsResult(_t('_adm_dsg_err_save') . $oStorage->getErrorString(), false);
-			}
-
-			$this->oDb->setParam($aCover['setting'], $iId);
-			$oStorage->afterUploadCleanup($iId, $iProfileId);
+			$this->oDb->setParam($aCover['setting'], $iIdNew);
+			$oStorage->afterUploadCleanup($iIdNew, $iProfile);
         }
 
 		return $this->getJsResult('_adm_dsg_scs_save', true, true, BX_DOL_URL_STUDIO . 'designer.php?page=' . BX_DOL_STUDIO_DSG_TYPE_COVER);
@@ -204,10 +198,11 @@ class BxDolStudioDesigner extends BxTemplStudioPage
 
 	function deleteCover($sCover)
     {
-        $oStorage = BxDolStorage::getObjectInstance(BX_DOL_STORAGE_OBJ_IMAGES);
+        $iProfile = bx_get_logged_profile_id();
+        $oStorage = BxDolStorage::getObjectInstance($this->sCoverStorage);
 
         $iId = (int)getParam($this->aCovers[$sCover]['setting']);
-        if($iId != 0 && !$oStorage->deleteFile($iId, getLoggedId()))
+        if($iId != 0 && !$oStorage->deleteFile($iId, $iProfile))
             return false;
 
         $this->oDb->setParam($this->aCovers[$sCover]['setting'], 0);

studio/template/css/forms.css

@@ -120,20 +120,4 @@ div.bx-form-input-language {
 
 div.bx-form-input-language-current {
 	font-weight: bold;
-}
-
-/**
- * Files Uploader field in popup.
- */
-div.bx-popup .bx-uploader-ghost .bx-ug-icon {
-    float: left;
-}
-
-div.bx-popup .bx-uploader-ghost .bx-ug-icon img {
-    max-height: 8rem;
-}
-div.bx-popup .bx-uploader-ghost .bx-btn {
-	float: none;
-	display: inline-block;
-	vertical-align: top; 
 }

studio/template/css/uploaders.css

@@ -0,0 +1,22 @@
+@import url(../../../template/css/uploaders.css);
+
+
+/*--- Cover crop style ---*/
+.bx-popup-content-wrapped .bx-croppie-container.bx-croppie-container-cover {
+    min-height: 190px;
+}
+
+
+/*--- Uploader form ghost template ---*/
+.bx-uploader-ghost .bx-ug-icon {
+    float: left;
+}
+
+.bx-uploader-ghost .bx-ug-icon img {
+    max-height: 8rem;
+}
+.bx-uploader-ghost .bx-btn {
+    float: none;
+    display: inline-block;
+    vertical-align: top; 
+}

studio/template/scripts/BxBaseStudioBuilderPage.php

@@ -22,6 +22,9 @@ class BxBaseStudioBuilderPage extends BxDolStudioBuilderPage
     protected $sStorage;
     protected $sTranscoder;
     protected $aUploaders; 
+    
+    protected $sTranscoderCover;
+    protected $aUploadersCover;
 
     protected $sBaseUrl;
     protected $sTypeUrl;
@@ -56,10 +59,13 @@ class BxBaseStudioBuilderPage extends BxDolStudioBuilderPage
     {
         parent::__construct($sType, $sPage);
 
-        $this->sStorage = 'sys_images';
+        $this->sStorage = BX_DOL_STORAGE_OBJ_IMAGES;
 		$this->sTranscoder = 'sys_builder_page_preview';
 		$this->aUploaders = array('sys_builder_page_simple', 'sys_builder_page_html5');
-        
+
+		$this->sTranscoderCover = 'sys_cover_preview';
+		$this->aUploadersCover = array('sys_std_crop_cover');
+
         $this->sBaseUrl = BX_DOL_URL_STUDIO . 'builder_page.php';
         $this->sTypeUrl = $this->sBaseUrl . '?type=%s';
         $this->sPageUrl = $this->sTypeUrl . '&page=%s';
@@ -68,7 +74,8 @@ class BxBaseStudioBuilderPage extends BxDolStudioBuilderPage
     function getPageCss()
     {
     	$oTemplate = BxDolStudioTemplate::getInstance();
-		foreach($this->aUploaders as $sUploader) {
+    	$aUploaders = array_merge($this->aUploaders, $this->aUploadersCover);
+		foreach($aUploaders as $sUploader) {
 			$oUploader = BxDolUploader::getObjectInstance($sUploader, $this->sStorage, '', $oTemplate);
 			if($oUploader)
 				$oUploader->addCssJs();
@@ -991,11 +998,11 @@ class BxBaseStudioBuilderPage extends BxDolStudioBuilderPage
 					'type' => 'files',
 					'name' => 'cover_image',
 					'storage_object' => $this->sStorage,
-					'images_transcoder' => $this->sTranscoder,
-					'uploaders' => array ('sys_html5'),
+					'images_transcoder' => $this->sTranscoderCover,
+					'uploaders' => $this->aUploadersCover,
 					'multiple' => false,
 					'content_id' => isset($aPage['id']) ? $aPage['id'] : 0,
-					'ghost_template' => BxDolStudioTemplate::getInstance()->parseHtmlByName('bp_fgt_cover.html', array(
+					'ghost_template' => BxDolStudioTemplate::getInstance()->parseHtmlByName('uploader_fgt_cover.html', array(
 						'name' => 'cover_image',
 					)),
 					'caption' => _t('_adm_bp_txt_page_cover_image'),

studio/template/scripts/BxBaseStudioBuilderPageUploaderHTML5.php

@@ -18,6 +18,9 @@ class BxBaseStudioBuilderPageUploaderHTML5 extends BxTemplUploaderHTML5
 
     function __construct ($aObject, $sStorageObject, $sUniqId, $oTemplate)
     {
+        if(!$oTemplate)
+            $oTemplate = BxDolStudioTemplate::getInstance();
+
         parent::__construct($aObject, $sStorageObject, $sUniqId, $oTemplate);
 
         $this->_sTranscoderEmbed = 'sys_builder_page_embed';

studio/template/scripts/BxBaseStudioBuilderPageUploaderSimple.php

@@ -18,6 +18,9 @@ class BxBaseStudioBuilderPageUploaderSimple extends BxTemplUploaderSimple
 
     function __construct ($aObject, $sStorageObject, $sUniqId, $oTemplate)
     {
+        if(!$oTemplate)
+            $oTemplate = BxDolStudioTemplate::getInstance();
+
         parent::__construct($aObject, $sStorageObject, $sUniqId, $oTemplate);
 
         $this->_sTranscoderEmbed = 'sys_builder_page_embed';

studio/template/scripts/BxBaseStudioDesigner.php

@@ -18,6 +18,8 @@ class BxBaseStudioDesigner extends BxDolStudioDesigner
 
     protected $sCoverFormId = 'adm-dsg-cover-form';
     protected $sCoverIframeId = 'adm-dsg-cover-iframe';
+    protected $sCoverStorage = BX_DOL_STORAGE_OBJ_IMAGES;
+	protected $sCoverTranscoder = 'sys_cover_preview';
 
     protected $sSplashFormId = 'adm-dsg-splash-form';
     protected $sSplashIframeId = 'adm-dsg-splash-iframe';
@@ -359,11 +361,22 @@ class BxBaseStudioDesigner extends BxDolStudioDesigner
         $aFormInputs = array();
         $aTmplVarsCovers = array();
         foreach($this->aCovers as $sCover => $aCover) {
-        	$aFormInputs[$sCover] = array(
-				'type' => 'file',
+            $aFormInputs[$sCover] = array(
+                'type' => 'files',
 				'name' => $sCover,
-				'caption' => _t('_adm_dsg_txt_upload_' . $sCover)
-			);
+				'storage_object' => $this->sCoverStorage,
+				'images_transcoder' => $this->sCoverTranscoder,
+				'uploaders' => array('sys_std_crop_cover'),
+				'multiple' => false,
+				'content_id' => 0,
+				'ghost_template' => BxDolStudioTemplate::getInstance()->parseHtmlByName('uploader_fgt_cover.html', array(
+					'name' => $sCover,
+				)),
+				'caption' => _t('_adm_dsg_txt_upload_' . $sCover),
+				'db' => array (
+                    'pass' => 'Int',
+                )
+            );
 
         	if(($iImageId = (int)getParam($aCover['setting'])) == 0)
         		continue;

studio/template/scripts/BxBaseStudioSettingsUploaderHTML5.php

@@ -16,6 +16,9 @@ class BxBaseStudioSettingsUploaderHTML5 extends BxTemplUploaderHTML5
 {
     function __construct ($aObject, $sStorageObject, $sUniqId, $oTemplate)
     {
+        if(!$oTemplate)
+            $oTemplate = BxDolStudioTemplate::getInstance();
+
         parent::__construct($aObject, $sStorageObject, $sUniqId, $oTemplate);
     }
 

studio/template/scripts/BxBaseStudioUploaderCropCover.php

@@ -0,0 +1,26 @@
+<?php defined('BX_DOL') or die('hack attempt');
+/**
+ * Copyright (c) BoonEx Pty Limited - http://www.boonex.com/
+ * CC-BY License - http://creativecommons.org/licenses/by/3.0/
+ *
+ * @defgroup    TridentView Trident Studio Representation classes
+ * @ingroup     TridentStudio
+ * @{
+ */
+
+class BxBaseStudioUploaderCropCover extends BxTemplUploaderCrop
+{
+    protected $_oModule;
+
+    public function __construct ($aObject, $sStorageObject, $sUniqId, $oTemplate)
+    {
+        if(!$oTemplate)
+            $oTemplate = BxDolStudioTemplate::getInstance();
+
+        parent::__construct($aObject, $sStorageObject, $sUniqId, $oTemplate);
+
+        $this->_sUploaderFormTemplate = 'uploader_form_crop_cover.html';
+    }
+}
+
+/** @} */

studio/template/uploader_form_crop_cover.html

@@ -0,0 +1,43 @@
+<div id="__form_container_id__" class="bx-uploader-form-cont bx-popup-width">
+	__file_field__
+
+    <div class="bx-uploader-loading"></div>
+    <div class="bx-def-padding-sec-bottom bx-croppie-msg"></div>
+    <div class="bx-def-padding-sec-bottom" id="__errors_container_id__"></div>
+
+    <div class="bx-croppie-container bx-croppie-container-cover bx-def-margin-topbottom"></div>
+
+    <div class="bx-def-padding-top bx-clearfix">
+        <button class="bx-crop-action bx-btn bx-btn-disabled bx-def-margin-sec-right bx-def-margin-sec-top bx-crop-upload bx-btn-primary"><bx_text:_sys_uploader_crop_submit_button /></button>
+        <button class="bx-crop-action bx-btn bx-btn-disabled bx-def-margin-sec-right bx-def-margin-sec-top bx-crop-rotate" data-deg="-90"><bx_text:_sys_uploader_crop_rotate_left /></button>
+        <button class="bx-crop-action bx-btn bx-btn-disabled bx-def-margin-sec-right bx-def-margin-sec-top bx-crop-rotate" data-deg="90"><bx_text:_sys_uploader_crop_rotate_right /></button>
+        <div class="bx-btn bx-def-margin-sec-top" onclick="__uploader_instance_name__.onClickCancel()"><bx_text:_sys_uploader_close /></div>
+    </div>
+
+</div>
+
+<script>
+setTimeout(function () {    
+    __uploader_instance_name__.initUploader({
+        bx_form: {
+            uo: "__engine__",
+            so: "__storage_object__",
+            uid: "__uniq_id__",
+            m: "__multiple__",
+            c: "__content_id__",
+            p: "__storage_private__",
+            a: "upload"
+        },
+        viewport: {
+            width: 240,
+            height: 90,
+            // type: 'circle'
+        },
+        boundary: {
+            width: 280,
+            height: 130
+        },
+        enableOrientation: true
+    });
+}, 100);
+</script>