Permalink
Browse files

ENHANCEMENT Inserting image via new dialog with ajax field retrieval …

…and GridField file selection. Rewritten to jQuery.entwine and using the new HTML editor abstraction layer.
  • Loading branch information...
1 parent 2c5d71d commit 5220a46fd08b6144fc50bc382cc5114ccb710b41 @chillu chillu committed Feb 9, 2012
View
@@ -18,7 +18,6 @@
'body_class' => 'typography',
'document_base_url' => Director::absoluteBaseURL(),
- 'setupcontent_callback' => "sapphiremce_setupcontent",
'cleanup_callback' => "sapphiremce_cleanup",
'use_native_selects' => true, // fancy selects are bug as of SS 2.3.0
@@ -230,8 +230,6 @@ function init() {
Requirements::combine_files(
'lib.js',
array(
- THIRDPARTY_DIR . '/prototype/prototype.js',
- THIRDPARTY_DIR . '/behaviour/behaviour.js',
SAPPHIRE_DIR . '/javascript/prototype_improvements.js',
THIRDPARTY_DIR . '/jquery/jquery.js',
SAPPHIRE_DIR . '/javascript/jquery_improvements.js',
@@ -255,15 +253,13 @@ function init() {
SAPPHIRE_ADMIN_DIR . '/thirdparty/jquery-hoverIntent/jquery.hoverIntent.js',
SAPPHIRE_ADMIN_DIR . '/javascript/jquery-changetracker/lib/jquery.changetracker.js',
SAPPHIRE_DIR . '/javascript/TreeDropdownField.js',
- SAPPHIRE_DIR ."/thirdparty/jquery-form/jquery.form.js",
SAPPHIRE_DIR . '/javascript/DateField.js',
SAPPHIRE_DIR . '/javascript/HtmlEditorField.js',
SAPPHIRE_DIR . '/javascript/TabSet.js',
SAPPHIRE_DIR . '/javascript/Validator.js',
SAPPHIRE_DIR . '/javascript/i18n.js',
SAPPHIRE_ADMIN_DIR . '/javascript/ssui.core.js',
- SAPPHIRE_DIR . '/javascript/tiny_mce_improvements.js',
- CMS_DIR . '/javascript/ThumbnailStripField.js',
+ SAPPHIRE_DIR . '/javascript/GridField.js',
)
);
@@ -294,6 +290,7 @@ function init() {
Requirements::css(THIRDPARTY_DIR . '/jstree/themes/apple/style.css');
Requirements::css(SAPPHIRE_DIR . '/css/TreeDropdownField.css');
Requirements::css(SAPPHIRE_ADMIN_DIR . '/css/screen.css');
+ Requirements::css(SAPPHIRE_DIR . '/css/GridField.css');
// Browser-specific requirements
$ie = isset($_SERVER['HTTP_USER_AGENT']) ? strpos($_SERVER['HTTP_USER_AGENT'], 'MSIE') : false;
View

Some generated files are not rendered by default. Learn more.

Oops, something went wrong.
@@ -38,8 +38,6 @@
onmatch: function() {
var self = this, typeDropdown = this.find(':input[name=PageType]');
- Observable.applyTo(this[0]);
-
var tree = $('.cms-tree');
this.setTree(tree);
@@ -220,7 +220,7 @@
if(status == 'success') {
var form = this.replaceForm(oldForm, data);
- Behaviour.apply(); // refreshes ComplexTableField
+ if(typeof(Behaviour) != 'undefined') Behaviour.apply(); // refreshes ComplexTableField
this.trigger('reloadeditform', {form: form, origData: origData, xmlhttp: xmlhttp});
}
@@ -182,88 +182,6 @@
return false;
}
});
-
- /**
- * Class: .cms-edit-form textarea.htmleditor
- *
- * Add tinymce to HtmlEditorFields within the CMS. Works in combination
- * with a TinyMCE.init() call which is prepopulated with the used HTMLEditorConfig settings,
- * and included in the page as an inline <script> tag.
- */
- $('.cms-edit-form textarea.htmleditor').entwine({
-
- /**
- * Constructor: onmatch
- */
- onmatch : function() {
- var self = this;
- this.closest('form').bind('beforesave', function() {
- if(typeof tinyMCE == 'undefined') return;
-
- // TinyMCE modifies input, so change tracking might get false
- // positives when comparing string values - don't save if the editor doesn't think its dirty.
- if(self.isChanged()) {
- tinyMCE.triggerSave();
- // TinyMCE assigns value attr directly, which doesn't trigger change event
- self.trigger('change');
- }
- });
-
- // Only works after TinyMCE.init() has been invoked, see $(window).bind() call below for details.
- this.redraw();
-
- this._super();
- },
-
- redraw: function() {
- // Using a global config (generated through HTMLEditorConfig PHP logic)
- var config = ssTinyMceConfig, self = this;
-
- // Avoid flicker (also set in CSS to apply as early as possible)
- self.css('visibility', '');
-
- // Create editor instance and render it.
- // Similar logic to adapter/jquery/jquery.tinymce.js, but doesn't rely on monkey-patching
- // jQuery methods, and avoids replicate the script lazyloading which is already in place with jQuery.ondemand.
- var ed = new tinymce.Editor(this.attr('id'), config);
- ed.onInit.add(function() {
- self.css('visibility', 'visible');
- });
- ed.render();
-
- // Handle editor de-registration by hooking into state changes.
- // TODO Move to onunmatch for less coupling (once we figure out how to work with detached DOM nodes in TinyMCE)
- $('.cms-container').bind('beforestatechange', function() {
- self.css('visibility', 'hidden');
- var ed = tinyMCE.get(self.attr('id'));
- if(ed) ed.remove();
- });
-
- this._super();
- },
-
- isChanged: function() {
- if(typeof tinyMCE == 'undefined') return;
-
- var inst = tinyMCE.getInstanceById(this.attr('id'));
- return inst ? inst.isDirty() : false;
- },
-
- resetChanged: function() {
- if(typeof tinyMCE == 'undefined') return;
-
- var inst = tinyMCE.getInstanceById(this.attr('id'));
- if (inst) inst.startContent = tinymce.trim(inst.getContent({format : 'raw', no_events : 1}));
- },
-
- onunmatch: function() {
- // TODO Throws exceptions in Firefox, most likely due to the element being removed from the DOM at this point
- // var ed = tinyMCE.get(this.attr('id'));
- // if(ed) ed.remove();
-
- this._super();
- }
- });
$('.cms-edit-form .ss-gridfield .action-edit').entwine({
onclick: function(e) {
View
@@ -1065,6 +1065,66 @@ body.cms-dialog {
}
}
+.htmleditorfield-mediaform {
+ .ss-gridfield {
+ // Set thumbnail size
+ tbody td:first-child img {
+ max-height: 30px;
+ }
+ }
+
+ // TODO Consolidate with .assetuploadfield and .ss-uploadfield styles
+ .ss-htmleditorfield-file {
+ border: 1px solid lighten($color-medium-separator, 20%);
+ @include border-radius(5px);
+ @include background-clip(padding-box);
+ background: #E2E2E2;
+ margin-bottom: $grid-horizontal*2;
+
+ &.loading {
+ width: 100%;
+ height: 100px;
+ background-image: url(../images/spinner.gif);
+ background-position: 50% 50%;
+ background-repeat: no-repeat;
+ }
+
+ .overview {
+ background-color: #5db4df;
+ @include background-image(linear-gradient(top, #5db4df 0%,#5db1dd 8%,#439bcb 50%,#3f99cd 54%,#207db6 96%,#1e7cba 100%));
+
+ .thumbnail {
+ display: inline-block;
+ vertical-align: middle;
+ padding: $grid-horizontal/2;
+
+ img {
+ max-height: $grid-horizontal*3;
+ }
+ }
+
+ .title {
+ display: inline-block;
+ vertical-align: middle;
+ background: #fff;
+ border: 1px solid lighten($color-medium-separator, 20%);
+ @include border-radius(5px);
+ margin-left: $grid-horizontal*2;
+ padding: $grid-horizontal/2;
+ }
+
+ .action-delete {
+ display: inline-block;
+ }
+ }
+
+ .details {
+ padding: $grid-horizontal*2;
+ }
+ }
+
+}
+
/** --------------------------------------------
* Step labels
* -------------------------------------------- */
@@ -23,14 +23,12 @@
</div>
- <% cached %>
<div id="cms-editor-dialogs">
<% control EditorToolbar %>
$MediaForm
$LinkForm
<% end_control %>
</div>
- <% end_cached %>
<!-- <div class="ss-cms-bottom-bar">
<div class="holder">
View

Some generated files are not rendered by default. Learn more.

Oops, something went wrong.
Oops, something went wrong.

0 comments on commit 5220a46

Please sign in to comment.