<!DOCTYPE html>
<html lang="en">
<head>
<script src="http://www.polymer-project.org/1.0/samples/components/webcomponentsjs/webcomponents-lite.min.js"></script>
<link rel="import" href="a-decoration.html">
</head>
<body>
<a-decoration></a-decoration>
<span>Powered by <a href="https://www.polymer-project.org/" target="_blank">Polymer 1.0</a></span>
</body>
</html>
<link rel="import"
href="http://www.polymer-project.org/1.0/samples/components/polymer/polymer.html">
<link rel="import" href="a-option.html">
<dom-module id="a-decoration">
<style>
div#preview a {
padding: 5px;
text-decoration: none;
transition-duration: 0.5s;
}
div#preview {
margin: 10px;
}
div#preview a:hover {
border-radius: 5px;
text-decoration: none;
}
a-option {
width: 300px;
}
ul {
counter-reset: counter;
}
ul li::before {
counter-increment: counter;
content: counter(counter) " ";
}
ul li {
list-style: none;
width: 200px;
}
.topic {
display: block;
color: #0000ff;
font-weight: bold;
margin-top: 20px;
}
textarea#code {
width: 100%;
height: 200px;
}
</style>
<template>
<span class="topic">การตั้งค่า</span>
<span>กดที่กล่องเพื่อเลือกสี</span><br/><br/>
<div id="normalOptions">
<a-option
id="normalTextColorOption"
description="สีข้อความปกติ"
code-name="color"
value="{{normalTextColor}}"
type="color"
on-enble-state-changed="enableStateHandler"
is-enable></a-option>
<a-option
id="normalBackgroundColorOption"
description="สีพื้นหลังปกติ"
code-name="background-color"
value="{{normalBackgroundColor}}"
old-value="#000"
type="color"
on-enble-state-changed="enableStateHandler"></a-option>
<!--<a-option
id="normalPadding"
description="ช่องว่างภายใน"
code-name="padding"
value="{{normalPadding}}"
type="text"
on-enble-state-changed="enableStateHandler"></a-option>-->
</div>
<div id="hoverOptions">
<a-option
id="hoverTextColorOption"
description="สีข้อความเมื่อเอาเมาส์ชี้"
code-name="color"
value="{{hoverTextColor}}"
type="color"
on-enble-state-changed="enableStateHandler"
is-enable></a-option>
<a-option
id="hoverBackgroundColorOption"
description="สีพื้นหลังเมื่อเอาเมาส์ชี้"
code-name="background-color"
value="{{hoverBackgroundColor}}"
type="color"
on-enble-state-changed="enableStateHandler"
is-enable></a-option>
</div>
<br/>
<span>คลิกที่ชื่อเพื่อเปลี่ยนสีพื้นหลังตอนเอาเมาส์ชี้เป็นชื่อนั้น</span>
<ul id="preconfig">
<li data-hover-text-color="#aa00ff" data-hover-bg-color="#cccccc">ค่าสีพื้นหลังเริ่มต้น</li>
</ul>
<span class="topic">ตัวอย่าง</span>
<div id="preview">
<a href="http://www.dek-d.com/" target="_blank">Dek-D.com</a>
</div>
<span class="topic">หลังจากปรับแต่งเรียบร้อย โค้ดจะปรากฏตรงนี้</span>
<textarea id="code">
</textarea>
</template>
<script>
Polymer({
is: "a-decoration",
ready: function () {
var that = this;
Polymer.dom(this.$.preview).querySelector("a").addEventListener("mouseenter", function (e) {
if(that.$.hoverTextColorOption.isEnable) {
e.currentTarget.style.color = that.hoverTextColor;
}
if(that.$.hoverBackgroundColorOption.isEnable) {
e.currentTarget.style.backgroundColor = that.hoverBackgroundColor;
}
});
Polymer.dom(this.$.preview).querySelector("a").addEventListener("mouseleave", function (e) {
e.currentTarget.style.color = that.normalTextColor;
e.currentTarget.style.backgroundColor = that.normalBackgroundColor;
});
var list = Polymer.dom(this.$.preconfig).querySelectorAll("li");
for(var i = 0; i < list.length; i++) {
list[i].addEventListener("click", function (e) {
var c = e.currentTarget.getAttribute("data-hover-text-color");
var bg = e.currentTarget.getAttribute("data-hover-bg-color");
that.hoverTextColor = c;
that.hoverBgColor = bg;
that._updateCustomCode();
});
}
this._updateCustomCode();
},
properties: {
normalTextColor: {
type: String,
value: "#0000ff",
notify: true,
observer: "_normalTextChanged"
},
normalBackgroundColor: {
type: String,
value: "",
notify: true,
observer: "_normalBackgroundChanged"
},
hoverTextColor: {
type: String,
value: "#ff00c1",
notify: true,
observer: "_hoverTextColorChanged"
},
hoverBackgroundColor: {
type: String,
value: "#f5b6ff",
notify: true,
observer: "_hoverBackgroundColorChanged"
}
},
_normalTextChanged: function (newValue, oldValue) {
this.$.preview.querySelector("a").style.color = newValue;
this._updateCustomCode();
},
_normalBackgroundChanged: function (newValue, oldValue) {
this.$.preview.querySelector("a").style.backgroundColor = newValue;
this._updateCustomCode();
},
_hoverTextColorChanged: function (newValue, oldValue) {
this._updateCustomCode();
},
_hoverBackgroundColorChanged: function (newValue, oldValue) {
this._updateCustomCode();
},
enableStateHandler: function (e) {
this.$.preview.querySelector("a").style.color = this.normalTextColor;
this.$.preview.querySelector("a").style.backgroundColor = this.normalBackgroundColor;
this._updateCustomCode();
},
_updateCustomCode: function () {
var code = "<style> ";
code += "a { ";
var options = Polymer.dom(this.$.normalOptions).children;
for(var i = 0; i < options.length; i++) {
code += options[i].getCode() + " ";
}
code += "padding: 5px; transition-duration: 0.5s; text-decoration: none; } ";
code += "a:hover { ";
var options = Polymer.dom(this.$.hoverOptions).children;
for(var i = 0; i < options.length; i++) {
code += options[i].getCode() + " ";
}
code += " border-radius: 5px; text-decoration: none; } ";
code += "</style>";
this.$.code.textContent = code;
}
});
</script>
</dom-module>
<link rel="import"
href="http://www.polymer-project.org/1.0/samples/components/polymer/polymer.html">
<dom-module id="a-option">
<style>
:host {
display: block;
margin: 10px;
}
:host ::content input:not(#enableCheckbox) {
float: right;
}
div {
display: inline;
}
</style>
<template>
<input id="enableCheckbox" type="checkbox" checked={{isEnable::change}}>
<span>{{description}}</span>
<input id="inputField" type="[[type]]" value="{{value::input}}">
</template>
<script>
Polymer({
is: "a-option",
properties: {
isEnable: {
type: Boolean,
value: false,
notify: true,
observer: "_isEnableChanged"
},
isCheckboxChecked: {
type: Boolean,
value: true,
notify: true,
},
codeName: {
type: String,
value: ""
},
description: {
type: String,
value: ""
},
value: {
type: String,
value: "",
notify: true,
reflectToAttribute: true,
},
type: {
type: String,
value: "text"
},
oldValue: {
type: String,
value: ""
}
},
_isEnableChanged: function (newValue, oldValue) {
if(newValue) {
this.$.inputField.style.visibility = "visible";
this.value = this.oldValue;
} else {
this.$.inputField.style.visibility = "hidden";
this.oldValue = this.value;
this.value = "";
}
this.fire("enble-state-changed");
},
getCode: function () {
var code = "";
if(this.isEnable) {
code = this.codeName + ": " + this.value + ";";
}
return code;
}
});
</script>
</dom-module>