Skip to content
This repository
Browse code

ENHANCEMENT: SSF-38 initial rearranging of the insert image form to a…

…llow uploads as well as choosing an image from the CMS (and you can pick and choose from both)
  • Loading branch information...
commit 9f9dc2533843aa8ada412471b5ef56b68b1b9364 1 parent cbb0259
Julian Seidenberg authored March 29, 2012
60  forms/HtmlEditorField.php
@@ -369,26 +369,54 @@ function MediaForm() {
369 369
 		));
370 370
 		
371 371
 		$numericLabelTmpl = '<span class="step-label"><span class="flyout">%d</span><span class="arrow"></span><strong class="title">%s</strong></span>';
372  
-		$fields = new FieldList(
373  
-			new LiteralField(
374  
-				'Heading', 
375  
-				sprintf('<h3>%s</h3>', _t('HtmlEditorField.IMAGE', 'Image'))
376  
-			),
377  
-			
378  
-			$contentComposite = new CompositeField(
379  
-				new LiteralField('headerSelect', '<h4 class="field header-select">' . sprintf($numericLabelTmpl, '1', _t('HtmlEditorField.Find', 'Find')) . '</h4>'),
  372
+
  373
+		$fromCMS = new CompositeField(
  374
+			new LiteralField('headerSelect', '<h4 class="field header-select">' . sprintf($numericLabelTmpl, '1', _t('HtmlEditorField.Find', 'Find')) . '</h4>'),
380 375
 				$selectComposite = new CompositeField(
381 376
 					new TreeDropdownField('ParentID', _t('HtmlEditorField.FOLDER', 'Folder'), 'Folder'),
382 377
 					$fileField
383  
-				),
384  
-				
385  
-				new LiteralField('headerEdit', '<h4 class="field header-edit">' . sprintf($numericLabelTmpl, '2', _t('HtmlEditorField.EditDetails', 'Edit details')) . '</h4>'),
386  
-				$editComposite = new CompositeField(
387  
-					new LiteralField('contentEdit', '<div class="content-edit"></div>')
388 378
 				)
389  
-				
  379
+		);
  380
+
  381
+		$fromCMS->addExtraClass('content');
  382
+		$selectComposite->addExtraClass('content-select');
  383
+
  384
+		Requirements::css(SAPPHIRE_DIR . '/css/AssetUploadField.css');
  385
+		$computerUploadField = Object::create('UploadField', 'AssetUploadField', '');
  386
+		$computerUploadField->setConfig('previewMaxWidth', 40);
  387
+		$computerUploadField->setConfig('previewMaxHeight', 30);
  388
+		$computerUploadField->addExtraClass('ss-assetuploadfield');
  389
+		$computerUploadField->removeExtraClass('ss-uploadfield');
  390
+		$computerUploadField->setTemplate('AssetUploadField');
  391
+		$computerUploadField->setFolderName(Upload::$uploads_folder);
  392
+
  393
+		$tabSet = new TabSet(
  394
+			"MediaFormInsertImageTabs",
  395
+			new Tab(
  396
+				'From your computer',
  397
+				$computerUploadField
  398
+			),
  399
+			new Tab(
  400
+				'From the CMS',
  401
+				$fromCMS
390 402
 			)
391 403
 		);
  404
+
  405
+		$allFields = new CompositeField(
  406
+			$tabSet,
  407
+			new LiteralField('headerEdit', '<h4 class="field header-edit">' . sprintf($numericLabelTmpl, '2', _t('HtmlEditorField.EditDetails', 'Edit details')) . '</h4>'),
  408
+			$editComposite = new CompositeField(
  409
+				new LiteralField('contentEdit', '<div class="content-edit"></div>')
  410
+			)
  411
+		);
  412
+
  413
+		$fields = new FieldList(
  414
+			new LiteralField(
  415
+				'Heading',
  416
+				sprintf('<h3>%s</h3>', _t('HtmlEditorField.IMAGE', 'Insert Image'))
  417
+			),
  418
+			$allFields
  419
+		);
392 420
 		
393 421
 		$actions = new FieldList(
394 422
 			FormAction::create('insertimage', _t('HtmlEditorField.BUTTONINSERT', 'Insert'))
@@ -404,9 +432,7 @@ function MediaForm() {
404 432
 			$actions
405 433
 		);
406 434
 		
407  
-		$contentComposite->addExtraClass('content');
408  
-		$selectComposite->addExtraClass('content-select');
409  
-		
  435
+
410 436
 		$form->unsetValidator();
411 437
 		$form->disableSecurityToken();
412 438
 		$form->loadDataFrom($this);
24  javascript/HtmlEditorField.js
@@ -697,6 +697,30 @@ ss.editorWrappers['default'] = ss.editorWrappers.tinyMCE;
697 697
 		});
698 698
 
699 699
 		/**
  700
+		 * Show the second step after uploading an image
  701
+		 */
  702
+		$('.ss-assetuploadfield').entwine({
  703
+			onmatch: function() {
  704
+				this._super();
  705
+
  706
+				// Always hide the "second step" part, we don't need it here
  707
+				this.find('.ss-uploadfield-editandorganize').hide();
  708
+
  709
+			},
  710
+			onfileuploadstop: function(e) {
  711
+				//get the uploaded file ID when this event triggers, signaling the upload has compeleted successfully
  712
+				//always use the last one uploaded
  713
+				var uploadedFileID = $('ul.ss-uploadfield-files').children('li.ss-uploadfield-item').last().data('fileid');
  714
+
  715
+				//trigger the detail view for filling out details about the file we are about to insert into TinyMCE
  716
+				var form = this.closest('form');
  717
+				form.closest('form').showFileView(uploadedFileID);
  718
+				form.redraw();
  719
+			}
  720
+
  721
+		});
  722
+
  723
+		/**
700 724
 		 * Represents a single selected file, together with a set of form fields to edit its properties.
701 725
 		 * Overload this based on the media type to determine how the HTML should be created.
702 726
 		 */

0 notes on commit 9f9dc25

Please sign in to comment.
Something went wrong with that request. Please try again.