mirror of
https://github.com/dataarts/dat.gui.git
synced 2024-12-12 04:08:27 +00:00
sticky bump for docs
This commit is contained in:
parent
e19a8594c8
commit
2705c84a04
102
docs/template.html
Normal file
102
docs/template.html
Normal file
@ -0,0 +1,102 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<title>dat-gui</title>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
* {
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
margin: 18px;
|
||||||
|
}
|
||||||
|
|
||||||
|
h1, h2, h3, p, pre {
|
||||||
|
margin-bottom: 18px;
|
||||||
|
}
|
||||||
|
|
||||||
|
h1 {
|
||||||
|
margin-bottom: 36px;
|
||||||
|
}
|
||||||
|
|
||||||
|
h2 {
|
||||||
|
padding: 18px 0;
|
||||||
|
margin-top: 36px;
|
||||||
|
margin-bottom: 36px;
|
||||||
|
}
|
||||||
|
|
||||||
|
h2.sticky {
|
||||||
|
border-bottom: 1px solid rgba( 0, 0, 0, 0.25 );
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
top: 0;
|
||||||
|
padding: 18px;
|
||||||
|
background: #fff;
|
||||||
|
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
|
||||||
|
<div id="readme">
|
||||||
|
<!-- Replaced with contents of README.md -->
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
(function() {
|
||||||
|
|
||||||
|
var selector = '#readme h2';
|
||||||
|
var elements = document.querySelectorAll( selector );
|
||||||
|
for ( var el, i = 0, l = elements.length; i < l; i++ ) {
|
||||||
|
|
||||||
|
el = elements[ i ];
|
||||||
|
el.top = el.offsetTop;
|
||||||
|
|
||||||
|
el.spacer = el.cloneNode( true );
|
||||||
|
el.spacer.id = '';
|
||||||
|
el.spacer.style.position = 'fixed';
|
||||||
|
el.spacer.style.visibility = 'hidden';
|
||||||
|
el.spacer.style.zIndex = i;
|
||||||
|
el.spacer.classList.add( 'sticky' );
|
||||||
|
|
||||||
|
el.parentElement.insertBefore( el.spacer, el );
|
||||||
|
el.spacer.height = el.spacer.offsetHeight;
|
||||||
|
|
||||||
|
if ( i > 0 ) {
|
||||||
|
elements[ i - 1 ].next = el;
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
function onScroll() {
|
||||||
|
|
||||||
|
for ( var el, i = 0, l = elements.length; i < l; i++ ) {
|
||||||
|
|
||||||
|
el = elements[ i ];
|
||||||
|
|
||||||
|
var sticky = window.scrollY > el.top && window.scrollY <= el.next.top;
|
||||||
|
el.spacer.style.visibility = sticky ? 'visible' : 'hidden';
|
||||||
|
|
||||||
|
if ( el.next && sticky ) {
|
||||||
|
|
||||||
|
var bottom = window.scrollY + el.spacer.height;
|
||||||
|
var marginTop = Math.round( Math.min( 0, el.next.top - bottom ) );
|
||||||
|
el.spacer.style.marginTop = marginTop + 'px';
|
||||||
|
el.spacer.classList.toggle( -marginTop );
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
document.addEventListener( 'scroll', onScroll );
|
||||||
|
|
||||||
|
})();
|
||||||
|
</script>
|
||||||
|
|
||||||
|
</body>
|
||||||
|
</html>
|
34
examples/controller-custom/controller-custom.html
Normal file
34
examples/controller-custom/controller-custom.html
Normal file
@ -0,0 +1,34 @@
|
|||||||
|
<link rel="import" href="../../../components/polymer/polymer.html">
|
||||||
|
<link rel="import" href="../../elements/controller-number/controller-number.html">
|
||||||
|
|
||||||
|
<polymer-element name="controller-vector" extends="controller-base">
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<controller-number id="x" object="{{ value }}" path="x" min="-1"></controller-number>
|
||||||
|
<controller-number id="y" object="{{ value }}" path="y" min="-1"></controller-number>
|
||||||
|
<controller-number id="z" object="{{ value }}" path="z" min="-2"></controller-number>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
|
||||||
|
Gui.register( 'controller-vector', function( value ) {
|
||||||
|
|
||||||
|
return value instanceof THREE.Vector3;
|
||||||
|
|
||||||
|
} );
|
||||||
|
|
||||||
|
Polymer('controller-vector', {
|
||||||
|
|
||||||
|
ready: function() {
|
||||||
|
|
||||||
|
},
|
||||||
|
|
||||||
|
init: function() {
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
});
|
||||||
|
|
||||||
|
</script>
|
||||||
|
|
||||||
|
</polymer-element>
|
67
examples/index.html
Normal file
67
examples/index.html
Normal file
@ -0,0 +1,67 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
|
||||||
|
<!-- <link rel="import" href="build/gui.html"> -->
|
||||||
|
<link rel="import" href="../gui.html">
|
||||||
|
|
||||||
|
<style type="text/css">
|
||||||
|
* {
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
body, html {
|
||||||
|
height: 100%;
|
||||||
|
font-size: 0;
|
||||||
|
}
|
||||||
|
iframe {
|
||||||
|
height: 100%;
|
||||||
|
width: 50%;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
var object = {
|
||||||
|
"listen4Free": 332,
|
||||||
|
"zeroTo1": 0,
|
||||||
|
"step": 10,
|
||||||
|
"straddleZero": 0,
|
||||||
|
"maxIsNegative": -2,
|
||||||
|
"hasComment": 0
|
||||||
|
};
|
||||||
|
|
||||||
|
// How do we kill polymer-ready ...
|
||||||
|
document.addEventListener( 'polymer-ready', function() {
|
||||||
|
|
||||||
|
var gui = new dat.GUI();
|
||||||
|
|
||||||
|
// gui.docked = true;
|
||||||
|
|
||||||
|
gui.add( object, 'listen4Free' );
|
||||||
|
gui.add( object, 'listen4Free' );
|
||||||
|
gui.add( object, 'listen4Free' );
|
||||||
|
gui.add( object, 'zeroTo1', 0, 1 );
|
||||||
|
|
||||||
|
gui.add( object, 'hasComment' ).comment( 'Hi there.' );
|
||||||
|
|
||||||
|
gui.add( object, 'listen4Free' ).name( 'customName' )
|
||||||
|
|
||||||
|
gui.add( object, 'step', 0, 50, 5 ).comment( 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam semper dui metus, sed aliquet nulla fermentum nec. Sed massa felis, congue nec libero ut, condimentum hendrerit purus. Cras a cursus ante. Integer nec nibh vitae lacus convallis viverra in at urna. Donec hendrerit convallis lacus, nec condimentum neque aliquam ac. Sed suscipit leo vel ligula condimentum scelerisque. Aliquam fermentum sagittis nisi vitae accumsan. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. In et dolor eros. Sed vel venenatis odio, quis porta mi. Ut sed commodo velit, in porta ante.' );
|
||||||
|
|
||||||
|
gui.add( object, 'straddleZero', -1, 1, 0.01 ).comment( 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam semper dui metus, sed aliquet nulla fermentum nec. ' );
|
||||||
|
|
||||||
|
gui.add( object, 'maxIsNegative', -5, -2 );
|
||||||
|
|
||||||
|
gui.anon( 'anonymousSlider', 0, -1, 1 ).comment( 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam semper dui metus');
|
||||||
|
|
||||||
|
// gui.add( 32, 'beats', 1, 64, 1 ).comment( 'The number of beats in the song.');
|
||||||
|
// gui.add( 0, 'loops', -2, 2, 1 ).comment( 'The number of times the gif loops in a cycle.' );
|
||||||
|
// gui.add( 0, 'start', -2, 2, 1 ).comment( 'The frame of the gif where the song should start.' );
|
||||||
|
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
</body>
|
||||||
|
</html>
|
Loading…
Reference in New Issue
Block a user