Author: jmorliaguet
Date: Tue Dec 20 15:48:38 2005
New Revision: 2063

Modified:
   cpsskins/branches/jmo-perspectives/ui/default/filters/style/style_editor.js
Log:

- converted the style editor to more object oriented javascript



Modified: 
cpsskins/branches/jmo-perspectives/ui/default/filters/style/style_editor.js
==============================================================================
--- cpsskins/branches/jmo-perspectives/ui/default/filters/style/style_editor.js 
(original)
+++ cpsskins/branches/jmo-perspectives/ui/default/filters/style/style_editor.js 
Tue Dec 20 15:48:38 2005
@@ -1,182 +1,149 @@
 
 /* Style Editor
-
-   The style editor consists of: 
-   - a controller
-   - event handlers
-   - view updaters
 */
 
 /* GLOBAL VARIABLES */
-
-var clientSelectorStyle = null  // current selector's style (client-side)
-var clientWidgetStyle = null    // the widget style (client-side)
-var serverWidgetStyle = null    // the widget style (server-side)
-
-var widget_type = null            // current widget
-
-var selector = null             // the current selector (e.g. "ul li")
-var selector_schema = null      // the current selector's schema
-
-// Areas
-var head_style = null           // style element in <head>
-var message_box = null          // the message area
-var widget_selector = null      // the widget selector
-var preview_area = null         // the style preview area
-var widget_area = null          // the widget preview area
-var tooltip_box = null          // the tooltip
-var form_area = null            // the edit form
-
-/* MISC */
-// TODO make this an object's function
-function convert_to_css(selector_style) {
-  var attrs = '';
-  for (var k in selector_style)
-    attrs += k + ':' + selector_style[k] + ';';
-  return attrs;
-}
-
-
-function set_widget_area() {
-  if (widget_area) {
-      widget_area.style.cursor = "default";
-
-      // register the tooltip
-      Event.observe(widget_area, 'mousemove', show_tooltip);
-      Event.observe(widget_area, 'mouseout', hide_tooltip);
-  }
-}
-
-function get_widget_type() {
-  return widget_type;
-}
-
-function set_widget_type(type) {
-  widget_type = type;
-}
-
-function get_widget_area() {
-  return widget_area;
-}
-
-function set_selector(sel) {
-  selector = sel;
-}
-
-function get_selector() {
-  return selector;
-}
-
-/* MODEL */
-
-function download_style() {
-  write_message("loading widget style ...");
-  new Ajax.Request('getWidgetStyle', {
-    onComplete: function(request) {
-      clientWidgetStyle = JSON.parse(request.responseText);
-      clear_message();
+var message_box = null
+var preview_area = null
+var widget_area = null
+var form_area = null
+var tooltip_box = null
+
+/* Preview area */
+Preview = Class.create();
+Preview.prototype = {
+  initialize: function(widget_type) {
+    this.widget_type = widget_type;
+    this.selector = null;
+    this.style = {};
+    var widget_area = $('widgetArea');
+
+    this.getWidgetStyle();
+
+    Element.setStyle(widget_area, {'cursor': 'default'});
+
+    // register the tooltip
+    Event.observe(widget_area, 'mousemove', show_tooltip);
+    Event.observe(widget_area, 'mouseout', hide_tooltip);
+
+    new Ajax.Updater(widget_area, 'renderPreview', {
+      parameters: $H({widget_type: widget_type}).toQueryString(),
+    });
+
+    Event.observe(widget_area, 'click', this.onClick.bind(this));
+  },
+
+  onClick: function(e) {
+    var elem = Event.element(e);
+    // ignore inactive elements
+    if (elem.getAttribute("inactive")) return;
+    // Get the element selector
+    this.selector = getSelectorInContext(elem, context=widget_area);
+    // Set the current selector style
+    // Now we can open the edit form for this style
+    this.form = new EditForm(this);
+    this.form.create();
+  },
+
+  getWidgetStyle: function() {
+    new Ajax.Request('getWidgetStyle', {
+      onLoading: function() {
+        write_message("loading widget style ...");
+        },
+      onComplete: this.onComplete.bind(this)
+    });
+  },
+
+  onComplete: function(request) {
+    this.style = JSON.parse(request.responseText);
+    this.updateCSS();
+    clear_message();
+  },
+
+  updateStyle: function(attrs) {
+    var sel = this.selector;
+    if (!this.style[sel]) this.style[sel] = {};
+    for (var k in attrs) this.style[sel][k] = attrs[k];
+    this.updateCSS();
+  },
+
+  updateCSS: function() {
+    var style = '';
+    var widget_tag = widget_area.tagName.toLowerCase();
+    for (var sel in this.style) {
+      var attrs = '';
+      var selector_style = this.style[sel];
+      for (var k in selector_style)
+        attrs += k + ':' + selector_style[k] + ';';
+      style += "#previewArea " + widget_tag + " " + sel + "{" + attrs + "}";
     }
-  });
-}
-
-function update_selector_style(attrs) {
-  var sel = get_selector();
-  if (!clientSelectorStyle) clientSelectorStyle = new Object();
-  for (var k in attrs) clientSelectorStyle[k] = attrs[k];
-  clientWidgetStyle[sel] = clientSelectorStyle;
-}
-
-function download_selector_style() {
-  var sel = get_selector();
-  write_message("loading style ...");
-  new Ajax.Request('getSelectorStyle', {
-    parameters: $H({'k': sel}).toQueryString(),
-    onComplete: function(request) {
-      clientSelectorStyle = JSON.parse(request.responseText);
-      clear_message();
-    }
-  });
-}
-
-function upload_selector_style() {
-  var sel = get_selector();
-  write_message("saving style ...");
-  new Ajax.Request('setSelectorStyle', {
-    parameters: $H({'k': sel,
-                    'v': JSON.stringify(clientSelectorStyle)}).toQueryString(),
-    onComplete: function() {
-      clear_message();
-    }
-  });
-}
-
-/* VIEWS */
-
-function show_tooltip(e) {
-  if (!e) e = event;
-  var elem = Event.element(e);
-  var label = elem.getAttribute("label");
-  if (!label) {
-      label = 'unknown label';
-  }
-  replaceHTML(tooltip_box, label);
-  tooltip_box.style.visibility = "visible";
-  tooltip_box.style.left = e.clientX + "px";
-  tooltip_box.style.top = e.clientY + "px";
-}
-
-function hide_tooltip(evt) {
-  tooltip_box.style.visibility = "hidden";
-}
-
-function create_preview() {
-  var elems, selector_style;
-
-  // Draw the preview area
-  new Ajax.Updater(widget_area, 'renderPreview', {
-    parameters: $H({widget_type: get_widget_type()}).toQueryString(),
-  });
-
-  // Set the widget area element
-  set_widget_area();
+    // XXX this does not work with IE
+    replaceHTML($('style'), style);
+  },
+
+  getSelectorStyle: function() {
+    var sel = this.selector;
+    write_message("loading style ...");
+    new Ajax.Request('getSelectorStyle', {
+      parameters: $H({'k': sel}).toQueryString(),
+      onComplete: function(request) {
+        this.style[sel] = JSON.parse(request.responseText);
+        clear_message();
+      }
+    });
+  },
 
-  // Update the CSS style
-  update_css_style();
+  setSelectorStyle: function() {
+    var sel = this.selector;
+    write_message("saving style ...");
+    new Ajax.Request('setSelectorStyle', {
+      parameters: $H({'k': sel,
+                      'v': JSON.stringify(this.style[sel])}).toQueryString(),
+      onComplete: function() {
+        clear_message();
+      }
+    });
+  },
 
-  // register the events
-  widget_area.onclick = edit_widget_area;
 }
 
-// Update the CSS style
-function update_css_style() {
-  var style = '';
-  var widget_tag = widget_area.tagName.toLowerCase();
-  for (var sel in clientWidgetStyle) {
-    var attrs = convert_to_css(clientWidgetStyle[sel]);
-    style += "#previewArea " + widget_tag + " " + sel + "{" + attrs + "}";
-  }
-  replaceHTML(head_style, style);
-}
+/* Edit form */
+EditForm = Class.create();
+EditForm.prototype = {
+  initialize: function(preview) {
+    this.preview = preview;
+    this.form_data = {};
+  },
+
+  create: function() {
+    var preview = this.preview;
+    new Ajax.Request('getFieldRange', {
+      parameters: $H({'widget_type': preview.widget_type,
+                      'sel': preview.selector}).toQueryString(),
+      onLoading: function() {
+        write_message("Loading form data ...");
+        },
+      onComplete: this.onComplete.bind(this),
+    });
+  },
+
+  onComplete: function(request) {
+    this.form_data = JSON.parse(request.responseText);
+    this.render();
+    clear_message();
+  },
+
+  render: function() {
+    var preview = this.preview;
+    var sel = preview.selector;
+    var form = document.createElement('form');
+    var props = preview.style[sel];
 
-function create_form() {
-  var sel = get_selector();
-  var widget = get_widget_type();
-  var props = clientWidgetStyle[sel];
-
-  new Ajax.Request('getFieldRange', {
-    parameters: $H({'widget_type': widget, 'sel': sel}).toQueryString(),
-    onComplete: function(request) {
-      selector_schema = JSON.parse(request.responseText);
-    }
-  });
-
-  // concept code for testing. to be rewritten
-  var form = document.createElement('form');
-  form.action = "javascript:void(0)";
-  for (var p in selector_schema) {
+    form.action = "javascript:void(0)";
+    for (var p in this.form_data) {
       var value = null;
       if (props) value = props[p];
-      var range = selector_schema[p];
+      var range = this.form_data[p];
 
       var div = document.createElement('div');
       div.setAttribute("class", "row");
@@ -209,105 +176,56 @@
       div.appendChild(label);
       div.appendChild(input);
       form.appendChild(div);
-  }
-  form_area.replaceChild(form, form_area.firstChild);
-
-  // Register the event
-  form_area.onchange = change_style_property;
-}
-
-/* CONTROLLER, EVENT HANDLERS */
-
-function is_inactive(elem) {
-  return elem.getAttribute("inactive");
-}
-
-// Update a style property
-function change_style_property(e) {
-  if (!e) e = event;
-  var field, value;
-  field = Event.element(e);
-
-  // Update the model on the client
-  var attrs = new Object();
-  attrs[field.name] = field.value;
-  update_selector_style(attrs);
-
-  // Update the preview
-  update_css_style();
-
-  // Update the model on the server
-  upload_selector_style();
-}
-
-// Edit the element.
-function edit_widget_area(evt) {
-  var elem = Event.element(evt);
-
-  // ignore inactive elements
-  if (is_inactive(elem)) return;
-
-  // Get the element selector
-  var sel = getSelectorInContext(elem, context=widget_area);
-
-  // Set it as the current selector
-  set_selector(sel);
-
-  // Set the current selector style
-  clientSelectorStyle = clientWidgetStyle[sel];
+    }
+    form_area.replaceChild(form, form_area.firstChild);
 
-  // Now we can open the edit form for this style
-  create_form();
-}
+    // Register the event
+    Event.observe(form_area, 'change', this.onChange.bind(this));
+  },
+
+  onChange: function(e) {
+    var preview = this.preview;
+
+    // Update the model on the client
+    var field = Event.element(e);
+    var attrs = new Object();
+    attrs[field.name] = field.value;
+    preview.updateStyle(attrs);
 
-// Select another new widget
-function select_widget(evt) {
-  var elem = Event.element(evt);
-  create_preview(elem.value);
+    // Update the model on the server
+    preview.setSelectorStyle();
+  }
 }
 
-/* SETUP */
-
-function setupAreas() {
-    // <head><script>
-    head_style = $("style");
-
-    // top
-    message_box = $("messageBox");
-    widget_selector = $("widgetSelector");
-
-    // left
-    preview_area = $("previewArea");
-    widget_area = $("widgetArea");
-    tooltip_box = $("tooltipBox");
+/* Setup */
+function setupEditor(widget_type) {
+  message_box = $('messageBox');
+  preview_area = $('previewArea');
+  widget_area = $('widgetArea');
+  form_area = $('formArea');
+  tooltip_box = $('tooltipBox');
 
-    // right
-    form_area = $("formArea");
+  preview = new Preview(widget_type);
 }
 
-function setupEventHandlers() {
-    // register the events on the widget selector.
-    if (widget_selector)
-       widget_selector.onchange = select_widget;
+function show_tooltip(e) {
+  if (!e) e = event;
+  var elem = Event.element(e);
+  var label = elem.getAttribute("label");
+  if (!label) {
+      label = 'unknown label';
+  }
+  replaceHTML(tooltip_box, label);
+  tooltip_box.style.visibility = "visible";
+  tooltip_box.style.left = '' + Event.pointerX(e) + "px";
+  tooltip_box.style.top = '' + Event.pointerY(e) + "px";
 }
 
-function setupEditor(widget_type) {
-    set_widget_type(widget_type);
-
-    // Set up the areas
-    setupAreas();
-
-    // Set up the controller
-    setupEventHandlers();
-
-    // Download the style from the server.
-    download_style();
-
-    // Draw the initial style preview
-    create_preview();
+function hide_tooltip() {
+  tooltip_box.style.visibility = "hidden";
 }
 
-/* debug */
+/* Debug */
 function write_message(msg) {
   if (message_box) replaceHTML(message_box, msg);
 }
-- 
http://lists.nuxeo.com/mailman/listinfo/z3lab-checkins

Reply via email to