Skip to content
This repository has been archived by the owner on Feb 2, 2020. It is now read-only.

Commit

Permalink
Update to delite 0.3.0-alpha
Browse files Browse the repository at this point in the history
  • Loading branch information
@clmath
clmath committed Sep 12, 2014
1 parent 24381b8 commit 64e521d
Show file tree
Hide file tree
Showing 8 changed files with 152 additions and 45 deletions.
15 changes: 10 additions & 5 deletions bower.json
View file
Original file line number Diff line number Diff line change
@@ -1,14 +1,19 @@
{
"name": "deliteful-build",
"version": "0.2.0-dev",
"version": "0.3.0-alpha",
"dependencies": {
"requirejs": "2.1.x",
"dstore": "0.1.0",
"dstore": "0.2.0",
"decor-build": "0.2.0-dev",
"delite-build": "0.2.0-dev",
"dpointer-build": "0.1.x",
"delite-build": "0.3.0-alpha",
"dpointer-build": "0.3.x",
"ecma402-build": "0.2.x"
},
"keywords": [
"web-components",
"delite",
"custom-elements"
],
"ignore": [
".jshintrc",
".gitattributes",
Expand All @@ -17,6 +22,6 @@
"CONTRIBUTING.md"
],
"devDependencies": {
"deliteful": "0.2.0-dev"
"deliteful": "0.3.0-alpha"
}
}
8 changes: 4 additions & 4 deletions layer.js
View file

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion layer.map
View file

Large diffs are not rendered by default.

98 changes: 98 additions & 0 deletions samples/Buttons.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,98 @@
<!doctype html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<meta name="viewport"
content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no"/>
<meta name="apple-mobile-web-app-capable" content="yes"/>

<title>deliteful Buttons sample</title>

<script type="text/javascript" src="../../requirejs/require.js"></script>

<script type="text/javascript">
require.config({
baseUrl: "../..",
config: {
"requirejs-dplugins/has": {
"bidi": true
}
}
});
</script>

<script type="text/javascript">
require(["deliteful-build/boot"], function(){
require([
"delite/register",
"deliteful/CheckBox",
"deliteful/Switch",
"deliteful/ToggleButton",
"deliteful/RadioButton",
"requirejs-domready/domReady!"
], function (register) {
register.parse();
});


});
</script>
<style>
.d-icon-cut {
background-image: url('../tests/images/paste.gif'); /* Contains both object and action icons in a sprite image for the enabled state. */
width: 16px;
height: 16px;
background-repeat: no-repeat;
}
.d-icon-copy {
background-image: url('../tests/images/copy.gif'); /* Contains both object and action icons in a sprite image for the enabled state. */
width: 16px;
height: 16px;
background-repeat: no-repeat;
}
p {
line-height: 1.7em;
}
d-switch {
margin-left: 3px;
margin-right: 3px;
}
.buttonPanel {
width: 50%;
}

</style>
</head>
<body dir="ltr">
<div style="display:flex">
<fieldset class="buttonPanel">
<legend>Wrapped in label</legend>
<p><label><d-radio-button checked="true" name="radio"></d-radio-button>Choice 1</label></p>
<p><label><d-radio-button name="radio"></d-radio-button>Choice 2</label></p>
<p><label><d-radio-button disabled="true" name="radio"></d-radio-button>Choice 3</label></p>
<p><label><d-checkbox id="cb1"></d-checkbox>Option 1</label></p>
<p><label><d-checkbox id="cb2" disabled checked="true"></d-checkbox>Option 2</label></p>
<p><label>Option 3<d-switch id="sw1"></d-switch></label></p>
<p><label>Option 4<d-switch id="sw2" checked="true" checkedLabel="ON" uncheckedLabel="OFF"></d-switch></label></p>
</fieldset>
<fieldset class="buttonPanel">
<legend>Using label for=</legend>
<p><d-radio-button name="radio2" id="rb2" checked="true"></d-radio-button><label for="rb2">Choice 1</label></p>
<p><d-radio-button name="radio2" id="rb3"></d-radio-button><label for="rb3">Choice 2</label></p>
<p><d-radio-button disabled="true" name="radio2" id="rb4"></d-radio-button><label for="rb4">Choice 3</label></p>
<p><d-checkbox id="cb3"></d-checkbox><label for="cb3">Option 1</label></p>
<p><d-checkbox id="cb4" disabled checked="true"></d-checkbox><label for="cb4">Option 2</label></p>
<p><d-switch id="sw3"></d-switch><label for="sw3">Option 3</label></p>
<p><d-switch id="sw4" checked="true" checkedLabel="ON" uncheckedLabel="OFF"></d-switch><label for="sw4">option 4</label></p>
</fieldset>
</div>
<fieldset>
<legend>Toggle Buttons</legend>
<button is="d-toggle-button" checkedLabel="On">Off</button>
<button is="d-toggle-button" checked="true">Toggle</button>
<button is="d-toggle-button" checkedLabel="On" checkedIconClass="d-icon-cut" iconClass="d-icon-copy">Off</button>
<button is="d-toggle-button" checked="true" checkedIconClass="d-icon-cut" iconClass="d-icon-copy"></button>
</fieldset>

