concrete 0.2.0

data/concrete/ui/abstract_dialog.js

@@ -0,0 +1,80 @@
+Concrete.UI.AbstractDialog = Class.create({
+
+  initialize: function(dialogElement, options) {
+    this.dialogElement = dialogElement;
+    this.options = options || {};
+    this.proceedButton = dialogElement.down(".proceed_button");
+    this.active = false;
+    this.moving = false;
+    Event.observe(window, 'mouseup', function(event) {
+      this.moving = false;
+    }.bind(this));
+    Event.observe(window, 'mousedown', function(event) {
+      var element = Event.element(event);
+      if (element == this.dialogElement.down(".title_bar")) {
+        this.moving = true;
+        var offset = this.dialogElement.cumulativeOffset();
+        this.moveOffset = {left: event.clientX-offset.left, top: event.clientY-offset.top};
+        event.stop();
+      }
+    }.bind(this));
+    Event.observe(window, 'mousemove', function(event) {
+      if (this.moving) {
+        this.dialogElement.setStyle({left: event.clientX-this.moveOffset.left, top: event.clientY-this.moveOffset.top});
+      }
+    }.bind(this));
+    Event.observe(window, 'click', function(event) {
+      if (this.active) {
+        var element = Event.element(event);
+        if (element == this.dialogElement.down(".close_button")) {
+          this.close();
+        }
+        else if (this.proceedButton && element == this.proceedButton) {
+          this.close();
+          this._proceed();
+        }
+        else if (element.ancestors().include(this.dialogElement) && element.hasClassName("button_input")) {
+          this._buttonPressed(element);
+        }
+      }
+    }.bind(this));
+    Event.observe(window, 'keydown', function(event) {
+      if (this.active) {
+        if (event.keyCode == 27) { // esc
+          this.close();
+          event.stop();				
+        }
+        else if (event.keyCode == 13 && this.proceedButton) { // return
+          this.close();
+          this._proceed();
+          event.stop();
+        }
+      }
+    }.bind(this));
+  },
+
+  _proceed: function() {
+    // override in subclass
+  },
+
+  _buttonPressed: function(element) {
+    // override in subclass
+  },
+
+  open: function() {
+    this.dialogElement.setStyle({left: (window.innerWidth-this.dialogElement.getWidth())/2, top: (window.innerHeight-this.dialogElement.getHeight())/2});
+    this.dialogElement.down(".shadow").setStyle({width: this.dialogElement.getWidth()+10, height: this.dialogElement.getHeight()+10});
+    this.dialogElement.show();
+    this.dialogElement.down("input").select();
+    this.active = true;
+  },
+
+  close: function() {
+    this.dialogElement.hide();
+    this.active = false;
+  }
+
+});
+
+
+

data/concrete/ui/concrete_ui.js

@@ -0,0 +1,28 @@
+Concrete.UI = {
+  load: function() {
+    var js = /concrete_ui\.js(\?.*)?$/;
+    $$('head script[src]').findAll(function(s) {
+      return s.src.match(js);
+    }).each(function(s) {
+      var path = s.src.replace(js, '');
+      [
+				'abstract_dialog',
+        'proceed_dialog',
+        'open_element_dialog',
+        'search_replace_dialog',
+        'preferences_dialog',
+        'create_module_dialog',
+        'layout_manager',
+        'toolbar',
+        'module_browser',
+        'module_editor',
+        'workbench'
+      ].each( function(include) { 
+      	Concrete.require(path + include + '.js');
+    	});
+		});
+	}
+}
+
+Concrete.UI.load();
+

data/concrete/ui/create_module_dialog.js

@@ -0,0 +1,55 @@
+Concrete.UI.CreateModuleDialog = Class.create(Concrete.UI.AbstractDialog, {
+
+  initialize: function($super, options) {
+    options = options || {};
+    var dialogElement = this._createDomElement();
+    $super(dialogElement, options);
+    this.moduleNameInput = dialogElement.down(".module_name_input");
+  },
+
+  _createDomElement: function() {
+    if ($('ct_create_module_dialog')) return $('ct_create_module_dialog');
+    Element.insert($$('body').first(), { bottom: 
+    "<div id='ct_create_module_dialog' class='popup_dialog' style='display: none; position: fixed; z-index: 1000; max-width: 400px'>" +
+      "<div class='shadow'></div>" +
+      "<div class='dialog_box'>" +
+      "<div class='title_bar'>Create Module" +
+        "<a class='close_button'></a>" +
+      "</div>" +
+      "<div class='container'>" +
+        "<p class='label'>Relative Module Path</p>" +
+        "<input type='text' class='text_input module_name_input' />" + 
+        "<p>The module path is relative to the working set root directory defined at server startup time, '..' is not allowed.</p>" +
+        "<div style='text-align: center; margin: 10px'>" +
+          "<input class='button_input proceed_button' type='button' value='Create' />" +
+          "<input class='button_input cancel_button' type='button' value='Cancel' />" +
+        "</div>" +
+      "</div>" +
+      "</div>" +
+    "</div>" }); 
+    return $('ct_create_module_dialog');
+  },
+
+  _proceed: function() {
+    if (this._onCreateModule) {
+      this._onCreateModule(this.moduleNameInput.value);
+    }
+  },
+
+  _buttonPressed: function(element) {
+    if (element == this.dialogElement.down(".cancel_button")) {
+      this.close();
+    }
+  },
+
+  open: function($super, options) {
+    $super();
+    this._onCreateModule = options.onCreateModule;
+    this.moduleNameInput.value = "";
+  }
+
+});
+
+
+
+

