Author: jmorliaguet
Date: Sun May  7 23:49:45 2006
New Revision: 3073

Modified:
   cpsskins/branches/paris-sprint-2006/standard/filters/style/configure.zcml
   cpsskins/branches/paris-sprint-2006/standard/filters/style/style_editor.js
   cpsskins/branches/paris-sprint-2006/standard/filters/style/style_editor.pt
   
cpsskins/branches/paris-sprint-2006/standard/filters/style/style_editor_form.ctal
   cpsskins/branches/paris-sprint-2006/standard/filters/style/views.py

Log:

- saving work, almost working style editor



Modified: 
cpsskins/branches/paris-sprint-2006/standard/filters/style/configure.zcml
==============================================================================
--- cpsskins/branches/paris-sprint-2006/standard/filters/style/configure.zcml   
(original)
+++ cpsskins/branches/paris-sprint-2006/standard/filters/style/configure.zcml   
Sun May  7 23:49:45 2006
@@ -33,37 +33,17 @@
 
   <browser:pages
       for="cpsskins.standard.formats.style.IStyle"
-      class=".views.JSONView"
+      class=".views.StyleEditor"
       permission="zope.ManageContent">
 
     <browser:page
-        name="getWidgetStyle"
-        attribute="getWidgetStyle"
-    />
-
-    <browser:page
-        name="getSelectorStyle"
-        attribute="getSelectorStyle"
-    />
-
-    <browser:page
-        name="setSelectorStyle"
-        attribute="setSelectorStyle"
-    />
-
-    <browser:page
-        name="delSelectorStyle"
-        attribute="delSelectorStyle"
-    />
-
-    <browser:page
-        name="getFieldRange"
-        attribute="getFieldRange"
+        name="renderPreview"
+        attribute="renderPreview"
     />
 
     <browser:page
-        name="renderPreview"
-        attribute="renderPreview"
+        name="setFormData"
+        attribute="setFormData"
     />
 
     <browser:page

Modified: 
cpsskins/branches/paris-sprint-2006/standard/filters/style/style_editor.js
==============================================================================
--- cpsskins/branches/paris-sprint-2006/standard/filters/style/style_editor.js  
(original)
+++ cpsskins/branches/paris-sprint-2006/standard/filters/style/style_editor.js  
Sun May  7 23:49:45 2006
@@ -1,138 +1,14 @@
 
-/* Style Editor
-*/
-
-/* GLOBAL VARIABLES */
-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',
-                  this.showTooltip.bindAsEventListener(this));
-    Event.observe(widget_area, 'mouseout',
-                  this.hideTooltip.bindAsEventListener(this));
-
-    new Ajax.Updater(widget_area, 'renderPreview', {
-      parameters: $H({widget_type: widget_type}).toQueryString(),
-    });
-
-    Event.observe(widget_area, 'click',
-                  this.onClick.bindAsEventListener(this));
-  },
-
-  destroy: function() {
-    Event.stopObserving(widget_area, 'mousemove', this.showTooltip);
-    Event.stopObserving(widget_area, 'mouseout', this.hideTooltip);
-    Event.stopObserving(widget_area, 'click', this.onClick);
-  },
-
-  showTooltip: function(e) {
-    if (!e) e = event;
-    var elem = Event.element(e);
-    var label = elem.getAttribute("label");
-    if (!label) {
-      label = 'unknown label';
-    }
-    tooltip_box.innerHTML = label;
-    tooltip_box.style.left = '' + Event.pointerX(e) + "px";
-    tooltip_box.style.top = '' + Event.pointerY(e) + "px";
-    Element.show(tooltip_box);
-  },
-
-  hideTooltip: function() {
-    Element.hide(tooltip_box);
-  },
-
-  onClick: function(e) {
-    var elem = Event.element(e);
-    // ignore inactive elements
-    if (elem.getAttribute("inactive")) return;
-    // Get the element selector
-    var selector = this.getSelectorInContext(elem, context=widget_area);
-    if (selector == this.selector) return;
-    this.selector = selector;
-    // Set the current selector style
-    // Now we can open the edit form for this style
-    if (this.form) this.form.destroy();
-    this.form = new EditForm(this);
-    this.form.createForm();
-  },
-
-  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 + "}";
+CPSSkins.addActions({
+  'selectTag': function(info) {
+      var target = info.target;
+      target.style.backgroundColor = '#ffc';
+      var selector = getSelectorInContext(target, $('previewArea'));
+      CPSSkins.getModelById('style-editor').updateData({'selector': selector});
     }
-    // XXX this does not work with IE
-    $('style').innerHTML = 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();
-      }
-    });
-  },
+  });
 
