concrete 0.2.0

data/concrete/ui/style.css

@@ -0,0 +1,296 @@
+/* Layout */
+
+#ct_layout_toolbar {
+  background-color: #ccf;
+  border-bottom: 1px solid grey; 
+}
+
+#ct_layout_sidebar_drag {
+  background-color: #ccf;
+  border-left: 1px solid grey; 
+  border-right: 1px solid grey; 
+}
+
+/* Toolbar */
+
+a.ct_toolbar_icon {
+  width: 32px;
+  height: 32px;
+  margin: 6px 6px 6px 6px;
+}
+
+a.ct_toolbar_icon:hover {
+  margin: 3px 6px 9px 6px;
+}
+
+.ct_tooltip_popup {
+	background-color: #FFD;	
+	border: 1px solid #777;
+  color: black;
+  padding: 3px;
+  white-space: nowrap;
+  font-family: arial;
+}
+
+.ct_create_module_button {
+  float:left; 
+  background-image: url(images/document-new.png);
+}
+
+.ct_save_button {
+  float:left; 
+  background-image: url(images/document-save.png);
+}
+
+.ct_open_element_button {
+  float:left;
+  background-image: url(images/system-search.png);
+}
+
+.ct_search_replace_button {
+  float:left;
+  background-image: url(images/edit-find-replace.png);
+}
+
+.ct_toggle_short_references_button {
+  float:left;
+  background-image: url(images/emblem-symbolic-link.png);
+}
+
+.ct_preferences_button {
+  float:right;
+  background-image: url(images/preferences-system.png);
+}
+
+.ct_browse_help_button {
+  float:right;
+  background-image: url(images/help-browser.png);
+}
+
+.ct_stop_server_button {
+  float:right;
+  background-image: url(images/process-stop.png);
+}
+
+/* Browser */
+
+.ct_module_browser.ct_editor {
+  border: 0px;
+}
+
+.ct_module_browser.ct_editor.ct_focus {
+  border: 0px;
+}
+
+.ct_module_browser .ct_class_name {
+}
+
+.ct_module_browser .ct_feature_name {
+  display: none;
+}
+
+.ct_module_browser .ct_fold_open {
+  display: inline-block;
+  width: 11px;
+  height: 11px;
+  background-image: url("images/minus_11px.png");
+}
+
+.ct_module_browser .ct_fold_closed {
+  display: inline-block;
+  width: 11px;
+  height: 11px;
+  background-image: url("images/plus_11px.png");
+}
+
+.ct_module_browser .ct_fold_empty {
+  display: none;
+}
+
+/* Editor */
+
+.ct_module_editor.ct_editor {
+  border: 0px;
+}
+
+.ct_module_editor.ct_editor.ct_focus {
+  border: 0px;
+}
+
+.ct_module_editor .ct_fold_open {
+  display: inline-block;
+  width: 11px;
+  height: 11px;
+  background-image: url("images/minus_11px.png");
+}
+
+.ct_module_editor .ct_fold_closed {
+  display: inline-block;
+  width: 11px;
+  height: 11px;
+  background-image: url("images/plus_11px.png");
+}
+
+.ct_module_editor .ct_fold_empty {
+  display: none;
+}
+
+/* Clipboard */
+
+.ct_clipboard_area {
+  margin: 30px 10px 10px 10px; 
+  background-color: white; 
+  color: black; 
+  border: 1px solid grey;
+}
+
+/* Auto Completer */
+
+.auto_complete_dropdown {
+  position: absolute; 
+  border: 1px solid grey; 
+  background-color: white;
+  padding: 0;
+  margin: 0;
+}
+
+.auto_complete_dropdown ul {
+	padding: 0;
+	margin: 0;
+}
+
+.auto_complete_dropdown ul li {
+	padding: 0;
+	margin: 0;
+	list-style-type: none;
+	color: black;
+	text-align: left;	
+}
+
+.auto_complete_dropdown ul li.selected {
+	background-color: #ccf;		
+}
+
+/* Popup Dialog General */
+
+.popup_dialog {
+	font-family: "arial";
+	font-size: 14;
+}
+
+.popup_dialog .dialog_box {
+	background-color: white;
+	border: 1px solid gray;
+}
+
+.popup_dialog .shadow {
+  background-color: grey;
+  left: -5px;
+  top: -5px;
+  position: absolute;
+  opacity: 0.2;
+  z-index: -1;
+  border-radius: 5px;
+}
+
+.popup_dialog .title_bar {
+  padding: 5px;
+  background-color: #ccf;
+	font-size: 16;
+  font-weight: bold;
+  border-bottom: 1px solid gray;
+  cursor: move;
+}
+
+.popup_dialog .container {
+  margin: 15px;
+}
+
+.popup_dialog .label {
+  padding: 0;
+  margin-top: 5px;
+  margin-bottom: 5px;
+	font-size: 16;
+	color: black;
+}
+
+.popup_dialog .text_input {
+  width: 100%;
+  margin-top: 5px;
+  margin-bottom: 5px;
+  border: 1px solid grey;
+	color: black;
+}
+
+.popup_dialog .dropdown_input {
+  width: 100%;
+  margin-top: 5px;
+  margin-bottom: 5px;
+  border: 1px solid grey;
+	color: black;
+}
+
+.popup_dialog .button_input {
+  padding: 5px 20px 5px 20px;
+  border: 1px solid grey;
+  background-color: #ccf;
+	color: black;
+  margin: 5px;
+}
+
+.popup_dialog .close_button {
+  width: 16px;
+  height: 16px;
+  float: right;
+  background-image: url(images/close.png);
+  cursor: default;
+}
+
+/* Open Element Dialog */
+
+#ct_open_element_dialog {
+	width: 600px;
+}
+
+#ct_open_element_dialog .search_box_list_container {
+  margin-top: 10px;
+  background-color: white;
+  border: 1px solid grey;
+  width: 100%;
+  height: 200px;
+}
+
+/* in this dialog there is already a box around the dropdown area */
+#ct_open_element_dialog .auto_complete_dropdown {
+  border: 0;
+}
+
+#ct_open_element_dialog .search_box_list {
+  width: 100%;
+  height: 200px;
+  overflow-x: hidden;
+  overflow-y: auto;
+}
+
+#ct_open_element_dialog .search_box_list li {
+  padding: 3px;
+}
+
+#ct_open_element_dialog .search_box_identifier {
+  color: #aa0000;
+}
+
+#ct_open_element_dialog .search_box_class_name {
+  color: #0000aa;
+}
+
+#ct_open_element_dialog .search_box_module_name {
+  font-size: 90%;
+}
+
+/* Search Replace Dialog */
+
+#ct_search_replace_dialog {
+	width: 600px;
+}
+

