Skip to content

Commit

Permalink
example prototype for valueInput
Browse files Browse the repository at this point in the history 
Reading the val() already works, auto-updating not implemented yet.
  • Loading branch information
@isg-software
isg-software committed Aug 8, 2017
1 parent eee1b8a commit 9f26ab9
Show file tree
Hide file tree
Showing 12 changed files with 74 additions and 73 deletions.
54 changes: 6 additions & 48 deletions config.codekit3
View file
Expand Up @@ -682,53 +682,11 @@
"oAP": "\/jsdoc.sh",
"oF": 0
},
"\/lib\/highlight-styles\/default.css": {
"aP": 0,
"bl": 0,
"ft": 16,
"ma": 0,
"oA": 0,
"oAP": "\/lib\/highlight-styles\/default-min.css",
"oF": 0,
"oS": 0
},
"\/lib\/highlight-styles\/github.css": {
"aP": 0,
"bl": 0,
"ft": 16,
"ma": 0,
"oA": 0,
"oAP": "\/lib\/highlight-styles\/github-min.css",
"oF": 0,
"oS": 0
},
"\/lib\/highlight-styles\/googlecode.css": {
"aP": 0,
"bl": 0,
"ft": 16,
"ma": 0,
"oA": 0,
"oAP": "\/lib\/highlight-styles\/googlecode-min.css",
"oF": 0,
"oS": 0
},
"\/lib\/highlight.pack.js": {
"ft": 64,
"mi": 1,
"oA": 0,
"oAP": "\/lib\/min\/highlight.pack-min.js",
"oF": 0,
"sC": 1,
"tS": 0
},
"\/lib\/jquery-1.11.3.min.js": {
"ft": 64,
"mi": 1,
"oA": 0,
"oAP": "\/lib\/min\/jquery-1.11.3.min-min.js",
"oF": 0,
"sC": 1,
"tS": 0
"\/lib": {
"ft": 65536,
"oA": 1,
"oAP": "\/build\/lib",
"oF": 0
},
"\/LICENSE": {
"ft": 8192,
Expand Down Expand Up @@ -2721,7 +2679,7 @@
],
"overrideExternalServerCSS": 0,
"previewPathAddition": "",
"skippedFoldersString": "log, _logs, logs, _cache, cache, \/storage\/framework\/sessions, node_modules",
"skippedFoldersString": "log, _logs, logs, _cache, cache, \/storage\/framework\/sessions, node_modules, \/lib",
"sourceFolderName": "source",
"uglifyDefinesString": "",
"uglifyFlags2": {
Expand Down
67 changes: 44 additions & 23 deletions examples.html
View file
Expand Up @@ -16,6 +16,10 @@
<script type="text/javascript" src="js/min/jquery-progresspiesvg-checkComplete-min.js"></script>
<script type="text/javascript" src="js/min/jquery-progresspiesvg-valueDisplay-min.js"></script>

<!-- a small custom version of jQuery UI for spinner input example -->
<script type="text/javascript" src="lib/jquery-ui-custom.min.js"></script>
<link type="text/css" rel="stylesheet" href="lib/jquery-ui-custom.min.css"></script>

<script type="text/javascript" src="examples.js"></script>
<link type="text/css" rel="stylesheet" href="examples.css">

Expand Down Expand Up @@ -144,6 +148,15 @@
}
});

$("#spinner span").setupProgressPie({
valueInput: $("#spinner input").spinner({
min: 0,
max: 100
}),
verticalAlign: "middle",
size: 25
}).progressPie();

