Skip to content

erp5
erp5
Commit 99225a63 authored by Jérome Perrin's avatar Jérome Perrin
Browse files
Options

graph_editor: Support running in an iframe for ERP5JS compatibility 

This introduces a new gadget_graph_editor.html gadget, for use in iframe and
keep the existing dream_graph_editor/jsplumb/index.html for use in "public"
scope, ie. without iframe.
parent deeaf037
Hide whitespace changes
Inline Side-by-side
Showing with 83 additions and 38 deletions
bt5/erp5_graph_editor/SkinTemplateItem/portal_skins/erp5_graph_editor/dream_graph_editor/jsplumb/index.html.html
View file @ 99225a63
...@@ -4,15 +4,13 @@ ...@@ -4,15 +4,13 @@
<meta charset="utf-8"> <meta charset="utf-8">
<link rel="stylesheet" href="../lib/jquery-ui.css"> <link rel="stylesheet" href="../lib/jquery-ui.css">
<link rel="stylesheet" href="jsplumb.css"> <link rel="stylesheet" href="jsplumb.css">
<title>JSPlumb gadget</title> <title>JSPlumb public gadget (for qunit tests)</title>
<!-- <!--
FIXME: renderjs fails if we include renderjs.js twice (this one has a different URL from ERP5's one) The gadget for test is used with "public" sandbox, so we should not include javascripts again.
The following scripts must have been included by the parent page:
<script src="renderjs.js" type="text/javascript"></script> <script src="renderjs.js" type="text/javascript"></script>
<script src="rsvp.js" type="text/javascript"></script> <script src="rsvp.js" type="text/javascript"></script>
-->
<!--
FIXME: Including jQuery twice cause the jsplumb to be loaded twice.
For now we assume that it has already been loaded at this point.
<script src="../lib/jquery.js" type="text/javascript"></script> <script src="../lib/jquery.js" type="text/javascript"></script>
--> -->
<script src="../lib/jquery-ui.js" type="text/javascript"></script> <script src="../lib/jquery-ui.js" type="text/javascript"></script>
...@@ -22,34 +20,9 @@ ...@@ -22,34 +20,9 @@
<script src="../dream/mixin_promise.js" type="text/javascript"></script> <script src="../dream/mixin_promise.js" type="text/javascript"></script>
<script src="jsplumb.js" type="text/javascript"></script> <script src="jsplumb.js" type="text/javascript"></script>
<script id="node-template" type="text/x-handlebars-template">
<div class="window {{class}}"
id="{{element_id}}"
title="{{title}}">
{{name}}
<div class="ep"></div>
</div>
</script>
<script id="popup-edit-template" type="text/x-handlebars-template">
<div id="edit-popup" data-position-to="origin">
<div data-role="header" data-theme="a">
<h1 class="node_class">Edit properties</h1>
<!-- XXX add this for jquery mobile version.
<a href="#" data-rel="back" class="ui-btn ui-corner-all ui-shadow ui-btn-a ui-icon-delete ui-btn-icon-notext ui-btn-right">Close</a>
-->
</div>
<br/>
<form class="ui-content">
<fieldset></fieldset>
<input type="button" value="Delete" class="graph_editor_delete_button">
<input type="submit" value="Validate" class="graph_editor_validate_button">
</form>
</div>
</script>
</head> </head>
<body> <body>
<div class="graph_container"></div> <div class="graph_container"></div>
<div class="dummy_window"></div> <div class="dummy_window"></div>
</body> </body>
</html> </html>
\ No newline at end of file
bt5/erp5_graph_editor/SkinTemplateItem/portal_skins/erp5_graph_editor/dream_graph_editor/jsplumb/jsplumb.js.js
View file @ 99225a63
...@@ -22,7 +22,7 @@ ...@@ -22,7 +22,7 @@
(function (RSVP, rJS, $, jsPlumb, Handlebars, loopEventListener, promiseEventListener, DOMParser, Springy) { (function (RSVP, rJS, $, jsPlumb, Handlebars, loopEventListener, promiseEventListener, DOMParser, Springy) {
"use strict"; "use strict";
/* TODO: /* TODO:
* less dependancies ( promise event listener ? ) * less dependencies ( promise event listener ? )
* no more handlebars * no more handlebars
* id should not always be modifiable * id should not always be modifiable
* drop zoom level * drop zoom level
...@@ -31,9 +31,30 @@ ...@@ -31,9 +31,30 @@
*/ */
var gadget_klass = rJS(window); var gadget_klass = rJS(window);
var domParser = new DOMParser(); var domParser = new DOMParser();
var node_template_source = gadget_klass.__template_element.getElementById("node-template").innerHTML; var node_template = Handlebars.compile(
var node_template = Handlebars.compile(node_template_source); ' <div class="window {{class}}"'
var popup_edit_template = gadget_klass.__template_element.getElementById("popup-edit-template").innerHTML; + ' id="{{element_id}}"'
+ ' title="{{title}}">'
+ ' {{name}}'
+ ' <div class="ep"></div>'
+ '</div>'
);
var popup_edit_template = (
' <div id="edit-popup" data-position-to="origin">'
+ ' <div data-role="header" data-theme="a">'
+ ' <h1 class="node_class">Edit properties</h1>'
+ ' <!-- XXX add this for jquery mobile version.'
+ ' <a href="#" data-rel="back" class="ui-btn ui-corner-all ui-shadow ui-btn-a ui-icon-delete ui-btn-icon-notext ui-btn-right">Close</a>'
+ ' -->'
+ ' </div>'
+ ' <br/>'
+ ' <form class="ui-content">'
+ ' <fieldset></fieldset>'
+ ' <input type="button" value="Delete" class="graph_editor_delete_button">'
+ ' <input type="submit" value="Validate" class="graph_editor_validate_button">'
+ ' </form>'
+ '</div>'
);
function layoutGraph(graph_data) { function layoutGraph(graph_data) {
// Promise returning the graph once springy calculated the layout. // Promise returning the graph once springy calculated the layout.
...@@ -523,7 +544,7 @@ ...@@ -523,7 +544,7 @@
// connectionDetached event will remove the edge from data // connectionDetached event will remove the edge from data
gadget.props.jsplumb_instance.detach(connection); gadget.props.jsplumb_instance.detach(connection);
}); });
return gadget.declareGadget("../fieldset/index.html", { return gadget.declareGadget("dream_graph_editor/fieldset/index.html", {
element: fieldset_element, element: fieldset_element,
scope: "fieldset" scope: "fieldset"
}).push(function (fieldset_gadget) { }).push(function (fieldset_gadget) {
...@@ -602,7 +623,7 @@ ...@@ -602,7 +623,7 @@
}).push(function () { }).push(function () {
return removeElement(gadget, node_id); return removeElement(gadget, node_id);
}); });
return gadget.declareGadget("../fieldset/index.html", { return gadget.declareGadget("dream_graph_editor/fieldset/index.html", {
element: fieldset_element, element: fieldset_element,
scope: "fieldset" scope: "fieldset"
}).push(function (fieldset_gadget) { }).push(function (fieldset_gadget) {
......
bt5/erp5_graph_editor/SkinTemplateItem/portal_skins/erp5_graph_editor/gadget_graph_editor.html.html 0 → 100644
View file @ 99225a63
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="dream_graph_editor/lib/jquery-ui.css">
<link rel="stylesheet" href="dream_graph_editor/jsplumb/jsplumb.css">
<title>Graph Editor</title>
<script src="rsvp.js" type="text/javascript"></script>
<script src="renderjs.js" type="text/javascript"></script>
<script src="dream_graph_editor/lib/jquery.js" type="text/javascript"></script>
<script src="dream_graph_editor/lib/jquery-ui.js" type="text/javascript"></script>
<script src="dream_graph_editor/lib/jquery.jsplumb.js" type="text/javascript"></script>
<script src="dream_graph_editor/lib/handlebars.min.js" type="text/javascript"></script>
<script src="dream_graph_editor/lib/springy.js" type="text/javascript"></script>
<script src="dream_graph_editor/dream/mixin_promise.js" type="text/javascript"></script>
<script src="dream_graph_editor/jsplumb/jsplumb.js" type="text/javascript"></script>
<body>
<div class="graph_container"></div>
<div class="dummy_window"></div>
</body>
</html>
bt5/erp5_graph_editor/SkinTemplateItem/portal_skins/erp5_graph_editor/gadget_graph_editor.html.xml 0 → 100644
View file @ 99225a63
<?xml version="1.0"?>
<ZopeData>
<record id="1" aka="AAAAAAAAAAE=">
<pickle>
<global name="File" module="OFS.Image"/>
</pickle>
<pickle>
<dictionary>
<item>
<key> <string>__name__</string> </key>
<value> <string>gadget_graph_editor.html</string> </value>
</item>
<item>
<key> <string>content_type</string> </key>
<value> <string>text/html</string> </value>
</item>
<item>
<key> <string>precondition</string> </key>
<value> <string></string> </value>
</item>
<item>
<key> <string>title</string> </key>
<value> <string></string> </value>
</item>
</dictionary>
</pickle>
</record>
</ZopeData>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment
GitLab Nexedi Edition | About GitLab | About Nexedi | 沪ICP备2021021310号-2 | 沪ICP备2021021310号-7