Author: jmorliaguet
Date: Sun Jan 15 12:50:40 2006
New Revision: 2213
Added:
cpsskins/branches/jmo-perspectives/ui/framework/tests/functional/cpsskins_contextualactions_test.html
(contents, props changed)
Modified:
cpsskins/branches/jmo-perspectives/ui/framework/cpsskins.css
cpsskins/branches/jmo-perspectives/ui/framework/cpsskins.js
cpsskins/branches/jmo-perspectives/ui/framework/tests/functional/cpsskins_tooltip.html
Log:
- added contextual actions (derived from the contextual menu)
- some fixes / code cleaning
Modified: cpsskins/branches/jmo-perspectives/ui/framework/cpsskins.css
==============================================================================
--- cpsskins/branches/jmo-perspectives/ui/framework/cpsskins.css
(original)
+++ cpsskins/branches/jmo-perspectives/ui/framework/cpsskins.css Sun Jan
15 12:50:40 2006
@@ -96,6 +96,28 @@
width: 100%;
}
+/* Contextual actions */
+
+.contextualActions {
+ font: 11px Verdana, Arial, Helvetica, sans-serif;
+ color: #000;
+ background-color: #fff9cf;
+ border: 1px solid #dd9;
+}
+
+.contextualActions a {
+ cursor: default;
+ text-decoration: none;
+ vertical-align: top;
+ padding: 4px 15px 4px 26px;
+ background-repeat: no-repeat;
+ background-position: 6px center;
+ color: #000;
+ display: block;
+ float: left;
+}
+
+
/* Drag-and-drop */
#drag-feedback-box {
Modified: cpsskins/branches/jmo-perspectives/ui/framework/cpsskins.js
==============================================================================
--- cpsskins/branches/jmo-perspectives/ui/framework/cpsskins.js (original)
+++ cpsskins/branches/jmo-perspectives/ui/framework/cpsskins.js Sun Jan 15
12:50:40 2006
@@ -17,7 +17,7 @@
*/
var CPSSkins = {
- Version: "0.3",
+ Version: "0.4",
Controllers: $H({}),
@@ -75,19 +75,19 @@
switch(classid) {
case "view": {
- var config = CPSSkins.jsonParse(el);
+ var def = CPSSkins.jsonParse(el);
- var widget_type = config.widget.type;
+ var widget_type = def.widget.type;
if (!(widget_type in Widgets)) {
return;
}
var factory = Widgets[widget_type];
if (factory) {
- var view = factory(config);
+ var view = factory(def);
view.id = index;
el.parentNode.insertBefore(view.widget, el);
- var perspectives = config.perspectives || [];
+ var perspectives = def.perspectives || [];
$A(perspectives).each(function(p) {
if (!p) return;
if (!(p in CPSSkins.Perspectives)) {
@@ -96,7 +96,7 @@
CPSSkins.Perspectives[p].push(view);
});
- var model = config.model;
+ var model = def.model;
if (model) {
CPSSkins.addObserver(model, view)
}
@@ -374,9 +374,6 @@
},
setOpacity: function(element, opacity) {
- if (element.style.display == "none") {
- element.style.display = "";
- }
if (window.ActiveXObject) {
element.style.filter = "alpha(opacity=" + opacity*100 + ")";
} else {
@@ -512,7 +509,10 @@
},
fadein: function(node, options) {
- Canvas.setOpacity(node, 0);
+ if (node.style.display == "none") {
+ node.style.display = "";
+ Canvas.setOpacity(node, 0);
+ }
return new CPSSkins.Scheduler(node, {
delay: options.delay,
action: function(value) {
@@ -591,6 +591,7 @@
/* Private API */
handleAction: function(object, action, args) {
+ $("message").innerHTML += CPSSkins.Observers[this.model].length;
var controller = this.controller;
if (!controller) return;
var handler = controller.handlers[action];
@@ -615,18 +616,22 @@
if (this.visible) return;
this.prepare();
+ if (!this.def.model) {
+ CPSSkins.addObserver(this.selected, this);
+ }
+
+ if (this.effect) {
+ this.effect.stop();
+ }
+
var widget = this.widget;
var show_effect = this.show_effect;
if (show_effect) {
- if (this.effect) {
- this.effect.stop();
- }
show_effect.transition = show_effect.transition || "show";
this.effect = this.applyEffect(widget, show_effect)
} else {
Element.show(widget);
}
-
this.visible = true;
},
@@ -635,10 +640,8 @@
var widget = this.widget;
if (this.effect && !this.effect.started) {
- Element.hide(widget);
- return;
+ this.effect.stop();
}
-
var hide_effect = this.hide_effect;
if (hide_effect) {
hide_effect.transition = hide_effect.transition || "hide";
@@ -648,6 +651,8 @@
}
this.visible = false;
+ CPSSkins.removeObserver(this);
+
this.teardown();
},
@@ -670,7 +675,15 @@
style: {position:"absolute", display:"none"}
});
return new CPSSkins.ContextualMenu(widget, def);
+ },
+ contextualactions: function(def) {
+ var widget = Canvas.createNode({
+ tag: "div",
+ classes: "contextualActions",
+ style: {position:"absolute", display:"none"}
+ });
+ return new CPSSkins.ContextualActions(widget, def);
},
tooltip: function(def) {
@@ -689,7 +702,6 @@
});
return new CPSSkins.Panel(widget, def);
}
-
});
// Panels
@@ -910,15 +922,6 @@
var widget = this.widget;
Canvas.moveTo(widget, this.mouseX, this.mouseY);
Canvas.fitInsideScreen(widget);
-
- // TODO: move this elsewhere
- if (!this.def.model) {
- CPSSkins.addObserver(selected, this);
- }
- },
-
- teardown: function() {
- CPSSkins.removeObserver(this);
},
/* Event handlers */
@@ -942,7 +945,6 @@
},
hideEvent: function(e) {
- CPSSkins.removeObserver(this);
this.hide();
var mouseX = Event.pointerX(e);
var mouseY = Event.pointerY(e);
@@ -981,9 +983,87 @@
Element.show(menu);
}
}
-
});
+
+// Contextual actions
+CPSSkins.ContextualActions = Class.create();
+Object.extend(CPSSkins.ContextualActions.prototype, new CPSSkins.View());
+Object.extend(CPSSkins.ContextualActions.prototype,
CPSSkins.ContextualMenu.prototype);
+Object.extend(CPSSkins.ContextualActions.prototype, {
+
+ setup: function() {
+ this.area = this.def.parentNode || document;
+ this.active = false;
+
+ this.showEvent = this.showEvent.bindAsEventListener(this);
+ this.hideEvent = this.hideEvent.bindAsEventListener(this);
+ this.callEvent = this.callEvent.bindAsEventListener(this);
+ this.mouseOverEvent = this.mouseOverEvent.bindAsEventListener(this);
+
+ Event.observe(this.widget, "mousedown", function(e) {Event.stop(e)});
+ Event.observe(this.widget, "mouseup", this.callEvent);
+ Event.observe(this.widget, "mouseover", this.mouseOverEvent);
+ Event.observe(this.area, "mouseup", this.showEvent);
+ Event.observe(document, "mousedown", this.hideEvent);
+ },
+
+ prepare: function() {
+ var widget = this.widget;
+ Canvas.moveTo(widget, this.mouseX -50, this.mouseY);
+ Canvas.fitInsideScreen(widget);
+ },
+
+ render: function(data) {
+ this.widget.innerHTML = '';
+ this._renderFragment(this.widget, this.def.widget, data);
+ },
+
+ _renderFragment: function(container, fragment, data) {
+ $A(fragment.items).each(function(item) {
+ if (item.type != "item") return;
+ var visible = item.visible;
+ var disabled = false;
+ if (data && visible) {
+ if (!data[visible]) return;
+ }
+ var options = {
+ tag: "a",
+ content: item.label,
+ style: {display: "block"},
+ attributes: {
+ action: item.action,
+ href: "javascript:void(0)"
+ }
+ }
+ var confirm = item.confirm;
+ if (confirm) {
+ options.attributes.confirm = confirm;
+ }
+ var icon = item.icon;
+ if (icon) {
+ options.style.backgroundImage = "url(" + icon + ")";
+ }
+ container.appendChild(Canvas.createNode(options));
+ });
+ },
+
+ hideEvent: function(e) {
+ if (this.entered) { this.hide(); }
+ var mouseX = Event.pointerX(e);
+ var mouseY = Event.pointerY(e);
+ if (!Position.within(this.area, mouseX, mouseY)) {
+ this.active = false;
+ }
+ },
+
+ mouseOverEvent: function(e) {
+ this.entered = true;
+ }
+
+});
+
+
// Tooltip
CPSSkins.Tooltip = Class.create();
CPSSkins.Tooltip.prototype = Object.extend(new CPSSkins.View(), {
@@ -1002,8 +1082,6 @@
},
prepare: function() {
- CPSSkins.addObserver(this.selected, this);
-
this.widget.style.top = this.mouseY + 20 + "px";
this.widget.style.left = this.mouseX + "px";
Canvas.fitInsideScreen(this.widget);
Added:
cpsskins/branches/jmo-perspectives/ui/framework/tests/functional/cpsskins_contextualactions_test.html
==============================================================================
--- (empty file)
+++
cpsskins/branches/jmo-perspectives/ui/framework/tests/functional/cpsskins_contextualactions_test.html
Sun Jan 15 12:50:40 2006
@@ -0,0 +1,105 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
+"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd";>
+<html xml:lang="en" lang="en"
+ xmlns="http://www.w3.org/1999/xhtml";>
+<head>
+ <title>CPSSkins Unit test file</title>
+ <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+ <script src="../../prototype.js" type="text/javascript"></script>
+ <script src="../../json.js" type="text/javascript"></script>
+ <script src="../../cpsskins.js" type="text/javascript"></script>
+ <link rel="stylesheet" href="../../cpsskins.css" type="text/css" />
+ <link rel="stylesheet" href="contextualmenus.css" type="text/css" />
+</head>
+
+<body>
+
+ <h1>CPSSkins: Contextual actions</h1>
+
+ <div style="float: left; margin: 1em">
+
+ <!-- View: contextual actions widget -->
+ <ins class="view">
+ {"widget": {
+ "type": "contextualactions",
+ "items": [
+ {"type": "item",
+ "label": "Edit",
+ "icon": "edit.png",
+ "action": "edit",
+ "visible": "editable"
+ },
+ {"type": "item",
+ "label": "Copy",
+ "icon": "copy.png",
+ "action": "copy"
+ },
+ {"type": "item",
+ "label": "Paste",
+ "icon": "paste.png",
+ "action": "paste",
+ "visible": "editable"
+ },
+ {"type": "item",
+ "label": "Delete",
+ "icon": "delete.png",
+ "action": "delete",
+ "confirm": "Deleting are you sure"
+ }
+ ]
+ },
+ "controller": "controller",
+ "show_effect": {
+ "transition": "fadein"
+ },
+ "hide_effect": {
+ "transition": "fadeout"
+ }
+ }
+ </ins>
+
+ <ins class="model">
+ {"copyable":true}
+ </ins>
+ <div id="area1" class="pad">area1</div>
+
+ <div id="area2" class="pad">area2</div>
+
+ <ins class="model">
+ {"editable":true}
+ </ins>
+ <div id="area3" class="pad">area3</div>
+
+ <ins class="model">
+ {"editable":true}
+ </ins>
+ <div id="area4" class="pad">area4
+
+ <ins class="model">
+ {"editable":true}
+ </ins>
+ <div id="area5" class="pad">area5</div>
+ </div>
+ </div>
+
+ <!-- Controller -->
+ <script type="text/javascript">
+ function displayChoice(selected, choice) {
+ $("message").innerHTML +=
+ selected.getAttribute('id') + ' => ' + choice + '\n';
+ }
+
+ new CPSSkins.Controller('controller').register({
+ 'edit': displayChoice,
+ 'copy': displayChoice,
+ 'paste': displayChoice,
+ 'delete': displayChoice,
+ })
+
+ </script>
+
+ <pre id="message"></pre>
+
+</body>
+
+</html>
Modified:
cpsskins/branches/jmo-perspectives/ui/framework/tests/functional/cpsskins_tooltip.html
==============================================================================
---
cpsskins/branches/jmo-perspectives/ui/framework/tests/functional/cpsskins_tooltip.html
(original)
+++
cpsskins/branches/jmo-perspectives/ui/framework/tests/functional/cpsskins_tooltip.html
Sun Jan 15 12:50:40 2006
@@ -73,7 +73,7 @@
"type": "tooltip"
},
- "show_efffect": {
+ "show_effect": {
"transition": "fadein",
"delay": 1000
},
--
http://lists.nuxeo.com/mailman/listinfo/z3lab-checkins