data/concrete/ui/toolbar.js

@@ -0,0 +1,74 @@
+Concrete.UI.Toolbar = Class.create({
+
+  initialize: function(parentElement) {
+    this.toolbar = this._createDomElement(parentElement);
+    this.popup = this.toolbar.down(".ct_tooltip_popup");
+    this.hotkeys = new Hash();
+    this.tooltips = {};
+  },
+
+  handleEvent: function(event) {
+    var handeled = false;
+    if (event.type == "keydown") {
+      this.hotkeys.keys().each(function(k) {
+        var match = k.match(/^(ctrl\+)?(shift\+)?(\w)$/);
+        if (match) {
+          var ctrl = match[1];
+          var shift = match[2];
+          var keyCode = match[3].charCodeAt(0);
+          if ((shift && event.shiftKey || !shift && !event.shiftKey) &&
+            (ctrl && event.ctrlKey || !ctrl && !event.ctrlKey) &&
+            keyCode == event.keyCode) {
+            this.hotkeys.get(k)();
+            event.stop();
+            handeled = true;
+            throw $break;
+          }
+        }
+      }, this);
+    }
+    else if (event.type == "mousemove") {
+      var element = Event.element(event);
+      this.popup.hide();
+      if (element.hasClassName("ct_toolbar_icon")) {
+        var clazz = element.className.sub("ct_toolbar_icon ","");
+        var tooltip = this.tooltips[clazz];
+        if (tooltip && tooltip.length > 0) {
+          this.popup.innerHTML = tooltip;
+          var left = event.clientX+20;
+          if (left > document.viewport.getDimensions().width - this.popup.getWidth()) {
+            left = document.viewport.getDimensions().width - this.popup.getWidth();
+          }
+          this.popup.setStyle({left: left, top: event.clientY+20});
+          this.popup.show();
+        }
+      }
+    }
+    return handeled;
+  },
+
+  addCommand: function(options, func) {
+    if (options.hotkey) {
+      this.hotkeys.set(options.hotkey, func);
+    }
+    var clazz = options.buttonClass || "";
+    if (options.tooltip && clazz.length > 0) {
+      this.tooltips[clazz] = options.tooltip;
+    }
+    Element.insert(this.toolbar, { bottom:
+      "<a class='ct_toolbar_icon "+clazz+"'></a>"
+    });
+    var icon = this.toolbar.childElements().last();
+    icon.onclick = func;
+  },
+
+  _createDomElement: function(parentElement) {
+    Element.insert(parentElement, { bottom: 
+      "<div class='ct_toolbar'>" +
+        "<div style='position: fixed; display: none; left: 0; top: 0;' class='ct_tooltip_popup'></div>" +
+      "</div>"
+    });
+    return parentElement.childElements().last();
+  },
+
+});

