library-mirrors/dat.gui
1
0
Fork 0
mirror of https://github.com/dataarts/dat.gui.git synced 2024-12-12 04:08:27 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

built as single js proof of concept

Browse Source
This commit is contained in:
George Michael Brower 2014-09-02 18:34:12 -04:00
parent 90e0776842
commit c36904a071
7 changed files with 50 additions and 1503 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
README.md
View File

@ -7,7 +7,10 @@ dat-gui creates an interface that you can use to modify variables with very litt
Download the [minified library]( todo ) and include it in your html. Download the [minified library]( todo ) and include it in your html.
```html ```html
<script src="gui.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/polymer/0.3.4/platform.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/dat-gui/r3/gui.js"></script>
``` ```
Create controllers by adding objects and their properties. dat-gui chooses a controller based on the variable's initial value. Create controllers by adding objects and their properties. dat-gui chooses a controller based on the variable's initial value.

1509
build/gui.html
View File

File diff suppressed because one or more lines are too long

4
elements/controller-boolean/controller-boolean.styl
View File

@ -8,6 +8,7 @@ border-radius = height;
height: 100%; height: 100%;
cursor: pointer; cursor: pointer;
padding-left: padding padding-left: padding
} }
#switch-track { #switch-track {
@ -33,6 +34,9 @@ border-radius = height;
#switch-knob { #switch-knob {
transform: translate3d( width - height, 0, 0 ); transform: translate3d( width - height, 0, 0 );
} }
&:hover #switch-knob {
transform: translate3d( width - height, 0, 0 ) scale( 1.5 );
}
} }
#text { #text {

11
examples/index.html
View File

@ -5,8 +5,15 @@
<meta charset="utf-8"> <meta charset="utf-8">
<title>dat-gui kitchen sink</title> <title>dat-gui kitchen sink</title>
<script src="../../platform/platform.js"></script>
<link rel="import" href="../build/gui.html"> <!-- // <script src="../../platform/platform.js"></script> -->
<!-- <link rel="import" href="../build/gui.html"> -->
<script src="../build/gui.js"></script>
<style type="text/css"> <style type="text/css">
body { body {

2
gui.html
View File

@ -1,4 +1,4 @@
<!-- <script src="../platform/platform.js"></script> --> <script src="../platform/platform.js"></script>
<!-- src --> <!-- src -->
<script src="elements/Gui.js"></script> <script src="elements/Gui.js"></script>

18
gulpfile.js
View File

@ -55,8 +55,8 @@ gulp.task( 'vulcanize', function() {
gulp.src( paths.main ) gulp.src( paths.main )
.pipe( vulcan( { .pipe( vulcan( {
dest: 'build', dest: 'build',
inline: true inline: true,
// strip: true strip: true
} ) ); } ) );
} ); } );
@ -83,6 +83,20 @@ gulp.task( 'build', [
'docs' 'docs'
] ); ] );
gulp.task( 'hypervulcanize', function() {
// - styles from layout.html
// styles
// platform.js
// polymer.html
// - polymer.js
} );
gulp.task( 'default', function() { gulp.task( 'default', function() {
gulp.watch( [ paths.css ], [ 'css', 'vulcanize' ] ); gulp.watch( [ paths.css ], [ 'css', 'vulcanize' ] );

4
index.html
View File

@ -19,7 +19,9 @@
<p>dat-gui creates an interface that you can use to modify variables with very little code. </p> <p>dat-gui creates an interface that you can use to modify variables with very little code. </p>
<h3 id="basic-usage">Basic Usage</h3> <h3 id="basic-usage">Basic Usage</h3>
<p>Download the <a href="todo">minified library</a> and include it in your html.</p> <p>Download the <a href="todo">minified library</a> and include it in your html.</p>
<pre><code class="lang-html">&lt;script src=&quot;gui.js&quot;&gt;&lt;/script&gt; <pre><code class="lang-html">
&lt;script src=&quot;//cdnjs.cloudflare.com/ajax/libs/polymer/0.3.4/platform.js&quot;&gt;&lt;/script&gt;
&lt;script src=&quot;//cdnjs.cloudflare.com/ajax/libs/dat-gui/r3/gui.js&quot;&gt;&lt;/script&gt;
</code></pre> </code></pre>
<p>Create controllers by adding objects and their properties. dat-gui chooses a controller based on the variable&#39;s initial value.</p> <p>Create controllers by adding objects and their properties. dat-gui chooses a controller based on the variable&#39;s initial value.</p>
<pre><code class="lang-javascript">var gui = new Gui(); <pre><code class="lang-javascript">var gui = new Gui();