data/concrete/ui/layout_manager.js

@@ -0,0 +1,54 @@
+Concrete.UI.LayoutManager = Class.create({
+
+  initialize: function() {
+    this._createDomElements();
+    this.main = $('ct_layout_main');
+    this.sidebar = $('ct_layout_sidebar');
+    this.toolbar = $('ct_layout_toolbar');
+    this._sidebarDrag = $('ct_layout_sidebar_drag');
+    this._sidebarWidth = 200;
+  },
+
+  _createDomElements: function() {
+    if ($('ct_layout_main')) return;
+    Element.insert($$('body').first(), { bottom: 
+      "<div id='ct_layout_main' style='position: absolute; padding: 0; margin: 0; overflow: auto'></div>" +
+      "<div id='ct_layout_sidebar' style='position: absolute; padding: 0; margin: 0; overflow: auto'></div>" +
+      "<div id='ct_layout_sidebar_drag' style='position: absolute; padding: 0; margin: 0; width: 4px; cursor: e-resize'></div>" +
+      "<div id='ct_layout_toolbar' style='position: absolute; padding: 0; margin: 0'></div>" 
+    });
+  },
+
+  handleEvent: function(event) {
+    if (event.type == "mousedown") {
+      if (Event.element(event) == this._sidebarDrag) {
+        this._dragging = true;
+        event.stop();
+        return true;
+      }
+    }
+    else if (event.type == "mouseup") {
+      this._dragging = false;
+    }
+    else if (event.type == "mousemove") {
+      if (this._dragging) {
+        this._sidebarWidth = Event.pointerX(event);
+        this.layout();
+        event.stop();
+        return true;
+      }
+    }
+  },
+
+  layout: function() {
+    var tb = this.toolbar; 
+    var sb = this.sidebar;
+    var sbd = this._sidebarDrag; 
+    var main = this.main; 
+    tb.setStyle({left: 0, top: 0, width: window.innerWidth});
+    sb.setStyle({left: 0, top: tb.getHeight(), width: this._sidebarWidth, height: window.innerHeight-tb.getHeight()});
+    sbd.setStyle({left: sb.getWidth(), top: tb.getHeight(), height: window.innerHeight-tb.getHeight()});
+    main.setStyle({left: sb.getWidth()+sbd.getWidth(), top: tb.getHeight(), width: window.innerWidth-sb.getWidth()-sbd.getWidth(), height: window.innerHeight-tb.getHeight()});
+  }
+
+});

data/concrete/ui/module_browser.js

