Skip to content

Commit

Permalink
update some doc styles, more makeSource placement fun
Browse files Browse the repository at this point in the history
  • Loading branch information
@sporritt
sporritt committed May 8, 2014
1 parent c904887 commit f2e5569
Show file tree
Hide file tree
Showing 16 changed files with 136 additions and 92 deletions.
4 changes: 4 additions & 0 deletions css/jsplumb-doc.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -129,6 +129,10 @@ nav h2 {
background-color:#eaedef;
}

.menu {
background-color: #eaedef;
}

.nav {
width: 240px;
margin-left: 15px;
Expand Down
37 changes: 33 additions & 4 deletions css/jsplumb.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -58,17 +58,45 @@ body {

#header {
margin-top:0;
height:44px;

height:44px;
font-size:13px;
margin-left:auto;
margin-right:auto;
padding-right: 50px;
padding-left: 50px;

line-height: 44px;
max-width:1000px;
width:80%;
}

@media screen and (max-width:1000px) {
#header {
width:100%;
}
}

@media screen and (max-width:800px) {
#header select {
display:none;
}
}

@media screen and (max-width:700px) {
.library-links {
right:330px;
}
}

@media screen and (max-width:640px) {
.logo {
display:none;
}
#header {
text-align:center;
overflow:hidden;
}
}

.explanation i {
float: right;
margin-right: 25px;
Expand Down Expand Up @@ -301,9 +329,10 @@ path, ._jsPlumb_endpoint { cursor:pointer; }
}

.library-links {
right: 454px;
right: 331px;
height: 19px;
line-height: 19px;
/* left: 60%; */
}

.current-library {
Expand Down
2 changes: 1 addition & 1 deletion demo/animation/dom.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@
<body data-demo-id="animation" data-library="dom">
<div id="headerWrapper">
<div id="header">
<div class="logo"><img src="../../logo-bw.png"></div>
<div class="logo"><img src="http://jsplumbtoolkit.com/logo-bw.png"></div>
<div class="menu">
<a href="http://localhost:4567">DOCS</a>
<a href="../../apidocs">API</a>
Expand Down
15 changes: 1 addition & 14 deletions demo/sourcesAndTargets/demo.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,17 +29,6 @@
},
Container:"source-target-demo"
});

window.setZoom = function(z, el) {
var p = [ "webkit", "moz", "ms", "o", "" ],
s = "scale(" + z + ")";

for (var i = 0; i < p.length; i++)
el.style[p[i] + "Transform"] = s;

instance.setZoom(z);
};


// click listener for the enable/disable link.
jsPlumb.on(document.getElementById("enableDisableSource"), "click", function(e) {
Expand All @@ -51,7 +40,7 @@
// bind to a connection event, just for the purposes of pointing out that it can be done.
instance.bind("connection", function(i,c) {
if (typeof console !== "undefined")
console.dir(i.connection);
console.log("connection", i.connection);
});

// get the list of ".smallWindow" elements.
Expand Down Expand Up @@ -83,8 +72,6 @@
// and finally connect a couple of small windows, just so its obvious what's going on when this demo loads.
instance.connect({ source:"sourceWindow1", target:"targetWindow5" });
instance.connect({ source:"sourceWindow1", target:"targetWindow2" });

setZoom(0.5,document.getElementById("source-target-demo"))
});
});
})();
12 changes: 0 additions & 12 deletions demo/statemachine/demo.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -38,15 +38,6 @@
info.connection.getOverlay("label").setLabel(info.connection.id);
});

window.setZoom = function(z, el) {
var p = [ "webkit", "moz", "ms", "o", "" ],
s = "scale(" + z + ")";

for (var i = 0; i < p.length; i++)
el.style[p[i] + "Transform"] = s;

instance.setZoom(z);
};

// suspend drawing and initialise.
instance.doWhileSuspended(function() {
Expand Down Expand Up @@ -102,9 +93,6 @@
instance.connect({ source:"opened", target:"phone1" });
instance.connect({ source:"phone1", target:"phone1" });
instance.connect({ source:"phone1", target:"inperson" });

//setZoom(0.5,document.getElementById("statemachine-demo"))


});
})();
4 changes: 4 additions & 0 deletions dist/css/jsplumb-doc.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -129,6 +129,10 @@ nav h2 {
background-color:#eaedef;
}

.menu {
background-color: #eaedef;
}

.nav {
width: 240px;
margin-left: 15px;
Expand Down
37 changes: 33 additions & 4 deletions dist/css/jsplumb.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -58,17 +58,45 @@ body {

#header {
margin-top:0;
height:44px;

height:44px;
font-size:13px;
margin-left:auto;
margin-right:auto;
padding-right: 50px;
padding-left: 50px;

line-height: 44px;
max-width:1000px;
width:80%;
}

@media screen and (max-width:1000px) {
#header {
width:100%;
}
}

