Author: jmorliaguet
Date: Sun Jan 1 15:49:32 2006
New Revision: 2105
Added:
cpsskins/branches/jmo-perspectives/ui/framework/cpsskins.css (contents,
props changed)
Modified:
cpsskins/branches/jmo-perspectives/ui/framework/cpsskins.js
cpsskins/branches/jmo-perspectives/ui/framework/tests/functional/cpsskins_contextualmenu_test.html
Log:
- converted quotes (') to double quotes (")
- added cpsskins.css for defining widget styles
- fixed Canvas.addNode
Added: cpsskins/branches/jmo-perspectives/ui/framework/cpsskins.css
==============================================================================
--- (empty file)
+++ cpsskins/branches/jmo-perspectives/ui/framework/cpsskins.css Sun Jan
1 15:49:32 2006
@@ -0,0 +1,36 @@
+
+/* Contextual menu */
+
+.contextMenu {
+ white-space: nowrap;
+ font: 11px Verdana, Arial, Helvetica, sans-serif;
+ border-width: 1px 2px 2px 1px;
+ border-style: solid;
+ border-color: #666;
+ background-color: #eeeeec;
+ color: #000;
+ width: 120px;
+}
+
+.contextMenu a {
+ text-decoration: none;
+ vertical-align: top;
+ background-repeat: no-repeat;
+ background-position: 6px center;
+ color: #000;
+ padding: 4px 5px 4px 29px;
+ width: 86px;
+}
+
+.contextMenu a:hover {
+ background-color: #3465a4;
+ color: #fff;
+}
+
+.contextMenu .submenu {
+ border-width: 1px 2px 2px 1px;
+ border-style: solid;
+ border-color: #333;
+ margin-top: -2px;
+}
+
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 1
15:49:32 2006
@@ -17,20 +17,20 @@
*/
var CPSSkins = {
- Version: '0.1',
+ Version: "0.1",
init: function() {
- var elements = document.getElementsByTagName('*');
+ var elements = document.getElementsByTagName("*");
for (var i=0;i<elements.length;i++) {
- var tag = elements[i].tagName;
- if (!tag.match(/^cpsskins:/i)) continue;
var element = elements[i];
+ var tag = element.tagName;
+ if (!tag.match(/^cpsskins:/i)) continue;
switch (tag.toLowerCase()) {
- case 'cpsskins:contextmenu': {
+ case "cpsskins:contextmenu": {
Renderer.contextmenu(element);
break;
}
- case 'cpsskins:tooltip': {
+ case "cpsskins:tooltip": {
Renderer.tooltip(element);
break;
}
@@ -39,7 +39,7 @@
}
}
-Event.observe(window, 'load', CPSSkins.init);
+Event.observe(window, "load", CPSSkins.init);
// Controller
var controllers = new Object();
@@ -122,7 +122,7 @@
isEmpty: function(element) {
var node = $(element);
- var nodes = node.getElementsByTagName('*');
+ var nodes = node.getElementsByTagName("*");
for (var i=0;i<nodes.length;i++) {
if (this.isIdentifiable(nodes[i])) { return false; }
}
@@ -155,7 +155,7 @@
getNodeData: function(element) {
var comment = this._getCommentNode(element);
if (comment) {
- comment = comment.replace(this.json_regexp, '');
+ comment = comment.replace(this.json_regexp, "");
try {
return JSON.parse(comment);
} catch(e) {
@@ -167,7 +167,7 @@
setNodeData: function(element, data) {
var node = $(element);
- var comment = ' json-data: ' + JSON.stringify(data);
+ var comment = " json-data: " + JSON.stringify(data);
comment = document.createComment(comment);
var old = this._getCommentNode(element);
if (old) {
@@ -187,17 +187,17 @@
var node = document.createElement(options.tag);
Element.addClassName(node, options.class);
Element.setStyle(node, options.style);
- $A(options.attributes).each(function(attr) {
- node.setAttribute(node, attr)
+ $H(options.attributes).each(function(attr) {
+ node.setAttribute(attr[0], attr[1])
});
- node.innerHTML = options.content || '';
+ node.innerHTML = options.content || "";
container.appendChild(node);
return node;
},
setOpacity: function(element, opacity) {
- if (element.style.display == 'none') {
- element.style.display = '';
+ if (element.style.display == "none") {
+ element.style.display = "";
}
if (window.ActiveXObject) {
element.style.filter = "alpha(opacity=" + opacity*100 + ")";
@@ -251,18 +251,18 @@
contextmenu: function(view) {
var widget = Canvas.addNode(document.body, {
- tag: 'div',
- class: ['contextMenu', view.getAttribute('class')],
- style: {position:'absolute'}
+ tag: "div",
+ class: ["contextMenu", view.getAttribute("class")],
+ style: {position:"absolute", display:"none", cursor:"default"}
});
new CPSSkins.ContextualMenu(widget, view);
},
tooltip: function(view) {
var widget = Canvas.addNode(document.body, {
- tag: 'div',
- class: 'tooltip',
- style: {position:'absolute', display:'none'}
+ tag: "div",
+ class: "tooltip",
+ style: {position:"absolute", display:"none"}
});
new CPSSkins.Tooltip(widget, view);
}
@@ -280,11 +280,11 @@
this.active = false;
- var controller = view.getAttribute('controller');
+ var controller = view.getAttribute("controller");
this.handlers = controllers[controller].handlers;
this.clickEvent = this.clickEvent.bindAsEventListener(this);
- Event.observe(document, 'click', this.clickEvent);
+ Event.observe(document, "click", this.clickEvent);
},
clickEvent: function(e) {
@@ -294,13 +294,13 @@
if (this.active) {
if (Position.within(this.widget, x, y)) {
- var action = element.getAttribute('action');
+ var action = element.getAttribute("action");
if (!action) return;
var confirm = element.getAttribute("confirm");
if (confirm) {
if (!window.confirm(confirm)) return;
}
- var choice = element.getAttribute('choice') || action;
+ var choice = element.getAttribute("choice") || action;
var handler = this.handlers[action];
if (handler) {
handler(this.selected, choice);
@@ -318,7 +318,7 @@
},
_getSubmenu: function(e) {
- var nodes = document.getElementsByClassName('submenu', Event.element(e))
+ var nodes = document.getElementsByClassName("submenu", Event.element(e))
return (nodes.length > 0) ? nodes[0] : null;
},
@@ -336,54 +336,56 @@
var menuX = (x + menuWidth > page_w) ? x - menuWidth -1 : x + 1;
var menuY = (y + menuHeight > page_h) ? y - menuHeight -1 : y + 1;
// menu position
- widget.style.left = menuX + 'px';
- widget.style.top = menuY + 'px';
+ widget.style.left = menuX + "px";
+ widget.style.top = menuY + "px";
// submenu relative position
this.submenuLeft = Element.getDimensions(this.widget).width -5;
if (!document.all)
this.submenuLeft += parseInt(widget.style.left);
// reset the menu
- $A(widget.getElementsByTagName('*')).each(function(v) {
+ $A(widget.getElementsByTagName("*")).each(function(v) {
v.parentNode.removeChild(v);
});
var data = Canvas.getNodeData(this.selected);
- var tags = view.getElementsByTagName('*');
+ var tags = view.getElementsByTagName("*");
var parent = widget;
for (var i=0;i<tags.length;i++) {
var tag = tags[i];
- var visible = tag.getAttribute('visible');
+ var visible = tag.getAttribute("visible");
if (data && visible) {
if (!data[visible]) continue;
}
switch (tag.tagName.toLowerCase()) {
- case 'item': {
+ case "item": {
Canvas.addNode(widget, {
- tag: 'a',
- content: tag.getAttribute('label'),
+ tag: "a",
+ content: tag.getAttribute("label"),
+ style: {display: "block"},
attributes: {
- action: tag.getAttribute('action'),
+ action: tag.getAttribute("action"),
href: "#"
}
});
break;
};
- case 'items': {
+ case "items": {
if (!data) return;
- var choices = tag.getAttribute('choices');
+ var choices = tag.getAttribute("choices");
var items = data[choices] || [];
for (var j=0;j<items.length;j++) {
Canvas.addNode(parent, {
- tag: 'a',
+ tag: "a",
content: items[j].label,
+ style: {display: "block"},
attributes: {
- action: tag.getAttribute('action'),
+ action: tag.getAttribute("action"),
choice: items[j].choice,
href: "#"
}
@@ -393,17 +395,18 @@
break;
};
- case 'submenu': {
+ case "submenu": {
var item = Canvas.addNode(parent, {
- tag: 'a',
- content: tag.getAttribute('label'),
+ tag: "a",
+ content: tag.getAttribute("label"),
+ style: {display: "block"},
attributes: {href:"#"}
});
var submenu = Canvas.addNode(item, {
- tag: 'div',
- class: 'submenu',
- style: {left:this.submenuLeft + 'px'}
+ tag: "div",
+ class: "submenu",
+ style: {left:this.submenuLeft + "px", display: "none"}
});
parent = submenu;
@@ -412,7 +415,7 @@
var menu = this._getSubmenu(e);
if (menu) Element.show(menu);
}.bindAsEventListener(this);
- Event.observe(item, 'mouseover', mouseOverEvent);
+ Event.observe(item, "mouseover", mouseOverEvent);
var mouseOutEvent = function(e) {
var menu = this._getSubmenu(e);
@@ -420,7 +423,7 @@
Element.hide(menu);
}
}.bindAsEventListener(this);
- Event.observe(item, 'mouseout', mouseOutEvent);
+ Event.observe(item, "mouseout", mouseOutEvent);
break;
};
@@ -441,15 +444,15 @@
this.widget = widget;
this.area = view.parentNode;
this.options = {
- showdelay: view.getAttribute('showdelay') || 1000,
- hidedelay: view.getAttribute('hidedelay') || 100
+ showdelay: view.getAttribute("showdelay") || 1000,
+ hidedelay: view.getAttribute("hidedelay") || 100
}
this.hint = null;
this.effect = null;
this.setupEvent = this.setup.bindAsEventListener(this);
this.hideEvent = this.hide.bindAsEventListener(this);
- Event.observe(this.area || document, 'mouseover', this.setupEvent);
+ Event.observe(this.area || document, "mouseover", this.setupEvent);
},
setup: function(e) {
@@ -458,7 +461,7 @@
if (!data) return;
this.hint = {
selected: selected,
- text: data['hint'],
+ text: data["hint"],
x: Event.pointerX(e),
y: Event.pointerY(e)
}
@@ -467,8 +470,8 @@
show: function() {
var widget = this.widget;
- widget.style.top = this.hint.y + 20 + 'px';
- widget.style.left = this.hint.x + 'px';
+ widget.style.top = this.hint.y + 20 + "px";
+ widget.style.left = this.hint.x + "px";
widget.innerHTML = this.hint.text;
if (this.effect) {
@@ -485,7 +488,7 @@
}.bind(this)
});
- Event.observe(this.hint.selected, 'mouseout', this.hideEvent);
+ Event.observe(this.hint.selected, "mouseout", this.hideEvent);
},
hide: function(e) {
@@ -503,7 +506,7 @@
onComplete: function() {
Element.hide(widget);
if (this.hint) {
- Event.stopObserving(this.hint.selected, 'mouseout', this.hideEvent);
+ Event.stopObserving(this.hint.selected, "mouseout", this.hideEvent);
}
}.bind(this)
});
Modified:
cpsskins/branches/jmo-perspectives/ui/framework/tests/functional/cpsskins_contextualmenu_test.html
==============================================================================
---
cpsskins/branches/jmo-perspectives/ui/framework/tests/functional/cpsskins_contextualmenu_test.html
(original)
+++
cpsskins/branches/jmo-perspectives/ui/framework/tests/functional/cpsskins_contextualmenu_test.html
Sun Jan 1 15:49:32 2006
@@ -10,6 +10,7 @@
<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>
@@ -24,7 +25,7 @@
<div id="testArea1">
<!-- Contextual menu widget -->
- <cpsskins:contextmenu controller="controller" class="large">
+ <cpsskins:contextmenu controller="controller">
<item label="Edit" action="edit" visible="editable"></item>
<item label="Copy" action="copy"></item>
<item label="Paste" action="paste" visible="editable"></item>
@@ -64,7 +65,7 @@
<div id="testArea2">
<!-- Contextual menu widget -->
- <cpsskins:contextmenu controller="controller" class="large">
+ <cpsskins:contextmenu controller="controller">
<item label="Edit" action="edit" visible="editable"></item>
<item label="Copy" action="copy"></item>
<item label="Paste" action="paste" visible="editable"></item>
--
http://lists.nuxeo.com/mailman/listinfo/z3lab-checkins