@@ -0,0 +1,88 @@
+// A hierarchical view of the modules and elements in the index.
+//
+Concrete.UI.ModuleBrowser = Class.create({
+
+  // Options:
+  //   childFilter:      a function defining the displayed children per element 
+  //                     it is called for each displayed element and should return the children to be displayed
+  //                     default: none, i.e. all children of all elements visible
+  //   templateProvider: custom template provider, default: none (use standard template provider) 
+  // 
+  initialize: function(parentElement, indexMetamodel, options) {
+    this.options = options || {};
+    var browserElement = this._createContainerElement(parentElement);
+    this.browser = this._createBrowser(browserElement, parentElement, indexMetamodel);
+  },
+
+  _createContainerElement: function(parentElement) {
+    Element.insert(parentElement, { bottom: 
+      "<div class='ct_editor ct_module_browser' style='position: absolute; white-space: nowrap'></div>"
+    });
+    return parentElement.childElements().last();
+  },
+
+  _createTemplatesElement: function(parentElement) {
+    Element.insert(parentElement, { bottom: 
+      "<div style='display: none'></div>"
+    });
+    return parentElement.childElements().last();
+  },
+
+  handleEvent: function(event) {
+    if ((event.type == "dblclick" || event.keyCode == 13) && this.browser.editorRoot.hasClassName("ct_focus")) {
+      var selected = this.browser.selector.selected;
+      if (selected) {
+        var moduleElement = this._findModuleElement(selected); 
+        if (moduleElement) {
+          var module = moduleElement.down(".ctn_name").down(".ct_value").value;
+          if (!selected.hasClassName("ct_element")) selected = selected.up(".ct_element");
+          var target = this.browser.identifierProvider.getIdentifier(selected);
+          // remove filename from identifier
+          target = target.sub("/"+module, "");
+          this.options.onOpenModule(module, target);
+        }
+      }
+    }
+	  this.browser.handleEvent(event);
+  },
+
+  loadIndex: function(index) {
+    this.browser.modelInterface.removeElement(this.browser.modelRoot.childElements());
+    index.each(function(m) {
+      this.browser.modelInterface.createElement(this.browser.modelRoot, "bottom", this._filterChildren(m), {"collapse": true});
+    }, this);
+  },
+
+  _findModuleElement: function(node) {
+    var element = node.hasClassName("ct_element") ? node : node.up(".ct_element");
+    while (!element.parentNode.hasClassName("ct_root")) {
+      element = element.up(".ct_element"); 
+    }
+    return element;
+  },
+
+  _createBrowser: function(browserElement, parentElement, indexMetamodel) {
+    var tp = this.options.templateProvider || new Concrete.TemplateProvider(this._createTemplatesElement(parentElement), {identifierAttribute: "name"});
+    var mp = new Concrete.MetamodelProvider(indexMetamodel);
+    var ip = new Concrete.QualifiedNameBasedIdentifierProvider({nameAttribute: "name"});
+    var ed = new Concrete.Editor(browserElement, tp, mp, ip, {
+      readOnlyMode: true, 
+      followReferenceSupport: false,
+      showInfoPopups: false,
+      scrolling: "vertical"});
+    // HACK to disable constraint checking
+    ed.constraintChecker._updateAllProblems = function() {};
+    return ed;
+  },
+
+  _filterChildren: function(element) {
+    if (!this.options.childFilter) return element;
+    var result = Object.clone(element);
+    var elements = this.options.childFilter(element);
+    result.elements = elements && elements.collect(function(e) {
+      return this._filterChildren(e);
+    }, this);
+    return result;
+  }
+
+})

data/concrete/ui/module_editor.js

