Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Browse files

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
@candidasa candidasa authored
Showing with 67 additions and 17 deletions.
  1. +43 −17 forms/HtmlEditorField.php
  2. +24 −0 javascript/HtmlEditorField.js
View
60 forms/HtmlEditorField.php
@@ -369,26 +369,54 @@ function MediaForm() {
));
$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 @@ function MediaForm() {
$actions
);
- $contentComposite->addExtraClass('content');
- $selectComposite->addExtraClass('content-select');
-
+
$form->unsetValidator();
$form->disableSecurityToken();
$form->loadDataFrom($this);
View
24 javascript/HtmlEditorField.js
@@ -697,6 +697,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.
*/
Please sign in to comment.
Something went wrong with that request. Please try again.