$(".pr.align").setupProgressPie({
mode: $.fn.progressPie.Mode.COLOR,
valueData: "val",
Expand Down Expand Up @@ -1029,6 +1042,28 @@ <h3>Renaming the CSS classes</h3>

<h2>Advanced options</h2>

<h3>Vertical alignment<a id="verticalAlign"></a></h3>
<p>The following example shows alternating pies with and without the option <code>verticalAlign:"middle"</code>
(default is "bottom")
in a line with a line-height greater than the font-size (so that alignment makes a difference).</p>

<pre><code class="language-javascript">$(".pp.vc").progressPie({verticalAlign:"middle"});</code></pre>
applied to elements like:
<pre><code class="language-html">&lt;span class="pp default"&gt;0&lt;/span&gt;
&lt;span class="pp vc"&gt;5&lt;/span&gt;
&hellip;</code></pre>

<p style="line-height: 2em">
<span class="pp default">0</span> %
<span class="pp vc">5</span> %
<span class="pp default">25</span> %
<span class="pp vc">42</span> %
<span class="pp default">50</span> %
<span class="pp vc">65</span> %
<span class="pp default">80</span> %
<span class="pp vc">99</span> %
<span class="pp default">100</span> %</p>

<h3>append instead of prepend</h3>
<p>By default, the pie gets prepended to the selected element's content. You may opt to appending it behind the content instead:</p>
<pre><code class="language-javascript">$(".pp.append").progressPie({prepend: false, separator: "%:&amp;nbsp;"});</code></pre>
Expand Down Expand Up @@ -1145,6 +1180,15 @@ <h3>Value attribute / value data, manual size, overridden background circle's st
<p>The <code>backgroundColor</code> function in the example above uses the same color function as is used for the foreground color
in <code>COLOR</code> mode, only adding an optional second parameter which specifies an alpha channel,
in this case set to 10% opacity (90% transparency).</p>

<h3><a id="valueinput"></a>Take value from form input element</h3>
<p>TODO: text</p>
<div id="spinner">
<input type="text" value="50" size="3">
<span></span>
</div>

<p>TODO: Forward link to valueSelector (4th option)</p>

<h3><a id="overlap1"></a>Avoid overlapping outer stroke</h3>
<p>If you set a different stroke color for the outer circle (see example <code>pp.attr.silverborder</code> above)
Expand Down Expand Up @@ -1655,29 +1699,6 @@ <h4>Value Selector and label displayed inside a ring with rounded ends</h4>
You might also keep the label invisible (providing the value in a data attribute, see above) and put some
other graphic (SVG or other format) over/inside the ring, e.g. a pause or stop icon clickable to halt or abort
the running process whose value is displayed by the ring.</p>

<h3>Vertical alignment<a id="verticalAlign"></a></h3>
<p>The following example shows alternating pies with and without the option <code>verticalAlign:"middle"</code>
(default is "bottom")
in a line with a line-height greater than the font-size (so that alignment makes a difference).</p>

<pre><code class="language-javascript">$(".pp.vc").progressPie({verticalAlign:"middle"});</code></pre>
applied to elements like:
<pre><code class="language-html">&lt;span class="pp default"&gt;0&lt;/span&gt;
&lt;span class="pp vc"&gt;5&lt;/span&gt;
&hellip;</code></pre>

<p style="line-height: 2em">
<span class="pp default">0</span> %
<span class="pp vc">5</span> %
<span class="pp default">25</span> %
<span class="pp vc">42</span> %
<span class="pp default">50</span> %
<span class="pp vc">65</span> %
<span class="pp default">80</span> %
<span class="pp vc">99</span> %
<span class="pp default">100</span> %</p>



<h2>Updating (and content plug-ins)</h2>
Expand Down
11 changes: 10 additions & 1 deletion js/jquery-progresspiesvg.js
View file
Expand Up @@ -537,7 +537,16 @@

function getRawValueStringOrNumber(me, opts) {
var stringOrNumber;
if (typeof opts.valueData === "string") {
if (typeof opts.valueInput === "object") {
if (typeof opts.valueInput.val === "function") {
stringOrNumber = opts.valueInput.val();
} else {
throw "option 'valueInput' is an object, but does not have a 'val' method, i.e. it's obviously not a jQuery result object.";
}
if (typeof opts.valueData !== "undefined" || typeof opts.valueAttr !== "undefined" || typeof opts.valueSelector !== "undefined") {
throw "options 'valueInput', 'valueData', 'valueAttr' and 'valueSelector' are mutually exclusive, i.e. at least three must be undefined!";
}
} else if (typeof opts.valueData === "string") {
stringOrNumber = me.data(opts.valueData);
if (typeof opts.valueAttr !== "undefined" || typeof opts.valueSelector !== "undefined") {
throw "options 'valueData', 'valueAttr' and 'valueSelector' are mutually exclusive, i.e. at least two must be undefined!";
Expand Down

0 comments on commit 9f26ab9

Please sign in to comment.