-  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: clear_message,
-    });
-  },
-
-  getSelectorInContext: function(element, context) {
+function getSelectorInContext(element, context) {
     var i, node, tag, name, selector;
     node = element;
 
@@ -156,128 +32,3 @@
     selectors.reverse();
     return selectors.join(" ");
   }
-}
-
-
-/* Edit form */
-EditForm = Class.create();
-EditForm.prototype = {
-  initialize: function(preview) {
-    this.preview = preview;
-    this.form_data = {};
-    // Register the event
-    this.onChange = this.changeField.bindAsEventListener(this);
-    Event.observe(form_area, 'change', this.onChange);
-  },
-
-  destroy: function() {
-    // Unregister the event
-    Event.stopObserving(form_area, 'change', this.onChange);
-  },
-
-  createForm: 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),
-    });
-
-  },
-
-  changeField: function(e) {
-    var preview = this.preview;
-
-    // Update the model on the client
-    var field = Event.element(e);
-    var attrs = {};
-    attrs[field.name] = field.value;
-    preview.updateStyle(attrs);
-
-    // Update the model on the server
-    preview.setSelectorStyle();
-  },
-
-  onComplete: function(request) {
-    this.form_data = JSON.parse(request.responseText);
-    this.renderForm();
-    clear_message();
-  },
-
-  renderForm: function() {
-    var preview = this.preview;
-    var sel = preview.selector;
-    var form = document.createElement('form');
-    var props = preview.style[sel];
-
-    form.action = "javascript:void(0)";
-    for (var p in this.form_data) {
-      var value = null;
-      if (props) value = props[p];
-      var range = this.form_data[p];
-
-      var div = document.createElement('div');
-      div.setAttribute("class", "row");
-
-      var label = document.createElement('label');
-      label.appendChild(document.createTextNode(p));
-
-      if (range && range.length > 0) {
-          var input = document.createElement('select');
-          for (var r=0;r<range.length;r++) {
-              var option = document.createElement('option')
-              if (range[r] == value) {
-                  option.setAttribute("selected", "selected");
-              }
-              option.appendChild(document.createTextNode(range[r]));
-              input.appendChild(option);
-          }
-      } else {
-          var input = document.createElement('input');
-          input.setAttribute("type", "text");
-      }
-      input.setAttribute("name", p);
-
-      if (value) {
-          input.setAttribute("value", value);
-      } else {
-          input.setAttribute("value", "");
-      }
-
-      div.appendChild(label);
-      div.appendChild(input);
-      form.appendChild(div);
-    }
-    form_area.replaceChild(form, form_area.firstChild);
-
-  },
-
-}
-
-/* Setup */
-function setupEditor(widget_type) {
-  alert('123');
-  message_box = $('messageBox');
-  preview_area = $('previewArea');
-  widget_area = $('widgetArea');
-  form_area = $('formArea');
-  tooltip_box = $('tooltipBox');
-
-  Element.hide(tooltip_box);
-
-  new Preview(widget_type);
-}
-
-
-/* Debug */
-function write_message(msg) {
-  if (message_box) message_box.innerHTML = msg;
-}
-
-function clear_message() {
-  write_message('');
-}
-

Modified: 
cpsskins/branches/paris-sprint-2006/standard/filters/style/style_editor.pt
==============================================================================
--- cpsskins/branches/paris-sprint-2006/standard/filters/style/style_editor.pt  
(original)
+++ cpsskins/branches/paris-sprint-2006/standard/filters/style/style_editor.pt  
Sun May  7 23:49:45 2006
@@ -3,10 +3,25 @@
                display python: displays[0];
                id context/identifier;
                widget display/formattable:widget;
