Luke Plant avatar Luke Plant committed 88fe62e

Beginnings of implementation of presentation controls.

Comments (0)

Files changed (6)

+
+WYMeditor extensions
+====================
+
+The semantic editor application provides its own version of WYMeditor.  This
+is derived from the skins/templates found in django-cms2, with the following
+customisations:
+
+
+ - name of the skin changed from 'django' to 'semanticeditor'.  This is
+   necessary if we are to allow two different versions of WYMeditor on the
+   same page, one using the normal WYMeditor + CMS controls, another with
+   the full 'semantic editor' controls, for longer pieces of content.
+
+ - The skin.js file removes the 'classes' panel, since it is replaced by
+   dynamic elements.
+
+ - skins.css - added styling for additional presentation controls
+
+ - a WYMeditor plugin named 'semantic' has been added.  This implements
+   most of the client side logic for this application.
+
+ - the editorwidget.html template has been changed.  In particular
+   - the skin has been changed to 'semanticeditor'
+   - a call to wymeditor.semantic() has been added to set up the plugin.
+
+ - a new django widget 'SemanticEditor' has been created that inherits from
+   the django 'WYMEditor' widget in django-cms2.  This is needed so that
+    - the WYMeditor plugin javascript file can be added to Media
+    - our editorwdiget.html template can be used.
+

semanticeditor/media/semanticeditor/javascript/wymeditor/plugins/semantic/wymeditor.semantic.js

+/*
+ * Plugin for WYMEditor that provides an interface to allow sepataion
+ * of presentation and content by allowing the user to select presentation
+ * elements for each section.  Depends on a server-side backed to do
+ * parsing and provide list of allowed CSS classes.
+ */
+
+function PresentationControls(wym) {
+    this.name = wym._element.get(0).name;
+    var container = jQuery(wym._box).find(".wym_area_bottom");
+    var id_prefix = "id_prescontrol_" + this.name + "_";
+    this.headingsbox_id = id_prefix + 'headings';
+    this.optsbox_id = id_prefix + 'optsbox';
+    this.setup_controls(container);
+}
+
+/*
+ * TODO
+ * separate_presentation
+ *  - called on setup
+ * combine_presentation
+ *  - called before teardown
+ * retrieve_style
+ *  - called on setup
+ * update_headingbox
+ *  - called when new info about headings arrives
+ * update_optsbox
+ *  - needs to create controls
+ *  - then set them up from stored data
+ *  - then add event handlers
+ * // wrappers for storing data:
+ * add_style(heading, pres)
+ * remove_style(heading, pres)
+ * update_stored_headings
+ *  - called when new info about headings arrives
+ */
+
+PresentationControls.prototype.setup_controls = function(container) {
+    container.after("<div class=\"prescontrolheadings\">Headings:<br/><select size=\"5\" id=\"" + this.headingsbox_id + "\"></select></div>" +
+		    "<div class=\"prescontroloptsboxcont\">Presentation choices:<div class=\"prescontroloptsbox\" id=\"" + this.optsbox_id + "\"></div></div>");
+    // Event handlers
+    this.headingscontrol.change = function(event) {
+	this.update_optsbox();
+    };
+};
+
+PresentationControls.prototype.optsbox = function() {
+    return jQuery('#' + this.optsbox_id);
+};
+
+PresentationControls.prototype.headingscontrol = function() {
+    return jQuery('#' + this.headingscontrol);
+};
+
+// The actual WYMeditor plugin:
+WYMeditor.editor.prototype.semantic = function(options) {
+    // TODO - options need to specify the AJAX callbacks
+    // we are going to need.
+    var wym = this;
+    var c = new PresentationControls(wym);
+};

semanticeditor/media/semanticeditor/javascript/wymeditor/skins/semanticeditor/skin.css

             
 /*WYMEDITOR_LINK*/
         a.wym_wymeditor_link        { text-indent: -9999px; float: right; display: block; width: 50px; height: 15px; background: url(../wymeditor_icon.png);  overflow: hidden; text-decoration: none;  }
+
+
+/* SEMANTIC EDITOR PRESENTATION CONTROLS */
+	.prescontrolheadings        { float: left; width: 40%; }
+	.prescontrolheadings select { min-width: 150px; }
+	.prescontroloptsboxcont     { float: left; width: 60%; }

semanticeditor/media/semanticeditor/javascript/wymeditor/skins/semanticeditor/skin.js

 
         //render following sections as panels
         jQuery(wym._box).find(wym._options.classesSelector)
-          .addClass("wym_panel");
+	    .remove();
 
         //render following sections as buttons
         jQuery(wym._box).find(wym._options.toolsSelector)

semanticeditor/templates/semanticeditor/editorwidget.html

                 wym.dialog('Page link', html);
                 return(false);
             });
+
+            // Enable the 'semantic' plugin
+            wym.semantic({});
         },
         //handle click event on dialog's submit button
         postInitDialog: function( wym, wdw ) {

semanticeditor/widgets.py

 from cms.admin.widgets import *
 from django import forms
 from django.conf import settings
+import os
+
+join = os.path.join
+
 
 
 class SemanticEditor(WYMEditor):
-    def _media(self):
-        extra_media = forms.Media({})
-        return super(SemanticEditor, self)._media() + extra_media
+    class Media:
+        js = [join(settings.SE_MEDIA_URL, path) for path in
+              ('javascript/wymeditor/plugins/semantic/wymeditor.semantic.js',
+               )]
 
     def render_extra(self, name, value, attrs=None):
         context = {
Tip: Filter by directory path e.g. /media app.js to search for public/media/app.js.
Tip: Use camelCasing e.g. ProjME to search for ProjectModifiedEvent.java.
Tip: Filter by extension type e.g. /repo .js to search for all .js files in the /repo directory.
Tip: Separate your search with spaces e.g. /ssh pom.xml to search for src/ssh/pom.xml.
Tip: Use ↑ and ↓ arrow keys to navigate and return to view the file.
Tip: You can also navigate files with Ctrl+j (next) and Ctrl+k (previous) and view the file with Ctrl+o.
Tip: You can also navigate files with Alt+j (next) and Alt+k (previous) and view the file with Alt+o.