@media screen and (max-width:800px) {
#header select {
display:none;
}
}

@media screen and (max-width:700px) {
.library-links {
right:330px;
}
}

@media screen and (max-width:640px) {
.logo {
display:none;
}
#header {
text-align:center;
overflow:hidden;
}
}

.explanation i {
float: right;
margin-right: 25px;
Expand Down Expand Up @@ -301,9 +329,10 @@ path, ._jsPlumb_endpoint { cursor:pointer; }
}

.library-links {
right: 454px;
right: 331px;
height: 19px;
line-height: 19px;
/* left: 60%; */
}

.current-library {
Expand Down
15 changes: 1 addition & 14 deletions dist/demo/sourcesAndTargets/demo.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,17 +29,6 @@
},
Container:"source-target-demo"
});

window.setZoom = function(z, el) {
var p = [ "webkit", "moz", "ms", "o", "" ],
s = "scale(" + z + ")";

for (var i = 0; i < p.length; i++)
el.style[p[i] + "Transform"] = s;

instance.setZoom(z);
};


// click listener for the enable/disable link.
jsPlumb.on(document.getElementById("enableDisableSource"), "click", function(e) {
Expand All @@ -51,7 +40,7 @@
// bind to a connection event, just for the purposes of pointing out that it can be done.
instance.bind("connection", function(i,c) {
if (typeof console !== "undefined")
console.dir(i.connection);
console.log("connection", i.connection);
});

// get the list of ".smallWindow" elements.
Expand Down Expand Up @@ -83,8 +72,6 @@
// and finally connect a couple of small windows, just so its obvious what's going on when this demo loads.
instance.connect({ source:"sourceWindow1", target:"targetWindow5" });
instance.connect({ source:"sourceWindow1", target:"targetWindow2" });

setZoom(0.5,document.getElementById("source-target-demo"))
});
});
})();
12 changes: 0 additions & 12 deletions dist/demo/statemachine/demo.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -38,15 +38,6 @@
info.connection.getOverlay("label").setLabel(info.connection.id);
});

window.setZoom = function(z, el) {
var p = [ "webkit", "moz", "ms", "o", "" ],
s = "scale(" + z + ")";

for (var i = 0; i < p.length; i++)
el.style[p[i] + "Transform"] = s;

instance.setZoom(z);
};

// suspend drawing and initialise.
instance.doWhileSuspended(function() {
Expand Down Expand Up @@ -102,9 +93,6 @@
instance.connect({ source:"opened", target:"phone1" });
instance.connect({ source:"phone1", target:"phone1" });
instance.connect({ source:"phone1", target:"inperson" });

//setZoom(0.5,document.getElementById("statemachine-demo"))


});
})();
12 changes: 6 additions & 6 deletions dist/doc/changelog.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -102,23 +102,23 @@ <h3>Contents</h3>
<div class="markdown-body">
<h2>1.6.1</h2>

<p>This is a minor release in which a few issues related to zooming have been fixed, and now jsPlumb offers a zoom function as part of its API.</p>
<p>This is a minor release in which a few issues related to zooming have been fixed.</p>

<h3>Changes between 1.6.0 and 1.6.1</h3>

<h4>Backwards Compatibility</h4>

<ul>
<li>The <code>setZoom</code> function now manipulates CSS3 transforms on the current Container, meaning the UI&#39;s zoom is now actually changed by this method. This is distinct from previous versions, in which <code>setZoom</code> was just an advisory for jsPlumb; it was used to adjust various offset values, but no changes were applied to the DOM itself by jsPlumb. The original <code>setZoom</code> function is now available (but deprecated) as <code>setZoomValue</code></li>
</ul>
<p>No issues</p>

<h4>Issues</h4>

<p>See <strong>Backwards Compatibility</strong>.</p>
<ul>
<li><strong>206</strong> Fix documentation error about jsPlumb.Defaults.Endpoints</li>
</ul>

<h4>New Functionality</h4>

<p>See <strong>Backwards Compatibility</strong>.</p>
<p>Better handling of zooming in vanilla jsPlumb.</p>

<h2>1.6.0</h2>

Expand Down
5 changes: 3 additions & 2 deletions dist/doc/defaults.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -145,7 +145,7 @@ <h2>Configuring Defaults</h2>

<span class="nx">jsPlumb</span><span class="p">.</span><span class="nx">Defaults</span><span class="p">.</span><span class="nx">DragOptions</span> <span class="o">=</span> <span class="p">{</span> <span class="nx">cursor</span><span class="o">:</span> <span class="s2">&quot;crosshair&quot;</span> <span class="p">};</span>

