Mercurial > hg > NetworkVis

annotate d3s_examples/python-neo4jrestclient/static/platin/lib/slider/implementation.html @ 39:88c5232f9d48 default tip

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
fix click on author name.
author casties
date Thu, 04 Feb 2016 18:56:48 +0100
parents 18ef6948d689
children
Ignore whitespace changes - Everywhere: Within whitespace: At end of lines:
rev   line source
8
18ef6948d689 new d3s examples
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
18ef6948d689 new d3s examples
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
2 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
18ef6948d689 new d3s examples
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
3
18ef6948d689 new d3s examples
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
4 <html>
18ef6948d689 new d3s examples
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
5 <head>
18ef6948d689 new d3s examples
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
6 <title>Slider (WebFX)</title>
18ef6948d689 new d3s examples
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
7 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
18ef6948d689 new d3s examples
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
8 <script type="text/javascript" src="local/webfxlayout.js"></script>
18ef6948d689 new d3s examples
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
9
18ef6948d689 new d3s examples
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
10 <script type="text/javascript" src="js/range.js"></script>
18ef6948d689 new d3s examples
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
11 <script type="text/javascript" src="js/timer.js"></script>
18ef6948d689 new d3s examples
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
12 <script type="text/javascript" src="js/slider.js"></script>
18ef6948d689 new d3s examples
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
13 <link type="text/css" rel="StyleSheet" href="css/bluecurve/bluecurve.css" />
18ef6948d689 new d3s examples
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
14
18ef6948d689 new d3s examples
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
15 </head>
18ef6948d689 new d3s examples
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
16 <body>
18ef6948d689 new d3s examples
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
17 <!-- WebFX Layout Include -->
18ef6948d689 new d3s examples
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
18 <script type="text/javascript">
18ef6948d689 new d3s examples
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
19
18ef6948d689 new d3s examples
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
20 var articleMenu= new WebFXMenu;
18ef6948d689 new d3s examples
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
21 articleMenu.left = 384;
18ef6948d689 new d3s examples
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
22 articleMenu.top = 86;
18ef6948d689 new d3s examples
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
23 articleMenu.width = 140;
18ef6948d689 new d3s examples
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
24 articleMenu.add(new WebFXMenuItem("Slider", "slider.html"));
18ef6948d689 new d3s examples
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
25 articleMenu.add(new WebFXMenuItem("Implementation", "implementation.html"));
18ef6948d689 new d3s examples
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
26 articleMenu.add(new WebFXMenuItem("API", "api.html"));
18ef6948d689 new d3s examples
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
27 articleMenu.add(new WebFXMenuItem("Demo", "demo.html"));
18ef6948d689 new d3s examples
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
28 articleMenu.add(new WebFXMenuSeparator);
18ef6948d689 new d3s examples
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
29 articleMenu.add(new WebFXMenuItem("Download", "http://webfx.eae.net/download/slider102.zip"));
18ef6948d689 new d3s examples
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
30 webfxMenuBar.add(new WebFXMenuButton("Article Menu", null, null, articleMenu));
18ef6948d689 new d3s examples
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
31
18ef6948d689 new d3s examples
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
32 webfxLayout.writeTitle("Slider");
18ef6948d689 new d3s examples
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
33 webfxLayout.writeMenu();
18ef6948d689 new d3s examples
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
34 webfxLayout.writeDesignedByEdger();
18ef6948d689 new d3s examples
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
35
18ef6948d689 new d3s examples
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
36 </script>
18ef6948d689 new d3s examples
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
37 <div class="webfx-main-body">
18ef6948d689 new d3s examples
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
38 <!-- end WebFX Layout Includes -->
18ef6948d689 new d3s examples
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
39
18ef6948d689 new d3s examples
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
40 <h2>Implementation</h2>
18ef6948d689 new d3s examples
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
41
18ef6948d689 new d3s examples
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
42 <p>The slider implementation mostly consists of lots of event handlers that
18ef6948d689 new d3s examples
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
43 sets the value depending on the event arguments.</p>
18ef6948d689 new d3s examples
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
44
18ef6948d689 new d3s examples
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
45 <h3>Range</h3>
18ef6948d689 new d3s examples
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
46
18ef6948d689 new d3s examples
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
47 <p>The data model is handled by a class called Range (also known as BoundedRangeModel).
18ef6948d689 new d3s examples
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
48 This class has a few properties that fits perfectly with sliders, scrollbars and
18ef6948d689 new d3s examples
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
49 progress bars. A range has a minimum value, a value, an extent and a maximum value.
18ef6948d689 new d3s examples
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
50 The following is always true for a range object.</p>
18ef6948d689 new d3s examples
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
51
18ef6948d689 new d3s examples
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
52 <pre>
18ef6948d689 new d3s examples
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
53 minimum &lt; value &lt; value + extent &lt; maximum
18ef6948d689 new d3s examples
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
54 </pre>
18ef6948d689 new d3s examples
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
55
18ef6948d689 new d3s examples
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
56 <p>In the case of a slider the extent is always zero. Using a range for the data
18ef6948d689 new d3s examples
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
57 model allows the implementation of the slider to concentrate on other things than
18ef6948d689 new d3s examples
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
58 ensuring that the data model is valid.</p>
18ef6948d689 new d3s examples
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
59
18ef6948d689 new d3s examples
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
60 <h3>Timer</h3>
18ef6948d689 new d3s examples
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
61
18ef6948d689 new d3s examples
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
62 <p>For this implementation of the slider I decided to use an object oriented
18ef6948d689 new d3s examples
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
63 abstraction of <code>window.setTimeout</code>. A timer from the <code>Timer</code>
18ef6948d689 new d3s examples
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
64 class can be started and stopped and it fires a pseudo event called <code>ontimer</code>
18ef6948d689 new d3s examples
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
65 a certain amount of milliseconds after the timer is started.</p>
18ef6948d689 new d3s examples
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
66
18ef6948d689 new d3s examples
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
67 <pre>
18ef6948d689 new d3s examples
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
68 Timer.prototype.start = function () {
18ef6948d689 new d3s examples
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
69 if (this.isStarted())
18ef6948d689 new d3s examples
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
70 this.stop();
18ef6948d689 new d3s examples
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
71 var oThis = this;
18ef6948d689 new d3s examples
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
72 this._timer = window.setTimeout(function () {
18ef6948d689 new d3s examples
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
73 if (typeof oThis.ontimer == "function")
18ef6948d689 new d3s examples
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
74 oThis.ontimer();
18ef6948d689 new d3s examples
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
75 }, this._pauseTime);
18ef6948d689 new d3s examples
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
76 this._isStarted = false;
18ef6948d689 new d3s examples
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
77 };
18ef6948d689 new d3s examples
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
78
18ef6948d689 new d3s examples
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
79 Timer.prototype.stop = function () {
18ef6948d689 new d3s examples
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
80 if (this._timer != null)
18ef6948d689 new d3s examples
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
81 window.clearTimeout(this._timer);
18ef6948d689 new d3s examples
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
82 this._isStarted = false;
18ef6948d689 new d3s examples
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
83 };
18ef6948d689 new d3s examples
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
84 </pre>
18ef6948d689 new d3s examples
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
85
18ef6948d689 new d3s examples
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
86 <h3>Slider</h3>
18ef6948d689 new d3s examples
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
87
18ef6948d689 new d3s examples
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
88 <p>The slider consists of a line element and a handle element. The line is only
18ef6948d689 new d3s examples
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
89 there for the visual effect. The handle on the other hand can be dragged and
18ef6948d689 new d3s examples
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
90 thereby changing the value. When dragging the handle the position of the mouse
18ef6948d689 new d3s examples
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
91 is used to calculate a new value for the data model. Once the value is changed
18ef6948d689 new d3s examples
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
92 the layout for the slider is recalculated.</p>
18ef6948d689 new d3s examples
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
93
18ef6948d689 new d3s examples
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
94 <p>When the user holds down the mouse on the slider, but not on the handle, a
18ef6948d689 new d3s examples
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
95 timer is started and every time the timer triggers the <code>timer</code> event
18ef6948d689 new d3s examples
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
96 the value is changed by the <code>blockIncrement</code> towards the mouse
18ef6948d689 new d3s examples
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
97 pointer.</p>
18ef6948d689 new d3s examples
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
98
18ef6948d689 new d3s examples
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
99 <p>The slider also allows the user to use the keyboard to change the value. This
18ef6948d689 new d3s examples
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
100 is done by listening to the <code>keydown</code> (and <code>keypress</code>)
18ef6948d689 new d3s examples
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
101 events. In the <code>keydown</code> handler the key is checked and the value for
18ef6948d689 new d3s examples
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
102 the data model is updated accordingly. The reason for the <code>keypress</code>
18ef6948d689 new d3s examples
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
103 handler is to disable the default actions in the browser.</p>
18ef6948d689 new d3s examples
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
104
18ef6948d689 new d3s examples
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
105 <p>
18ef6948d689 new d3s examples
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
106 <a href="slider.html">Slider</a><br />
18ef6948d689 new d3s examples
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
107 <a href="implementation.html">Implementation</a><br />
18ef6948d689 new d3s examples
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
108 <a href="api.html">API</a><br />
18ef6948d689 new d3s examples
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
109 <a href="demo.html">Demo</a><br />
18ef6948d689 new d3s examples
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
110 <a href="http://webfx.eae.net/download/slider102.zip">Download</a>
18ef6948d689 new d3s examples
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
111 </p>
18ef6948d689 new d3s examples
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
112
18ef6948d689 new d3s examples
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
113 <p class="author">Author: Erik Arvidsson</p>
18ef6948d689 new d3s examples
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
114
18ef6948d689 new d3s examples
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
115 <!-- end webfx-main-body -->
18ef6948d689 new d3s examples
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
116 </div>
18ef6948d689 new d3s examples
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
117
18ef6948d689 new d3s examples
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
118 </body>
18ef6948d689 new d3s examples
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
119 </html>