From 9f9dc2533843aa8ada412471b5ef56b68b1b9364 Mon Sep 17 00:00:00 2001
From: Julian Seidenberg <julian@silverstripe.com>
Date: Thu, 29 Mar 2012 13:34:55 +1300
Subject: [PATCH] ENHANCEMENT: SSF-38 initial rearranging of the insert image
 form to allow uploads as well as choosing an image from the CMS (and you can
 pick and choose from both)

---
 forms/HtmlEditorField.php     | 60 +++++++++++++++++++++++++----------
 javascript/HtmlEditorField.js | 24 ++++++++++++++
 2 files changed, 67 insertions(+), 17 deletions(-)

diff --git a/forms/HtmlEditorField.php b/forms/HtmlEditorField.php
index 3e688306c..fd83ae805 100644
--- a/forms/HtmlEditorField.php
+++ b/forms/HtmlEditorField.php
@@ -369,26 +369,54 @@ class HtmlEditorField_Toolbar extends RequestHandler {
 		));
 		
 		$numericLabelTmpl = '<span class="step-label"><span class="flyout">%d</span><span class="arrow"></span><strong class="title">%s</strong></span>';
-		$fields = new FieldList(
-			new LiteralField(
-				'Heading', 
-				sprintf('<h3>%s</h3>', _t('HtmlEditorField.IMAGE', 'Image'))
-			),
-			
-			$contentComposite = new CompositeField(
-				new LiteralField('headerSelect', '<h4 class="field header-select">' . sprintf($numericLabelTmpl, '1', _t('HtmlEditorField.Find', 'Find')) . '</h4>'),
+
+		$fromCMS = new CompositeField(
+			new LiteralField('headerSelect', '<h4 class="field header-select">' . sprintf($numericLabelTmpl, '1', _t('HtmlEditorField.Find', 'Find')) . '</h4>'),
 				$selectComposite = new CompositeField(
 					new TreeDropdownField('ParentID', _t('HtmlEditorField.FOLDER', 'Folder'), 'Folder'),
 					$fileField
-				),
-				
-				new LiteralField('headerEdit', '<h4 class="field header-edit">' . sprintf($numericLabelTmpl, '2', _t('HtmlEditorField.EditDetails', 'Edit details')) . '</h4>'),
-				$editComposite = new CompositeField(
-					new LiteralField('contentEdit', '<div class="content-edit"></div>')
 				)
-				
+		);
+
+		$fromCMS->addExtraClass('content');
+		$selectComposite->addExtraClass('content-select');
+
+		Requirements::css(SAPPHIRE_DIR . '/css/AssetUploadField.css');
+		$computerUploadField = Object::create('UploadField', 'AssetUploadField', '');
+		$computerUploadField->setConfig('previewMaxWidth', 40);
+		$computerUploadField->setConfig('previewMaxHeight', 30);
+		$computerUploadField->addExtraClass('ss-assetuploadfield');
+		$computerUploadField->removeExtraClass('ss-uploadfield');
+		$computerUploadField->setTemplate('AssetUploadField');
+		$computerUploadField->setFolderName(Upload::$uploads_folder);
+
+		$tabSet = new TabSet(
+			"MediaFormInsertImageTabs",
+			new Tab(
+				'From your computer',
+				$computerUploadField
+			),
+			new Tab(
+				'From the CMS',
+				$fromCMS
 			)
 		);
+
+		$allFields = new CompositeField(
+			$tabSet,
+			new LiteralField('headerEdit', '<h4 class="field header-edit">' . sprintf($numericLabelTmpl, '2', _t('HtmlEditorField.EditDetails', 'Edit details')) . '</h4>'),
+			$editComposite = new CompositeField(
+				new LiteralField('contentEdit', '<div class="content-edit"></div>')
+			)
+		);
+
+		$fields = new FieldList(
+			new LiteralField(
+				'Heading',
+				sprintf('<h3>%s</h3>', _t('HtmlEditorField.IMAGE', 'Insert Image'))
+			),
+			$allFields
+		);
 		
 		$actions = new FieldList(
 			FormAction::create('insertimage', _t('HtmlEditorField.BUTTONINSERT', 'Insert'))
@@ -404,9 +432,7 @@ class HtmlEditorField_Toolbar extends RequestHandler {
 			$actions
 		);
 		
-		$contentComposite->addExtraClass('content');
-		$selectComposite->addExtraClass('content-select');
-		
+
 		$form->unsetValidator();
 		$form->disableSecurityToken();
 		$form->loadDataFrom($this);
diff --git a/javascript/HtmlEditorField.js b/javascript/HtmlEditorField.js
index 16b3bd770..5a2074bbc 100644
--- a/javascript/HtmlEditorField.js
+++ b/javascript/HtmlEditorField.js
@@ -696,6 +696,30 @@ ss.editorWrappers['default'] = ss.editorWrappers.tinyMCE;
 			}
 		});
 
+		/**
+		 * Show the second step after uploading an image
+		 */
+		$('.ss-assetuploadfield').entwine({
+			onmatch: function() {
+				this._super();
+
+				// Always hide the "second step" part, we don't need it here
+				this.find('.ss-uploadfield-editandorganize').hide();
+
+			},
+			onfileuploadstop: function(e) {
+				//get the uploaded file ID when this event triggers, signaling the upload has compeleted successfully
+				//always use the last one uploaded
+				var uploadedFileID = $('ul.ss-uploadfield-files').children('li.ss-uploadfield-item').last().data('fileid');
+
+				//trigger the detail view for filling out details about the file we are about to insert into TinyMCE
+				var form = this.closest('form');
+				form.closest('form').showFileView(uploadedFileID);
+				form.redraw();
+			}
+
+		});
+
 		/**
 		 * Represents a single selected file, together with a set of form fields to edit its properties.
 		 * Overload this based on the media type to determine how the HTML should be created.