<span class="nx">jsPlumb</span><span class="p">.</span><span class="nx">Default</span><span class="p">.</span><span class="nx">Endpoints</span> <span class="o">=</span> <span class="p">[</span> <span class="p">[</span> <span class="s2">&quot;Dot&quot;</span><span class="p">,</span> <span class="mi">7</span> <span class="p">],</span> <span class="p">[</span> <span class="s2">&quot;Dot&quot;</span><span class="p">,</span> <span class="mi">11</span> <span class="p">]</span> <span class="p">];</span>
<span class="nx">jsPlumb</span><span class="p">.</span><span class="nx">Defaults</span><span class="p">.</span><span class="nx">Endpoints</span> <span class="o">=</span> <span class="p">[</span> <span class="p">[</span> <span class="s2">&quot;Dot&quot;</span><span class="p">,</span> <span class="p">{</span> <span class="nx">radius</span><span class="o">:</span><span class="mi">7</span> <span class="p">}</span> <span class="p">],</span> <span class="p">[</span> <span class="s2">&quot;Dot&quot;</span><span class="p">,</span> <span class="p">{</span> <span class="nx">radius</span><span class="o">:</span><span class="mi">11</span> <span class="p">}</span> <span class="p">]</span> <span class="p">];</span>

<span class="nx">jsPlumb</span><span class="p">.</span><span class="nx">Defaults</span><span class="p">.</span><span class="nx">EndpointStyles</span> <span class="o">=</span> <span class="p">[{</span> <span class="nx">fillStyle</span><span class="o">:</span><span class="s2">&quot;#225588&quot;</span> <span class="p">},</span> <span class="p">{</span> <span class="nx">fillStyle</span><span class="o">:</span><span class="s2">&quot;#558822&quot;</span> <span class="p">}];</span>
</code></pre></div>
Expand All @@ -165,6 +165,7 @@ <h5>Explanation of each Default setting</h5>
<li><p><strong>Anchors</strong> - default source and target Anchors for Connections.</p></li>
<li><p><strong>Connector</strong> - The default Connector to use.</p></li>
<li><p><strong>ConnectionsDetachable</strong> - Whether or not Connections are detachable by default using the mouse.</p></li>
<li><p><strong>Container</strong> - The element to use as the parent for all artefacts added by jsPlumb. It is highly recommended you set this. Future versions of jsPlumb will mandate that you do so. See <a href="home#container">here</a> for a discussion of this.</p></li>
<li><p><strong>DoNotThrowErrors</strong> - Whether or not jsPlumb will actually throw an exception if an Anchor, Endpoint or Connector that does not exist is requested.</p></li>
<li><p><strong>ConnectionOverlays</strong> - Default Overlays to attach to every Connection</p></li>
<li><p><strong>DragOptions</strong> - Default options with which to configure any element made draggable with <code>jsPlumb.draggable</code></p></li>
Expand Down Expand Up @@ -212,7 +213,7 @@ <h4>Providing defaults to jsPlumb.getInstance</h4>
<span class="nx">strokeStyle</span><span class="o">:</span> <span class="s1">&#39;rgba(200,0,0,100)&#39;</span>
<span class="p">},</span>
<span class="nx">DragOptions</span> <span class="o">:</span> <span class="p">{</span> <span class="nx">cursor</span><span class="o">:</span> <span class="s2">&quot;crosshair&quot;</span> <span class="p">},</span>
<span class="nx">Endpoints</span> <span class="o">:</span> <span class="p">[</span> <span class="p">[</span> <span class="s2">&quot;Dot&quot;</span><span class="p">,</span> <span class="mi">7</span> <span class="p">],</span> <span class="p">[</span> <span class="s2">&quot;Dot&quot;</span><span class="p">,</span> <span class="mi">11</span> <span class="p">]</span> <span class="p">],</span>
<span class="nx">Endpoints</span> <span class="o">:</span> <span class="p">[</span> <span class="p">[</span> <span class="s2">&quot;Dot&quot;</span><span class="p">,</span> <span class="p">{</span> <span class="nx">radius</span><span class="o">:</span><span class="mi">7</span> <span class="p">}</span> <span class="p">],</span> <span class="p">[</span> <span class="s2">&quot;Dot&quot;</span><span class="p">,</span> <span class="p">{</span> <span class="nx">radius</span><span class="o">:</span><span class="mi">11</span> <span class="p">}</span> <span class="p">]</span> <span class="p">],</span>
<span class="nx">EndpointStyles</span> <span class="o">:</span> <span class="p">[</span>
<span class="p">{</span> <span class="nx">fillStyle</span><span class="o">:</span><span class="s2">&quot;#225588&quot;</span> <span class="p">},</span>
<span class="p">{</span> <span class="nx">fillStyle</span><span class="o">:</span><span class="s2">&quot;#558822&quot;</span> <span class="p">}</span>
Expand Down
10 changes: 5 additions & 5 deletions dist/doc/home.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -104,7 +104,7 @@ <h2>jsPlumb</h2>

<p>jsPlumb provides a means for a developer to visually connect elements on their web pages. It uses SVG in modern browsers, and VML on IE 8 and below. </p>

<p>The latest version is 1.6.0. Starting with 1.6.0, jsPlumb ships with a version that has no external dependencies. This is referred to as &quot;vanilla&quot; jsPlumb; the filename has a prefix of <strong>dom-</strong>.</p>
<p>The latest version is 1.6.1. Starting with 1.6.0, jsPlumb ships with a version that has no external dependencies. This is referred to as &quot;vanilla&quot; jsPlumb; the filename has a prefix of <strong>dom-</strong>.</p>

<p>jQuery/MooTools/YUI adapter versions are still shipped in 1.6.x, but unless you have a specific need to use one of them, vanilla jsPlumb is recommended.</p>

Expand Down Expand Up @@ -170,7 +170,7 @@ <h3>Required Imports</h3>
<h5>Vanilla</h5>

<p>No required imports. </p>
<div class="highlight"><pre><code class="html language-html" data-lang="html"><span class="nt">&lt;script </span><span class="na">src=</span><span class="s">&quot;PATH_TO/dom.jsPlumb-1.6.0-min.js &quot;</span><span class="nt">&gt;&lt;/script&gt;</span>
<div class="highlight"><pre><code class="html language-html" data-lang="html"><span class="nt">&lt;script </span><span class="na">src=</span><span class="s">&quot;PATH_TO/dom.jsPlumb-1.6.1-min.js &quot;</span><span class="nt">&gt;&lt;/script&gt;</span>
</code></pre></div>
<h6>Touch events</h6>

Expand All @@ -184,11 +184,11 @@ <h5>jQuery</h5>
</ul>
<div class="highlight"><pre><code class="html language-html" data-lang="html"><span class="nt">&lt;script </span><span class="na">src=</span><span class="s">&quot;//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js&quot;</span><span class="nt">&gt;&lt;/script&gt;</span>
<span class="nt">&lt;script </span><span class="na">src=</span><span class="s">&quot;//ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js&quot;</span><span class="nt">&gt;&lt;/script&gt;</span>
<span class="nt">&lt;script </span><span class="na">src=</span><span class="s">&quot;PATH_TO/jquery.jsPlumb-1.6.0-min.js &quot;</span><span class="nt">&gt;&lt;/script&gt;</span>
<span class="nt">&lt;script </span><span class="na">src=</span><span class="s">&quot;PATH_TO/jquery.jsPlumb-1.6.1-min.js &quot;</span><span class="nt">&gt;&lt;/script&gt;</span>
</code></pre></div>
<h6>Touch Events</h6>

<p>There is a neat plugin you can use for this - [[jQuery UI Touch Punch|http://touchpunch.furf.com/]]. You need to include it in your page after both jQuery and jQueryUI.</p>
<p>There is a neat plugin you can use for this - [[jQuery UI Touch Punch|http://touchpunch.furf.com/]]. You need to include it in your page after both jQuery and jQueryUI. It does not, however, work with the <code>makeSource</code> functionality in jsPlumb. Better to use vanilla jsPlumb!</p>

<h5>MooTools</h5>

Expand All @@ -198,7 +198,7 @@ <h5>MooTools</h5>
</ul>
<div class="highlight"><pre><code class="html language-html" data-lang="html"><span class="nt">&lt;script </span><span class="na">src=</span><span class="s">&quot;//cdnjs.cloudflare.com/ajax/libs/mootools/1.4.5/mootools-core-full-compat-yc.min.js&quot;</span><span class="nt">&gt;&lt;/script&gt;</span>
<span class="nt">&lt;script </span><span class="na">src=</span><span class="s">&quot;//cdnjs.cloudflare.com/ajax/libs/mootools-more/1.4.0.1/mootools-more-yui-compressed.min.js&quot;</span><span class="nt">&gt;&lt;/script&gt;</span>
<span class="nt">&lt;script </span><span class="na">src=</span><span class="s">&quot;PATH_TO/mootools.jsPlumb-1.6.0-min.js &quot;</span><span class="nt">&gt;&lt;/script&gt;</span>
<span class="nt">&lt;script </span><span class="na">src=</span><span class="s">&quot;PATH_TO/mootools.jsPlumb-1.6.1-min.js &quot;</span><span class="nt">&gt;&lt;/script&gt;</span>
</code></pre></div>
<h6>Touch Events</h6>

Expand Down
Loading

0 comments on commit f2e5569

Please sign in to comment.