@@ -0,0 +1,217 @@
+Concrete.UI.ModuleEditor = Class.create({
+
+  // Options:
+  //   templateProvider:    custom template provider, default: none (use standard template provider) 
+  //   rootClasses:         array of names of classes which can be instantiated on root level, default: all
+  //   duplicatableClasses: array of names of classes of which multiple instances can exist with the same qualified name, default: none 
+  //   identifierAttribute: name of the identifier attribute, default: name
+  //   shortReferences:     if set to true, display only the last part of each reference, default: false
+  // 
+  initialize: function(parentElement, extIdentProvider, metamodelProvider, options) {
+    options = options || {};
+    options.duplicatableClasses = options.duplicatableClasses || [];
+    this.options = options;
+    this._extIdentProvider = extIdentProvider;
+    this._metamodelProvider = metamodelProvider;
+    this._editorElement = this._createContainerElement(parentElement);
+    this._clipboard = this._createClipboard(parentElement);
+    this._templateProvider = options.templateProvider || new Concrete.TemplateProvider(this._createTemplatesElement(parentElement));
+    this._shortReferences = options.shortReferences == true ? true : false;
+    this.editor = this._createEditor();
+    this._modelChanged = false;
+    this._saveDiscardDialog = new Concrete.UI.ProceedDialog({
+      title: "Discard Changes?",
+      message: "The model has not yet been saved. If you continue, your modifications will be lost.",
+      proceedButtonText: "Discard Changes"
+    });
+    this._createModuleDialog = new Concrete.UI.CreateModuleDialog();
+  },
+
+  _createContainerElement: function(parentElement) {
+    Element.insert(parentElement, { bottom: 
+      "<div class='ct_editor ct_module_editor'></div>"
+    });
+    return parentElement.childElements().last();
+  },
+
+  _createTemplatesElement: function(parentElement) {
+    Element.insert(parentElement, { bottom: 
+      "<div style='display: none'></div>"
+    });
+    return parentElement.childElements().last();
+  },
+
+  _createClipboard: function(parentElement) {
+    Element.insert(parentElement, { bottom: 
+      "<textarea class='ct_clipboard_area' cols='80' rows='10' wrap='off'></textarea>"
+    });
+    return new Concrete.Clipboard(parentElement.childElements().last());
+  },
+
+  handleEvent: function(event) {
+    this.editor.handleEvent(event);
+  },
+
+  select: function(module, ident) {
+    if (module == this.currentModule) {
+      if (ident) this._selectElementByIdentifier(ident);
+      this.editor.focus();
+    }
+    else {
+      var dowork = function() {
+        this.currentModule = module;
+        this._editorElement.innerHTML = "";
+        this.editor = this._createEditor(module);
+        this._loadModule(module, ident);
+        this.editor.focus();
+      }.bind(this);
+
+      if (this._modelChanged) {
+        this._saveDiscardDialog.open({onProceed: dowork});
+      }
+      else {
+        dowork();
+      }
+    }
+  },
+
+  createModule: function(options) {
+    var dowork = function() {
+      this._createModuleDialog.open({onCreateModule: function(module) {
+        new Ajax.Request("/createModule", {
+          method: 'get',
+          parameters: {"module": module},
+          onSuccess: function(transport) {
+            this.select(module);
+            if (options.onSuccess) options.onSuccess();
+          }.bind(this),
+          onFailure: function() {
+            if (options.onFailure) options.onFailure();
+          }
+        });
+      }.bind(this)});
+    }.bind(this);
+
+    if (this._modelChanged) {
+      this._saveDiscardDialog.open({onProceed: dowork});
+    }
+    else {
+      dowork();
+    }
+  },
+
+  save: function(options) {
+    if (!this.currentModule) return;
+    new Ajax.Request("/storeModule", {
+      method: 'post',
+      postBody: this.currentModule + "\n" + this.editor.getModel(),
+      onSuccess: function() {
+        this._modelChanged = false;
+        if (options.onSuccess) options.onSuccess();
+      }.bind(this),
+      onFailure: function() {
+        if (options.onFailure) options.onFailure();
+      }
+    });
+  },
+
+  toggleShortReferences: function() {
+    this._shortReferences = !this._shortReferences;
+    this._setDisplayValueProvider(this.editor.modelInterface);
+    this.editor.modelInterface.redrawDisplayValues();
+  },
+  
+  _loadModule: function(module, ident) {
+    var editor = this;
+    new Ajax.Request("/loadModule", {
+      method: "get",
+      parameters: {"module": module},
+      onSuccess: function(transport) {
+        if (transport.responseText.isJSON()) {
+          editor.editor.setModel(transport.responseText);
+          editor._selectElementByIdentifier(ident);
+          editor._modelChanged = false;
+        }
+      },
+      onException: function(request, exception) {
+        throw exception;
+      }
+    });
+  },
+
+  _createEditor: function(module) {
+    var ip = new Concrete.QualifiedNameBasedIdentifierProvider({nameAttribute: this.options.identifierAttribute});
+    var _this = this;
+    var rootClasses = this.options.rootClasses ? 
+      this.options.rootClasses.collect(function(c) {return this._metamodelProvider.metaclassesByName[c]}, this) :
+      this._metamodelProvider.metaclasses;
+    var duplicatableClasses = this.options.duplicatableClasses.collect(function(c) {return this._metamodelProvider.metaclassesByName[c]}, this);
+    var ed = new Concrete.Editor(this._editorElement, this._templateProvider, this._metamodelProvider, ip, {
+      clipboard: this._clipboard, 
+      externalIdentifierProvider: this._extIdentProvider, 
+      externalModule: module,
+      constraintChecker: new Concrete.ConstraintChecker(rootClasses, ip, 
+        {externalIdentifierProvider: this._extIdentProvider, 
+         externalModule: module,
+         allowDuplicates: duplicatableClasses}),
+      followReferenceSupport: false,
+      onFollowReference: function(ref, target) {
+        var ident = ed.identifierProvider.getIdentifier(target)
+        _this.options.onFollowReference(_this.currentModule, ident);
+      },
+      onFollowExternalReference: function(module, ident) {
+        _this.options.onFollowReference(module, ident);
+      },
+      rootClasses: rootClasses,
+      });
+    ed.modelInterface.addModelChangeListener(this);
+    this._setDisplayValueProvider(ed.modelInterface);
+    return ed;
+  },
+
+  _setDisplayValueProvider: function(modelInterface) {
+    if (this._shortReferences) {
+      var dvp = function(text, feature) {
+        if (feature.mmFeature.isReference()) {
+          return text.toString().split("/").last();
+        }
+        else {
+          return text;
+        }
+      };
+    }
+    else {
+      var dvp = function(text, feature) {
+        return text;
+      };
+    } 
+    modelInterface.setDisplayValueProvider(dvp);
+  },
+
+  _selectElementByIdentifier: function(ident) {
+    var target = this.editor.identifierProvider.getElement(ident);
+    if (target) {
+      this.editor.selector.selectDirect(target);
+    }
+  },
+
+	// ModelChangeListener Interface
+	elementAdded: function(element) {
+	},
+
+	elementChanged: function(element, feature) {
+	},
+
+	elementRemoved: function(element) {
+	},
+	
+	rootChanged: function(root) {
+	},
+
+	commitChanges: function() {
+    this._modelChanged = true;
+	}
+
+});
+
+