-               widget_types widget/types;
-               widget_type python:widget_types[0]">
+               widget_types widget/types">
 
-  <ins class="model" tal:content="python: view.getModel(id)" />
+  <ins class="model" tal:content="python: view.getModelDef(id)" />
+
+  <ins class="controller">
+  {"id": "style-editor-preview",
+   "type": "behaviour",
+   "rules": {
+     "#previewArea": {
+       "click": "selectTag"
+     }
+  }}
+  </ins>
+
+  <ins class="controller">
+  {"id": "style-editor-form",
+   "type": "remote scripting"
+  }
+  </ins>
 
   <a tal:repeat="type widget_types"
      tal:content="type"
@@ -14,18 +29,11 @@
 
   <table width="100%">
     <tr>
-      <td width="50%" valign="top"
-          tal:content="structure python: view.renderPreview(widget_type)" />
-
+      <td id="previewArea" width="50%" valign="top">
+        <ins class="view" tal:content="python: view.getPreviewDef(id)" />
+      </td>
       <td width="50%" valign="top">
-        <ins class="view">
-        {"id": "style-editor",
-         "widget": {
-           "template": "@@style-editor-form.html"
-         },
-         "model": "style-editor"
-        }
-        </ins>
+        <ins class="view" tal:content="python: view.getFormDef(id)" />
       </td>
     </tr>
   </table>

Modified: 
cpsskins/branches/paris-sprint-2006/standard/filters/style/style_editor_form.ctal
==============================================================================
--- 
cpsskins/branches/paris-sprint-2006/standard/filters/style/style_editor_form.ctal
   (original)
+++ 
cpsskins/branches/paris-sprint-2006/standard/filters/style/style_editor_form.ctal
   Sun May  7 23:49:45 2006
@@ -1,15 +1,17 @@
-<form action="" method="post" onsubmit="return false">
+<form action="@@setFormData" method="post" onsubmit="return false">
+
+  <div ctal:content="selector">SELECTOR</div>
 
   <p ctal:repeat="f fields">
 
     <label ctal:content="f/label">LABEL</label>
-    <input ctal:attributes="value f/value; name f/name" />
+    <input type="text" ctal:attributes="value f/value; name f/name" />
     <span class="status" ctal:condition="f/status"
                          ctal:content="f/status">STATUS</span>
   </p>
 
   <p>
-    <button type="submit">Save</button>
+    <input type="submit" value="Save" />
   </p>
 
 </form>

Modified: cpsskins/branches/paris-sprint-2006/standard/filters/style/views.py
==============================================================================
--- cpsskins/branches/paris-sprint-2006/standard/filters/style/views.py 
(original)
+++ cpsskins/branches/paris-sprint-2006/standard/filters/style/views.py Sun May 
 7 23:49:45 2006
@@ -19,6 +19,7 @@
 
 from zope.component import getUtility
 from zope.app import zapi
+from zope.app.session.interfaces import ISession
 
 from cpsskins import configuration
 from cpsskins import minjson as json
@@ -32,15 +33,20 @@
         self.context = context
         self.request = request
 
-    def renderPreview(self, widget_type):
+        self.session = ISession(self.request)['cpsskins']
+        self.tmutil = getThemeManager(self.context)
+
+    def renderPreview(self):
         """Render a style preview based on the specified widget.
         """
+        session_data = self.session[u'style-editor-data']
+        widget_type = session_data.get(u'widget', u'standard.plain_html')
         widget = getUtility(configuration.IWidget, widget_type)
+        print widget_type
         return widget.view(None, None).renderPreview()
 
-    def getModel(self, id):
-        tmutil = getThemeManager(self.context)
-        style = tmutil.getElementById(id)
+    def getModelDef(self, id):
+        style = self.tmutil.getElementById(id)
         style_path = zapi.getPath(style)
         return json.write({
             'id': 'style-editor',
@@ -52,91 +58,73 @@
                 }
             },
             'data': {
+                'url': '/++skin++cpsskins/%s/@@renderPreview' % style_path,
                 'widget': '',
+                'selector': '',
                 'fields': [],
             },
         })
 