data/concrete/ui/workbench.js

@@ -0,0 +1,165 @@
+Concrete.UI.Workbench = {
+
+  // Toplevel setup of an editor workbench.
+  // Creates editor views and connects event and command handlers.
+  // 
+  // Options:
+  //
+  // moduleBrowserOptions: options passed to the module browser, default: none
+  // moduleEditorOptions: options passed to the module editor, default: none
+  //
+  setup: function(metamodel, indexMetamodel, options) {
+    options = options || {};
+
+    var layoutManager = new Concrete.UI.LayoutManager();
+
+    var toolbar = new Concrete.UI.Toolbar(layoutManager.toolbar);
+
+    var mp = new Concrete.MetamodelProvider(metamodel);
+
+    var index = []; 
+    var eip = new Concrete.IndexBasedExternalIdentifierProvider(index, mp);
+
+    var editorOptions = options.moduleEditorOptions || {};
+    editorOptions.onFollowReference = function(module, ident) {
+      jumpReference(module, ident);
+    };
+    var moduleEditor = new Concrete.UI.ModuleEditor(layoutManager.main, eip, mp, editorOptions);
+
+    var browserOptions = options.moduleBrowserOptions || {};
+    browserOptions.onOpenModule = function(module, ident) {
+      jumpReference(module, ident);
+    };
+    var moduleBrowser = new Concrete.UI.ModuleBrowser(layoutManager.sidebar, indexMetamodel, browserOptions);
+
+    var openElementDialog = new Concrete.UI.OpenElementDialog(eip, {
+      onOpenReference: function(module, ident) {
+        jumpReference(module, ident);
+      }
+    });
+
+    var searchReplaceDialog = new Concrete.UI.SearchReplaceDialog({
+      metamodelProvider: mp
+      });
+
+    var preferencesDialog = new Concrete.UI.PreferencesDialog();
+
+    // Event Handler
+
+    Event.observe(window, 'click', function(event) {
+      moduleEditor.handleEvent(event);
+      moduleBrowser.handleEvent(event);
+    });
+    Event.observe(window, 'dblclick', function(event) {
+      moduleBrowser.handleEvent(event);
+    });
+    Event.observe(window, 'keydown', function(event) {
+      if (toolbar.handleEvent(event)) {}
+      else if ($$(".popup_dialog").any(function(d) {return d.visible();})) {}
+      else {
+        moduleEditor.handleEvent(event);
+        moduleBrowser.handleEvent(event);
+      }
+    });
+    Event.observe(window, 'mousedown', function(event) {
+      layoutManager.handleEvent(event);
+    });
+    Event.observe(window, 'mouseup', function(event) {
+      layoutManager.handleEvent(event);
+    });
+    Event.observe(window, 'mousemove', function(event) {
+      toolbar.handleEvent(event);
+      if (layoutManager.handleEvent(event)) {}
+      else { 
+        moduleEditor.handleEvent(event);
+        moduleBrowser.handleEvent(event);
+      }
+    });
+
+    // Commands
+
+    toolbar.addCommand({buttonClass: "ct_create_module_button", tooltip: "Create Module"}, function() {
+      moduleEditor.createModule({
+        onSuccess: function() {
+          loadIndex();
+        },
+        onFailure: function() {
+          alert("Create module failed");
+        }
+      });
+    });
+
+    toolbar.addCommand({buttonClass: "ct_save_button", hotkey: "ctrl+shift+S", tooltip: "Save Module"}, function() {
+      moduleEditor.save({
+        onSuccess: function() {
+          loadIndex();
+        },
+        onFailure: function() {
+          alert("Save failed");
+        }
+      });
+    });
+
+    toolbar.addCommand({buttonClass: "ct_open_element_button", hotkey: "ctrl+shift+E", tooltip: "Open Element"}, function() {
+      openElementDialog.open(eip.getAllElementInfo());
+    });
+
+    toolbar.addCommand({buttonClass: "ct_search_replace_button", hotkey: "ctrl+shift+F", tooltip: "Search and Replace"}, function() {
+      searchReplaceDialog.open(moduleEditor.editor);
+    });
+
+    toolbar.addCommand({buttonClass: "ct_toggle_short_references_button", tooltip: "Toggle Short References"}, function() {
+      moduleEditor.toggleShortReferences();
+    });
+
+    toolbar.addCommand({buttonClass: "ct_stop_server_button", tooltip: "Stop Server"}, function() {
+      new Ajax.Request("/exit");
+    });
+
+    toolbar.addCommand({buttonClass: "ct_browse_help_button", tooltip: "Browse Help"}, function() {
+      window.open("/doc/concrete_users_guide.html", "Concrete Users Guide");
+    });
+
+    toolbar.addCommand({buttonClass: "ct_preferences_button", tooltip: "Preferences"}, function() {
+      preferencesDialog.open();
+    });
+
+    function jumpReference(module, ident) {
+      var href = "#"+module+((ident && ":"+ident) || "");
+      window.location.href = href; 
+    }
+
+    function loadIndex(options) {
+      new Ajax.Request("/loadIndex", {
+        method: "get",
+        onSuccess: function(transport) {
+          index.clear();
+          var indexJson = transport.responseText.evalJSON(); 
+          indexJson.sortBy(function(m) {return m.name}).each(function(m) {
+            index.push(m);
+          });
+          moduleBrowser.loadIndex(index);
+          if (options && options.onIndexLoaded) options.onIndexLoaded();
+        }
+      });
+    }
+
+    window.onresize = function() {
+      layoutManager.layout();
+    };
+
+    window.onhashchange = function() {
+      var match = window.location.href.match(/#([^:]+):?(.*)/)
+      var module = match && match[1];
+      var ident = match && match[2];
+      moduleEditor.select(module, ident);
+    };
+
+    // first update after loading
+    window.onresize();
+    loadIndex({onIndexLoaded: function() {
+      window.onhashchange();
+    }});
+  }
+};
+