</body>
</html>
47 changes: 20 additions & 27 deletions samples/ScrollableContainer.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -35,52 +35,47 @@
.container1 {
position: absolute;
top: 20px;
left: 20px;
width: 200px;
height: 300px;
left: 10px;
width: 145px;
height: 200px;
}
.container2 {
position: absolute;
top: 20px;
left: 240px;
width: 200px;
height: 300px;
left: 165px;
width: 145px;
height: 200px;
}
.scrollContainer {
white-space: nowrap;
width: 100%;
height: 100%;
padding: 0.5em 0.5em;
background-color: #428bca; /* bootstrap's brand-primary color */
}
.header {
background-color: #5bc0de; /* bootstrap's brand-info color */
}
ul {
padding: 0;
margin: 0;
}
li {
padding: 0 0.5em;
height: 2em;
list-style-type: none;
line-height: 2em;
-webkit-tap-highlight-color: rgba(255, 255, 255, 0);
border-bottom: 1px solid #222222;
cursor: pointer;
}
li:hover {
background-color: #61C6EB;
}
li:active {
background-color: #007fea;
}
</style>
</head>
<body>
<div class="container1">
<div style="background-color: lightblue">Scrolling in both directions</div>
<div class="header">H+V scroll</div>

<d-scrollable-container class="scrollContainer" id="scrollContainer1"
scrollDirection="both" style="background-color: lightgreen;">

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Duis cursus odio eu nisl ultrices dictum.</p>
<!-- Scrolling in both directions (horizontal and vertical) -->
<d-scrollable-container class="scrollContainer"
id="scrollContainer1" scrollDirection="both">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Duis cursus odio eu nisl ultrices dictum.
<p>Sed tincidunt metus et magna placerat eget vehicula dolor faucibus.
Nunc nec augue ac mi rutrum congue. Donec at augue felis.</p>
<p>Proin et lectus at mauris adipiscing pulvinar tempor vitae lacus.
Expand All @@ -95,20 +90,18 @@
<p>Pellentesque nec arcu nulla, id laoreet orci. Vivamus sit amet quam eu ante
pulvinar rhoncus sit amet non ipsum.</p>
<p>Sed mattis felis sed risus tincidunt in sagittis justo rhoncus. Praesent ut
justo feugiat neque gravida convallis eget mattis felis.
justo feugiat neque gravida convallis eget mattis felis.</p>
<p>Vestibulum vitae velit ante, sed convallis sem.
Curabitur gravida volutpat odio eget tincidunt. Mauris pellentesque placerat
massa ut venenatis. Mauris ultrices hendrerit dui vel fermentum.</p>
</ul>
</d-scrollable-container>
</div>

<div class="container2">
<div style="background-color: lightblue">Vertical scrolling</div>
<div class="header">V scroll</div>

<!-- Using default scrollDirection, which is "vertical" -->
<d-scrollable-container style="background-color: lightgreen"
class="scrollContainer" id="scrollContainer2">
<d-scrollable-container class="scrollContainer" id="scrollContainer2">
<ul>
<li>Abigail</li>
<li>Abram</li>
Expand Down
8 changes: 4 additions & 4 deletions samples/Toaster.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@
"requirejs-domready/domReady!"
], function (ToasterMessage, Toaster) {
window.toaster = new Toaster({placementClass: "d-toaster-placement-tr"});
toaster.placeAt("body")
toaster.placeAt("body");
toaster.startup();
var timeout = 0;
var messages = [
Expand All @@ -31,9 +31,9 @@
];
messages.forEach(function(m){
setTimeout(function(){
toaster.postMessage(m)
}, timeout)
timeout += (Math.floor(Math.random()*3) + 1)*1000
toaster.postMessage(m);
}, timeout);
timeout += (Math.floor(Math.random()*3) + 1)*1000;
});
window.input = document.getElementById("input");
});
Expand Down
17 changes: 14 additions & 3 deletions samples/ViewStack.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,9 +30,15 @@
"requirejs-domready/domReady!"
], function(register){
register.parse();
vs.on("delite-display-complete", function(event){
console.log("Displayed node: " + event.child.id);
});
var handle = function(event){
console.log(event.type + ": " + event.dest);
};
// Listen for delite/DisplayContainer events
vs.on("delite-display-load", handle);
vs.on("delite-before-show", handle);
vs.on("delite-after-show", handle);
vs.on("delite-before-hide", handle);
vs.on("delite-after-hide", handle);

createChild = function (){
var newChild = document.createElement("div");
Expand Down Expand Up @@ -128,6 +134,11 @@ <h1>DDD</h1>
<button is="d-button" onclick="vs.show('bbb',{transition:'coverv', reverse:rev.checked})">CoverV BBB</button>
<button is="d-button" onclick="vs.show('ccc',{transition:'coverv', reverse:rev.checked})">CoverV CCC</button>
<button is="d-button" onclick="vs.show('ddd',{transition:'coverv', reverse:rev.checked})">CoverV DDD</button>
<br>
<button is="d-button" onclick="vs.show('aaa',{transition:'none'})">AAA</button>
<button is="d-button" onclick="vs.show('bbb',{transition:'none'})">BBB</button>
<button is="d-button" onclick="vs.show('ccc',{transition:'none'})">CCC</button>
<button is="d-button" onclick="vs.show('ddd',{transition:'none'})">DDD</button>


<div style="display: none">
Expand Down
2 changes: 1 addition & 1 deletion themes/layer_bootstrap.css
View file

Large diffs are not rendered by default.

0 comments on commit 64e521d

Please sign in to comment.