-class JSONView:
-    """JSON methods
-
-    >>> s = Style()
-    >>> s[u'div.body'] = {'color': u'red'}
-    >>> s[u''] = {'color': u'blue'}
-
-    >>> methods = Methods(s, None)
-    >>> methods.getWidgetStyle()
-    {u'': {'color': 'blue'}, u'div.body': {'color': 'red'}}
-
-    >>> methods.getSelectorStyle('')
-    {'color': 'blue'}
-
-    >>> methods.getSelectorStyle('div.body')
-    {'color': 'red'}
-
-    >>> methods.setSelectorStyle('', {"border": "none", "font-style": 
"normal"})
-    >>> methods.getSelectorStyle('')
-    {'border': 'none', 'font-style': 'normal'}
-
-    >>> methods.delSelectorStyle('')
-    >>> methods.getWidgetStyle()
-    {u'div.body': {'color': 'red'}}
-    """
-
-    def __init__(self, context, request):
-        self.context = context
-        self.request = request
-
-    def getWidgetType(self):
-        return
-
-    def getWidgetStyle(self):
-        return json.write(dict(self.context))
-
-    def getSelectorStyle(self, k):
-        return json.write(self.context.get(k))
-
-    def setSelectorStyle(self, k, v):
-        self.context[k] = json.read(v)
-
-    def delSelectorStyle(self, k):
-        if k in self.context:
-            del self.context[k]
+    def getPreviewDef(self, id):
+        tmutil = getThemeManager(self.context)
+        style = tmutil.getElementById(id)
+        style_path = zapi.getPath(style)
+        return json.write({
+            'id': 'style-editor-preview',
+            'widget': {
+                'type': 'panel'
+            },
+            'model': 'style-editor',
+            'controllers': ['style-editor-preview', 
'main-editor-perspectives'],
+            'perspectives': ['element-editor'],
+        })
 
-    def getFieldRange(self, widget_type, sel):
-        # TODO: this is for testing
+    def getFormDef(self, id):
+        tmutil = getThemeManager(self.context)
+        style = tmutil.getElementById(id)
+        style_path = zapi.getPath(style)
         return json.write({
-            'color': [],
-            'background-color': [],
-            'padding': [],
-            'margin': [],
-            'font-family': [u'arial, sans-serif', u'verdana', u'MS trebuchet'],
-            'font-size': [u'0.8em', u'12px', u'13px'],
-            'border': [u'1px solid #f0f0f0', u'none', u'1px inset gray'],
-            })
+            'id': 'style-editor-form',
+            'widget': {
+                'template': '/++skin++cpsskins/%s/@@style-editor-form.html' % \
+                    style_path,
+            },
+            'model': 'style-editor',
+            'controllers': ['style-editor-form'],
+        })
 
-    def renderPreview(self, widget_type):
-        """Render a style preview based on the specified widget.
-        """
-        widget = getUtility(configuration.IWidget, widget_type)
-        return widget.view(None, None).renderPreview()
+    def setFormData(self):
+        session_data = self.session[u'style-editor-data']
+        selector = session_data[u'selector']
+        sel_data = self.context.get(selector)
+        if sel_data is None:
+            self.context[selector] = {}
+
+        self.context[selector] = dict(self.request.form)
 
     def setData(self, data):
-        print data
+        self.session[u'style-editor-data'] = json.read(data)
+        self.request.response.setHeader('content-type', 'text/x-json')
+        return data
 
     def getData(self):
+        session_data = self.session[u'style-editor-data']
+        selector = session_data[u'selector']
+
         fields = []
+        sel = self.context.get(selector, {})
         for f in u'color', u'background-color', u'padding', u'border':
             fields.append({
                 'name': f,
                 'label': f,
-                'value': self.context.get(f, default=u''),
+                'value': sel.get(f, u''),
                 'disabled': False,
                 'status': u'',
             })
         data = {
             'fields': fields,
-            'widget': ''
+            'widget': session_data[u'widget'],
+            'selector': selector,
         }
         self.request.response.setHeader('content-type', 'text/x-json')
         return json.write(data)
-- 
http://lists.nuxeo.com/mailman/listinfo/z3lab-checkins

Reply via email to