mirror of
https://github.com/Polymer/polymer.git
synced 2025-02-25 18:55:30 -06:00
add ajax and togglebutton components
This commit is contained in:
frankiefu
71
src/css/g-togglebutton.css
Normal file
71
src/css/g-togglebutton.css
Normal file
@@ -0,0 +1,71 @@
|
||||
/*
|
||||
* Copyright 2012 The Toolkitchen Authors. All rights reserved.
|
||||
* Use of this source code is governed by a BSD-style
|
||||
* license that can be found in the LICENSE file.
|
||||
*/
|
||||
.toggle {
|
||||
position: relative;
|
||||
height: 27px;
|
||||
line-height: 27px;
|
||||
width: 94px;
|
||||
overflow: hidden;
|
||||
border: 1px solid #CCC;
|
||||
border-radius: 2px;
|
||||
font-size: 13px;
|
||||
font-weight: bold;
|
||||
color: #666;
|
||||
background-image: -webkit-linear-gradient(top, #EEEEEE, #e0e0e0);
|
||||
box-shadow: inset 0px 1px 2px 0 rgba(0,0,0,0.1);
|
||||
}
|
||||
|
||||
.toggle span {
|
||||
display: inline-block;
|
||||
width: 45px;
|
||||
text-align: center;
|
||||
border-radius: 2px 2px 0 0;
|
||||
}
|
||||
|
||||
.toggle span.on {
|
||||
width: 47px;
|
||||
margin-right: -2px;
|
||||
color: #FFF;
|
||||
background-image: -webkit-linear-gradient(top, #3b93ff, #3689EE);
|
||||
box-shadow: inset 0px 1px 2px 0 rgba(0,0,0,0.1);
|
||||
border-radius: 2px 0 0 2px;
|
||||
}
|
||||
|
||||
.toggle .thumb {
|
||||
position: absolute;
|
||||
display: block;
|
||||
top: -1px;
|
||||
left: -1px;
|
||||
height: 27px;
|
||||
width: 47px;
|
||||
border: 1px solid #CCC;
|
||||
border-radius: 2px;
|
||||
box-shadow: 0px 1px 2px 0 rgba(0,0,0,0.1);
|
||||
background-image: -webkit-linear-gradient(top, #f8f8f8, #f1f1f1);
|
||||
-webkit-transition: all 0.130s ease-out;
|
||||
}
|
||||
|
||||
.thumb.dragging {
|
||||
-webkit-transition: all 0;
|
||||
}
|
||||
|
||||
.toggle.on .thumb {
|
||||
left: 46px;
|
||||
}
|
||||
|
||||
.toggle .thumb::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
display: block;
|
||||
top: 9px;
|
||||
left: 15px;
|
||||
height: 9px;
|
||||
width: 17px;
|
||||
background-image: -webkit-linear-gradient(left, #ccc 50%, transparent 50%), -webkit-linear-gradient(left, #ccc 50%, transparent 50%), -webkit-linear-gradient(left, #ccc 50%, transparent 50%), -webkit-linear-gradient(left, #ccc 50%, transparent 50%), -webkit-linear-gradient(left, #ccc 50%, transparent 50%);
|
||||
background-size: 2px;
|
||||
background-position: 0 0, 0 2px, 0 4px, 0 6px, 0 8px;
|
||||
background-repeat: repeat-x;
|
||||
}
|
||||
129
src/g-ajax.html
Normal file
129
src/g-ajax.html
Normal file
@@ -0,0 +1,129 @@
|
||||
<!--
|
||||
/*
|
||||
* Copyright 2012 The Toolkitchen Authors. All rights reserved.
|
||||
* Use of this source code is governed by a BSD-style
|
||||
* license that can be found in the LICENSE file.
|
||||
*/
|
||||
-->
|
||||
<element name="g-ajax" attributes="url, handleAs, params">
|
||||
<link rel="components" href="g-component.html">
|
||||
<template>
|
||||
<content></content>
|
||||
</template>
|
||||
<script>
|
||||
var xhr = {
|
||||
request: function(inOptions) {
|
||||
var transport = this.getTransport();
|
||||
var url = inOptions.url;
|
||||
var method = inOptions.method || 'GET';
|
||||
var async = !inOptions.sync;
|
||||
var params = this.toQueryString(inOptions.params);
|
||||
if (params && method == 'GET') {
|
||||
url += (url.indexOf('?') > 0 ? '&' : '?') + params;
|
||||
}
|
||||
transport.open(method, url, async);
|
||||
this.makeReadyStateHandler(transport, inOptions.callback);
|
||||
this.setRequestHeaders(inOptions.headers);
|
||||
transport.send(method == 'POST' ? (inOptions.body || params) : null);
|
||||
if (!async) {
|
||||
transport.onreadystatechange(transport);
|
||||
}
|
||||
return transport;
|
||||
},
|
||||
getTransport: function() {
|
||||
try {
|
||||
return new XMLHttpRequest();
|
||||
} catch (e) {}
|
||||
try {
|
||||
return new ActiveXObject('Msxml2.XMLHTTP');
|
||||
} catch (e) {}
|
||||
try {
|
||||
return new ActiveXObject('Microsoft.XMLHTTP');
|
||||
} catch (e) {}
|
||||
return false;
|
||||
},
|
||||
makeReadyStateHandler: function(inXhr, inCallback) {
|
||||
inXhr.onreadystatechange = function() {
|
||||
if (inXhr.readyState == 4) {
|
||||
inCallback && inCallback.apply(null, [inXhr.responseText, inXhr]);
|
||||
}
|
||||
};
|
||||
},
|
||||
setRequestHeaders: function(inXhr, inHeaders) {
|
||||
if (inHeaders) {
|
||||
for (var name in inHeaders) {
|
||||
xhr.setRequestHeader(name, inHeaders[name]);
|
||||
}
|
||||
}
|
||||
},
|
||||
toQueryString: function(inParams) {
|
||||
var r = [];
|
||||
for (var n in inParams) {
|
||||
var v = inParams[n];
|
||||
n = encodeURIComponent(n);
|
||||
r.push(v === undefined || v === null ? n : (n + '=' + encodeURIComponent(v)));
|
||||
}
|
||||
return r.join('&');
|
||||
}
|
||||
};
|
||||
this.component({
|
||||
created: function(inSuper) {
|
||||
this.context = this.context || window;
|
||||
if (this.getAttribute('autogo')) {
|
||||
this.go();
|
||||
}
|
||||
},
|
||||
prototype: {
|
||||
go: function() {
|
||||
var params = JSON.parse(this.params);
|
||||
return xhr.request({url: this.url, callback: this.receive.bind(this), params: params});
|
||||
},
|
||||
receive: function(inResponse, inXhr) {
|
||||
if (this.isSuccess(inXhr)) {
|
||||
this.response(inXhr);
|
||||
} else {
|
||||
this.error(inXhr);
|
||||
}
|
||||
this.complete(inXhr);
|
||||
},
|
||||
isSuccess: function(inXhr) {
|
||||
var status = inXhr.status || 0;
|
||||
return !status || (status >= 200 && status < 300);
|
||||
},
|
||||
fire: function(inMethod, inArgs) {
|
||||
var fn = this.context[this.getAttribute(inMethod)];
|
||||
fn && fn.apply(this.context, inArgs);
|
||||
},
|
||||
response: function(inXhr) {
|
||||
var response = this.evalResponse(inXhr);
|
||||
this.fire('onresponse', [response, inXhr]);
|
||||
this.model = this.model || {};
|
||||
this.model.response = response;
|
||||
},
|
||||
error: function(inXhr) {
|
||||
this.fire('onerror', [inXhr.status + ': ' + inXhr.responseText, inXhr]);
|
||||
},
|
||||
complete: function(inXhr) {
|
||||
this.fire('oncomplete', [inXhr]);
|
||||
},
|
||||
evalResponse: function(inXhr) {
|
||||
return this[(this.handleAs || 'text') + 'Handler'](inXhr);
|
||||
},
|
||||
xmlHandler: function(inXhr) {
|
||||
return inXhr.responseXML;
|
||||
},
|
||||
textHandler: function(inXhr) {
|
||||
return inXhr.responseText;
|
||||
},
|
||||
jsonHandler: function(inXhr) {
|
||||
var r = this.textHandler(inXhr);
|
||||
try {
|
||||
return JSON.parse(r);
|
||||
} catch (x) {
|
||||
return r;
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
</script>
|
||||
</element>
|
||||
38
src/g-togglebutton.html
Normal file
38
src/g-togglebutton.html
Normal file
@@ -0,0 +1,38 @@
|
||||
<!--
|
||||
/*
|
||||
* Copyright 2012 The Toolkitchen Authors. All rights reserved.
|
||||
* Use of this source code is governed by a BSD-style
|
||||
* license that can be found in the LICENSE file.
|
||||
*/
|
||||
-->
|
||||
<element name="g-togglebutton" attributes="value">
|
||||
<link rel="components" href="g-component.html">
|
||||
<link rel="stylesheet" href="css/g-togglebutton.css" />
|
||||
<template>
|
||||
<div id="toggle" class="toggle" onclick="x('clickHandler')">
|
||||
<span class="on">ON</span>
|
||||
<span class="off">OFF</span>
|
||||
<span class="thumb"></span>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
this.component({
|
||||
created: function() {
|
||||
this.valueAttributeChanged();
|
||||
},
|
||||
prototype: {
|
||||
valueAttributeChanged: function() {
|
||||
this.$.toggle.classList[this.trueValue() ? 'add' : 'remove']('on');
|
||||
},
|
||||
clickHandler: function() {
|
||||
this.value = !this.trueValue();
|
||||
},
|
||||
// note: should base component auto-convert string value to boolean?
|
||||
trueValue: function() {
|
||||
return this.value != 'false' && Boolean(this.value);
|
||||
}
|
||||
// TODO(ffu): need to add dragging support
|
||||
}
|
||||
});
|
||||
</script>
|
||||
</element>
|
||||
23
workbench/ajax.html
Normal file
23
workbench/ajax.html
Normal file
@@ -0,0 +1,23 @@
|
||||
<!--
|
||||
Copyright 2012 The Toolkitchen Authors. All rights reserved.
|
||||
Use of this source code is governed by a BSD-style
|
||||
license that can be found in the LICENSE file.
|
||||
-->
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Ajax</title>
|
||||
<script src="../../polyfills/Components/components-polyfill.js" shimShadow></script>
|
||||
<link rel="components" href="../../toolkit/src/g-ajax.html">
|
||||
</head>
|
||||
<body>
|
||||
<g-ajax autogo="true" url="http://gdata.youtube.com/feeds/api/videos/"
|
||||
handleAs="json" params='{"alt":"json", "q":"chrome"}'>
|
||||
<div>
|
||||
<template iterate="response.feed.entry">
|
||||
<div>{{title.$t}}</div>
|
||||
</template>
|
||||
</div>
|
||||
</g-ajax>
|
||||
</body>
|
||||
</html>
|
||||
18
workbench/togglebutton.html
Normal file
18
workbench/togglebutton.html
Normal file
@@ -0,0 +1,18 @@
|
||||
<!--
|
||||
Copyright 2012 The Toolkitchen Authors. All rights reserved.
|
||||
Use of this source code is governed by a BSD-style
|
||||
license that can be found in the LICENSE file.
|
||||
-->
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Toggle Button</title>
|
||||
<script src="../../polyfills/Components/components-polyfill.js" shimShadow></script>
|
||||
<link rel="components" href="../../toolkit/src/g-togglebutton.html">
|
||||
</head>
|
||||
<body>
|
||||
<g-togglebutton value="true"></g-togglebutton>
|
||||
<br>
|
||||
<g-togglebutton value="false"></g-togglebutton>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user