Commit 85046fcc authored by Kazuhiko Shiozaki's avatar Kazuhiko Shiozaki

cleanup HTML and unify jsPlumb related javascript files.

parent d99462ff
<!doctype html>
<html>
<head>
<head>
<title>Dream Simulation</title>
<link rel="stylesheet" href="css/demo-new.css">
<link rel="stylesheet" href="css/flowchartDemo.css">
<link rel="stylesheet" href="css/jquery-ui.css">
<link rel="stylesheet" href="css/jsoneditor.css">
</head>
<body data-demo-id="flowchartConnectorsDemo" data-library="jquery">
</head>
<body data-demo-id="flowchartConnectorsDemo" data-library="jquery">
<div id="headerWrapper"><div id="header"></div></div>
<div id="headerWrapper">
<div id="header"></div>
</div>
<div id="tools">
Tools
......@@ -32,10 +36,9 @@
<div id="graph_zone">
<div>Stations Utilization</div>
<div id="graph"> </div>
<div id="graph"></div>
</div>
<div id="sidebar">
<table>
<tr>
......@@ -45,10 +48,12 @@
<tr>
<td>
<textarea rows="20" cols="47" id="json_output" style="align:left">
</textarea></td>
</textarea>
</td>
<td>
<textarea rows="20" cols="47" id="json_result" style="align:right">
</textarea></td>
</textarea>
</td>
</table>
</div>
......@@ -61,58 +66,25 @@
<script type="text/javascript" src="lib/jio.js"></script>
<script type="text/javascript" src="lib/jio.localstorage.js"></script>
<script type="text/javascript" src="lib/pubsub.js"></script>
<script type="text/javascript" src="lib/jquery.jsPlumb-1.5.3-min.js"></script>
<!-- /DEP -->
<!-- JS -->
<!-- support lib for bezier stuff -->
<script src="lib/jsBezier-0.5.js"></script>
<!-- jsplumb util -->
<script src="lib/jsPlumb/jsPlumb-util.js"></script>
<!-- base DOM adapter -->
<script src="lib/jsPlumb/jsPlumb-dom-adapter.js"></script>
<!-- main jsplumb engine -->
<script src="lib/jsPlumb/jsPlumb.js"></script>
<!-- anchors -->
<script src="lib/jsPlumb/jsPlumb-anchors.js"></script>
<!-- endpoint -->
<script src="lib/jsPlumb/jsPlumb-endpoint.js"></script>
<!-- connection -->
<script src="lib/jsPlumb/jsPlumb-connection.js"></script>
<!-- connector editors -->
<script src="lib/jsPlumb/jsPlumb-connector-editors.js"></script>
<!-- connectors, endpoint and overlays -->
<script src="lib/jsPlumb/jsPlumb-defaults.js"></script>
<!-- state machine connectors -->
<script src="lib/jsPlumb/jsPlumb-connectors-statemachine.js"></script>
<!-- flowchart connectors -->
<script src="lib/jsPlumb/jsPlumb-connectors-flowchart.js"></script>
<!-- SVG renderer -->
<script src="lib/jsPlumb/jsPlumb-renderers-svg.js"></script>
<!-- canvas renderer -->
<script src="lib/jsPlumb/jsPlumb-renderers-canvas.js"></script>
<!-- vml renderer -->
<script src="lib/jsPlumb/jsPlumb-renderers-vml.js"></script>
<!-- jquery jsPlumb adapter -->
<script src="lib/jsPlumb/jquery.jsPlumb.js"></script>
<!-- /JS -->
<!-- flot -->
<script src="lib/jquery.flot.js"></script>
<script src="lib/jquery.flot.stack.js"></script>
<script src="lib/jquery.jsoneditor.js"></script>
<script type="text/javascript" src="lib/jquery.flot.js"></script>
<script type="text/javascript" src="lib/jquery.flot.stack.js"></script>
<script type="text/javascript" src="lib/jquery.jsoneditor.js"></script>
<div id="dialog-form" title="Configure">
<div id="dialog-form" title="Configure">
<form>
<fieldset id="dialog-fieldset">
</fieldset>
</form>
</div>
</div>
<!-- demo code -->
<script src="src/dream.js"></script>
<script src="src/jsonPlumb.js"></script>
<script src="src/dream_launcher.js"></script>
</body>
<script type="text/javascript" src="src/dream.js"></script>
<script type="text/javascript" src="src/jsonPlumb.js"></script>
<script type="text/javascript" src="src/dream_launcher.js"></script>
</body>
</html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
......@@ -9,58 +10,24 @@
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.js"></script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.js"></script>
<script type="text/javascript" src="lib/jquery.ui.touch-punch.min.js"></script>
<script type="text/javascript" src="lib/md5.js"></script>
<script type="text/javascript" src="lib/jio.js"></script>
<script type="text/javascript" src="lib/jio.localstorage.js"></script>
<script type="text/javascript" src="lib/pubsub.js"></script>
<!-- JS plumb -->
<!-- support lib for bezier stuff -->
<script src="lib/jsBezier-0.5.js"></script>
<!-- jsplumb util -->
<script src="lib/jsPlumb/jsPlumb-util.js"></script>
<!-- base DOM adapter -->
<script src="lib/jsPlumb/jsPlumb-dom-adapter.js"></script>
<!-- main jsplumb engine -->
<script src="lib/jsPlumb/jsPlumb.js"></script>
<!-- anchors -->
<script src="lib/jsPlumb/jsPlumb-anchors.js"></script>
<!-- endpoint -->
<script src="lib/jsPlumb/jsPlumb-endpoint.js"></script>
<!-- connection -->
<script src="lib/jsPlumb/jsPlumb-connection.js"></script>
<!-- connector editors -->
<script src="lib/jsPlumb/jsPlumb-connector-editors.js"></script>
<!-- connectors, endpoint and overlays -->
<script src="lib/jsPlumb/jsPlumb-defaults.js"></script>
<!-- state machine connectors -->
<script src="lib/jsPlumb/jsPlumb-connectors-statemachine.js"></script>
<!-- flowchart connectors -->
<script src="lib/jsPlumb/jsPlumb-connectors-flowchart.js"></script>
<!-- SVG renderer -->
<script src="lib/jsPlumb/jsPlumb-renderers-svg.js"></script>
<!-- canvas renderer -->
<script src="lib/jsPlumb/jsPlumb-renderers-canvas.js"></script>
<!-- vml renderer -->
<script src="lib/jsPlumb/jsPlumb-renderers-vml.js"></script>
<!-- jquery jsPlumb adapter -->
<script src="lib/jsPlumb/jquery.jsPlumb.js"></script>
<!-- /JS -->
<script src="http://raw.github.com/DavidDurman/FlexiJsonEditor/master/jquery.jsoneditor.js"></script>
<script src="src/dream2.js"></script>
<script type="text/javascript" src="lib/jquery.jsPlumb-1.5.3-min.js"></script>
<script type="text/javascript" src="lib/jquery.jsoneditor.js"></script>
<script type="text/javascript" src="src/dream2.js"></script>
</head>
<body>
<!--
<!--
<div class="content-secondary">
<div data-role="collapsible" data-collapsed="true" data-theme="b" data-content-theme="d">
<h3>Controls<h3>
<h3>Controls</h3>
<ul data-role="listview" data-theme="c">
<li><a href="menu-general.html">General</a></li>
<li><a href="menu-palette.html">Node</a></li>
......@@ -76,55 +43,60 @@
<h1>DREAM</h1>
<a href="#nav-panel" data-icon="bars" data-iconpos="notext">Menu</a>
<a href="#add-form" data-icon="plus" data-iconpos="notext">Add</a>
</div><!-- /header -->
</div>
<!-- /header -->
<div data-role="content">
<h2>Panel: Menu + form</h2>
<p>This is a typical page that has two buttons in the header bar that open panels. The left button opens a left menu with the reveal display mode. The right button opens a form in a right overlay panel.</p>
<div class="ui-grid-a">
<div class="ui-block-a"><strong>I'm Block A</strong> and text inside will
wrap
<div id="main"> </div>
<div class="ui-grid-a">
<div class="ui-block-a"><strong>I'm Block A</strong> and text inside will wrap
<div id="main"></div>
</div>
<div class="ui-block-b"><strong>I'm Block B</strong> and text inside will
wrap
<div class="ui-block-b"><strong>I'm Block B</strong> and text inside will wrap
<div>
<div>
<label for="node_id">Node ID:</label>
<input id="node_id"/>
<input id="node_id" />
<label for="node_top">Node Top:</label>
<input type="range" name="node_top" id="node_top" value="" min="0" max="100" />
<label for="node_left">Node Left:</label>
<input type="range" name="node_left" id="node_left" value="" min="0" max="100" />
<button id="move_node">Move Node</button>
</div>
</div>
<div>
<textarea rows="20" cols="47" id="debug_zone" style="align:left"> </textarea>
<div>
<textarea rows="20" cols="47" id="debug_zone" style="align:left"></textarea>
<button id="load_json">Load JSON</button>
</div>
</div>
</div><!-- /grid-a -->
<p>Since the panel links are in the top bar, there really isn't a need for the fixed positioning feature on the panel since you will always be scrolled to the top of the page. The fixed positioning impacts animation smoothness so it's off in this demo (<code>data-position-fixed="false"</code>) and the panel will scroll with the page.</p>
<p>To make this responsive, the left panel stays open and causes the page to re-flow at wider widths. This allows both the menu and page to be used together when more space is available. This behavior is controlled by CSS media queries. You can create a custom one for a specific breakpoint or use the breakpoint preset by adding the <code> class="ui-responsive-panel"</code> to the page container.</p>
</div><!-- /content -->
</div>
</div>
</div>
<!-- /grid-a -->
<p>Since the panel links are in the top bar, there really isn't a need for the fixed positioning feature on the panel since you will always be scrolled to the top of the page. The fixed positioning impacts animation smoothness so it's off in this demo
(
<code>data-position-fixed="false"</code>) and the panel will scroll with the page.</p>
<p>To make this responsive, the left panel stays open and causes the page to re-flow at wider widths. This allows both the menu and page to be used together when more space is available. This behavior is controlled by CSS media queries. You can create
a custom one for a specific breakpoint or use the breakpoint preset by adding the <code> class="ui-responsive-panel"</code> to the page container.</p>
</div>
<!-- /content -->
<div data-role="panel" data-position="left" data-position-fixed="false" data-display="reveal" id="nav-panel" data-theme="a">
<!-- good style: -->
<!-- good style: -->
<div data-role="collapsible" data-collapsed="true" data-theme="b" data-content-theme="d">
<h3>Controls<h3>
<h3>Controls</h3>
<ul data-role="listview" data-theme="c">
<li><a href="menu-general.html">General</a></li>
<li><a href="menu-palette.html">Node</a></li>
<li><a href="menu-runsimulation.html">Run Simulation</a></li>
<li><a href="menu-general.html">General</a>
</li>
<li><a href="menu-palette.html">Node</a>
</li>
<li><a href="menu-runsimulation.html">Run Simulation</a>
</li>
</ul>
</div>
<!-- from example: -->
<!-- from example: -->
<ul data-role="listview" data-theme="a" data-divider-theme="a" style="margin-top:-16px;" class="nav-search">
<li data-icon="delete" style="background-color:#111;">
......@@ -172,22 +144,21 @@
</li>
</ul>
<!-- panel content goes here -->
</div><!-- /panel -->
</div>
<!-- /panel -->
</div><!-- /page -->
</div>
<!-- /page -->
<div data-role="page" data-url="dialog.html" id="dialog">
<div data-role="page" data-url="dialog.html" id="dialog">
<div data-role="header">
<h1>Dialog</h1>
</div>
<div data-role="content">
<p>Is this an answer?</p>
</div>
</div>
</div>
</body>
</html>
</html>
This source diff could not be displayed because it is too large. You can view the blob instead.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
/*
* this is experimental and probably will not be used. solutions exist for most libraries. but of course if
* i want to support multiple scopes at some stage then i will have to do dragging inside jsPlumb.
*/
;(function() {
window.jsPlumbDrag = function(_jsPlumb) {
var ta = new TouchAdapter();
this.draggable = function(selector) {
var el, elId, da = [], elo, d = false,
isInSelector = function(el) {
if (typeof selector == "string")
return selector === _jsPlumb.getId(el);
for (var i = 0; i < selector.length; i++) {
var _sel = jsPlumb.CurrentLibrary.getDOMElement(selector[i]);
if (_sel == el) return true;
}
return false;
};
ta.bind(document, "mousedown", function(e) {
var target = e.target || e.srcElement;
if (isInSelector(target)) {
el = jsPlumb.CurrentLibrary.getElementObject(target);
elId = _jsPlumb.getId(el);
elo = jsPlumb.CurrentLibrary.getOffset(el);
da = [e.pageX, e.pageY];
d = true;
}
});
ta.bind(document, "mousemove", function(e) {
if (d) {
var dx = e.pageX - da[0],
dy = e.pageY - da[1];
jsPlumb.CurrentLibrary.setOffset(el, {
left:elo.left + dx,
top:elo.top + dy
});
_jsPlumb.repaint(elId);
e.preventDefault();
e.stopPropagation();
}
});
ta.bind(document, "mouseup", function(e) {
el = null;
d = false;
});
};
var isIOS = ((/iphone|ipad/gi).test(navigator.appVersion));
if (isIOS)
_jsPlumb.draggable = this.draggable;
};
})();
\ No newline at end of file
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
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