├── .gitignore
├── 128.png
├── 24.png
├── 32.png
├── 48.png
├── cc-on.png
├── cc-off.png
├── font
    ├── fontawesome-webfont.ttf
    └── fontawesome-webfont.woff
├── manifest.json
├── code-cola-widget
    └── src
    │   ├── degree
    │       ├── codecola-degree.css
    │       └── codecola-degree.js
    │   ├── gradient
    │       ├── codecola-gradient.css
    │       └── codecola-gradient.js
    │   └── color
    │       ├── codecola-color.css
    │       └── codecola-color.js
├── codecola.php
├── README.md
├── native
    ├── config.js
    ├── zh-CN.js
    └── en.js
├── background.js
├── options.html
├── _locales
    ├── zh_CN
    │   └── messages.json
    └── en
    │   └── messages.json
├── codecola.css
└── codecola.js


/.gitignore:
--------------------------------------------------------------------------------
1 | .idea/
2 | test/
3 | assets/
4 | *.less


--------------------------------------------------------------------------------
/128.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/zhouqicf/code-cola/HEAD/128.png


--------------------------------------------------------------------------------
/24.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/zhouqicf/code-cola/HEAD/24.png


--------------------------------------------------------------------------------
/32.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/zhouqicf/code-cola/HEAD/32.png


--------------------------------------------------------------------------------
/48.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/zhouqicf/code-cola/HEAD/48.png


--------------------------------------------------------------------------------
/cc-on.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/zhouqicf/code-cola/HEAD/cc-on.png


--------------------------------------------------------------------------------
/cc-off.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/zhouqicf/code-cola/HEAD/cc-off.png


--------------------------------------------------------------------------------
/font/fontawesome-webfont.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/zhouqicf/code-cola/HEAD/font/fontawesome-webfont.ttf


--------------------------------------------------------------------------------
/font/fontawesome-webfont.woff:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/zhouqicf/code-cola/HEAD/font/fontawesome-webfont.woff


--------------------------------------------------------------------------------
/manifest.json:
--------------------------------------------------------------------------------
 1 | {
 2 |     "manifest_version": 2,
 3 | 	"name": "__MSG_name__",
 4 | 	"version": "3.5.0",
 5 | 	"default_locale": "en",
 6 | 	"description" : "__MSG_description__",
 7 | 	"icons": {
 8 | 		"128": "128.png",
 9 | 		"24": "24.png",
10 | 		"32": "32.png",
11 | 		"48": "48.png"
12 | 	},
13 |     "background": {
14 |         "scripts": ["background.js"]
15 |     },
16 | 	"options_page": "options.html",
17 | 	"browser_action": {
18 | 		"default_icon":"cc-off.png",
19 | 		"default_title":"Code Cola(off)"
20 | 	},
21 | 	"permissions": ["tabs", "*://*/*"],
22 |     "web_accessible_resources": [
23 |         "font/fontawesome-webfont.ttf",
24 |         "font/fontawesome-webfont.woff",
25 |         "128.png"
26 |     ]
27 | }
28 | 


--------------------------------------------------------------------------------
/code-cola-widget/src/degree/codecola-degree.css:
--------------------------------------------------------------------------------
 1 | .codecola-degree-wrap{
 2 |     font-size:12px;
 3 |     color:#000;
 4 | }
 5 | .codecola-degree{
 6 |     width:36px;
 7 |     height:36px;
 8 |     border:2px solid #4E6087;
 9 |     -moz-border-radius:20px;
10 |     -webkit-border-radius:20px;
11 |     border-radius:20px;
12 |     position:relative;
13 |     -moz-user-select:none;
14 |     -webkit-user-select:none;
15 |     display:inline-block;
16 |     vertical-align:middle;
17 |     background-color:#fff;
18 |     margin-right:5px;
19 | }
20 | .codecola-degree-line{
21 |     -moz-transform-origin:0 0;
22 |     -o-transform-origin:0 0;
23 |     -webkit-transform-origin:0 0;
24 |     transform:rotate(0deg);
25 |     transform-origin:0 0;
26 |     background-color:#000000;
27 |     height:1px;
28 |     left:50%;
29 |     position:absolute;
30 |     top:50%;
31 |     width:50%;
32 | }
33 | .codecola-degree-label{
34 |     margin-left:5px;
35 |     vertical-align:middle;
36 | }
37 | .codecola-degree-input{
38 |     width:45px;
39 | }
40 | .codecola-degree-dot{
41 |     position:absolute;
42 |     width:3px;
43 |     height:3px;
44 |     background-color:#000;
45 |     top:17px;
46 |     left:17px;
47 | }


--------------------------------------------------------------------------------
/codecola.php:
--------------------------------------------------------------------------------
 1 | <?php
 2 | /*
 3 |  *@Author: zhouqicf@gmail.com
 4 |  *@Site: http://www.zhouqicf.com
 5 |  */
 6 | //Cross domain: http://www.w3.org/TR/cors/#access-control-allow-origin-response-hea
 7 | //It's very dangerous, anyone can send any content to your server, make sure only someone you trust have access to visit this action page.
 8 | header("Access-Control-Allow-Headers: Content-type, x-requested-with");
 9 | header("Access-Control-Allow-Origin: *");
10 | header("Content-type: text/html; charset: utf-8");
11 | 
12 | 
13 | //Users can visit modified pages through this address.
14 | $path = "http://dev/save/";
15 | //set filename
16 | $fileName = time();
17 | 
18 | 
19 | //create resulte
20 | $fileName = $fileName.".html";
21 | $html = $_POST["html"];
22 | $encode = $_POST["charset"]?$_POST["charset"]:"UTF-8";
23 | if($encode != "UTF-8"){
24 | 		$html = iconv("UTF-8",$encode."//IGNORE",$html);
25 | }
26 | $url = $path.$fileName;
27 | $success = '{"code":"200","url":"'.$url.'","message":"success"}';
28 | $fail = '{"code":"900","message":"Server Error."}';
29 | $fp=file_put_contents($fileName,$html);
30 | if(!$fp){
31 | 	$message = $fail;
32 | }else{
33 | 	$message = $success;
34 | }
35 | 
36 | echo $message;
37 | ?>


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | Code Cola
 2 | =========
 3 | A visual tool to modify css style.
 4 | Download from Chrome Web Store: https://chrome.google.com/webstore/detail/lomkpheldlbkkfiifcbfifipaofnmnkn
 5 | 
 6 | License
 7 | -------
 8 | ###Copyright (c) 2013 http://zhouqicf.com###
 9 | author: zhouqicf@gmail.com
10 | 
11 | version: 3.5.0
12 | 
13 | license: Released under the MIT License.
14 | 
15 | Broswer support
16 | ---------------
17 | Chrome , Safari
18 | 
19 | Build codecola without chrome extension environment
20 | ---------------------------------------------------
21 | ###Step1:###
22 | open "native/config.js" modify `YUI_config`:
23 |     base :'http://cloud/'
24 | 
25 | ###Step2:###
26 | insert js to your web page
27 |     <script charset="utf-8" src="../codecola/yui3.js"></script>
28 |     <script charset="utf-8" src="../codecola/native/config.js"></script>
29 |     <script charset="utf-8" src="../codecola/codecola.js"></script>
30 | 
31 | Share Your Css Patterns
32 | -----------------------
33 | http://codecolapatterns.com/
34 | CodeCola Patterns is designed to collect and share css code. With Code Cola, you can share your css code easy, the only thing you have to do is click the share button.
35 | 
36 | Thanks
37 | ------
38 | ###YUI 3###
39 | http://developer.yahoo.com/yui/3
40 | 
41 | ###Font Awesome###
42 | http://fortawesome.github.io/Font-Awesome/


--------------------------------------------------------------------------------
/native/config.js:
--------------------------------------------------------------------------------
 1 | var YUI_config = {
 2 |     groups: {}
 3 | };
 4 | YUI_config.groups['codecola'] = {
 5 |     combine: false,
 6 |     base :'http://cloud/',
 7 |     modules:{
 8 |         'codecola-i18n': function(){
 9 |             var language = navigator.language.toLowerCase() == 'zh-cn'?'zh-CN':'en';
10 |             return {
11 |                 fullpath: '/codecola/native/'+language+'.js'
12 |             }
13 |         }(),
14 |         'codecola-color-css': {
15 |             fullpath: '/codecola/code-cola-widget/src/color/codecola-color.css',
16 |             type: 'css'
17 |         },
18 |         'codecola-color': {
19 |             fullpath: '/codecola/code-cola-widget/src/color/codecola-color.js',
20 |             requires: ['node', 'widget-base', 'codecola-color-css']
21 |         },
22 |         'codecola-degree-css': {
23 |             fullpath: '/codecola/code-cola-widget/src/degree/codecola-degree.css',
24 |             type: 'css'
25 |         },
26 |         'codecola-degree': {
27 |             fullpath: '/codecola/code-cola-widget/src/degree/codecola-degree.js',
28 |             requires: ['node', 'widget-base', 'codecola-degree-css']
29 |         },
30 |         'codecola-gradient-css': {
31 |             fullpath: '/codecola/code-cola-widget/src/gradient/codecola-gradient.css',
32 |             type: 'css'
33 |         },
34 |         'codecola-gradient': {
35 |             fullpath: '/codecola/code-cola-widget/src/gradient/codecola-gradient.js',
36 |             requires: ['codecola-color', 'node', 'widget-base', 'ua', 'codecola-gradient-css']
37 |         },
38 |         'codecola-css': {
39 |             fullpath: '/codecola/codecola.css',
40 |             type: 'css'
41 |         },
42 |         'codecola-plugs': {
43 |             fullpath: '/codecola/plugin.js'
44 |         },
45 |         'codecola': {
46 |             fullpath: '/codecola/codecola.js',
47 |             requires: ['codecola-i18n', 'codecola-plugs', 'codecola-color', 'codecola-gradient', 'codecola-degree', 'codecola-css', 'widget-base', 'node-base', 'event-base', 'io-base', 'dd-plugin', 'ua', 'json-parse']
48 |         }
49 |     }
50 | };


--------------------------------------------------------------------------------
/code-cola-widget/src/gradient/codecola-gradient.css:
--------------------------------------------------------------------------------
 1 | .codecola-gradient-wrap{
 2 |   font:12px/1.5 Arial,sans-serif;
 3 | }
 4 | .codecola-gradient-panel{
 5 | 	height:40px;
 6 | 	border:1px solid #000;
 7 | }
 8 | .codecola-gradient-panel-wrap{
 9 | 	background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAMAAAAoLQ9TAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAAlQTFRF1tbW19fX////Y8ywewAAADxJREFUeNp8jUEKACAIwGb/f7RJKmnhQA9jKMuRDTa3MJMCOdSiCRgL/OpbxMoy0v6+CLr4FgwFVagAAwDFWQFzWaf+pQAAAABJRU5ErkJggg==) repeat 0 0;	
10 | }
11 | .codecola-gradient-stops{
12 | 	height:20px;
13 | 	position:relative;
14 | 	margin-bottom:10px;
15 |   cursor:pointer;
16 | }
17 | .codecola-gradient-stop{
18 |   height:7px;
19 |   width:7px;
20 |   padding:1px;
21 |   border:1px solid #666;
22 |   top:6px;
23 |   position:absolute;
24 |   cursor:default;
25 | }
26 | .codecola-gradient-stop.codecola-gradient-stop-select{
27 |   border-color:#000;
28 | }
29 | .codecola-gradient-stop:before{
30 |   content:"\20";
31 |   width:0;
32 |   height:0;
33 |   border:5px solid rgba(0,0,0,0);
34 |   border-bottom-color:#666;
35 |   position:absolute;
36 |   top:-11px;
37 |   left:-1px;
38 | }
39 | .codecola-gradient-stop.codecola-gradient-stop-select:before{
40 |   border-bottom-color:#000;
41 | }
42 | .codecola-gradient-stop:after{
43 |   content:"\20";
44 |   width:7px;
45 |   height:7px;
46 |   border:1px solid #fff;
47 |   position:absolute;
48 |   top:0;
49 |   left:0;
50 | }
51 | .codecola-gradient-location{
52 | 	width:45px;
53 | }
54 | .codecola-gradient-label{
55 |   width:55px;
56 |   display:inline-block;
57 |   font-size:11px;
58 |   -webkit-text-size-adjust:none;
59 | }
60 | .codecola-gradient-wrap .codecola-gradient-color{
61 |   padding-left:58px;
62 |   margin-top:-18px;
63 | }
64 | .codecola-gradient-wrap .codecola-gradient-orientation{
65 |     display:inline-block;
66 | }
67 | .codecola-gradient-stop-delete{
68 |   padding-left:55px;
69 | }
70 | .codecola-gradient-orientation-wrap{
71 |   padding-bottom:10px;
72 |   border-bottom:1px solid #999;
73 | }
74 | .codecola-gradient-stop-detail{
75 |   padding-top:10px;
76 | }
77 | .codecola-gradient-location-wrap{
78 | 	margin:5px 0;
79 | }


--------------------------------------------------------------------------------
/background.js:
--------------------------------------------------------------------------------
 1 | var TITLE_ON = 'Code Cola(on)',
 2 |     TITLE_OFF = 'Code Cola(off)';
 3 | 
 4 | var tabStatus = {};
 5 | 
 6 | var toggleTabStatus = function(id){
 7 |         if(!tabStatus[id]){
 8 |             initTabStatus(id);
 9 |         }
10 |         tabStatus[id].active = !tabStatus[id].active;
11 |         syncTabStatus(id);
12 |     },
13 |     syncTabStatus = function(id){
14 |         if(!tabStatus[id]){
15 |             initTabStatus(id);
16 |         }
17 |         if(!tabStatus[id].active){
18 |             chrome.browserAction.setTitle({"tabId": id, "title": TITLE_OFF});
19 |             chrome.browserAction.setIcon({"tabId": id, "path": "cc-off.png"});
20 |         }else{
21 |             chrome.browserAction.setTitle({"tabId": id, "title": TITLE_ON});
22 |             chrome.browserAction.setIcon({"tabId": id, "path": "cc-on.png"});
23 |         }
24 |     },
25 |     initTabStatus = function(id){
26 |         tabStatus[id] = {};
27 |     };
28 | 
29 | chrome.tabs.onUpdated.addListener(function(tabId, info, tab){
30 |     if (info.status === 'complete') {
31 |         initTabStatus(tabId);
32 |     }
33 | });
34 | 
35 | chrome.tabs.onActivated.addListener(function(tab){
36 |     syncTabStatus(tab.tabId);
37 | });
38 | 
39 | //chrome.tabs.onRemoved.addListener(function(tabId, removeInfo){
40 | //    toggleTabStatus(tabId);
41 | //});
42 | 
43 | chrome.browserAction.onClicked.addListener(function(tab) {
44 |     var id = tab.id;
45 |     if(tab.url.indexOf("https://chrome.google.com") == 0 || tab.url.indexOf("chrome://") == 0 || tab.url.indexOf("googleusercontent.com") == 0){
46 |         alert(chrome.i18n.getMessage("error_google"));
47 |         return;
48 |     }else if(tab.url.indexOf("file:///") == 0){
49 |         alert(chrome.i18n.getMessage("error_local"));
50 |         return;
51 |     }
52 | 
53 |     chrome.browserAction.getTitle({
54 |         tabId: id
55 |     }, function(title){
56 |         chrome.tabs.sendMessage(id, 'browserAction');
57 |         if(title === TITLE_OFF && !tabStatus[id].on){
58 |             chrome.tabs.insertCSS(id, {file: "codecola.css"});
59 |             chrome.tabs.insertCSS(id, {file: "code-cola-widget/src/color/codecola-color.css"});
60 |             chrome.tabs.insertCSS(id, {file: "code-cola-widget/src/degree/codecola-degree.css"});
61 |             chrome.tabs.insertCSS(id, {file: "code-cola-widget/src/gradient/codecola-gradient.css"});
62 |             chrome.tabs.executeScript(id, {file: "yui3.js"});
63 |             chrome.tabs.executeScript(id, {file: "plugin.js"});
64 |             chrome.tabs.executeScript(id, {file: "code-cola-widget/src/color/codecola-color.js"});
65 |             chrome.tabs.executeScript(id, {file: "code-cola-widget/src/degree/codecola-degree.js"});
66 |             chrome.tabs.executeScript(id, {file: "code-cola-widget/src/gradient/codecola-gradient.js"});
67 |             chrome.tabs.executeScript(id, {file: "codecola.js"});
68 |             tabStatus[id].on = true;
69 |         }
70 |         toggleTabStatus(id);
71 |     });
72 | });
73 | 
74 | chrome.extension.onRequest.addListener(function(request, sender, sendResponse){
75 |     if(request == "getUrls"){
76 |         sendResponse({
77 |             "action": localStorage["codecola_save_action"]?localStorage["codecola_save_action"]:""
78 |         });
79 |     }
80 | });


--------------------------------------------------------------------------------
/options.html:
--------------------------------------------------------------------------------
  1 | <!doctype html>
  2 | <html>
  3 | <head>
  4 | <meta charset="utf-8">
  5 | <meta http-equiv="X-UA-Compatible" content="IE=Edge">
  6 | <title>Code Cola Options</title>
  7 | <style>
  8 | html,body,h1,pre,h2{
  9 |   padding:0;
 10 |   margin:0;
 11 | }
 12 | p{
 13 |   margin:2px 0 4px;
 14 |   line-height:1.231;
 15 | }
 16 | body{
 17 |   font:12px/1 Arial, Helvetica, sans-serif;
 18 | }
 19 | h2{
 20 |   font:bold 14px/1 Georgia, "Times New Roman", Times, serif;
 21 |   margin-bottom:10px;
 22 | }
 23 | code{
 24 |   font-family:"Courier New", "Andale Mono", monospace;
 25 | }
 26 | a,
 27 | a:visited{
 28 |   color:#000;
 29 | }
 30 | a:hover{
 31 |   color:#f60;
 32 | }
 33 | pre{
 34 |   word-wrap:break-word;
 35 | }
 36 | header h1{
 37 |   font-family:Georgia, "Times New Roman", Times, serif;
 38 |   font-size:150px;
 39 |   color:#ddd;
 40 |   font-weight:normal;
 41 |   font-style:italic;
 42 |   text-align:center;
 43 | }
 44 | input,label{
 45 |   font:28px/1 Georgia, "Times New Roman", Times, serif;
 46 |   padding:2px 8px 0 6px;
 47 |   vertical-align:middle;
 48 | }
 49 | input[type="url"]{
 50 |   font-family:Arial, Helvetica, sans-serif;
 51 |   border-color:#ccc #aaa #aaa #ccc;
 52 |   border-style:solid;
 53 |   border-width:1px;
 54 |   width:550px;
 55 |   font-size:14px;
 56 |   padding:9px 5px;
 57 |   -webkit-box-shadow:1px 1px 0 #ddd;
 58 | }
 59 | .version{
 60 |   font-size:50px;
 61 | }
 62 | section,
 63 | footer{
 64 |   border-top:4px double #eee;
 65 |   width:800px;
 66 |   margin:0 auto;
 67 |   padding:20px 0 0;
 68 | }
 69 | footer{
 70 |   padding-top:10px;
 71 |   overflow:hidden;
 72 | }
 73 | #codecola-doc::before{
 74 |   content:url("cc-on.png");
 75 |   width:22px;
 76 |   height:22px;
 77 |   margin-right:5px;
 78 |   vertical-align:middle;
 79 | }
 80 | #codecola-author{
 81 |   font-size: 10px;
 82 |   -webkit-text-size-adjust: none;
 83 | }
 84 | .success{
 85 |   color:green;
 86 | }
 87 | .fail{
 88 |   color:red;
 89 | }
 90 | #option{
 91 |   padding:10px 10px 0;
 92 |   margin:10px 0;
 93 |   background-color:#f0f0f0;
 94 |   border:1px solid #ddd;
 95 | }
 96 | .note{
 97 |   color:#f90;
 98 | }
 99 | .string{
100 |   color:#c00;
101 | }
102 | .keyword{
103 |   color:#00f;
104 | }
105 | .item{
106 |   padding-bottom:25px;
107 | }
108 | </style>
109 | </head>
110 | <body>
111 | <header>
112 |   <h1>Code Cola<sup class="version">V3.5.0</sup></h1>
113 | </header>
114 | <section id="main">
115 | 	<aside>
116 |   	<p>This is a config for the <strong><q>Get Link</q> function</strong>, when user click the <q>Get Link</q> button, codecola will send the whole modified page to <strong>server action page</strong>, then the action will save the page to a folder of server which you set in the server action page.</p>
117 |   	<p><strong>It's very dangerous, anyone can send any content to your server, make sure only someone you trust have access to visit the action page</strong>.</p>
118 |   </aside>
119 | 	<div id="option">
120 |   	<div class="item">
121 |         <h2>1. Upload "codecola.php" to Server</h2>
122 |         <p>Here is the <strong><a href="codecola.php">codecola.php</a></strong>, download it, then upload it to a folder of <strong>PHP server</strong>.</p>
123 |     </div>
124 |     <div class="item">
125 |         <h2>2. Config</h2>
126 |         <pre><code><span class="note">//Users can visit modified pages through this address. And pages will save in this folder, so make sure the directory has access to write.</span>
127 | $path = <span class="string">"http://kxt.koubei.com/codecola/"</span>;
128 | <span class="note">//Set filename. Filename use timestamp by default.</span>
129 | $fileName = <span class="keyword">time</span>();</code></pre>
130 |     </div>
131 |     <div class="item">
132 |         <h2>3. Set Action Url</h2>
133 |         <form id="form">
134 |           <input type="url" id="action" required autofocus placeholder="For example: http://kxt.koubei.com/codecola/action.php" pattern="^([^:]+):\/\/(?:([^:@]+):?([^@]*)@)?(?:([^/?#:]+):?(\d*))([^?#]*)(?:\?([^#]+))?(?:#(.+))?$">
135 |           <input type="submit" value="save">
136 |           <span id="info"></span>
137 |         </form>
138 |     </div>
139 |   </div>
140 | </section>
141 | <footer>
142 |     <p id="codecola-doc">Code Cola <a href="http://www.zhouqicf.com/code-cola" target="_blank">Documentation</a>, <a href="https://chrome.google.com/extensions/detail/lomkpheldlbkkfiifcbfifipaofnmnkn" target="_blank">Chrome extension</a>, <a href="https://github.com/zhouqicf/code-cola" target="_blank">Source</a></p>
143 |     <p id="codecola-author">© 2010-2013 - created by <a href="http://www.zhouqicf.com/about" target="_blank">Zhou Qi</a></p>
144 | </footer>
145 | <script>
146 | var info = document.getElementById("info");
147 | document.getElementById("form").addEventListener("submit",
148 | function(e) {
149 |   e.preventDefault();
150 |   var action = document.getElementById("action").value;
151 |   if (/^([^:]+):\/\/(?:([^:@]+):?([^@]*)@)?(?:([^/?#:]+):?(\d*))([^?#]*)(?:\?([^#]+))?(?:#(.+))?$/.test(action)) {
152 |     localStorage["codecola_save_action"] = action;
153 |     info.innerHTML = "Options Saved.";
154 |     info.className = "success";
155 |   } else {
156 |     info.innerHTML = "invalid url.";
157 |     info.className = "fail";
158 |   }
159 | },
160 | false);</script>
161 | </body>
162 | </html>


--------------------------------------------------------------------------------
/_locales/zh_CN/messages.json:
--------------------------------------------------------------------------------
  1 | {
  2 |     "name":{
  3 |         "message":"Code Cola"
  4 |     },
  5 |     "description":{
  6 |         "message":"Code Cola是一个可视化编辑在线页面css样式的chrome插件。"
  7 |     },
  8 |     "error_google":{
  9 |         "message":"由于安全限制，Code Cola无法在一些google的页面上运行。"
 10 |     },
 11 |     "error_local":{
 12 |         "message":"由于安全限制，Code Cola无法在本地页面上运行，请将当前页面上传至服务器，或移至本地服务器目录下。"
 13 |     },
 14 |     "error_connect_server":{
 15 |         "message":"链接到服务器失败"
 16 |     },
 17 |     "error_server_fail":{
 18 |         "message":"服务器处理失败"
 19 |     },
 20 |     "error_find_none":{
 21 |         "message":"CodeCola没有找到任何匹配的元素"
 22 |     },
 23 |     "opt_fold":{
 24 |         "message":"收缩"
 25 |     },
 26 |     "opt_unfold":{
 27 |         "message":"展开"
 28 |     },
 29 |     "opt_about":{
 30 |         "message":"关于Code Cola"
 31 |     },
 32 |     "opt_cNode":{
 33 |         "message":"当前节点"
 34 |     },
 35 |     "opt_unfoldAll":{
 36 |         "message":"展开所有"
 37 |     },
 38 |     "opt_foldAll":{
 39 |         "message":"关闭所有"
 40 |     },
 41 |     "opt_showStyle":{
 42 |         "message":"查看样式"
 43 |     },
 44 |     "opt_hideStyle":{
 45 |         "message":"隐藏样式"
 46 |     },
 47 |     "opt_html":{
 48 |         "message":"获取修改结果"
 49 |     },
 50 |     "opt_link":{
 51 |         "message":"获取修改结果链接"
 52 |     },
 53 |     "opt_turnOff":{
 54 |         "message":"关闭功能"
 55 |     },
 56 |     "opt_turnOn":{
 57 |         "message":"开启功能"
 58 |     },
 59 |     "opt_close":{
 60 |         "message":"关闭"
 61 |     },
 62 |     "opt_hide":{
 63 |         "message":"隐藏效果"
 64 |     },
 65 |     "opt_show":{
 66 |         "message":"显示效果"
 67 |     },
 68 |     "opt_undo":{
 69 |         "message":"撤销修改"
 70 |     },
 71 |     "opt_same":{
 72 |         "message":"全部相同"
 73 |     },
 74 |     "opt_showNote":{
 75 |         "message":"添加注释"
 76 |     },
 77 |     "opt_hideNote":{
 78 |         "message":"隐藏注释"
 79 |     },
 80 |     "opt_compatibility":{
 81 |         "message":"兼容性说明"
 82 |     },
 83 |     "style_fz":{
 84 |         "message":"字号"
 85 |     },
 86 |     "style_lh":{
 87 |         "message":"行高"
 88 |     },
 89 |     "style_ff":{
 90 |         "message":"字体"
 91 |     },
 92 |     "style_ff_simsun":{
 93 |         "message":"宋体"
 94 |     },
 95 |     "style_ff_MSYH":{
 96 |         "message":"微软雅黑"
 97 |     },
 98 |     "style_ff_simhei":{
 99 |         "message":"黑体"
100 |     },
101 |     "style_ff_youyuan":{
102 |         "message":"幼圆"
103 |     },
104 |     "style_ff_STFangsong":{
105 |         "message":"华文仿宋"
106 |     },
107 |     "style_ff_STHeiti":{
108 |         "message":"华文黑体"
109 |     },
110 |     "style_ff_STKaiti":{
111 |         "message":"华文楷体"
112 |     },
113 |     "style_ff_STSong":{
114 |         "message":"华文宋体"
115 |     },
116 |     "style_fs":{
117 |         "message":"字型"
118 |     },
119 |     "style_fs_bold":{
120 |         "message":"加粗"
121 |     },
122 |     "style_fs_italic":{
123 |         "message":"斜体"
124 |     },
125 |     "style_fs_underline":{
126 |         "message":"下划线"
127 |     },
128 |     "style_ta":{
129 |         "message":"对齐方式"
130 |     },
131 |     "style_ta_left":{
132 |         "message":"左对齐"
133 |     },
134 |     "style_ta_center":{
135 |         "message":"居中"
136 |     },
137 |     "style_ta_right":{
138 |         "message":"右对齐"
139 |     },
140 |     "style_ta_justify":{
141 |         "message":"两端对齐"
142 |     },
143 |     "style_c":{
144 |         "message":"字色"
145 |     },
146 |     "style_ts":{
147 |         "message":"文字阴影"
148 |     },
149 |     "style_bg":{
150 |         "message":"背景"
151 |     },
152 |     "style_lg":{
153 |         "message":"线性渐变"
154 |     },
155 |     "style_wmi":{
156 |         "message":"遮罩"
157 |     },
158 |     "style_wbr":{
159 |         "message":"反射"
160 |     },
161 |     "style_wbr_d":{
162 |         "message":"方向"
163 |     },
164 |     "style_wbr_o":{
165 |         "message":"距离"
166 |     },
167 |     "style_wbr_g":{
168 |         "message":"渐变"
169 |     },
170 |     "style_op":{
171 |         "message":"透明度"
172 |     },
173 |     "style_bs":{
174 |         "message":"盒阴影"
175 |     },
176 |     "style_bs_inset":{
177 |         "message":"内部"
178 |     },
179 |     "style_bs_outset":{
180 |         "message":"外部"
181 |     },
182 |     "style_b":{
183 |         "message":"边框"
184 |     },
185 |     "style_b_style":{
186 |         "message":"样式"
187 |     },
188 |     "style_b_width":{
189 |         "message":"宽度"
190 |     },
191 |     "style_b_color":{
192 |         "message":"颜色"
193 |     },
194 |     "style_b_radius":{
195 |         "message":"圆角"
196 |     },
197 |     "style_ls":{
198 |         "message":"列表项符号"
199 |     },
200 |     "style_ls_none":{
201 |         "message":"无"
202 |     },
203 |     "style_l":{
204 |         "message":"布局"
205 |     },
206 |     "style_l_padding":{
207 |         "message":"内边距"
208 |     },
209 |     "style_l_margin":{
210 |         "message":"外边距"
211 |     },
212 |     "style_s":{
213 |         "message":"宽高"
214 |     },
215 |     "style_transform":{
216 |         "message":"变形"
217 |     },
218 |     "style_webkitTextStroke":{
219 |         "message":"文字描边"
220 |     },
221 |     "confirm_unload":{
222 |         "message":"CodeCola的修改结果还没有保存，确定要离开吗？"
223 |     },
224 |     "opt_finder":{
225 |         "message":"CSS选择器："
226 |     },
227 |     "opt_share":{
228 |         "message":"分享到CodeCola Patterns"
229 |     }
230 | }
231 | 
232 | 


--------------------------------------------------------------------------------
/native/zh-CN.js:
--------------------------------------------------------------------------------
  1 | if (codecola) {
  2 |     codecola.i18n = {};
  3 | } else {
  4 |     var codecola = {
  5 |         i18n:{}
  6 |     };
  7 | }
  8 | codecola.i18n =
  9 | {
 10 |     "name":{
 11 |         "message":"Code Cola"
 12 |     },
 13 |     "description":{
 14 |         "message":"Code Cola是一个可视化编辑在线页面css样式的chrome插件。"
 15 |     },
 16 |     "error_google":{
 17 |         "message":"由于安全限制，Code Cola无法在一些google的页面上运行。"
 18 |     },
 19 |     "error_local":{
 20 |         "message":"由于安全限制，Code Cola无法在本地页面上运行，请将当前页面上传至服务器，或移至本地服务器目录下。"
 21 |     },
 22 |     "error_connect_server":{
 23 |         "message":"链接到服务器失败"
 24 |     },
 25 |     "error_server_fail":{
 26 |         "message":"服务器处理失败"
 27 |     },
 28 |     "error_find_none":{
 29 |         "message":"CodeCola没有找到任何匹配的元素"
 30 |     },
 31 |     "opt_fold":{
 32 |         "message":"收缩"
 33 |     },
 34 |     "opt_unfold":{
 35 |         "message":"展开"
 36 |     },
 37 |     "opt_about":{
 38 |         "message":"关于Code Cola"
 39 |     },
 40 |     "opt_cNode":{
 41 |         "message":"当前节点"
 42 |     },
 43 |     "opt_unfoldAll":{
 44 |         "message":"展开所有"
 45 |     },
 46 |     "opt_foldAll":{
 47 |         "message":"关闭所有"
 48 |     },
 49 |     "opt_showStyle":{
 50 |         "message":"查看样式"
 51 |     },
 52 |     "opt_hideStyle":{
 53 |         "message":"隐藏样式"
 54 |     },
 55 |     "opt_html":{
 56 |         "message":"获取修改结果"
 57 |     },
 58 |     "opt_link":{
 59 |         "message":"获取修改结果链接"
 60 |     },
 61 |     "opt_turnOff":{
 62 |         "message":"关闭功能"
 63 |     },
 64 |     "opt_turnOn":{
 65 |         "message":"开启功能"
 66 |     },
 67 |     "opt_close":{
 68 |         "message":"关闭"
 69 |     },
 70 |     "opt_hide":{
 71 |         "message":"隐藏效果"
 72 |     },
 73 |     "opt_show":{
 74 |         "message":"显示效果"
 75 |     },
 76 |     "opt_undo":{
 77 |         "message":"撤销修改"
 78 |     },
 79 |     "opt_same":{
 80 |         "message":"全部相同"
 81 |     },
 82 |     "opt_showNote":{
 83 |         "message":"添加注释"
 84 |     },
 85 |     "opt_hideNote":{
 86 |         "message":"隐藏注释"
 87 |     },
 88 |     "opt_compatibility":{
 89 |         "message":"兼容性说明"
 90 |     },
 91 |     "style_fz":{
 92 |         "message":"字号"
 93 |     },
 94 |     "style_lh":{
 95 |         "message":"行高"
 96 |     },
 97 |     "style_ff":{
 98 |         "message":"字体"
 99 |     },
100 |     "style_ff_simsun":{
101 |         "message":"宋体"
102 |     },
103 |     "style_ff_MSYH":{
104 |         "message":"微软雅黑"
105 |     },
106 |     "style_ff_simhei":{
107 |         "message":"黑体"
108 |     },
109 |     "style_ff_youyuan":{
110 |         "message":"幼圆"
111 |     },
112 |     "style_ff_STFangsong":{
113 |         "message":"华文仿宋"
114 |     },
115 |     "style_ff_STHeiti":{
116 |         "message":"华文黑体"
117 |     },
118 |     "style_ff_STKaiti":{
119 |         "message":"华文楷体"
120 |     },
121 |     "style_ff_STSong":{
122 |         "message":"华文宋体"
123 |     },
124 |     "style_fs":{
125 |         "message":"字型"
126 |     },
127 |     "style_fs_bold":{
128 |         "message":"加粗"
129 |     },
130 |     "style_fs_italic":{
131 |         "message":"斜体"
132 |     },
133 |     "style_fs_underline":{
134 |         "message":"下划线"
135 |     },
136 |     "style_ta":{
137 |         "message":"对齐方式"
138 |     },
139 |     "style_ta_left":{
140 |         "message":"左对齐"
141 |     },
142 |     "style_ta_center":{
143 |         "message":"居中"
144 |     },
145 |     "style_ta_right":{
146 |         "message":"右对齐"
147 |     },
148 |     "style_ta_justify":{
149 |         "message":"两端对齐"
150 |     },
151 |     "style_c":{
152 |         "message":"字色"
153 |     },
154 |     "style_ts":{
155 |         "message":"文字阴影"
156 |     },
157 |     "style_bg":{
158 |         "message":"背景"
159 |     },
160 |     "style_lg":{
161 |         "message":"线性渐变"
162 |     },
163 |     "style_wmi":{
164 |         "message":"遮罩"
165 |     },
166 |     "style_wbr":{
167 |         "message":"反射"
168 |     },
169 |     "style_wbr_d":{
170 |         "message":"方向"
171 |     },
172 |     "style_wbr_o":{
173 |         "message":"距离"
174 |     },
175 |     "style_wbr_g":{
176 |         "message":"渐变"
177 |     },
178 |     "style_op":{
179 |         "message":"透明度"
180 |     },
181 |     "style_bs":{
182 |         "message":"盒阴影"
183 |     },
184 |     "style_bs_inset":{
185 |         "message":"内部"
186 |     },
187 |     "style_bs_outset":{
188 |         "message":"外部"
189 |     },
190 |     "style_b":{
191 |         "message":"边框"
192 |     },
193 |     "style_b_style":{
194 |         "message":"样式"
195 |     },
196 |     "style_b_width":{
197 |         "message":"宽度"
198 |     },
199 |     "style_b_color":{
200 |         "message":"颜色"
201 |     },
202 |     "style_b_radius":{
203 |         "message":"圆角"
204 |     },
205 |     "style_ls":{
206 |         "message":"列表项符号"
207 |     },
208 |     "style_ls_none":{
209 |         "message":"无"
210 |     },
211 |     "style_l":{
212 |         "message":"布局"
213 |     },
214 |     "style_l_padding":{
215 |         "message":"内边距"
216 |     },
217 |     "style_l_margin":{
218 |         "message":"外边距"
219 |     },
220 |     "style_s":{
221 |         "message":"宽高"
222 |     },
223 |     "style_transform":{
224 |         "message":"变形"
225 |     },
226 |     "style_webkitTextStroke":{
227 |         "message":"文字描边"
228 |     },
229 |     "confirm_unload":{
230 |         "message":"CodeCola的修改结果还没有保存，确定要离开吗？"
231 |     },
232 |     "opt_finder":{
233 |         "message":"CSS选择器："
234 |     },
235 |     "opt_share":{
236 |         "message":"分享到CodeCola Patterns"
237 |     }
238 | }
239 | 
240 | 


--------------------------------------------------------------------------------
/_locales/en/messages.json:
--------------------------------------------------------------------------------
  1 | {
  2 |     "name":{
  3 |         "message":"Code Cola"
  4 |     },
  5 |     "description":{
  6 |         "message":"Code Cola is a chrome extension for editing online pages' css style visually."
  7 |     },
  8 |     "error_google":{
  9 |         "message":"For security reasons,Code Cola cannot run content scripts at some pages of google."
 10 |     },
 11 |     "error_local":{
 12 |         "message":"For security reasons,Code Cola cannot run content scripts at local page.\r\nPlase upload this page to server or move it to a local server folder."
 13 |     },
 14 |     "error_connect_server":{
 15 |         "message":"Communicate with server unsuccessfully."
 16 |     },
 17 |     "error_server_fail":{
 18 |         "message":"Server error."
 19 |     },
 20 |     "error_find_none":{
 21 |         "message":"Code Cola can't find one."
 22 |     },
 23 |     "opt_fold":{
 24 |         "message":"fold"
 25 |     },
 26 |     "opt_unfold":{
 27 |         "message":"unfold"
 28 |     },
 29 |     "opt_about":{
 30 |         "message":"About Code Cola"
 31 |     },
 32 |     "opt_cNode":{
 33 |         "message":"current nodes"
 34 |     },
 35 |     "opt_unfoldAll":{
 36 |         "message":"unfold all"
 37 |     },
 38 |     "opt_foldAll":{
 39 |         "message":"fold all"
 40 |     },
 41 |     "opt_showStyle":{
 42 |         "message":"show style"
 43 |     },
 44 |     "opt_hideStyle":{
 45 |         "message":"hide style"
 46 |     },
 47 |     "opt_html":{
 48 |         "message":"get html"
 49 |     },
 50 |     "opt_link":{
 51 |         "message":"get link"
 52 |     },
 53 |     "opt_turnOff":{
 54 |         "message":"turn off"
 55 |     },
 56 |     "opt_turnOn":{
 57 |         "message":"turn on"
 58 |     },
 59 |     "opt_close":{
 60 |         "message":"close"
 61 |     },
 62 |     "opt_hide":{
 63 |         "message":"hide effect"
 64 |     },
 65 |     "opt_show":{
 66 |         "message":"show effect"
 67 |     },
 68 |     "opt_undo":{
 69 |         "message":"undo"
 70 |     },
 71 |     "opt_same":{
 72 |         "message":"all same"
 73 |     },
 74 |     "opt_showNote":{
 75 |         "message":"add note"
 76 |     },
 77 |     "opt_hideNote":{
 78 |         "message":"hide note"
 79 |     },
 80 |     "opt_compatibility":{
 81 |         "message":"When can I use"
 82 |     },
 83 |     "style_fz":{
 84 |         "message":"Font Size"
 85 |     },
 86 |     "style_lh":{
 87 |         "message":"Line Height"
 88 |     },
 89 |     "style_ff":{
 90 |         "message":"Font Family"
 91 |     },
 92 |     "style_ff_simsun":{
 93 |         "message":"SimSun"
 94 |     },
 95 |     "style_ff_MSYH":{
 96 |         "message":"Microsoft YaHei"
 97 |     },
 98 |     "style_ff_simhei":{
 99 |         "message":"SimHei"
100 |     },
101 |     "style_ff_youyuan":{
102 |         "message":"YouYuan"
103 |     },
104 |     "style_ff_STFangsong":{
105 |         "message":"STFangsong"
106 |     },
107 |     "style_ff_STHeiti":{
108 |         "message":"STHeiti"
109 |     },
110 |     "style_ff_STKaiti":{
111 |         "message":"STKaiti"
112 |     },
113 |     "style_ff_STSong":{
114 |         "message":"STSong"
115 |     },
116 |     "style_fs":{
117 |         "message":"Font Other"
118 |     },
119 |     "style_fs_bold":{
120 |         "message":"bold"
121 |     },
122 |     "style_fs_italic":{
123 |         "message":"italic"
124 |     },
125 |     "style_fs_underline":{
126 |         "message":"underline"
127 |     },
128 |     "style_ta":{
129 |         "message":"Text Align"
130 |     },
131 |     "style_ta_left":{
132 |         "message":"left"
133 |     },
134 |     "style_ta_center":{
135 |         "message":"center"
136 |     },
137 |     "style_ta_right":{
138 |         "message":"right"
139 |     },
140 |     "style_ta_justify":{
141 |         "message":"justify"
142 |     },
143 |     "style_c":{
144 |         "message":"Color"
145 |     },
146 |     "style_ts":{
147 |         "message":"Text Shadow"
148 |     },
149 |     "style_bg":{
150 |         "message":"Background"
151 |     },
152 |     "style_wmi":{
153 |         "message":"Mask"
154 |     },
155 |     "style_wbr":{
156 |         "message":"Reflections"
157 |     },
158 |     "style_wbr_d":{
159 |         "message":"direction"
160 |     },
161 |     "style_wbr_o":{
162 |         "message":"offset"
163 |     },
164 |     "style_wbr_g":{
165 |         "message":"gradient"
166 |     },
167 |     "style_lg":{
168 |         "message":"Linear Gradient"
169 |     },
170 |     "style_op":{
171 |         "message":"Opacity"
172 |     },
173 |     "style_bs":{
174 |         "message":"Box Shadow"
175 |     },
176 |     "style_bs_inset":{
177 |         "message":"inset"
178 |     },
179 |     "style_bs_outset":{
180 |         "message":"outset"
181 |     },
182 |     "style_b":{
183 |         "message":"Border"
184 |     },
185 |     "style_b_style":{
186 |         "message":"style"
187 |     },
188 |     "style_b_width":{
189 |         "message":"width"
190 |     },
191 |     "style_b_color":{
192 |         "message":"color"
193 |     },
194 |     "style_b_radius":{
195 |         "message":"border radius"
196 |     },
197 |     "style_ls":{
198 |         "message":"List Style"
199 |     },
200 |     "style_ls_none":{
201 |         "message":"none"
202 |     },
203 |     "style_l":{
204 |         "message":"Layout"
205 |     },
206 |     "style_l_padding":{
207 |         "message":"padding"
208 |     },
209 |     "style_l_margin":{
210 |         "message":"margin"
211 |     },
212 |     "style_s":{
213 |         "message":"Size"
214 |     },
215 |     "style_transform":{
216 |         "message":"Transform"
217 |     },
218 |     "style_webkitTextStroke":{
219 |         "message":"Text Stroke"
220 |     },
221 |     "confirm_unload":{
222 |         "message":"Code Cola: The modification hasn't been saved."
223 |     },
224 |     "opt_finder":{
225 |         "message":"Css Selector:"
226 |     },
227 |     "opt_share":{
228 |         "message":"Share To CodeCola Patterns"
229 |     }
230 | }


--------------------------------------------------------------------------------
/native/en.js:
--------------------------------------------------------------------------------
  1 | if (codecola) {
  2 |     codecola.i18n = {};
  3 | } else {
  4 |     var codecola = {
  5 |         i18n:{}
  6 |     };
  7 | }
  8 | codecola.i18n =
  9 | {
 10 |     "name":{
 11 |         "message":"Code Cola"
 12 |     },
 13 |     "description":{
 14 |         "message":"Code Cola is a chrome extension for editing online pages' css style visually."
 15 |     },
 16 |     "error_google":{
 17 |         "message":"For security reasons,Code Cola cannot run content scripts at some pages of google."
 18 |     },
 19 |     "error_local":{
 20 |         "message":"For security reasons,Code Cola cannot run content scripts at local page.\r\nPlase upload this page to server or move it to a local server folder."
 21 |     },
 22 |     "error_connect_server":{
 23 |         "message":"Communicate with server unsuccessfully."
 24 |     },
 25 |     "error_server_fail":{
 26 |         "message":"Server error."
 27 |     },
 28 |     "error_find_none":{
 29 |         "message":"Code Cola can't find one."
 30 |     },
 31 |     "opt_fold":{
 32 |         "message":"fold"
 33 |     },
 34 |     "opt_unfold":{
 35 |         "message":"unfold"
 36 |     },
 37 |     "opt_about":{
 38 |         "message":"About Code Cola"
 39 |     },
 40 |     "opt_cNode":{
 41 |         "message":"current nodes"
 42 |     },
 43 |     "opt_unfoldAll":{
 44 |         "message":"unfold all"
 45 |     },
 46 |     "opt_foldAll":{
 47 |         "message":"fold all"
 48 |     },
 49 |     "opt_showStyle":{
 50 |         "message":"show style"
 51 |     },
 52 |     "opt_hideStyle":{
 53 |         "message":"hide style"
 54 |     },
 55 |     "opt_html":{
 56 |         "message":"get html"
 57 |     },
 58 |     "opt_link":{
 59 |         "message":"get link"
 60 |     },
 61 |     "opt_turnOff":{
 62 |         "message":"turn off"
 63 |     },
 64 |     "opt_turnOn":{
 65 |         "message":"turn on"
 66 |     },
 67 |     "opt_close":{
 68 |         "message":"close"
 69 |     },
 70 |     "opt_hide":{
 71 |         "message":"hide effect"
 72 |     },
 73 |     "opt_show":{
 74 |         "message":"show effect"
 75 |     },
 76 |     "opt_undo":{
 77 |         "message":"undo"
 78 |     },
 79 |     "opt_same":{
 80 |         "message":"all same"
 81 |     },
 82 |     "opt_showNote":{
 83 |         "message":"add note"
 84 |     },
 85 |     "opt_hideNote":{
 86 |         "message":"hide note"
 87 |     },
 88 |     "opt_compatibility":{
 89 |         "message":"When can I use"
 90 |     },
 91 |     "style_fz":{
 92 |         "message":"Font Size"
 93 |     },
 94 |     "style_lh":{
 95 |         "message":"Line Height"
 96 |     },
 97 |     "style_ff":{
 98 |         "message":"Font Family"
 99 |     },
100 |     "style_ff_simsun":{
101 |         "message":"SimSun"
102 |     },
103 |     "style_ff_MSYH":{
104 |         "message":"Microsoft YaHei"
105 |     },
106 |     "style_ff_simhei":{
107 |         "message":"SimHei"
108 |     },
109 |     "style_ff_youyuan":{
110 |         "message":"YouYuan"
111 |     },
112 |     "style_ff_STFangsong":{
113 |         "message":"STFangsong"
114 |     },
115 |     "style_ff_STHeiti":{
116 |         "message":"STHeiti"
117 |     },
118 |     "style_ff_STKaiti":{
119 |         "message":"STKaiti"
120 |     },
121 |     "style_ff_STSong":{
122 |         "message":"STSong"
123 |     },
124 |     "style_fs":{
125 |         "message":"Font Other"
126 |     },
127 |     "style_fs_bold":{
128 |         "message":"bold"
129 |     },
130 |     "style_fs_italic":{
131 |         "message":"italic"
132 |     },
133 |     "style_fs_underline":{
134 |         "message":"underline"
135 |     },
136 |     "style_ta":{
137 |         "message":"Text Align"
138 |     },
139 |     "style_ta_left":{
140 |         "message":"left"
141 |     },
142 |     "style_ta_center":{
143 |         "message":"center"
144 |     },
145 |     "style_ta_right":{
146 |         "message":"right"
147 |     },
148 |     "style_ta_justify":{
149 |         "message":"justify"
150 |     },
151 |     "style_c":{
152 |         "message":"Color"
153 |     },
154 |     "style_ts":{
155 |         "message":"Text Shadow"
156 |     },
157 |     "style_bg":{
158 |         "message":"Background"
159 |     },
160 |     "style_wmi":{
161 |         "message":"Mask"
162 |     },
163 |     "style_wbr":{
164 |         "message":"Reflections"
165 |     },
166 |     "style_wbr_d":{
167 |         "message":"direction"
168 |     },
169 |     "style_wbr_o":{
170 |         "message":"offset"
171 |     },
172 |     "style_wbr_g":{
173 |         "message":"gradient"
174 |     },
175 |     "style_lg":{
176 |         "message":"Linear Gradient"
177 |     },
178 |     "style_op":{
179 |         "message":"Opacity"
180 |     },
181 |     "style_bs":{
182 |         "message":"Box Shadow"
183 |     },
184 |     "style_bs_inset":{
185 |         "message":"inset"
186 |     },
187 |     "style_bs_outset":{
188 |         "message":"outset"
189 |     },
190 |     "style_b":{
191 |         "message":"Border"
192 |     },
193 |     "style_b_style":{
194 |         "message":"style"
195 |     },
196 |     "style_b_width":{
197 |         "message":"width"
198 |     },
199 |     "style_b_color":{
200 |         "message":"color"
201 |     },
202 |     "style_b_radius":{
203 |         "message":"border radius"
204 |     },
205 |     "style_ls":{
206 |         "message":"List Style"
207 |     },
208 |     "style_ls_none":{
209 |         "message":"none"
210 |     },
211 |     "style_l":{
212 |         "message":"Layout"
213 |     },
214 |     "style_l_padding":{
215 |         "message":"padding"
216 |     },
217 |     "style_l_margin":{
218 |         "message":"margin"
219 |     },
220 |     "style_s":{
221 |         "message":"Size"
222 |     },
223 |     "style_transform":{
224 |         "message":"Transform"
225 |     },
226 |     "style_webkitTextStroke":{
227 |         "message":"Text Stroke"
228 |     },
229 |     "confirm_unload":{
230 |         "message":"Code Cola: The modification hasn't been saved."
231 |     },
232 |     "opt_finder":{
233 |         "message":"Css Selector:"
234 |     },
235 |     "opt_share":{
236 |         "message":"Share To CodeCola Patterns"
237 |     }
238 | }
239 | 


--------------------------------------------------------------------------------
/code-cola-widget/src/color/codecola-color.css:
--------------------------------------------------------------------------------
 1 | .codecola-color-picker{
 2 |     width:192px;
 3 |     padding:0;
 4 |     list-style:none;
 5 |     font-size:12px;
 6 |     display:none;
 7 | }
 8 | .codecola-color-transparent{
 9 |     line-height: 0;
10 |     font-size: 0;
11 |     height:20px;
12 |     width:130px;
13 |     display:inline-block;
14 |     background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAMAAAAoLQ9TAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAAlQTFRF1tbW19fX////Y8ywewAAADxJREFUeNp8jUEKACAIwGb/f7RJKmnhQA9jKMuRDTa3MJMCOdSiCRgL/OpbxMoy0v6+CLr4FgwFVagAAwDFWQFzWaf+pQAAAABJRU5ErkJggg==) repeat 0 0;
15 | }
16 | .codecola-color-input{
17 |     margin:0;
18 |     height:18px;
19 |     width:128px;
20 | }
21 | .codecola-color-current{
22 |     overflow:hidden;
23 | }
24 | .codecola-color-current label{
25 |     float:left;
26 |     position: relative;
27 |     top: 5px;
28 | }
29 | .codecola-color-hsb-range input{
30 |     width:193px;
31 |     margin:0;
32 | }
33 | .codecola-color-current input{
34 |     width:42px;
35 |     height:15px;
36 | }
37 | .codecola-color-current input{
38 |     float:right;
39 |     margin-right:2px;
40 | }
41 | .codecola-color-hsb-img{
42 |     height:5px;
43 |     margin-top:3px;
44 |     background-image:url(data:image/jpeg;base64,/9j/4QAYRXhpZgAASUkqAAgAAAAAAAAAAAAAAP/sABFEdWNreQABAAQAAABkAAD/4QMhaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wLwA8P3hwYWNrZXQgYmVnaW49Iu+7vyIgaWQ9Ilc1TTBNcENlaGlIenJlU3pOVGN6a2M5ZCI/PiA8eDp4bXBtZXRhIHhtbG5zOng9ImFkb2JlOm5zOm1ldGEvIiB4OnhtcHRrPSJBZG9iZSBYTVAgQ29yZSA1LjAtYzA2MCA2MS4xMzQzNDIsIDIwMTAvMDEvMTAtMTg6MDY6NDMgICAgICAgICI+IDxyZGY6UkRGIHhtbG5zOnJkZj0iaHR0cDovL3d3dy53My5vcmcvMTk5OS8wMi8yMi1yZGYtc3ludGF4LW5zIyI+IDxyZGY6RGVzY3JpcHRpb24gcmRmOmFib3V0PSIiIHhtbG5zOnhtcD0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wLyIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bXA6Q3JlYXRvclRvb2w9IkFkb2JlIFBob3Rvc2hvcCBDUzUiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6QzQyNjg2NzVDMzJGMTFERkI3QTJEQUIwNjk1RUVGRTYiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6QzQyNjg2NzZDMzJGMTFERkI3QTJEQUIwNjk1RUVGRTYiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDpDNDI2ODY3M0MzMkYxMURGQjdBMkRBQjA2OTVFRUZFNiIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDpDNDI2ODY3NEMzMkYxMURGQjdBMkRBQjA2OTVFRUZFNiIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/Pv/uAA5BZG9iZQBkwAAAAAH/2wCEAAEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQECAgICAgICAgICAgMDAwMDAwMDAwMBAQEBAQEBAgEBAgICAQICAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDA//AABEIAA8AwAMBEQACEQEDEQH/xACmAAEBAQEBAAAAAAAAAAAAAAAFBgcDBAEAAgMBAQEBAAAAAAAAAAAABAcCAwYFCAkKEAAAAwYEBAMEBwkAAAAAAAADBAYBEQISBQcAMRQIQVETCSFxUoEiRnfBcpIzRZZHMlNElBYXl0h4EQAAAQcHCQcDAwUAAAAAAAACAAERAwQFBsESFBUWBwghQYFSkhNDFwlxkTOjpNYYMSIZooSFoSODJNX/2gAMAwEAAhEDEQA/AATSFrgKmr9SFvsqwSp6u1Y8BQmE1HEUo4BqoGBwqSWigUbS8RenBiMBgbAEHA2GBksMLHMZ5xiq5iPH69Wp4O6Onu7mZoaFiwClWZpmqQjGIQVYZjerNNVmOYJkBCZBjICY2Q30whDGzcC44BckIPC4SDXk+3W52NjaHitG7DL29ezMytStbV0+HlqzetSwAl6yevXDnrDzlqwSRn0+gVKnUWTXrM9WpHTasnVvfdm/qiG8/bhVvPDDe22J3F7cSs6dULdk7nwEuS9MWlzL1TQrj4TZk6g3bk7nGAtpoF6bdUaTXpqkVmVz9WUE97z6qdN5+3C+eeDi/NsTuL9YvZ06oHlI/wAJLx6X2QK9U0K6xwMydRYwZO52ALbKBvDsLRZNfYFB1qR02rKkPfdm/q23N5+3C8eeA3EW2J3GJCOmdOqre2TuiUJLl6RExPVNCgp2sydRYyZO5mAVHUt8u3A3N0dsdtiL3u6RSltd5SWpCxxWfADiRZ/FxNR6s7Vb49znJYPiEIkfCaA7QMqfpMWqMncIBQNS3gWFNzdGyaJIvy6RIu1z+Uluwsd1nwPYgGfxcRscLO1W9/chyVT4w93rvhNAeTayp1FoMnc3AKDqO5yzJqbooNNkXvd0qeI13lIjAsdxnwdX3s/i4gYzH2qnr7gOStfGCfEU+E0CNn4yp1Fx8nc+QFA1G+9rjc3RKU8i/LpU2oNc/J0ieCx3GfCve6z+LfrFqztVPT/uHJUvjppYvnwmgXtxYyp+kxcuyd0SAIQK9ltAfvDJYV3qpdV4edFixuXLcReA6UU292I2tGuqeOXaeoyxp+kvjiX+FfjG5v8AO0e7DEkFuCtOD94BTxXeqlVP6U5FhuOWFXm6UU2N3m1o11bXl2moZVH6P2PNf4V+scm/cNHu8xIhbl7Mgu6lJpAuX7VJqP0pSLDacsQOZ1IpryWNaNdWuy95hlWfoy9QNf4V/MeG/cr/AHiYkQt1tjAfvEzQBXeqkH+HmjIsNxy32XculFNdTG1o11Z8u0xjKo/RM6ii/wAK/wBj437pf70MUmotytmav1NEHTqHNMxmko1YbJ5dFMFMvZhpO3FhciwIpMEOVejWAry97qEWmcnRU6iLCikX3x01I12tZl2oyEWDqK4iHq8+iu7VaJM92koSubI/J3RhKZezG+duOXDiwIpN10NL0awFEriETecvSDx7sKN/eXFjUjXbA5dqKRFhCiJlavPot3i7okz3aRP3EbI/l0VGUyxvXb1GsKLAik3KwevRrAZJYbETccnSzxusKN/E7+aka7czZdqIRFg6itEpav1NF3HbxUOZsTtIm7ttk8ujckpl7Mb129U/BkwIpOHuBF6NYDDl74TETdcnTjxhsKKQN4NSNd4MGXafIiIIWaVJGXUdy29B1zn9VM3g8fOe5w2eL2rquYKlyZmHiAlfYBhkhIxOVw4GMUzum0mGztiNd5OnLtPAZWpBFHCLtR3AbqnXZ9VM3X8Xc5lyNjNtXVIwaLUzLhoIV9itjkhUxOtw4UsQzvm0m7FgbEa7zcRk7S4ZWZAKnEZdRvVuEdc5/VTNz/HzmUw2M41dTXB+uTMuTg1X2K2WSGDE6HDcTfO7ptJuJcLYjXesN5doAytSCrSJGXUbqFedlz6qZuN4u5zVEbGba+pFhKXJmXQwkr7FSiSGzE63BAd47um0nC/CLYjXe8KGTtMQy9Q67Q8b3bn1WF9VMXFa77JyHC3fePPDI8k0S76HmROopBk2XGAt8oh2Oj/TCRBAv5iD5XaQo6xRsb5d2SyC+qlrl+H2alDhPvvFncS8k0Ryu1kTqKB5Nl2gLtKIaj4/0wfwML+Zg2V2EMOp0lG928VchfVSl0Gu+zWIcKB936XWvJNEbAMidRnacmyzALtKIXvBP9MG8Bi/m4LldhIoyspwdbo4Mvu8W6hGEVSegBTRpMXLAKKAWKrk2B0M0OerQhEAvVomsLxxjQRAwwiNbGxsLGswuGeMIWe0QsKtgipqOtG2qTBUGZ20wVxzrQoUiEc4QGCsP9hziMcJjCSIyElib54bjxRcvFy9rwkwTDrGCF3qIb3UPiEFq91AMwrzieSlUzO0DSsWsJktStWzjAvGNUYKoYVhwnNiFybv91inXMuHTUHtX20V63lPXSuIoNQ11QpQGu11GFFBUC6XrNaBM7j6KYBq1UoYYA5mEQiTjhGjiZEAC14cPoY83Ogvzxg33DnaEyECXvL3ZInavabtYD5yqNHN4f8AS4mIH3GeZ/QigVpw6RonyE4Xu73PYnava3tfDyfKoUc13P8A2LEyxWeiZ93+kiwWi4dN0b2Qmy91O4tE7V7atsofOWvI5vH5/CYger8+5/SRYLYcOstG/kJwvczfdE7V7edtYfOWto5vD55CYrPVWej/AKCKBb7h1xopMhOF7ibx4nauxG3IPJ8tYRzXc/1lEyxWepc9F8siwczOHXuilSE2XXe5+J2rstt4D5y1VHN8f8sicMQPUOeh+WRYObXDtHopkhOF1nfiJ2rtLt+D5y1JHN8v1ME44rPZzPQvKIsHOjh2o0U6Qmy6qujE7V20sIHk+U+jmu9Xx+Jlis9l89A8kigc9uHa3RWEhOF1EqonatB2LD5ynEc3x/OYnDED2Sz1d5JFg+QnDtnorKQnC9aiidq0lZEPnKZRzfL4mE44rPY7PVnkEWD5JcO3GitJCbL1FNRO1dAsuHk+UZHNd6vxoTLED2Jz1V5BFA+UHDt7oraQnS5m2MTtWQs8Hk+WNHNd6v40TLFZ7C56p9ORYPlbw+YWiuJCcL/2Kidq2WkD5y/0c3y/ecMQPYDPU/piKB8u+HzI0V1ITZcvtjidqz1qw+csCOb4fyYnHFZ+XeepfTEWD5k8PmboryQnC9O2eRO1ddtiHk+UFHNd6vwYTLFZ+W2eo/SkWD5r8Pmlor6QnC9G2KxO1astwHzlLI5vl8NCcMQPyyz1D6QigfOXh82NFoJCcLp7t2xO1a7t8HzlJo5vh+TROOKz8rc9QekIsHzz4fN3RaKQmy6V7YsTtXcpCB5PlII5rufwCJliB+VGez3oyLB+QHh849FpJCbLo3tPRO1d2EUHzlpqObx+WgmKz8o89nPREWD8h/D50aLSyE4XQvZ3idq7zpEPnLSkc3h8qBMVn5P57NeiIoH5HeHzt0WnkJwvbzsoRO1d9kuHk+WkI5ruf6NiZYgfk1nsx6Eiwfkr4fPPRamQmy9tOxRE7V7hU6HzloqObx+R4mKz8lc9l/QEWD8nPD58aLVyF0rVtuyGST9cPWv3AUer3WJUeqG7Z0YGipUMSrXCLERxkXTAxS9kqYYDjPqSAsEyIM2WjhbG+EUNro2XsPJ+nKats1WW9But1Qt7vZxt3u5n37yciZN+6ciblQXJin8jtlXnbbnbYir2isKdaeg0HcjpdM3/APr0Tcbykb/+zuZ+8+ycX//Z);
45 |     background-repeat:no-repeat;
46 | }
47 | .codecola-color-hsbH .codecola-color-hsb-img{
48 |     background-position:0 0;
49 | }
50 | .codecola-color-hsbS .codecola-color-hsb-img{
51 |     background-position:0 -5px;
52 | }
53 | .codecola-color-hsbB .codecola-color-hsb-img{
54 |     background-position:0 -10px;
55 | }


--------------------------------------------------------------------------------
/code-cola-widget/src/degree/codecola-degree.js:
--------------------------------------------------------------------------------
  1 | /*
  2 | Copyright (c) 2013, ZHOUQICF.COM. All rights reserved.
  3 | Code licensed under the MIT License:
  4 | version: 1.0.0
  5 | */
  6 | /**
  7 |  * a degree control for css3 property
  8 |  * @module codecola-degree
  9 |  */
 10 | YUI().add('codecola-degree', function(Y) {
 11 |     /**
 12 |      * a degree control for css3 property
 13 |      * @param config {Object} Object literal specifying codecolaDegree configuration properties.
 14 |      * @class codecolaDegree
 15 |      * @constructor
 16 |      * @namespace Y
 17 |      * @extends Widget
 18 |      * @requires node widget codecola-degree-css
 19 |      */
 20 |     Y.codecolaDegree = Y.Base.create('codecola-degree', Y.Widget, [], {
 21 |         initializer: function() {
 22 |         },
 23 | 
 24 |         renderUI: function() {
 25 |             var that = this;
 26 |             that.vars = {
 27 |                 degreeWrap : Y.Node.create('<div class="codecola-degree-wrap"></div>'),
 28 |                 degree : Y.Node.create('<div class="codecola-degree"></div>'),
 29 |                 line : Y.Node.create('<i class="codecola-degree-line"></i>'),
 30 |                 dot : Y.Node.create('<b class="codecola-degree-dot"></b>'),
 31 |                 label : Y.Node.create('<label class="codecola-degree-label"></label>'),
 32 |                 input : Y.Node.create('<input type="number" class="codecola-degree-input" step="1" max="180" min="-180">'),
 33 |                 disable: false
 34 |             };
 35 |             var val = that.vars,
 36 |                 degreeWrap = val.degreeWrap,
 37 |                 degree = val.degree,
 38 |                 line = val.line,
 39 |                 dot = val.dot,
 40 |                 label = val.label,
 41 |                 input = val.input;
 42 | 
 43 |             degree.append(line).append(dot);
 44 |             label.append(input);
 45 |             degreeWrap.append(degree).append(label);
 46 |             Y.one(that.get('wrap')).append(degreeWrap);
 47 | 
 48 |             return that;
 49 |         },
 50 | 
 51 |         bindUI: function() {
 52 |             var that = this,
 53 |                 drag = false,
 54 |                 vars = that.vars,
 55 |                 doc = Y.one('html');
 56 |             vars.degree.on('click', function(e) {
 57 |                 if(vars.disable){
 58 |                     return;
 59 |                 }
 60 |                 that.setDegree({
 61 |                     degree: that._calculateDegree(e)
 62 |                 });
 63 |             });
 64 |             vars.degree.on('mousedown', function(e) {
 65 |                 if(vars.disable){
 66 |                     return;
 67 |                 }
 68 |                 drag = true;
 69 |                 doc.setStyle('webkitUserSelect', 'none');
 70 |             });
 71 |             doc.on('mouseup', function() {
 72 |                 if(vars.disable){
 73 |                     return;
 74 |                 }
 75 |                 drag = false;
 76 |                 doc.setStyle('webkitUserSelect', '');
 77 |             });
 78 |             doc.on('mousemove', function(e) {
 79 |                 if (!drag || vars.disable) {
 80 |                     return;
 81 |                 }
 82 |                 that.setDegree({
 83 |                     degree: that._calculateDegree(e)
 84 |                 });
 85 |             });
 86 |             vars.input.on('change', function() {
 87 |                 that.setDegree({
 88 |                     degree: this.get('value')
 89 |                 });
 90 |             });
 91 |             return that;
 92 |         },
 93 | 
 94 |         syncUI: function() {
 95 |             this._initControls();
 96 |             return this;
 97 |         },
 98 | 
 99 |         renderer: function(){
100 |             this.renderUI().bindUI().syncUI().get('onInit')();
101 |             return this;
102 |         },
103 | 
104 |         /**
105 |          * Calculate degree
106 |          * @method _calculateDegree
107 |          * @private
108 |          * @param {Event}
109 |          * @return {Number}
110 |          */
111 |         _calculateDegree: function(e) {
112 |             var dot = this.vars.dot,
113 |                 dotXY = dot.getXY(),
114 |                 offset = {};
115 | 
116 |             offset.x = e.clientX + window.pageXOffset - dotXY[0];
117 |             offset.y = e.clientY + window.pageYOffset - dotXY[1];
118 |             return - Math.ceil(Math.atan2(offset.y, offset.x) * (360 / (2 * Math.PI)));
119 |         },
120 | 
121 |         /**
122 |          * init all controls
123 |          * @method _initControls
124 |          * @private
125 |          * @chainable
126 |          */
127 |         _initControls: function() {
128 |             var that = this,
129 |                 degree = that.get('degree'),
130 |                 value = 'rotate(' + (-degree) + 'deg)';
131 | 
132 |             that.vars.line.setStyles({
133 |                 'MozTransform': value,
134 |                 'webkitTransform': value,
135 |                 'OTransform': value,
136 |                 'transform': value
137 |             });
138 | 
139 |             that.vars.input.set('value', degree);
140 |             return that;
141 |         },
142 | 
143 |         /**
144 |          * update the attribute 'degree', init all the controls, fire the onChange event
145 |          * @method setDegree
146 |          * @param {Object} param.degree for update the attribute 'degree'
147 |          * @chainable
148 |          */
149 |         setDegree: function(param) {
150 |             this.set('degree', param.degree)._initControls()._fireCallback();
151 |             return this;
152 |         },
153 | 
154 |         /**
155 |          * return the current degree
156 |          * @method getDegree
157 |          * @return {Number}
158 |          */
159 |         getDegree: function() {
160 |             return this.get('degree');
161 |         },
162 | 
163 |         /**
164 |          * reset all, degree is 0, will not run onChange
165 |          * @method reset
166 |          * @chainable
167 |          */
168 |         reset: function(param) {
169 |             this.set('degree', 0)._initControls();
170 |             return this;
171 |         },
172 | 
173 |         /**
174 |          * disable all controls
175 |          * @method disable
176 |          * @chainable
177 |          */
178 |         disable: function() {
179 |             var vars = this.vars;
180 |             vars.input.set('disable', true);
181 |             vars.disable = true;
182 |             return this;
183 |         },
184 | 
185 |         /**
186 |          * able all controls
187 |          * @method able
188 |          * @chainable
189 |          */
190 |         able: function() {
191 |             var vars = this.vars;
192 |             vars.input.set('disable', false);
193 |             vars.disable = false;
194 |             return this;
195 |         },
196 | 
197 | 
198 |         /**
199 |          * fire the onChange event
200 |          * @method _fireCallback
201 |          * @private
202 |          * @chainable
203 |          */
204 |         _fireCallback: function() {
205 |             this.get('onChange')(this.get('degree'));
206 |             return this;
207 |         }
208 |     }, {
209 |         ATTRS:{
210 |             /**
211 |              * @attribute wrap
212 |              * @type String
213 |              * @default 'body'
214 |              * @description a css selector for <code>Y.one()</code>,controls will insert into the wrap
215 |              */
216 |             wrap: {
217 |                 value: 'body',
218 |                 validator: Y.Lang.isString
219 |             },
220 |             /**
221 |              * @attribute degree
222 |              * @type Number
223 |              * @default 0
224 |              * @description degree for init, degree is a number from -180 to 180
225 |              */
226 |             degree: {
227 |                 value: 0,
228 |                 validator: function(v){
229 |                     if(/^-?1[0-7]\d$|^-?180$|^-?[1-9]\d$|^\d$|^-[1-9]$/.test(v)){
230 |                         return true;
231 |                     }else{
232 |                         Y.log('"' + v + '" is not a valid degree!');
233 |                         return false;
234 |                     }
235 |                 }
236 |             },
237 |             /**
238 |              * @attribute onInit
239 |              * @type Function
240 |              * @default function(){}
241 |              * @description callback when widget init
242 |              */
243 |             onInit: {
244 |                 value: function() {
245 |                 },
246 |                 validator: Y.Lang.isFunction
247 |             },
248 |             /**
249 |              * @attribute onChange
250 |              * @type Function
251 |              * @default function(){}
252 |              * @description callback when degree change
253 |              */
254 |             onChange: {
255 |                 value: function() {
256 |                 },
257 |                 validator: Y.Lang.isFunction
258 |             }
259 |         }
260 |     });
261 | }, '1.0.0', {requires:['node', 'widget-base','codecola-degree-css']});


--------------------------------------------------------------------------------
/codecola.css:
--------------------------------------------------------------------------------
  1 | @charset "utf-8";
  2 | @font-face {
  3 |     font-family: "FontAwesome";
  4 |     src: url("font/fontawesome-webfont.woff?v=3.0.1") format("woff"),
  5 |          url("chrome-extension://__MSG_@@extension_id__/font/fontawesome-webfont.woff?v=3.0.1") format("woff"),
  6 |          url("font/fontawesome-webfont.ttf?v=3.0.1") format("truetype"),
  7 |          url("chrome-extension://__MSG_@@extension_id__/font/fontawesome-webfont.ttf?v=3.0.1") format("truetype");
  8 | }
  9 | @-webkit-keyframes popIn{
 10 | 	0% {
 11 |         opacity:0;
 12 |         -webkit-transform:scale(0);
 13 |         -webkit-animation-timing-function:ease-in;
 14 |     }
 15 |     60% {
 16 |   	    opacity:0.8;
 17 |   	    -webkit-transform:scale(1.2);
 18 |   	    -webkit-animation-timing-function:ease-out;
 19 |     }
 20 |     100% {
 21 |   	    opacity:1;
 22 |   	    -webkit-transform:scale(1);
 23 |     }
 24 | }
 25 | @-moz-keyframes popIn{
 26 | 	0% {
 27 |         opacity:0;
 28 |         -moz-transform:scale(0);
 29 |         -moz-animation-timing-function:ease-in;
 30 |     }
 31 |     80% {
 32 |   	    opacity:0.8;
 33 |   	    -moz-transform:scale(1.2);
 34 |   	    -moz-animation-timing-function:ease-out;
 35 |     }
 36 |     100% {
 37 |   	    opacity:1;
 38 |   	    -moz-transform:scale(1);
 39 |     }
 40 | }
 41 | #codecola,
 42 | #codecola label,
 43 | #codecola input,
 44 | #codecola p,
 45 | #codecola form,
 46 | #codecola ol,
 47 | #codecola ul,
 48 | #codecola li,
 49 | #codecola a,
 50 | #codecola select,
 51 | #codecola textarea,
 52 | #codecola button,
 53 | #codecola ccfieldset,
 54 | #codecola ccu,
 55 | #codecola ccs,
 56 | #codecola ccb,
 57 | #codecola cccode,
 58 | #codecola cclegend {
 59 |     font: normal normal normal 12px/1.5 "Helvetica Neue", Helvetica, arial , san-serif;
 60 |     margin: 0;
 61 |     padding: 0;
 62 | }
 63 | 
 64 | .codecola-wrap {
 65 |     background-color: #292929;
 66 |     border: 5px solid rgba(0, 0, 0, 0.4);
 67 |     background-clip: padding-box;
 68 |     padding: 5px 10px;
 69 |     text-shadow: 1px 1px 0 #000;
 70 |     z-index: 2147483646;
 71 | }
 72 | 
 73 | #codecola .codecola-icon,
 74 | #codecola .codecola-icon::before{
 75 |     font: 14px/20px "FontAwesome";
 76 |     color: rgb(100,100,100);
 77 |     width: 20px;
 78 |     height: 20px;
 79 |     text-align: center;
 80 |     vertical-align: middle;
 81 |     text-shadow: 1px 1px 0 rgba(0,0,0,0.5);
 82 |     -webkit-font-smoothing: antialiased;
 83 |     cursor: pointer;
 84 | }
 85 | 
 86 | #codecola .codecola-icon:hover,
 87 | #codecola .codecola-icon::before:hover{
 88 |     color: #ccc;
 89 |     text-decoration: none;
 90 | }
 91 | 
 92 | #codecola .codecola-code{
 93 |     font-family: monospace, consolas;
 94 |     background-color: #f0f0f0;
 95 | }
 96 | 
 97 | #codecola ccfieldset {
 98 |     display: block;
 99 | }
100 | 
101 | #codecola input,
102 | #codecola input:focus,
103 | #codecola select,
104 | #codecola textarea,
105 | #codecola textarea:focus {
106 |     border-radius: 0;
107 |     -webkit-box-shadow: none;
108 |     -moz-box-shadow: none;
109 |     box-shadow: none;
110 |     color: #000;
111 | }
112 | 
113 | #codecola button {
114 |     padding: 0 5px;
115 | }
116 | 
117 | #codecola textarea {
118 |     -webkit-box-sizing: content-box;
119 |     -moz-box-sizing: content-box;
120 |     box-sizing: content-box;
121 | }
122 | 
123 | #codecola ul,
124 | #codecola ol,
125 | #codecola li {
126 |     list-style: none;
127 | }
128 | 
129 | #codecola {
130 |     padding: 0 5px 5px 6px;
131 |     position: fixed;
132 |     right: 5px;
133 |     text-align: left;
134 |     top: 5px;
135 |     width: 300px;
136 |     color: #fff;
137 |     -webkit-transition: opacity .2s;
138 |     -moz-transition: opacity .2s;
139 |     transition: opacity .2s;
140 | }
141 | 
142 | #codecola.cc-fade {
143 |     opacity: .7;
144 | }
145 | 
146 | ol#codecola-selectors {
147 |     border-width: 4px;
148 |     color: #ccc;
149 |     opacity: 0;
150 |     position: fixed;
151 |     top: -2000px;
152 |     -webkit-transition: opacity .3s ease-out;
153 |     -moz-transition: opacity .3s ease-out;
154 |     transition: opacity .3s ease-out;
155 |     min-width: 150px;
156 |     padding: 5px 10px;
157 | }
158 | 
159 | #codecola-selectors .tag-selector,
160 | #codecola-selectors .class-selector {
161 |     border-bottom: 1px solid #111;
162 |     padding: 2px 0;
163 |     cursor: pointer;
164 |     -webkit-transition: padding 0.2s ease-out;
165 |     -moz-transition: padding 0.2s ease-out;
166 |     transition: padding 0.2s ease-out;
167 | }
168 | 
169 | #codecola-selectors .tag-selector:hover,
170 | #codecola-selectors .class-selector:hover {
171 |     color: #fff;
172 |     background-color: #333;
173 |     padding-left: 5px;
174 | }
175 | 
176 | #codecola-selectors li:last-child {
177 |     border: none;
178 | }
179 | 
180 | #codecola #codecola-current-info {
181 |     color: #d9d9d9;
182 |     padding-bottom: 2px;
183 | }
184 | 
185 | #codecola #codecola-current-node {
186 |     white-space: nowrap;
187 |     overflow: hidden;
188 |     text-overflow: ellipsis;
189 |     max-width: 62px;
190 |     display: inline-block;
191 | }
192 | 
193 | #codecola #codecola-open-all {
194 |     background-color: #3B3B3B;
195 |     border: 1px solid #000;
196 |     cursor: pointer;
197 |     display: inline-block;
198 |     float: right;
199 |     height: 18px;
200 |     overflow: hidden;
201 |     position: relative;
202 |     width: 40px;
203 |     top: -2px;
204 |     right: 0;
205 | }
206 | 
207 | #codecola #codecola-open-all ccu,
208 | #codecola #codecola-open-all ccb {
209 |     display: inline-block;
210 |     height: 18px;
211 |     position: absolute;
212 | }
213 | 
214 | #codecola #codecola-open-all ccu {
215 |     background-color: #595959;
216 |     border: 1px solid #1D1D1D;
217 |     border-width: 0 1px;
218 |     width: 20px;
219 |     -webkit-transition: left .2s ease-out;
220 |     -moz-transition: left .2s ease-out;
221 |     transition: left .2s ease-out;
222 |     left: -1px;
223 | }
224 | 
225 | #codecola #codecola-open-all ccb {
226 |     background-color: #4169af;
227 |     top: 0;
228 |     left: 0;
229 |     width: 20px;
230 | }
231 | 
232 | #codecola.codecola-allOpen #codecola-open-all ccu {
233 |     left: 19px;
234 | }
235 | 
236 | #codecola ul {
237 |     padding-right: 5px;
238 |     margin-top: 2px;
239 |     max-height: 510px;
240 |     overflow-y: auto;
241 |     overflow-x: hidden;
242 | }
243 | 
244 | #codecola ul::-webkit-scrollbar {
245 |     width: 10px;
246 |     height: 10px;
247 | }
248 | 
249 | #codecola ul::-webkit-scrollbar-track-piece {
250 |     background-color: #000;
251 | }
252 | 
253 | #codecola ul::-webkit-scrollbar-thumb {
254 |     background-color: #292929;
255 |     border: 1px solid #000;
256 | }
257 | 
258 | #codecola ul.cc-close {
259 |     padding: 0 5px 0;
260 |     max-height: 0;
261 | }
262 | 
263 | #codecola .codecola-item .codecola-item-title{
264 |     position: relative;
265 |     margin: 0;
266 |     color: #888;
267 |     padding-top: 8px;
268 |     overflow: hidden;
269 | }
270 | 
271 | #codecola .codecola-item .codecola-item-title:hover{
272 |     color: #ccc;
273 | }
274 | 
275 | #codecola .codecola-item .codecola-item-title::before{
276 |     font-family: "FontAwesome";
277 |     content: "\f0da";
278 |     display: inline-block;
279 |     width: 10px;
280 | }
281 | 
282 | #codecola .codecola-item-open .codecola-item-title::before {
283 |     content: "\f0d7";
284 | }
285 | 
286 | #codecola .codecola-item .codecola-item-title label {
287 |     font-size: 14px;
288 | }
289 | 
290 | #codecola cccode {
291 |     color: #fff;
292 | }
293 | 
294 | #codecola .codecola-editorWrap,
295 | #codecola #codecola-styles{
296 |     border: 1px solid #000;
297 |     border-color: #000 rgba(0,0,0,.25) rgba(0,0,0,.25) #000;
298 |     margin: 0 1px 0 0;
299 |     padding: 0 10px;
300 |     height: 0;
301 |     -webkit-transition: all .1s ease-out;
302 |     -moz-transition: all .1s ease-out;
303 |     transition: all .1s ease-out;
304 |     overflow: hidden;
305 |     position: relative; /*mac os chrome overflow hidden bug*/
306 | }
307 | 
308 | #codecola .codecola-editorWrap {
309 |     background-color: #474747;
310 | }
311 | 
312 | #codecola .codecola-disable .codecola-editorWrap::after{
313 |     content: '\20';
314 |     background-color: rgba(0,0,0,.25);
315 |     position: absolute;
316 |     top: 0;
317 |     left: 0;
318 |     right: 0;
319 |     bottom: 0;
320 | }
321 | 
322 | #codecola #codecola-styles{
323 |     padding: 0 5px;
324 |     display: block;
325 |     width: 100%;
326 |     -webkit-box-sizing: border-box;
327 |     resize: none;
328 |     border-color: #282828;
329 | }
330 | 
331 | #codecola .codecola-item{
332 |     display: none;
333 | }
334 | 
335 | #codecola .codecola-item-open .codecola-editorWrap {
336 |     height: auto;
337 |     padding: 10px;
338 |     border-color: #000;
339 | }
340 | 
341 | #codecola #codecola-styles.cc-open{
342 |     height: 100px;
343 |     padding: 5px;
344 |     border: 1px solid #000;
345 | }
346 | 
347 | #codecola input {
348 |     vertical-align: middle;
349 | }
350 | 
351 | #codecola input[type="range"] {
352 |     width: 128px;
353 |     color: #fff;
354 | }
355 | 
356 | #codecola input[type="file"] {
357 |     width: 205px;
358 | }
359 | 
360 | #codecola input[type="text"]:disabled,
361 | #codecola input[type="number"]:disabled {
362 |     color: #F5F4EA;
363 |     background-color: #ccc;
364 |     border-color: #222;
365 | }
366 | 
367 | #codecola input[type="checkbox"],
368 | #codecola input[type="radio"] {
369 |     vertical-align: text-bottom;
370 | }
371 | 
372 | #codecola input[type="text"],
373 | #codecola input[type="number"],
374 | #codecola .codecola-degree-input {
375 |     border: 1px solid #000;
376 |     -webkit-box-shadow: 1px 1px 0 #555;
377 |     -moz-box-shadow: 1px 1px 0 #555;
378 |     box-shadow: 1px 1px 0 #555;
379 |     padding: 0;
380 | }
381 | 
382 | #codecola option:nth-child(2n+1) {
383 |     background-color: #eee;
384 | }
385 | 
386 | #codecola ccfieldset .codecola-color-editorWrap {
387 |     padding-left: 48px;
388 |     width: 192px;
389 |     margin-top: -20px;
390 | }
391 | 
392 | /*TODO*/
393 | #codecola #codecola-item-webkitBoxReflect ccfieldset .codecola-color-editorWrap {
394 |     padding-left: 0;
395 |     width: auto;
396 |     margin-top: 0;
397 | }
398 | 
399 | #codecola-webkitBoxReflectGradient {
400 |     margin-top: 30px;
401 | }
402 | 
403 | #codecola .codecola-hsb-current {
404 |     overflow: hidden;
405 | }
406 | 
407 | #codecola .codecola-hsb-current label {
408 |     float: left;
409 |     margin-top: 2px;
410 | }
411 | 
412 | #codecola .codecola-hsb {
413 |     margin: 5px 0;
414 | }
415 | 
416 | #codecola .codecola-hsb-range input {
417 |     width: 194px;
418 | }
419 | 
420 | #codecola .codecola-hsb-current input,
421 | #codecola .codecola-currentStyle,
422 | #codecola .codecola-degree-input,
423 | #codecola .codecola-color-picker .codecola-color-current input {
424 |     width: 42px;
425 |     height: 15px;
426 |     background-color: #7f7f7f;
427 | }
428 | 
429 | #codecola .codecola-hsb-current input {
430 |     float: right;
431 |     margin-right: 2px;
432 | }
433 | 
434 | #codecola .codecola-currentStyle,
435 | #codecola .codecola-color-picker .codecola-color-current input {
436 |     margin-left: 5px;
437 |     line-height: 15px;
438 | }
439 | 
440 | #codecola .codecola-color-picker input[type="range"] {
441 |     width: 100%;
442 | }
443 | 
444 | #codecola .codecola-hsb-img {
445 |     height: 5px;
446 |     margin-top: 3px;
447 |     background-image: url(data:image/jpeg;base64,/9j/4QAYRXhpZgAASUkqAAgAAAAAAAAAAAAAAP/sABFEdWNreQABAAQAAABkAAD/4QMhaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wLwA8P3hwYWNrZXQgYmVnaW49Iu+7vyIgaWQ9Ilc1TTBNcENlaGlIenJlU3pOVGN6a2M5ZCI/PiA8eDp4bXBtZXRhIHhtbG5zOng9ImFkb2JlOm5zOm1ldGEvIiB4OnhtcHRrPSJBZG9iZSBYTVAgQ29yZSA1LjAtYzA2MCA2MS4xMzQzNDIsIDIwMTAvMDEvMTAtMTg6MDY6NDMgICAgICAgICI+IDxyZGY6UkRGIHhtbG5zOnJkZj0iaHR0cDovL3d3dy53My5vcmcvMTk5OS8wMi8yMi1yZGYtc3ludGF4LW5zIyI+IDxyZGY6RGVzY3JpcHRpb24gcmRmOmFib3V0PSIiIHhtbG5zOnhtcD0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wLyIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bXA6Q3JlYXRvclRvb2w9IkFkb2JlIFBob3Rvc2hvcCBDUzUiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6QzQyNjg2NzVDMzJGMTFERkI3QTJEQUIwNjk1RUVGRTYiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6QzQyNjg2NzZDMzJGMTFERkI3QTJEQUIwNjk1RUVGRTYiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDpDNDI2ODY3M0MzMkYxMURGQjdBMkRBQjA2OTVFRUZFNiIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDpDNDI2ODY3NEMzMkYxMURGQjdBMkRBQjA2OTVFRUZFNiIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/Pv/uAA5BZG9iZQBkwAAAAAH/2wCEAAEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQECAgICAgICAgICAgMDAwMDAwMDAwMBAQEBAQEBAgEBAgICAQICAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDA//AABEIAA8AwAMBEQACEQEDEQH/xACmAAEBAQEBAAAAAAAAAAAAAAAFBgcDBAEAAgMBAQEBAAAAAAAAAAAABAcCAwYFCAkKEAAAAwYEBAMEBwkAAAAAAAADBAYBEQISBQcAMRQIQVETCSFxUoEiRnfBcpIzRZZHMlNElBYXl0h4EQAAAQcHCQcDAwUAAAAAAAACAAERAwQFBsESFBUWBwghQYFSkhNDFwlxkTOjpNYYMSIZooSFoSODJNX/2gAMAwEAAhEDEQA/AATSFrgKmr9SFvsqwSp6u1Y8BQmE1HEUo4BqoGBwqSWigUbS8RenBiMBgbAEHA2GBksMLHMZ5xiq5iPH69Wp4O6Onu7mZoaFiwClWZpmqQjGIQVYZjerNNVmOYJkBCZBjICY2Q30whDGzcC44BckIPC4SDXk+3W52NjaHitG7DL29ezMytStbV0+HlqzetSwAl6yevXDnrDzlqwSRn0+gVKnUWTXrM9WpHTasnVvfdm/qiG8/bhVvPDDe22J3F7cSs6dULdk7nwEuS9MWlzL1TQrj4TZk6g3bk7nGAtpoF6bdUaTXpqkVmVz9WUE97z6qdN5+3C+eeDi/NsTuL9YvZ06oHlI/wAJLx6X2QK9U0K6xwMydRYwZO52ALbKBvDsLRZNfYFB1qR02rKkPfdm/q23N5+3C8eeA3EW2J3GJCOmdOqre2TuiUJLl6RExPVNCgp2sydRYyZO5mAVHUt8u3A3N0dsdtiL3u6RSltd5SWpCxxWfADiRZ/FxNR6s7Vb49znJYPiEIkfCaA7QMqfpMWqMncIBQNS3gWFNzdGyaJIvy6RIu1z+Uluwsd1nwPYgGfxcRscLO1W9/chyVT4w93rvhNAeTayp1FoMnc3AKDqO5yzJqbooNNkXvd0qeI13lIjAsdxnwdX3s/i4gYzH2qnr7gOStfGCfEU+E0CNn4yp1Fx8nc+QFA1G+9rjc3RKU8i/LpU2oNc/J0ieCx3GfCve6z+LfrFqztVPT/uHJUvjppYvnwmgXtxYyp+kxcuyd0SAIQK9ltAfvDJYV3qpdV4edFixuXLcReA6UU292I2tGuqeOXaeoyxp+kvjiX+FfjG5v8AO0e7DEkFuCtOD94BTxXeqlVP6U5FhuOWFXm6UU2N3m1o11bXl2moZVH6P2PNf4V+scm/cNHu8xIhbl7Mgu6lJpAuX7VJqP0pSLDacsQOZ1IpryWNaNdWuy95hlWfoy9QNf4V/MeG/cr/AHiYkQt1tjAfvEzQBXeqkH+HmjIsNxy32XculFNdTG1o11Z8u0xjKo/RM6ii/wAK/wBj437pf70MUmotytmav1NEHTqHNMxmko1YbJ5dFMFMvZhpO3FhciwIpMEOVejWAry97qEWmcnRU6iLCikX3x01I12tZl2oyEWDqK4iHq8+iu7VaJM92koSubI/J3RhKZezG+duOXDiwIpN10NL0awFEriETecvSDx7sKN/eXFjUjXbA5dqKRFhCiJlavPot3i7okz3aRP3EbI/l0VGUyxvXb1GsKLAik3KwevRrAZJYbETccnSzxusKN/E7+aka7czZdqIRFg6itEpav1NF3HbxUOZsTtIm7ttk8ujckpl7Mb129U/BkwIpOHuBF6NYDDl74TETdcnTjxhsKKQN4NSNd4MGXafIiIIWaVJGXUdy29B1zn9VM3g8fOe5w2eL2rquYKlyZmHiAlfYBhkhIxOVw4GMUzum0mGztiNd5OnLtPAZWpBFHCLtR3AbqnXZ9VM3X8Xc5lyNjNtXVIwaLUzLhoIV9itjkhUxOtw4UsQzvm0m7FgbEa7zcRk7S4ZWZAKnEZdRvVuEdc5/VTNz/HzmUw2M41dTXB+uTMuTg1X2K2WSGDE6HDcTfO7ptJuJcLYjXesN5doAytSCrSJGXUbqFedlz6qZuN4u5zVEbGba+pFhKXJmXQwkr7FSiSGzE63BAd47um0nC/CLYjXe8KGTtMQy9Q67Q8b3bn1WF9VMXFa77JyHC3fePPDI8k0S76HmROopBk2XGAt8oh2Oj/TCRBAv5iD5XaQo6xRsb5d2SyC+qlrl+H2alDhPvvFncS8k0Ryu1kTqKB5Nl2gLtKIaj4/0wfwML+Zg2V2EMOp0lG928VchfVSl0Gu+zWIcKB936XWvJNEbAMidRnacmyzALtKIXvBP9MG8Bi/m4LldhIoyspwdbo4Mvu8W6hGEVSegBTRpMXLAKKAWKrk2B0M0OerQhEAvVomsLxxjQRAwwiNbGxsLGswuGeMIWe0QsKtgipqOtG2qTBUGZ20wVxzrQoUiEc4QGCsP9hziMcJjCSIyElib54bjxRcvFy9rwkwTDrGCF3qIb3UPiEFq91AMwrzieSlUzO0DSsWsJktStWzjAvGNUYKoYVhwnNiFybv91inXMuHTUHtX20V63lPXSuIoNQ11QpQGu11GFFBUC6XrNaBM7j6KYBq1UoYYA5mEQiTjhGjiZEAC14cPoY83Ogvzxg33DnaEyECXvL3ZInavabtYD5yqNHN4f8AS4mIH3GeZ/QigVpw6RonyE4Xu73PYnava3tfDyfKoUc13P8A2LEyxWeiZ93+kiwWi4dN0b2Qmy91O4tE7V7atsofOWvI5vH5/CYger8+5/SRYLYcOstG/kJwvczfdE7V7edtYfOWto5vD55CYrPVWej/AKCKBb7h1xopMhOF7ibx4nauxG3IPJ8tYRzXc/1lEyxWepc9F8siwczOHXuilSE2XXe5+J2rstt4D5y1VHN8f8sicMQPUOeh+WRYObXDtHopkhOF1nfiJ2rtLt+D5y1JHN8v1ME44rPZzPQvKIsHOjh2o0U6Qmy6qujE7V20sIHk+U+jmu9Xx+Jlis9l89A8kigc9uHa3RWEhOF1EqonatB2LD5ynEc3x/OYnDED2Sz1d5JFg+QnDtnorKQnC9aiidq0lZEPnKZRzfL4mE44rPY7PVnkEWD5JcO3GitJCbL1FNRO1dAsuHk+UZHNd6vxoTLED2Jz1V5BFA+UHDt7oraQnS5m2MTtWQs8Hk+WNHNd6v40TLFZ7C56p9ORYPlbw+YWiuJCcL/2Kidq2WkD5y/0c3y/ecMQPYDPU/piKB8u+HzI0V1ITZcvtjidqz1qw+csCOb4fyYnHFZ+XeepfTEWD5k8PmboryQnC9O2eRO1ddtiHk+UFHNd6vwYTLFZ+W2eo/SkWD5r8Pmlor6QnC9G2KxO1astwHzlLI5vl8NCcMQPyyz1D6QigfOXh82NFoJCcLp7t2xO1a7t8HzlJo5vh+TROOKz8rc9QekIsHzz4fN3RaKQmy6V7YsTtXcpCB5PlII5rufwCJliB+VGez3oyLB+QHh849FpJCbLo3tPRO1d2EUHzlpqObx+WgmKz8o89nPREWD8h/D50aLSyE4XQvZ3idq7zpEPnLSkc3h8qBMVn5P57NeiIoH5HeHzt0WnkJwvbzsoRO1d9kuHk+WkI5ruf6NiZYgfk1nsx6Eiwfkr4fPPRamQmy9tOxRE7V7hU6HzloqObx+R4mKz8lc9l/QEWD8nPD58aLVyF0rVtuyGST9cPWv3AUer3WJUeqG7Z0YGipUMSrXCLERxkXTAxS9kqYYDjPqSAsEyIM2WjhbG+EUNro2XsPJ+nKats1WW9But1Qt7vZxt3u5n37yciZN+6ciblQXJin8jtlXnbbnbYir2isKdaeg0HcjpdM3/APr0Tcbykb/+zuZ+8+ycX//Z);
448 |     background-repeat: no-repeat;
449 | }
450 | 
451 | #codecola .codecola-hsbH .codecola-hsb-img {
452 |     background-position: 0 0;
453 | }
454 | 
455 | #codecola .codecola-hsbS .codecola-hsb-img {
456 |     background-position: 0 -5px;
457 | }
458 | 
459 | #codecola .codecola-hsbB .codecola-hsb-img {
460 |     background-position: 0 -10px;
461 | }
462 | 
463 | #codecola .codecola-editor-multi ccfieldset {
464 |     border-bottom: 1px solid #000;
465 |     border-top: 1px solid #555;
466 |     padding: 10px 0;
467 |     position: relative;
468 | }
469 | 
470 | #codecola .codecola-editor-multi ccfieldset:last-child {
471 |     border-bottom: none;
472 | }
473 | 
474 | #codecola .codecola-editor-multi ccfieldset:first-child {
475 |     border-top: none;
476 | }
477 | 
478 | #codecola .codecola-editor-multi ccfieldset cclegend {
479 |     position: absolute;
480 |     top: 10px;
481 |     right: 0;
482 |     color: #ddd;
483 |     background-color: #111;
484 |     border-radius: 4px;
485 |     padding: 1px 5px;
486 | }
487 | 
488 | #codecola ccfieldset ol label:first-child,
489 | #codecola .codecola-color-picker label {
490 |     display: inline-block;
491 |     width: 48px;
492 |     margin-bottom: 5px;
493 |     font-size: 11px;
494 |     -webkit-text-size-adjust: none;
495 | }
496 | 
497 | #codecola .codecola-color-picker .codecola-color-current label {
498 |     width: auto;
499 |     margin: 0;
500 | }
501 | 
502 | #codecola ccfieldset li {
503 |     margin: 2px 0;
504 | }
505 | 
506 | #codecola #codecola-item-fontOther .codecola-editorWrap label,
507 | #codecola #codecola-item-textAlign .codecola-editorWrap label {
508 |     margin-right: 10px;
509 | }
510 | 
511 | #codecola-option:after,
512 | codecola-current-info:after {
513 |     content: ".";
514 |     display: block;
515 |     height: 0;
516 |     clear: both;
517 |     visibility: hidden;
518 | }
519 | 
520 | #codecola-fold {
521 |     cursor: pointer;
522 |     float: right;
523 |     height: 20px;
524 |     width: 20px;
525 |     position: relative;
526 |     top: -5px;
527 |     right: 0;
528 | }
529 | 
530 | #codecola-fold ccs,
531 | #codecola-fold ccb {
532 |     border: 1px solid #888;
533 |     border-width: 2px 1px 1px;
534 |     background-color: #292929;
535 |     display: inline-block;
536 |     height: 5px;
537 |     width: 8px;
538 |     top: 5px;
539 |     left: 6px;
540 |     position: absolute;
541 | }
542 | 
543 | #codecola-fold ccb {
544 |     top: 8px;
545 |     left: 4px;
546 | }
547 | 
548 | #codecola-fold.cc-close ccb {
549 |     display: none;
550 | }
551 | 
552 | #codecola-fold.cc-close ccs {
553 |     top: 9px;
554 |     border-width: 2px 0 0;
555 |     left: 5px;
556 |     width: 10px;
557 | }
558 | 
559 | #codecola-fold:hover ccs,
560 | #codecola-fold:hover ccb {
561 |     border-color: #ccc;
562 | }
563 | 
564 | #codecola-show-about{
565 |     float: right;
566 |     margin: -5px 0 0 2px;
567 | }
568 | #codecola-show-about::after {
569 |     content: "\f05a";
570 | }
571 | 
572 | #codecola-drag {
573 |     overflow: hidden;
574 |     height: 10px;
575 |     cursor: move;
576 |     margin: 6px 5px 10px 0;
577 |     background: -webkit-linear-gradient(90deg,rgba(0,0,0,0) 50%,#888 50%) repeat 0 0;
578 |     background-size: 2px 2px;
579 | }
580 | 
581 | .codecola-opt-button {
582 |     border: 1px solid #292929;
583 |     float: right;
584 |     top: -2px;
585 |     position: relative;
586 |     margin-right: 2px;
587 |     cursor: pointer;
588 |     -webkit-user-select: none;
589 |     -moz-user-select: none;
590 | }
591 | 
592 | #codecola-getStyles,
593 | #codecola-getHTML {
594 |     font: bold 12px/18px arial !important;
595 |     letter-spacing: 1px;
596 | }
597 | 
598 | #codecola-switch::after{
599 |     content: "\f002";
600 | }
601 | 
602 | #codecola-share::after{
603 |     content: "\f045";
604 | }
605 | 
606 | #codecola-getNote::after{
607 |     content: "\f0f6";
608 | }
609 | 
610 | #codecola-save::after{
611 |     content: "\f0c7";
612 | }
613 | 
614 | #codecola .codecola-opt-button.cc-open,
615 | #codecola .codecola-opt-button:active {
616 |     border-color: #000;
617 |     background-color: #666;
618 |     color: #ccc;
619 | }
620 | 
621 | #codecola .codecola-opt-button.cc-open:hover {
622 |     background-color: #777;
623 | }
624 | 
625 | #codecola .codecola-item .codecola-icon {
626 |     float: right;
627 | }
628 | 
629 | #codecola .codecola-compatibility::after{
630 |     content: "\f0ac";
631 | }
632 | 
633 | #codecola .codecola-cancel::after{
634 |     content: "\f0e2";
635 | }
636 | 
637 | #codecola .codecola-eye::after{
638 |     content: "\f06e";
639 | }
640 | 
641 | #codecola .codecola-eye.cc-close::after{
642 |     content: "\f070";
643 | }
644 | 
645 | #codecola .codecola-degree-wrap,
646 | #codecola-textShadowDegree,
647 | #codecola-boxShadowDegree{
648 |     color: #fff;
649 |     display:inline-block;
650 | }
651 | 
652 | #codecola-getHTML-wrap,
653 | #codecola-save-wrap,
654 | #codecola-about-wrap,
655 | #codecola-finder-wrap {
656 |     display: none;
657 |     padding: 25px 5px 5px;
658 |     position: fixed;
659 |     color: #fff;
660 |     z-index: 2147483647;
661 | }
662 | 
663 | #codecola-save-wrap,
664 | #codecola-finder-wrap,
665 | #codecola-about-wrap {
666 |     width: 300px;
667 |     left: 50%;
668 |     top: 50%;
669 |     margin-left: -150px;
670 |     margin-top: -100px;
671 | }
672 | 
673 | #codecola-save-wrap.loadding,
674 | #codecola-finder-wrap.cc-open,
675 | #codecola-about-wrap.cc-open {
676 |     -webkit-animation: popIn 0.5s;
677 |     -moz-animation: popIn 0.5s;
678 |     display: block;
679 | }
680 | 
681 | .codecola-pop-title {
682 |     position: absolute;
683 |     left: 5px;
684 |     top: 5px;
685 |     color: #888;
686 | }
687 | 
688 | .codecola-pop-close {
689 |     position: absolute;
690 |     right: 1px;
691 |     top: 1px;
692 | }
693 | 
694 | .codecola-pop-close::before {
695 |     content: "\f00d";
696 | }
697 | 
698 | #codecola-getHTML-wrap.loadding {
699 |     display: block;
700 |     top: 5px;
701 |     left: 5px;
702 | }
703 | 
704 | #codecola-getHTML-wrap.cc-open {
705 |     right: 5px;
706 |     bottom: 5px;
707 | }
708 | 
709 | #codecola-getHTML-content,
710 | #codecola-save-content,
711 | #codecola-finder-content {
712 |     width: 100%;
713 |     height: 100%;
714 |     padding: 0;
715 |     background-color: #555;
716 |     border: 1px solid black;
717 |     resize: none;
718 | }
719 | 
720 | #codecola-show-currentNode {
721 |     color: #888;
722 |     padding: 0 1px;
723 |     cursor: help;
724 |     border-bottom: 1px dotted #888;
725 | }
726 | 
727 | #codecola-show-currentNode:hover {
728 |     color: #fff;
729 |     border-color: #fff;
730 | }
731 | 
732 | #codecola-about-wrap {
733 |     width: 420px;
734 |     height: 150px;
735 |     margin-left: -220px;
736 |     margin-top: -150px;
737 | }
738 | 
739 | #codecola-about-wrap .codecola-about-global {
740 |     height: 100px;
741 |     padding: 5px 10px;
742 |     background: url(128.png) no-repeat 10px 10px #474747;
743 |     background-image: url(chrome-extension://__MSG_@@extension_id__/128.png);
744 |     background-size: 60px;
745 |     position: relative;
746 | }
747 | 
748 | #codecola-about-wrap .codecola-about-version {
749 |     color: #ccc;
750 |     padding-left: 80px;
751 |     margin-top: -5px;
752 | }
753 | 
754 | #codecola-about-wrap .codecola-about-author {
755 |     font-size: 10px;
756 |     -webkit-text-size-adjust: none;
757 | }
758 | 
759 | #codecola-about-wrap .codecola-about-name {
760 |     font-size: 30px;
761 |     line-height: 1.2;
762 |     padding-top: 6px;
763 |     padding-left: 75px;
764 |     font-family: georgia;
765 |     background: none;
766 | }
767 | 
768 | #codecola-about-wrap .codecola-about-detail {
769 |     color: #888;
770 | }
771 | 
772 | #codecola-about-wrap .codecola-about-doc {
773 |     margin: 3px 0;
774 | }
775 | 
776 | #codecola-about-wrap .codecola-about-content a {
777 |     color: #ccc;
778 |     background: none;
779 |     text-decoration: underline;
780 | }
781 | 
782 | #codecola-about-wrap .codecola-about-author a {
783 |     color: #888;
784 | }
785 | 
786 | #codecola-about-wrap .codecola-about-wrap a:hover {
787 |     color: #fff;
788 | }
789 | 
790 | #codecola-mask {
791 |     position: fixed;
792 |     z-index: 2147483645;
793 |     left: -100px;
794 |     background-color: rgba(42, 134, 219, 0.42);
795 |     pointer-events: none;
796 | }
797 | 
798 | #codecola .codecola-color-transparent{
799 |     vertical-align: middle;
800 | }
801 | 
802 | .codecola-selecting{
803 |     outline: 2px solid rgba(42, 134, 219, 0.42);
804 | }


--------------------------------------------------------------------------------
/code-cola-widget/src/gradient/codecola-gradient.js:
--------------------------------------------------------------------------------
  1 | /*
  2 | Copyright (c) 2013, ZHOUQICF.COM. All rights reserved.
  3 | Code licensed under the MIT License:
  4 | version: 1.0.0
  5 | */
  6 | /**
  7 |  * a gradient control for css3 property
  8 |  * @module codecola-gradient
  9 |  */
 10 | YUI().add('codecola-gradient', function(Y) {
 11 |     /**
 12 |      * a gradient control for css3 property
 13 |      * @param config {Object} Object literal specifying codecolaGradient configuration properties.
 14 |      * @class codecolaGradient
 15 |      * @constructor
 16 |      * @namespace Y
 17 |      * @extends Widget
 18 |      * @requires codecola-color node widget ua codecola-gradient-css
 19 |      */
 20 |     Y.codecolaGradient = Y.Base.create('codecola-gradient', Y.Widget, [], {
 21 |         initializer: function() {
 22 |         },
 23 | 
 24 |         renderUI: function() {
 25 |             var random = (new Date).getTime(),
 26 |                 ids = {
 27 |                     panel: "codecola-gradient-panel-" + random,
 28 |                     panelWrap: "codecola-gradient-panel-wrap-" + random,
 29 |                     stops: "codecola-gradient-stops-" + random,
 30 |                     color: "codecola-gradient-color-" + random,
 31 |                     location: "codecola-gradient-location-" + random,
 32 |                     button: "codecola-gradient-stop-delete-button-" + random,
 33 |                     orientation: "codecola-gradient-orientation-" + random,
 34 |                     stopDetail: "codecola-gradient-stop-detail-" + random
 35 |                 };
 36 | 
 37 |             var html = '<div class="codecola-gradient-wrap">'+
 38 |                         '   <div class="codecola-gradient-panel-wrap" id="' + ids.panelWrap + '">'+
 39 |                         '       <div class="codecola-gradient-panel" id="' + ids.panel + '"></div>'+
 40 |                         '   </div>' +
 41 |                         '   <div class="codecola-gradient-stops" id="' + ids.stops + '"></div>' +
 42 |                         '   <div class="codecola-gradient-orientation-wrap">' +
 43 |                         '       <label class="codecola-gradient-label" for="' + ids.orientation + '">Degree:</label>' +
 44 |                         '	    <div class="codecola-gradient-orientation" id="' + ids.orientation + '"></div>' +
 45 |                         '   </div>' +
 46 |                         '   <div class="codecola-gradient-stop-detail" id="' + ids.stopDetail + '">' +
 47 |                         '	    <div class="codecola-gradient-color-wrap">' +
 48 |                         '		    <label class="codecola-gradient-label">Color:</label>' +
 49 |                         '		    <div class="codecola-gradient-color" id="' + ids.color + '"></div>' +
 50 |                         '	    </div>' +
 51 |                         '	    <div class="codecola-gradient-location-wrap">' +
 52 |                         '		    <label for="' + ids.location + '" class="codecola-gradient-label">Location:</label>' +
 53 |                         '		    <input type="number" class="codecola-gradient-location" id="' + ids.location + '" step="1" min="0" max="100"> %' +
 54 |                         '	    </div>' +
 55 |                         '	    <div class="codecola-gradient-stop-delete">' +
 56 |                         '		    <button class="codecola-gradient-stop-delete-button" id="' + ids.button + '">delete</button>' +
 57 |                         '	    </div>' +
 58 |                         '   </div>'+
 59 |                         '</div>';
 60 | 
 61 |             //create nodes
 62 |             var that = this;
 63 |             Y.one(that.get('wrap')).append(Y.Node.create(html));
 64 | 
 65 |             that.vars = {
 66 |                 panel: Y.one('#'+ids.panel),
 67 |                 panelWrap: Y.one('#'+ids.panelWrap),
 68 |                 stops: Y.one('#'+ids.stops),
 69 |                 color: Y.one('#'+ids.color),
 70 |                 location: Y.one('#'+ids.location),
 71 |                 button: Y.one('#'+ids.button),
 72 |                 orientation: Y.one('#'+ids.orientation),
 73 |                 stopDetail: Y.one('#'+ids.stopDetail),
 74 |                 id: 0,
 75 |                 colorControl: null,
 76 |                 degreeControl: null,
 77 |                 currentStop: null,
 78 |                 disable: false,
 79 |                 rule: {
 80 |                     type: "",
 81 |                     orientation: "",
 82 |                     stops: []
 83 |                 }
 84 |             };
 85 | 
 86 |             that.vars.panelWrap.setStyle("width", that.get('panelWidth'));
 87 |             that.vars.stops.setStyle("width", that.get('panelWidth'));
 88 | 
 89 |             that.vars.degreeControl = new Y.codecolaDegree({
 90 |                 wrap: '#'+ids.orientation,
 91 |                 onChange: function(degree) {
 92 |                     if (that.vars.disable) {
 93 |                         return;
 94 |                     }
 95 |                     that.vars.rule.orientation = degree;
 96 |                     that._initPanel()._fireCallback();
 97 |                 }
 98 |             });
 99 |             that.vars.degreeControl.render();
100 |             that.vars.colorControl = new Y.codecolaColor({
101 |                 wrap: '#'+ids.color,
102 |                 onChange: function(color) {
103 |                     var cStop = that.vars.currentStop;
104 |                     if (!cStop || that.vars.disable) {
105 |                         return;
106 |                     }
107 |                     that.vars.rule.stops[cStop.getAttribute("index")].color = color;
108 |                     cStop.setStyle("backgroundColor", color);
109 |                     that._initPanel()._fireCallback();
110 |                 }
111 |             });
112 |             that.vars.colorControl.render();
113 |             return that;
114 |         },
115 | 
116 |         bindUI: function() {
117 |             var that = this,
118 |                 vars = that.vars,
119 |                 rule = vars.rule;
120 |             vars.stops.on("click", function(e) {
121 |                 if (e.target.get('nodeName') == "I" || vars.disable) {
122 |                     return;
123 |                 }
124 |                 var s = {
125 |                     "color": vars.colorControl.getColor(),
126 |                     "position": that._getFloatLeft(e.clientX - vars.panel.getX() - 5)
127 |                 };
128 |                 that.vars.rule.stops.push(s);
129 |                 that._addStops([s], that.vars.rule.stops.length - 1)._initPanel()._fireCallback();
130 |             });
131 |             vars.location.on("change", function(e) {
132 |                 var cStop = vars.currentStop;
133 |                 if (!cStop) {
134 |                     return;
135 |                 }
136 |                 var left = this.get('value');
137 |                 left = that._percentToFloat(left + "%");
138 |                 rule.stops[cStop.getAttribute("index")].position = left;
139 |                 cStop.setStyle("left", that._getPixLeft(left));
140 |                 that._initPanel()._fireCallback();
141 |             });
142 |             vars.button.on("click", function(e) {
143 |                 var cStop = vars.currentStop;
144 |                 //that.vars.stops.getElementsByTagName("i").length <= 2
145 |                 if (!cStop) {
146 |                     return;
147 |                 }
148 |                 delete rule.stops[cStop.getAttribute("index")];
149 |                 vars.stops.removeChild(cStop);
150 |                 vars.colorControl.disable();
151 |                 vars.degreeControl.disable();
152 |                 vars.location.set('disabled', true);
153 |                 vars.button.set('disabled', true);
154 |                 that._initPanel()._fireCallback();
155 |             });
156 | 
157 |             return that;
158 |         },
159 | 
160 |         syncUI: function() {
161 |             this._initRule()._initControls();
162 |             return this;
163 |         },
164 | 
165 |         renderer: function() {
166 |             this.renderUI().bindUI().syncUI().get('onInit')();
167 |             return this;
168 |         },
169 | 
170 |         _transformDegree: function(orientation){
171 |             var rule = this.vars.rule;
172 |             if(orientation.indexOf('%') !== -1){
173 |                 orientation = orientation.replace(/%/g, '').split(",");
174 |                 orientation[1] = orientation[1].split(' ');
175 |                 orientation[2] = orientation[2].split(' ');
176 |                 rule.orientation = - Math.ceil(Math.atan2(orientation[2][1] - orientation[1][1], orientation[2][0] - orientation[1][0]) * (360 / (2 * Math.PI)));
177 |             }else{
178 |                 switch(orientation){
179 |                     case 'left':
180 |                         rule.orientation = '0';
181 |                         break;
182 |                     case 'top':
183 |                         rule.orientation = '-90';
184 |                         break;
185 |                     case 'bottom':
186 |                         rule.orientation = '90';
187 |                         break;
188 |                     case 'right':
189 |                         rule.orientation = '180';
190 |                         break;
191 |                     case 'top left':
192 |                         rule.orientation = '-45';
193 |                         break;
194 |                     case 'left top':
195 |                         rule.orientation = '-45';
196 |                         break;
197 |                     case 'top right':
198 |                         rule.orientation = '-135';
199 |                         break;
200 |                     case 'right top':
201 |                         rule.orientation = '-135';
202 |                         break;
203 |                     case 'bottom left':
204 |                         rule.orientation = '45';
205 |                         break;
206 |                     case 'left bottom':
207 |                         rule.orientation = '45';
208 |                         break;
209 |                     case 'bottom right':
210 |                         rule.orientation = '135';
211 |                         break;
212 |                     case 'right bottom':
213 |                         rule.orientation = '135';
214 |                         break;
215 |                     default:
216 |                         if(orientation.indexOf('deg') !== -1){
217 |                             rule.orientation = orientation.replace('deg', '');
218 |                         }else{
219 |                             rule.orientation = '0'
220 |                         }
221 |                         break;
222 |                 }
223 |             }
224 |         },
225 | 
226 |         /**
227 |          * update the this.vars.rule object
228 |          * @method _initRule
229 |          * @private
230 |          * @chainable
231 |          */
232 |         _initRule: function(){
233 |             var
234 |             gradient = this.get('gradient'),
235 |             rule = this.vars.rule,
236 |             stops = [];
237 | 
238 |             if (/-webkit-gradient/.test(gradient)) {
239 |                 gradient = gradient.replace(/\s*,\s*/g, ",").replace("-webkit-gradient(", "").replace(/\)$/, "").split(/,(?=[fct])/);
240 |                 var part1 = gradient[0];
241 |                 this._transformDegree(part1);
242 | 
243 |                 for (var i = 1, j = gradient.length; i < j; i++) {
244 |                     var c = gradient[i];    
245 |                     if (/color/.test(c)) {
246 |                         c = c.replace("color-stop(", "").replace(/\)$/, "").split(/,(?=r)/);
247 |                     } else if (/from/.test(c)) {
248 |                         c = [0, c.replace(/from\(|/, "").replace(/\)$/, "")];
249 |                     } else {
250 |                         c = [1, c.replace(/to\(/, "").replace(/\)$/, "")];
251 |                     }
252 |                     stops.push({
253 |                         "position": c[0],
254 |                         "color": c[1]
255 |                     });
256 |                 }
257 |             } else {
258 |                 gradient = gradient.replace(/\s*,\s*/g, ",").replace(/-(moz|o|ms|webkit)-linear-gradient\(/, "").replace(/\)$/, "").split(/,(?=[^\d])/);
259 |                 this._transformDegree(gradient[0]);
260 | 
261 |                 for (var i = 1, j = gradient.length; i < j; i++) {
262 |                     var c = gradient[i].split(" ");
263 |                     stops.push({
264 |                         "position": typeof c[1] === 'undefined'?(i === 1?0:1):this._percentToFloat(c[1]),
265 |                         "color": c[0]
266 |                     });
267 |                 }
268 |             }
269 |             rule.stops = stops;
270 |             return this;
271 |         },
272 | 
273 |         /**
274 |          * @method _initOrientation
275 |          * @private
276 |          * @chainable
277 |          */
278 |         _initOrientation: function() {
279 |             this.vars.degreeControl.set('degree', this.vars.rule.orientation);
280 |             this.vars.degreeControl.syncUI();
281 |             return this;
282 |         },
283 | 
284 |         /**
285 |          * @method _initPanel
286 |          * @private
287 |          * @chainable
288 |          */
289 |         _initPanel: function() {
290 |             this.vars.panel.setStyle("backgroundImage", this.getGradient(false, true));
291 |             return this;
292 |         },
293 |         /**
294 |          * @method _initStops
295 |          * @private
296 |          * @chainable
297 |          */
298 |         _initStops: function(){
299 |             this.vars.stops.empty();
300 |             this._addStops(this.vars.rule.stops);
301 |             return this;
302 |         },
303 | 
304 |         /**
305 |          * init all controls
306 |          * @method _initControls
307 |          * @private
308 |          * @chainable
309 |          */
310 |         _initControls: function(){
311 |             this._initStops()._initOrientation()._initPanel();
312 |             return this;
313 |         },
314 | 
315 |         /**
316 |          * update the attribute 'gradient', init all the controls, fire the onChange event
317 |          * @method setGradient
318 |          * @param {Object} param.gradient for update the attribute 'gradient'
319 |          * @chainable
320 |          */
321 |         setGradient: function(param) {
322 |             this.set('gradient', param.gradient);
323 |             this.syncUI()._fireCallback();
324 |             return this;
325 |         },
326 | 
327 |         /**
328 |          * add stops
329 |          * @method _addStops
330 |          * @param {Array}
331 |          * @private
332 |          * @chainable
333 |          */
334 |         _addStops: function(stops, id) {
335 |             var that = this, i;
336 |             Y.each(stops, function(s, index) {
337 |                 var p = that._getPixLeft(s.position);
338 |                 index = id?id:index;
339 |                 i = Y.Node.create('<i class="codecola-gradient-stop" index="'+index+'"></i>');
340 |                 i.setStyles({
341 |                     left: p,
342 |                     backgroundColor: s.color
343 |                 });
344 |                 that.vars.stops.append(i);
345 |                 that._initStopEvent(i, index);
346 |             });
347 |             that._changeCurrentStop(i);
348 |             return that;
349 |         },
350 | 
351 |         /**
352 |          * bind event to the stop
353 |          * @method _initStopEvent
354 |          * @param {Node} stop
355 |          * @param {Number} id
356 |          * @private
357 |          * @chainable
358 |          */
359 |         _initStopEvent: function(stop, id) {
360 |             var preX, preEventX, drag = false,
361 |                 that = this,
362 |                 doc = Y.one('html'),
363 |                 panelWidth = that.get('panelWidth');
364 |             stop.on("mousedown", function(e) {
365 |                 if (that.vars.disable) {
366 |                     return;
367 |                 }
368 |                 doc.setStyle("webkitUserSelect", "none");
369 |                 that._changeCurrentStop(stop);
370 |                 drag = true;
371 |                 preX = that._getPixLeft(that.vars.rule.stops[id].position, true);
372 |                 preEventX = e.pageX;
373 |             });
374 |             doc.on("mouseup", function(e) {
375 |                 if (drag || !that.vars.disable) {
376 |                     doc.setStyle("webkitUserSelect", "");
377 |                     drag = false;
378 |                 }
379 |             });
380 |             doc.on("mousemove", function(e) {
381 |                 if (!drag || that.vars.disable) {
382 |                     return;
383 |                 }
384 |                 var left = preX + (e.pageX - preEventX);
385 |                 if (left < -5 || left > panelWidth - 5) {
386 |                     return;
387 |                 }
388 |                 stop.setStyle("left", left + "px");
389 |                 var floatLeft = that._getFloatLeft(left);
390 |                 that.vars.rule.stops[id].position = floatLeft;
391 |                 that.vars.location.set('value', that._floatToPercent(floatLeft, true));
392 |                 that._initPanel()._fireCallback();
393 |             });
394 |             return that;
395 |         },
396 | 
397 |         /**
398 |          * activate a stop
399 |          * @method _changeCurrentStop
400 |          * @param {Node}
401 |          * @private
402 |          * @chainable
403 |          */
404 |         _changeCurrentStop: function(stop) {
405 |             var that = this,
406 |                 preStop = that.vars.currentStop,
407 |                 selectClassName = "codecola-gradient-stop-select",
408 |                 cStop = that.vars.rule.stops[stop.getAttribute("index")];
409 |             if (preStop) {
410 |                 preStop.removeClass(selectClassName);
411 |             }
412 |             stop.addClass(selectClassName);
413 |             that.vars.currentStop = stop;
414 |             that.vars.colorControl.able();
415 |             that.vars.degreeControl.able();
416 |             that.vars.location.set('disabled', false);
417 |             that.vars.button.set('disabled', false);
418 | 
419 |             that.vars.colorControl.set('color', cStop.color);
420 |             that.vars.colorControl.syncUI();
421 | 
422 |             that.vars.location.set('value', that._floatToPercent(cStop.position, true));
423 |             return that;
424 |         },
425 | 
426 |         /**
427 |          * get the current gradient
428 |          * @method getGradient
429 |          * @param {Boolean} isAll if return all of webkit|moz|o|ms gradient <code>{webkit:xxx, moz:xxx, o:xxx, ms:xxx}</code>
430 |          * @param {Boolean} isPanel if for update panel
431 |          * @return {String|Object}
432 |          */
433 |         getGradient: function(isAll, isPanel) {
434 |             var rule = this.vars.rule,
435 |                 tempStops = [].concat(rule.stops),
436 |                 stops = "", webkit, moz, o, ms,
437 |                 orientation = rule.orientation == 0?0:rule.orientation + "deg";
438 |             if(isPanel){
439 |                 orientation = 0;
440 |             }
441 | //            if (rule.orientation == "horizontal" || isPanel) {
442 | //                orientation = {
443 | //                    "webkit": "0% 0%,100% 0%",
444 | //                    "moz": "left"
445 | //                }
446 | //            } else {
447 | //                orientation = {
448 | //                    "webkit": "0% 0%,0% 100%",
449 | //                    "moz": "top"
450 | //                }
451 | //            }
452 | 
453 |             tempStops.sort(function(a, b) {
454 |                 return a.position - b.position;
455 |             });
456 |             for (var i = 0, j = tempStops.length; i < j; i++) {
457 |                 var cStop = tempStops[i];
458 |                 if (!cStop) {
459 |                     continue;
460 |                 }
461 |                 var p = cStop.position,
462 |                     c = cStop.color;
463 |                 stops += "," + c + " " + this._floatToPercent(p);
464 |             }
465 | 
466 |             webkit = "-webkit-linear-gradient(" + orientation + stops + ")";
467 |             moz = "-moz-linear-gradient(" + orientation + stops + ")";
468 |             o = "-o-linear-gradient(" + orientation + stops + ")";
469 |             ms = "-ms-linear-gradient(" + orientation + stops + ")";
470 | 
471 |             if (isAll){
472 |                 return {
473 |                     "webkit": webkit,
474 |                     "moz": moz,
475 |                     "o": o,
476 |                     "ms": ms
477 |                 }
478 |             } else if (Y.UA.webkit) {
479 |                 return webkit;
480 |             } else if (Y.UA.gecko) {
481 |                 return moz;
482 |             } else if (Y.UA.opera) {
483 |                 return o;
484 |             } else if (Y.UA.ie) {
485 |                 return ms;
486 |             }
487 |         },
488 | 
489 |         /**
490 |          * @method _getFloatLeft
491 |          * @param {Number}
492 |          * @private
493 |          * @return {Number}
494 |          */
495 |         _getFloatLeft: function(leftPix) {
496 |             var floatLeft = ((leftPix + 5) / this.get('panelWidth')).toFixed(2);
497 |             if (floatLeft > 1) {
498 |                 return 1;
499 |             }
500 |             if (floatLeft < 0) {
501 |                 return 0;
502 |             }
503 |             return floatLeft;
504 |         },
505 | 
506 |         /**
507 |          * @method _getPixLeft
508 |          * @param {Number} leftFloat
509 |          * @param {Boolean} isNum if return width 'px'
510 |          * @private
511 |          * @return {Number|String}
512 |          */
513 |         _getPixLeft: function(leftFloat, isNum) {
514 |             var panelWidth = this.get('panelWidth'),
515 |                 pixLeft = Math.round(leftFloat * panelWidth) - 5;
516 | 
517 |             if (pixLeft > panelWidth - 5) {
518 |                 pixLeft = panelWidth - 5;
519 |             }
520 |             if (pixLeft < -5) {
521 |                 pixLeft = -5;
522 |             }
523 |             if (isNum) {
524 |                 return pixLeft;
525 |             } else {
526 |                 return pixLeft + "px";
527 |             }
528 |         },
529 | 
530 |         /**
531 |          * transform percent number to float
532 |          * @method _percentToFloat
533 |          * @param {String}
534 |          * @private
535 |          * @return {Number}
536 |          */
537 |         _percentToFloat: function(percent) {
538 |             return parseInt(percent.replace("%", ""), 10) / 100;
539 |         },
540 | 
541 |         /**
542 |          * transform float number to percent
543 |          * @method _floatToPercent
544 |          * @param {Number} float
545 |          * @param {Boolean} isNum if return width '%'
546 |          * @private
547 |          * @return {String}
548 |          */
549 |         _floatToPercent: function(float, isNum) {
550 |             var percent = Math.round(float * 100);
551 |             if (isNum) {
552 |                 return percent;
553 |             }
554 |             return percent + "%";
555 |         },
556 | 
557 |         /**
558 |          * fire the onChange event
559 |          * @method _fireCallback
560 |          * @private
561 |          * @chainable
562 |          */
563 |         _fireCallback: function(){
564 |             this.get('onChange')(this.getGradient(this.get('isAll')));
565 |             return this;
566 |         },
567 | 
568 |         /**
569 |          * disable all controls
570 |          * @method disable
571 |          * @chainable
572 |          */
573 |         disable: function() {
574 |             var vars = this.vars;
575 |             vars.colorControl.disable();
576 |             vars.degreeControl.disable();
577 |             vars.location.set('disabled', true);
578 |             vars.button.set('disabled', true);
579 |             vars.disable = true;
580 |             return this;
581 |         },
582 | 
583 |         /**
584 |          * able all controls
585 |          * @method able
586 |          * @chainable
587 |          */
588 |         able: function() {
589 |             var vars = this.vars;
590 |             vars.colorControl.able();
591 |             vars.degreeControl.able();
592 |             vars.location.set('disabled', false);
593 |             vars.button.set('disabled', false);
594 |             vars.disable = false;
595 |             return this;
596 |         }
597 |     }, {
598 |         ATTRS:{
599 |             /**
600 |              * @attribute wrap
601 |              * @type String
602 |              * @default 'body'
603 |              * @description a css selector for <code>Y.one()</code>,controls will insert into the wrap
604 |              */
605 |             wrap: {
606 |                 value: 'body',
607 |                 validator: Y.Lang.isString
608 |             },
609 |             /**
610 |              * @attribute gradient
611 |              * @type String
612 |              * @default "-webkit-gradient(linear, 0% 0%, 0% 100%, from(#000), to(#fff))" or "-moz-linear-gradient(top , #000 0%, #fff 100%)" or "-o-linear-gradient(top , #000 0%, #fff 100%)" or "-ms-linear-gradient(top , #000 0%, #fff 100%)"
613 |              * @description gradient for init
614 |              */
615 |             gradient: {
616 |                 value: "-webkit-linear-gradient(left , #000 0%, #fff 100%)",
617 |                 setter: function(v){
618 |                     if(!v){
619 |                         return "-webkit-linear-gradient(left , #000 0%, #fff 100%)"
620 |                     }
621 |                 }
622 |             },
623 |             /**
624 |              * @attribute panelWidth
625 |              * @type Number
626 |              * @default 200
627 |              * @description the control's width
628 |              */
629 |             panelWidth: {
630 |                 value: 200,
631 |                 validator: Y.Lang.isNumber
632 |             },
633 |             /**
634 |              * @attribute isAll
635 |              * @type Boolean
636 |              * @default false
637 |              * @description if the param include all private property when run the callback
638 |              */
639 |             isAll: {
640 |                 value: false,
641 |                 validator: Y.Lang.isBoolean
642 |             },
643 |             /**
644 |              * @attribute onInit
645 |              * @type Function
646 |              * @default function(){}
647 |              * @description callback when widget init
648 |              */
649 |             onInit: {
650 |                 value: function() {
651 |                 },
652 |                 validator: Y.Lang.isFunction
653 |             },
654 |             /**
655 |              * @attribute onChange
656 |              * @type Function
657 |              * @default function(){}
658 |              * @description callback when gradient change
659 |              */
660 |             onChange: {
661 |                 value: function() {
662 |                 },
663 |                 validator: Y.Lang.isFunction
664 |             }
665 |         }
666 |     });
667 | }, '1.0.0', {requires:['codecola-color', 'codecola-degree', 'node', 'widget-base', 'ua', 'codecola-gradient-css']});


--------------------------------------------------------------------------------
/code-cola-widget/src/color/codecola-color.js:
--------------------------------------------------------------------------------
  1 | /*
  2 | Copyright (c) 2013, ZHOUQICF.COM. All rights reserved.
  3 | Code licensed under the MIT License:
  4 | version: 1.0.0
  5 | */
  6 | /**
  7 |  * a color control for css3 property
  8 |  * @module codecola-color
  9 |  */
 10 | YUI().add('codecola-color', function(Y) {
 11 |     /**
 12 |      * a color control for css3 property
 13 |      * @param config {Object} Object literal specifying codecolaColor configuration properties.
 14 |      * @class codecolaColor
 15 |      * @constructor
 16 |      * @namespace Y
 17 |      * @extends Widget
 18 |      * @requires node widget codecola-color-css
 19 |      */
 20 |     Y.codecolaColor = Y.Base.create('codecola-color', Y.Widget, [], {
 21 |         initializer: function() {
 22 |         },
 23 | 
 24 |         renderUI: function(){
 25 |             var idRandom = (new Date()).getTime(),
 26 |                 html = '<span class="codecola-color-transparent"><input type="text" id="codecola-color-input-' + idRandom + '" class="codecola-color-input" name="color-picker"></span>' +
 27 |                         '<ol class="codecola-color-picker" id="codecola-color-picker-' + idRandom + '">' + '    ' +
 28 |                         '<li class="codecola-color-hsb codecola-color-hsbH">' +
 29 |                         '    <div class="codecola-color-current"><label for="codecola-color-hsbH-curren-' + idRandom + '">Hue:</label><input type="number" id="codecola-color-hsbH-current-' + idRandom + '" step="1" min="0" max="360"/></div>' +
 30 |                         '    <div class="codecola-color-hsb-img"></div>' +
 31 |                         '    <div class="codecola-color-hsb-range"><input type="range" min="0" max="360" id="codecola-color-hsbH-' + idRandom + '"/></div>' +
 32 |                         '</li>' +
 33 |                         '<li class="codecola-color-hsb codecola-color-hsbS">' +
 34 |                         '    <div class="codecola-color-current"><label for="codecola-color-hsbS-curren-' + idRandom + '">Saturation:</label><input type="number" id="codecola-color-hsbS-current-' + idRandom + '" step="1" min="0" max="100"/></div>' +
 35 |                         '    <div class="codecola-color-hsb-img"></div>' +
 36 |                         '    <div class="codecola-color-hsb-range"><input type="range" min="0" max="100" id="codecola-color-hsbS-' + idRandom + '"/></div>' +
 37 |                         '</li>' +
 38 |                         '<li class="codecola-color-hsb codecola-color-hsbB">' +
 39 |                         '    <div class="codecola-color-current"><label for="codecola-color-hsbB-curren-' + idRandom + '">Lightness:</label><input type="number" id="codecola-color-hsbB-current-' + idRandom + '" step="1" min="0" max="100"/></div>' +
 40 |                         '    <div class="codecola-color-hsb-img"></div>' +
 41 |                         '    <div class="codecola-color-hsb-range"><input type="range" min="0" max="100" id="codecola-color-hsbB-' + idRandom + '"/></div>' +
 42 |                         '</li>' +
 43 |                         '<li class="codecola-color-hsb codecola-color-hsbA">' +
 44 |                         '    <div class="codecola-color-current"><label for="codecola-color-hsbA-curren-' + idRandom + '">Aphla:</label><input type="number" id="codecola-color-hsbA-current-' + idRandom + '" step="0.01" min="0" max="1"/></div>' +
 45 |                         '    <div class="codecola-color-hsb-range"><input type="range" min="0" max="1" id="codecola-color-hsbA-' + idRandom + '" step="0.01"/></div>' +
 46 |                         '</li>' +
 47 |                         '</ol>';
 48 |             var editorWrap = Y.Node.create('<div id="codecola-color-editorWrap-'+idRandom+'" class="codecola-color-editorWrap">'+html+'</div>');
 49 | 
 50 |             Y.one(this.get('wrap')).append(editorWrap);
 51 |             this.vars = {
 52 |                 'picker': Y.one('#codecola-color-picker-' + idRandom),
 53 |                 'hsbInput': Y.one('#codecola-color-input-' + idRandom),
 54 |                 'hCurren': Y.one('#codecola-color-hsbH-current-' + idRandom),
 55 |                 'sCurren': Y.one('#codecola-color-hsbS-current-' + idRandom),
 56 |                 'bCurren': Y.one('#codecola-color-hsbB-current-' + idRandom),
 57 |                 'aCurren': Y.one('#codecola-color-hsbA-current-' + idRandom),
 58 |                 'hRange': Y.one('#codecola-color-hsbH-' + idRandom),
 59 |                 'sRange': Y.one('#codecola-color-hsbS-' + idRandom),
 60 |                 'bRange': Y.one('#codecola-color-hsbB-' + idRandom),
 61 |                 'aRange': Y.one('#codecola-color-hsbA-' + idRandom),
 62 |                 'rule': {}
 63 |             };
 64 |             return this;
 65 |         },
 66 | 
 67 |         bindUI: function(){
 68 |             var that = this,
 69 |                 vars = that.vars,
 70 |                 currentRanges = [vars.hCurren, vars.sCurren, vars.bCurren, vars.aCurren],
 71 |                 colorRanges = [vars.hRange, vars.sRange, vars.bRange, vars.aRange];
 72 | 
 73 |             Y.each(currentRanges,function(node, index){
 74 |                 node.on('change',function(e){
 75 |                     var hsba = {
 76 |                             h: currentRanges[0].get('value'),
 77 |                             s: currentRanges[1].get('value'),
 78 |                             b: currentRanges[2].get('value'),
 79 |                             a: currentRanges[3].get('value')
 80 |                         },
 81 |                         _initRangeHSB = ['_initRangeH', '_initRangeS', '_initRangeB', '_initRangeA'];
 82 | 
 83 |                     vars.rule.hsba = hsba;
 84 |                     vars.rule.rgba = that.changeColor(hsba, 'rgba', 'hsba');
 85 |                     that[_initRangeHSB[index]]()._initInput()._fireCallback();
 86 |                 });
 87 |             });
 88 | 
 89 |             Y.each(colorRanges,function(node, index){
 90 |                 node.on('change',function(e){
 91 |                     var hsba = {
 92 |                             h: colorRanges[0].get('value'),
 93 |                             s: colorRanges[1].get('value'),
 94 |                             b: colorRanges[2].get('value'),
 95 |                             a: colorRanges[3].get('value')
 96 |                         },
 97 |                         _initCurrentHSB = ['_initCurrentH', '_initCurrentS', '_initCurrentB', '_initCurrentA'];
 98 | 
 99 |                     vars.rule.hsba = hsba;
100 |                     vars.rule.rgba = that.changeColor(hsba, 'rgba', 'hsba');
101 |                     that[_initCurrentHSB[index]]()._initInput()._fireCallback();
102 |                 });
103 |             });
104 | 
105 |             vars.hsbInput.on('change', function() {
106 |                 that.setColor({
107 |                     color: this.get('value')
108 |                 });
109 |             });
110 | 
111 |             //TODO
112 |             vars.hsbInput.on('focus', function() {
113 |                 Y.all('.codecola-color-picker').setStyle('display', 'none');
114 |                 vars.picker.setStyle('display', 'block');
115 |             });
116 |             
117 |             return that;
118 |         },
119 | 
120 |         syncUI: function(){
121 |             this._initRule()._initControls();
122 |             return this;
123 |         },
124 | 
125 |         renderer: function() {
126 |             this.renderUI().bindUI().syncUI().get('onInit')();
127 |             return this;
128 |         },
129 | 
130 |         /**
131 |          * @method _initInput
132 |          * @private
133 |          * @chainable
134 |          */
135 |         _initInput: function() {
136 |             var input = this.vars.hsbInput,
137 |                 color = this.getColor();
138 |             input.set('value', color);
139 |             input.setStyle('backgroundColor', color);
140 |             return this;
141 |         },
142 | 
143 |         /**
144 |          * @method _initRangeH
145 |          * @private
146 |          * @chainable
147 |          */
148 |         _initRangeH: function() {
149 |             this.vars.hRange.set('value', this.vars.rule.hsba.h);
150 |             return this;
151 |         },
152 | 
153 |         /**
154 |          * @method _initRangeS
155 |          * @private
156 |          * @chainable
157 |          */
158 |         _initRangeS: function() {
159 |             this.vars.sRange.set('value', this.vars.rule.hsba.s);
160 |             return this;
161 |         },
162 | 
163 |         /**
164 |          * @method _initRangeB
165 |          * @private
166 |          * @chainable
167 |          */
168 |         _initRangeB: function() {
169 |             this.vars.bRange.set('value', this.vars.rule.hsba.b);
170 |             return this;
171 |         },
172 | 
173 |         /**
174 |          * @method _initRangeA
175 |          * @private
176 |          * @chainable
177 |          */
178 |         _initRangeA: function() {
179 |             this.vars.aRange.set('value', this.vars.rule.hsba.a);
180 |             return this;
181 |         },
182 | 
183 |         /**
184 |          * @method _initCurrentH
185 |          * @private
186 |          * @chainable
187 |          */
188 |         _initCurrentH: function() {
189 |             this.vars.hCurren.set('value', this.vars.rule.hsba.h);
190 |             return this;
191 |         },
192 | 
193 |         /**
194 |          * @method _initCurrentS
195 |          * @private
196 |          * @chainable
197 |          */
198 |         _initCurrentS: function() {
199 |             this.vars.sCurren.set('value', this.vars.rule.hsba.s);
200 |             return this;
201 |         },
202 | 
203 |         /**
204 |          * @method _initCurrentB
205 |          * @private
206 |          * @chainable
207 |          */
208 |         _initCurrentB: function() {
209 |             this.vars.bCurren.set('value', this.vars.rule.hsba.b);
210 |             return this;
211 |         },
212 | 
213 |         /**
214 |          * @method _initCurrentA
215 |          * @private
216 |          * @chainable
217 |          */
218 |         _initCurrentA: function() {
219 |             this.vars.aCurren.set('value', this.vars.rule.hsba.a);
220 |             return this;
221 |         },
222 |         /**
223 |          * init all controls
224 |          * @method _initControls
225 |          * @private
226 |          * @chainable
227 |          */
228 |         _initControls: function(){
229 |             this._initInput()._initRangeH()._initRangeS()._initRangeB()._initRangeA()._initCurrentH()._initCurrentS()._initCurrentB()._initCurrentA();
230 |             return this;
231 |         },
232 | 
233 |         /**
234 |          * update the this.vars.rule object
235 |          * @method _initRule
236 |          * @private
237 |          * @chainable
238 |          */
239 |         _initRule: function(){
240 |             var
241 |             color = this.get('color'),
242 |             hsba = this.changeColor(color, 'hsba'),
243 |             rgba = this.changeColor(hsba, 'rgba', 'hsba');
244 | 
245 |             if (rgba == 'error') {
246 |                 return;
247 |             }
248 | 
249 |             this.vars.rule = {
250 |                 rgba: rgba,
251 |                 hsba: hsba
252 |             };
253 | 
254 |             return this;
255 |         },
256 | 
257 |         /**
258 |          * update the attribute 'color', init all the controls, fire the onChange event
259 |          * @method setColor
260 |          * @param {Object} param.color for update the attribute 'color'
261 |          * @chainable
262 |          */
263 |         setColor: function(param) {
264 |             this.set('color', param.color).syncUI()._fireCallback();
265 |             return this;
266 |         },
267 | 
268 |         /**
269 |          * reset all, color is 'transparent', will not run onChange
270 |          * @method reset
271 |          * @chainable
272 |          */
273 |         reset: function() {
274 |             this.set('color', 'transparent').syncUI();
275 |             return this;
276 |         },
277 | 
278 |         /**
279 |          * return the current rgba or rgb color
280 |          * return {String} rgba when the broswer is support rgba, if not return {String} rgb, return {Object} <code>{rgba:xxx, rgb:xxx}</code> when param 'isAll' is <code>ture</code>
281 |          * @method getColor
282 |          * @param {Boolean} if return {rgba:xxx, rgb:xxx}
283 |          * @return {String|Object}
284 |          */
285 |         getColor: function(isAll) {
286 |             var color = this.vars.rule.rgba,
287 |                 rgba,
288 |                 rgb,
289 |                 alpha = parseFloat(color.a);
290 |             alpha = (alpha < 1 && alpha != 0)?alpha.toFixed(2):alpha;
291 |             rgba = 'rgba(' + color.r + ',' + color.g + ',' + color.b + ',' + alpha + ')';
292 |             rgb = 'rgb(' + color.r + ',' + color.g + ',' + color.b + ')';
293 |             if(isAll){
294 |                 return {
295 |                     rgba: rgba,
296 |                     rgb: rgb
297 |                 }
298 |             }else{
299 |                 if(Y.codecolaColor.isSupportRGBA){
300 |                     return alpha == 1?rgb:rgba;
301 |                 }else{
302 |                     return rgb;
303 |                 }
304 |             }
305 |         },
306 | 
307 |         /**
308 |          * change the color type from nType to oType
309 |          * @method changeColor
310 |          * @param color {String|Object}
311 |          * @param nType {String} hex|rgb|rgba|hsb|hsba
312 |          * @param oType {String} hex|rgb|rgba|hsb|hsba
313 |          * @return {String|Object} return Object when rgb|rgba|hsb|hsba, return String when hex
314 |          */
315 |         changeColor: function(color, nType, oType) {
316 |             var that = this;
317 |             if (/^transparent$/i.test(color)) {
318 |                 color = {
319 |                     r: 0,
320 |                     g: 0,
321 |                     b: 0,
322 |                     a: 0
323 |                 };
324 |             } else if (color in Y.codecolaColor.keywords) {
325 |                 color = Y.codecolaColor.keywords[color];
326 |                 color = {
327 |                     r: color[0],
328 |                     g: color[1],
329 |                     b: color[2],
330 |                     a: 1
331 |                 }
332 |             }
333 |             oType = oType ? oType : that.getColorType(color);
334 |             switch (oType) {
335 |                 case 'hsba':
336 |                     if (nType == 'hex') {
337 |                         return that.rgbToHex(that.hsbToRgba(color));
338 |                     } else if (nType == 'rgba') {
339 |                         return that.hsbToRgba(color);
340 |                     } else if (nType == 'hsba' && typeof color == 'string'){
341 |                         var _hsba = color.replace(/(hsba?){0,1}\(|\)/g, '').split(',');
342 |                         return {
343 |                             h: _hsba[0],
344 |                             s: _hsba[1],
345 |                             b: _hsba[2],
346 |                             a: typeof _hsba[3] != 'undefined' ? _hsba[3] : 1
347 |                         }
348 |                     }
349 |                     break;
350 |                 case 'hex':
351 |                     if (nType == 'hsba') {
352 |                         return that.rgbToHsba(that.hexToRgba(color));
353 |                     } else if (nType == 'rgba') {
354 |                         return that.hexToRgba(color);
355 |                     }
356 |                     break;
357 |                 case 'rgba':
358 |                     if (nType == 'hsba') {
359 |                         return that.rgbToHsba(color);
360 |                     } else if (nType == 'hex') {
361 |                         return that.rgbToHex(color);
362 |                     }
363 |                     break;
364 |                 default:
365 |                     return 'error'
366 |                     break;
367 |             }
368 |             return color;
369 |         },
370 | 
371 |         /**
372 |          * get the color's type, rgb is return rgba too
373 |          * @method getColorType
374 |          * @param {String|Object}
375 |          * @return {String} hsba|hex|rgba, or return 'error'
376 |          */
377 |         getColorType: function(color) {
378 |             var that = this;
379 |             if (that.isHSBA(color) || that.isHSB(color)) {
380 |                 return 'hsba';
381 |             } else if (that.isHEX(color)) {
382 |                 return 'hex';
383 |             } else if (that.isRGB(color) || that.isRGBA(color)) {
384 |                 return 'rgba';
385 |             } 
386 |             return 'error';
387 |         },
388 | 
389 |         /**
390 |          * if the color is hsb
391 |          * @method isHSB
392 |          * @param {String|Object}
393 |          * @return {Boolean}
394 |          */
395 |         isHSB: function(hsb) {
396 |             var reg = /^\d$|^[1-9]\d$|^100$/;
397 |             if (typeof hsb == 'object' && reg.test(hsb.h) && reg.test(hsb.s) && reg.test(hsb.b)) {
398 |                 return true;
399 |             } else if (typeof hsb == 'string' && /^hsb\((\d|[1-9]\d|[1-2]\d{2}|3[0-5]\d|360)\,(\d|[1-9]\d|100)\,(\d|[1-9]\d|100)\)$/.test(hsb)) {
400 |                 return true;
401 |             }
402 |             return false;
403 |         },
404 | 
405 |         /**
406 |          * if the color is hsba
407 |          * @method isHSBA
408 |          * @param {String|Object}
409 |          * @return {Boolean}
410 |          */
411 |         isHSBA: function(hsba) {
412 |             var reg = /^\d$|^[1-9]\d$|^100$/;
413 |             if (typeof hsba == 'object' && /^\d$|^[1-9]\d$|^[1-2]\d{2}$|^3[0-5]\d$|^360$/.test(hsba.h) && reg.test(hsba.s) && reg.test(hsba.b) && /^0|1|0\.\d+$/.test(hsba.a)) {
414 |                 return true;
415 |             } else if (typeof hsba == 'string' && /^hsba\((\d|[1-9]\d|[1-2]\d{2}|3[0-5]\d|360)\,((\d|[1-9]\d|100)\,){2}(0|1|0\.\d+)\)/.test(hsba)) {
416 |                 return true;
417 |             }
418 |             return false;
419 |         },
420 | 
421 |         /**
422 |          * if the color is hex
423 |          * @method isHEX
424 |          * @param {String|Object}
425 |          * @return {Boolean}
426 |          */
427 |         isHEX: function(hex) {
428 |             if (typeof hex == 'string' && /^#[0-9a-fA-F]{6}$|^#[0-9a-fA-F]{3}$/.test(hex)) {
429 |                 return true;
430 |             }
431 |             return false;
432 |         },
433 | 
434 |         /**
435 |          * if the color is hsb
436 |          * @method isRGB
437 |          * @param {String|Object}
438 |          * @return {Boolean}
439 |          */
440 |         isRGB: function(rgb) {
441 |             var reg = /^\d$|^[1-9]\d$|^1\d{2}$|^2[0-4]\d$|^25[0-5]$/;
442 |             if (typeof rgb == 'object' && reg.test(rgb.r) && reg.test(rgb.g) && reg.test(rgb.b)) {
443 |                 return true;
444 |             } else if (typeof rgb == 'string' && /^rgb\(((\d|[1-9]\d|1\d{2}|2[0-4]\d|25[0-5])\,){2}(\d|[1-9]\d|1\d{2}|2[0-4]\d|25[0-5])\)$/.test(rgb)) {
445 |                 return true;
446 |             }
447 |             return false;
448 |         },
449 | 
450 |         /**
451 |          * if the color is rgba
452 |          * @method isRGBA
453 |          * @param {String|Object}
454 |          * @return {Boolean}
455 |          */
456 |         isRGBA: function(rgba) {
457 |             var reg = /^\d$|^[1-9]\d$|^1\d{2}$|^2[0-4]\d$|^25[0-5]$/;
458 |             if (typeof rgba == 'object' && reg.test(rgba.r) && reg.test(rgba.g) && reg.test(rgba.b) && /^0|1|0\.\d+$/.test(rgba.a)) {
459 |                 return true;
460 |             } else if (/^rgba\(0\,\s?0\,\s?0\,\s?0\)$/.test(rgba)) {
461 |                 return true;
462 |             } else if (typeof rgba == 'string' && /^rgba\(((\d|[1-9]\d|1\d{2}|2[0-4]\d|25[0-5])\,){3}(0|1|0\.\d+)\)/.test(rgba)) {
463 |                 return true;
464 |             }
465 |             return false;
466 |         },
467 | 
468 |         /**
469 |          * transform rgb or rgba to hex
470 |          * @method rgbToHex
471 |          * @param {Object} support rgb or rgba
472 |          * @return {String}
473 |          */
474 |         rgbToHex: function(rgb) {
475 |             var a = [rgb.r,rgb.g,rgb.b],
476 |                 hex = '';
477 |             for (var i = 0; i < 3; i++) {
478 |                 var b = parseInt(a[i]).toString(16);
479 |                 hex += (b.length === 1) ? '0' + b : b;
480 |             }
481 |             return '#' + hex;
482 |         },
483 | 
484 |         /**
485 |          * transform hex to rgba
486 |          * @method hexToRgba
487 |          * @param {String}
488 |          * @return {Object}
489 |          */
490 |         hexToRgba: function(hex) {
491 |             hex = this.hexToComplate(hex);
492 |             return {
493 |                 r: parseInt(hex.substring(1, 3), 16),
494 |                 g: parseInt(hex.substring(3, 5), 16),
495 |                 b: parseInt(hex.substring(5, 7), 16),
496 |                 a: 1
497 |             }
498 |         },
499 | 
500 |         /**
501 |          * transform rgb or rgba to hsba
502 |          * @method rgbToHsba
503 |          * @param {String|Object} support rgb or rgba
504 |          * @return {Object}
505 |          */
506 |         rgbToHsba: function(rgba) {
507 |             if (typeof rgba == 'string') {
508 |                 rgba = rgba.replace(/rgba{0,1}\(|\)/g, '').split(',');
509 |                 rgba = {
510 |                     r: rgba[0],
511 |                     g: rgba[1],
512 |                     b: rgba[2],
513 |                     a: typeof rgba[3] != 'undefined' ? rgba[3] : 1
514 |                 }
515 |             }
516 |             var nH,
517 |                 nS,
518 |                 nV,
519 |                 nR = rgba.r / 255,
520 |                 nG = rgba.g / 255,
521 |                 nB = rgba.b / 255,
522 |                 nmax = Math.max(nR, nG, nB),
523 |                 nmin = Math.min(nR, nG, nB),
524 |                 ndelMax = nmax - nmin,
525 |                 ndelR,
526 |                 ndelG,
527 |                 ndelB;
528 | 
529 |             nV = nmax;
530 |             if (ndelMax === 0) {
531 |                 nH = 0;
532 |                 nS = 0;
533 |             } else {
534 |                 nS = ndelMax / nmax
535 |                 ndelR = (((nmax - nR) / 6) + (ndelMax / 2)) / ndelMax;
536 |                 ndelG = (((nmax - nG) / 6) + (ndelMax / 2)) / ndelMax;
537 |                 ndelB = (((nmax - nB) / 6) + (ndelMax / 2)) / ndelMax;
538 |                 if (nR === nmax) {
539 |                     nH = ndelB - ndelG;
540 |                 } else if (nG === nmax) {
541 |                     nH = (1 / 3) + ndelR - ndelB;
542 |                 } else if (nB === nmax) {
543 |                     nH = (2 / 3) + ndelG - ndelR;
544 |                 }
545 |                 if (nH < 0) {
546 |                     nH = nH + 1;
547 |                 }
548 |                 if (nH > 1) {
549 |                     nH = nH - 1;
550 |                 }
551 |             }
552 |             return {
553 |                 h: Math.round(nH * 360),
554 |                 s: Math.round(nS * 100),
555 |                 b: Math.round(nV * 100),
556 |                 a: rgba.a != 'undefined' ? rgba.a : 1
557 |             }
558 |         },
559 | 
560 |         /**
561 |          * transform hsb or hsba to rgba
562 |          * @method hsbToRgba
563 |          * @param {String|Object} support hsb and hsba color
564 |          * @return {Object}
565 |          */
566 |         hsbToRgba: function(hsba) {
567 |             if (typeof hsba == 'string') {
568 |                 hsba = hsba.replace(/hsba{0,1}\(|\)/g, '').split(',');
569 |                 hsba = {
570 |                     h: hsba[0],
571 |                     s: hsba[1],
572 |                     b: hsba[2],
573 |                     a: typeof hsba[3] != 'undefined' ? hsba[3] : 1
574 |                 }
575 |             }
576 |             var nH,nS,nV,
577 |                 nR,nG,nB,
578 |                 hi,f,p,q,t;
579 | 
580 |             nH = hsba.h / 360;
581 |             nS = hsba.s / 100;
582 |             nV = hsba.b / 100;
583 | 
584 |             if (hsba.s === 0) {
585 |                 nR = nG = nB = nV;
586 |             } else {
587 |                 hi = nH * 6
588 |                 if (hi === 6) {
589 |                     hi = 0;
590 |                 }
591 |                 f = Math.floor(hi);
592 |                 p = nV * (1 - nS);
593 |                 q = nV * (1 - nS * (hi - f));
594 |                 t = nV * (1 - nS * (1 - (hi - f)));
595 |                 switch (f) {
596 |                     case 0:
597 |                         nR = nV;
598 |                         nG = t;
599 |                         nB = p;
600 |                         break;
601 |                     case 1:
602 |                         nR = q;
603 |                         nG = nV;
604 |                         nB = p;
605 |                         break;
606 |                     case 2:
607 |                         nR = p;
608 |                         nG = nV;
609 |                         nB = t;
610 |                         break;
611 |                     case 3:
612 |                         nR = p;
613 |                         nG = q;
614 |                         nB = nV;
615 |                         break;
616 |                     case 4:
617 |                         nR = t;
618 |                         nG = p;
619 |                         nB = nV;
620 |                         break;
621 |                     default:
622 |                         nR = nV;
623 |                         nG = p;
624 |                         nB = q;
625 |                         break;
626 |                 }
627 |             }
628 |             return {
629 |                 r: Math.round(nR * 255),
630 |                 g: Math.round(nG * 255),
631 |                 b: Math.round(nB * 255),
632 |                 a: hsba.a
633 |             }
634 |         },
635 | 
636 |         /**
637 |          * transform hex color <code>#fff</code> to <code>#ffffff</code>
638 |          * @method hexToComplate
639 |          * @param {String}
640 |          * @return {String}
641 |          */
642 |         hexToComplate: function(hex) {
643 |             if (hex.length === 4) {
644 |                 var hex = hex.toLowerCase(),
645 |                     newHex = '';
646 | 
647 |                 for (var i = 0; i < 3; i++) {
648 |                     var a = hex.substring(i + 1, i + 2);
649 |                     newHex += a + a;
650 |                 }
651 |                 return '#' + newHex;
652 |             } else {
653 |                 return hex;
654 |             }
655 |         },
656 | 
657 |         /**
658 |          * hide color picker, disable text input
659 |          * @method disable
660 |          * @chainable
661 |          */
662 |         disable: function() {
663 |             var controls = this.vars;
664 |             controls.hsbInput.set('disabled', true);
665 |             controls.picker.setStyle('display', 'none');
666 |             return this;
667 |         },
668 | 
669 |         /**
670 |          * show color picker, able text input
671 |          * @method able
672 |          * @chainable
673 |          */
674 |         able: function() {
675 |             var controls = this.vars;
676 |             controls.hsbInput.set('disabled', false);
677 |             controls.picker.setStyle('display', 'block');
678 |             return this;
679 |         },
680 | 
681 |         /**
682 |          * fire the onChange event
683 |          * @method _fireCallback
684 |          * @private
685 |          * @chainable
686 |          */
687 |         _fireCallback: function() {
688 |             this.get('onChange')(this.getColor(this.get('isAll')));
689 |             return this;
690 |         }
691 |     },{
692 |         /**
693 |          * @attribute isSupportRGBA
694 |          * @type Boolean
695 |          * @description if the current broswer is support rgba
696 |          */
697 |         isSupportRGBA: function() {
698 |             var i = document.createElement('i');
699 |             i.style.color = 'rgba(0,0,0,0.1)';
700 |             return /^rgba/.test(i.style.color);
701 |         }(),
702 |         /**
703 |          * @attribute keywords
704 |          * @type Object
705 |          * @description color <a href="http://www.w3.org/TR/css3-color/#svg-color">keywords</a> from <a href="http://www.w3.org/TR/SVG/types.html#ColorKeywords">SVG 1.0 color keyword names</a>
706 |          */
707 |         keywords: {
708 |             'aliceblue': [240, 248, 255],
709 |             'antiquewhite': [250, 235, 215],
710 |             'aqua': [0, 255, 255],
711 |             'aquamarine': [127, 255, 212],
712 |             'azure': [240, 255, 255],
713 |             'beige': [245, 245, 220],
714 |             'bisque': [255, 228, 196],
715 |             'black': [0, 0, 0],
716 |             'blanchedalmond': [255, 235, 205],
717 |             'blue': [0, 0, 255],
718 |             'blueviolet': [138, 43, 226],
719 |             'brown': [165, 42, 42],
720 |             'burlywood': [222, 184, 135],
721 |             'cadetblue': [95, 158, 160],
722 |             'chartreuse': [127, 255, 0],
723 |             'chocolate': [210, 105, 30],
724 |             'coral': [255, 127, 80],
725 |             'cornflowerblue': [100, 149, 237],
726 |             'cornsilk': [255, 248, 220],
727 |             'crimson': [220, 20, 60],
728 |             'cyan': [0, 255, 255],
729 |             'darkblue': [0, 0, 139],
730 |             'darkcyan': [0, 139, 139],
731 |             'darkgoldenrod': [184, 134, 11],
732 |             'darkgray': [169, 169, 169],
733 |             'darkgreen': [0, 100, 0],
734 |             'darkgrey': [169, 169, 169],
735 |             'darkkhaki': [189, 183, 107],
736 |             'darkmagenta': [139, 0, 139],
737 |             'darkolivegreen': [85, 107, 47],
738 |             'darkorange': [255, 140, 0],
739 |             'darkorchid': [153, 50, 204],
740 |             'darkred': [139, 0, 0],
741 |             'darksalmon': [233, 150, 122],
742 |             'darkseagreen': [143, 188, 143],
743 |             'darkslateblue': [72, 61, 139],
744 |             'darkslategray': [47, 79, 79],
745 |             'darkslategrey': [47, 79, 79],
746 |             'darkturquoise': [0, 206, 209],
747 |             'darkviolet': [148, 0, 211],
748 |             'deeppink': [255, 20, 147],
749 |             'deepskyblue': [0, 191, 255],
750 |             'dimgray': [105, 105, 105],
751 |             'dimgrey': [105, 105, 105],
752 |             'dodgerblue': [30, 144, 255],
753 |             'firebrick': [178, 34, 34],
754 |             'floralwhite': [255, 250, 240],
755 |             'forestgreen': [34, 139, 34],
756 |             'fuchsia': [255, 0, 255],
757 |             'gainsboro': [220, 220, 220],
758 |             'ghostwhite': [248, 248, 255],
759 |             'gold': [255, 215, 0],
760 |             'goldenrod': [218, 165, 32],
761 |             'gray': [128, 128, 128],
762 |             'green': [0, 128, 0],
763 |             'greenyellow': [173, 255, 47],
764 |             'grey': [128, 128, 128],
765 |             'honeydew': [240, 255, 240],
766 |             'hotpink': [255, 105, 180],
767 |             'indianred': [205, 92, 92],
768 |             'indigo': [75, 0, 130],
769 |             'ivory': [255, 255, 240],
770 |             'khaki': [240, 230, 140],
771 |             'lavender': [230, 230, 250],
772 |             'lavenderblush': [255, 240, 245],
773 |             'lawngreen': [124, 252, 0],
774 |             'lemonchiffon': [255, 250, 205],
775 |             'lightblue': [173, 216, 230],
776 |             'lightcoral': [240, 128, 128],
777 |             'lightcyan': [224, 255, 255],
778 |             'lightgoldenrodyellow': [250, 250, 210],
779 |             'lightgray': [211, 211, 211],
780 |             'lightgreen': [144, 238, 144],
781 |             'lightgrey': [211, 211, 211],
782 |             'lightpink': [255, 182, 193],
783 |             'lightsalmon': [255, 160, 122],
784 |             'lightseagreen': [32, 178, 170],
785 |             'lightskyblue': [135, 206, 250],
786 |             'lightslategray': [119, 136, 153],
787 |             'lightslategrey': [119, 136, 153],
788 |             'lightsteelblue': [176, 196, 222],
789 |             'lightyellow': [255, 255, 224],
790 |             'lime': [0, 255, 0],
791 |             'limegreen': [50, 205, 50],
792 |             'linen': [250, 240, 230],
793 |             'magenta': [255, 0, 255],
794 |             'maroon': [128, 0, 0],
795 |             'mediumaquamarine': [102, 205, 170],
796 |             'mediumblue': [0, 0, 205],
797 |             'mediumorchid': [186, 85, 211],
798 |             'mediumpurple': [147, 112, 219],
799 |             'mediumseagreen': [60, 179, 113],
800 |             'mediumslateblue': [123, 104, 238],
801 |             'mediumspringgreen': [0, 250, 154],
802 |             'mediumturquoise': [72, 209, 204],
803 |             'mediumvioletred': [199, 21, 133],
804 |             'midnightblue': [25, 25, 112],
805 |             'mintcream': [245, 255, 250],
806 |             'mistyrose': [255, 228, 225],
807 |             'moccasin': [255, 228, 181],
808 |             'navajowhite': [255, 222, 173],
809 |             'navy': [0, 0, 128],
810 |             'oldlace': [253, 245, 230],
811 |             'olive': [128, 128, 0],
812 |             'olivedrab': [107, 142, 35],
813 |             'orange': [255, 165, 0],
814 |             'orangered': [255, 69, 0],
815 |             'orchid': [218, 112, 214],
816 |             'palegoldenrod': [238, 232, 170],
817 |             'palegreen': [152, 251, 152],
818 |             'paleturquoise': [175, 238, 238],
819 |             'palevioletred': [219, 112, 147],
820 |             'papayawhip': [255, 239, 213],
821 |             'peachpuff': [255, 218, 185],
822 |             'peru': [205, 133, 63],
823 |             'pink': [255, 192, 203],
824 |             'plum': [221, 160, 221],
825 |             'powderblue': [176, 224, 230],
826 |             'purple': [128, 0, 128],
827 |             'red': [255, 0, 0],
828 |             'rosybrown': [188, 143, 143],
829 |             'royalblue': [65, 105, 225],
830 |             'saddlebrown': [139, 69, 19],
831 |             'salmon': [250, 128, 114],
832 |             'sandybrown': [244, 164, 96],
833 |             'seagreen': [46, 139, 87],
834 |             'seashell': [255, 245, 238],
835 |             'sienna': [160, 82, 45],
836 |             'silver': [192, 192, 192],
837 |             'skyblue': [135, 206, 235],
838 |             'slateblue': [106, 90, 205],
839 |             'slategray': [112, 128, 144],
840 |             'slategrey': [112, 128, 144],
841 |             'snow': [255, 250, 250],
842 |             'springgreen': [0, 255, 127],
843 |             'steelblue': [70, 130, 180],
844 |             'tan': [210, 180, 140],
845 |             'teal': [0, 128, 128],
846 |             'thistle': [216, 191, 216],
847 |             'tomato': [255, 99, 71],
848 |             'turquoise': [64, 224, 208],
849 |             'violet': [238, 130, 238],
850 |             'wheat': [245, 222, 179],
851 |             'white': [255, 255, 255],
852 |             'whitesmoke': [245, 245, 245],
853 |             'yellow': [255, 255, 0],
854 |             'yellowgreen': [154, 205, 50]
855 |         },
856 |         ATTRS:{
857 |             /**
858 |              * @attribute wrap
859 |              * @type String
860 |              * @default 'body'
861 |              * @description a css selector for <code>Y.one()</code>,controls will insert into the wrap
862 |              */
863 |             wrap: {
864 |                 value: '',
865 |                 validator: Y.Lang.isString
866 |             },
867 |             /**
868 |              * @attribute color
869 |              * @type String
870 |              * @default 'transparent'
871 |              * @description color for init, support rgba|rgb|hsb|hsba|hex|<a href="http://www.w3.org/TR/css3-color/#svg-color">keywords</a>|"transparent"
872 |              */
873 |             color: {
874 |                 value: 'transparent',
875 |                 validator: function(v){
876 |                     v = v.replace(/\s/g, '');
877 |                     return this.isHEX(v) || this.isHSB(v) || this.isHSBA(v) || this.isRGB(v) || this.isRGBA(v) || v in Y.codecolaColor.keywords || v == 'transparent';
878 |                 },
879 |                 setter: function(v){
880 |                     return v.replace(/\s/g, '');
881 |                 }
882 |             },
883 |             /**
884 |              * @attribute isAll
885 |              * @type Boolean
886 |              * @default false
887 |              * @description if the param include rgba and rgb when run the callback <code>function({rgba:xxx,rgb:xxx}){}</code> or <code>function(rgba|rgb){}</code>
888 |              */
889 |             isAll: {
890 |                 value: false,
891 |                 validator: Y.Lang.isBoolean
892 |             },
893 |             /**
894 |              * @attribute onInit
895 |              * @type Function
896 |              * @default function(){}
897 |              * @description callback when widget init
898 |              */
899 |             onInit: {
900 |                 value: function() {
901 |                 },
902 |                 validator: Y.Lang.isFunction
903 |             },
904 |             /**
905 |              * @attribute onChange
906 |              * @type Function
907 |              * @default function(){}
908 |              * @description callback when color change
909 |              */
910 |             onChange: {
911 |                 value: function() {
912 |                 },
913 |                 validator: Y.Lang.isFunction
914 |             }
915 |         }
916 |     });
917 | },'1.0.0',{requires:['node', 'widget-base', 'codecola-color-css']});


--------------------------------------------------------------------------------
/codecola.js:
--------------------------------------------------------------------------------
   1 | /*
   2 | Copyright (c) 2013, ZHOUQICF.COM. All rights reserved.
   3 | Code licensed under the MIT License:
   4 | version: 3.5.0
   5 | */
   6 | (function(){
   7 | /**
   8 |  * a chrome extension to modify css style visually
   9 |  * @module codecola
  10 |  */
  11 | YUI().add('codecola', function(Y) {
  12 |     /**
  13 |      * a chrome extension to modify css style visually
  14 |      * @param config {Object} Object literal specifying codecola configuration properties.
  15 |      * @class codecola
  16 |      * @constructor
  17 |      * @namespace Y
  18 |      * @extends Widget
  19 |      * @requires codecola-color codecola-gradient codecola-degree codecola-css widget-base node-base event-base io-base dd-plugin ua
  20 |      */
  21 |     Y.codecola = Y.Base.create('codecola', Y.Widget, [], {
  22 |         isOn: true,
  23 | 
  24 |         initializer: function() {
  25 |             this.set('codecolaCurrentNode', null);
  26 |         },
  27 | 
  28 |         renderUI: function() {
  29 |             this._renderStyleSheet();
  30 |             this._renderPanel();
  31 |             this._renderPlugs();
  32 |             return this;
  33 |         },
  34 | 
  35 |         bindUI: function() {
  36 |             this._bindBrowserAction();
  37 |             this._bindModules();
  38 |             this._bindOpenControl();
  39 |             this._bindCancel();
  40 |             this._bindOpenAll();
  41 |             this._bindMin();
  42 |             this._bindShowCurrentNode();
  43 |             this._bindSwitch();
  44 |             this._bindGetStyle();
  45 |             this._bindSetStyle();
  46 |             this._bindGetHtml();
  47 |             this._bindGetLink();
  48 |             this._bindShare();
  49 |             this._bindAbout();
  50 |             this._bindDrag();
  51 |             this._bindBeforeunload();
  52 | 
  53 |             this._bindInspect();
  54 |             return this;
  55 |         },
  56 | 
  57 |         syncUI: function() {
  58 |             return this;
  59 |         },
  60 | 
  61 |         renderer: function(){
  62 |             this.renderUI().bindUI().syncUI();
  63 |         },
  64 | 
  65 |         _renderStyleSheet: function(){
  66 |             Y.one('head').append(Y.Node.create('<style>'+Y.codecola.STYLE_codecola+'</style>'));
  67 |         },
  68 | 
  69 |         _renderPlugs: function(){
  70 |             var _this = this,
  71 |                 plugs = _this.get('plugs').all;
  72 |             Y.each(plugs, function(plug){
  73 |                 _this[plug].render(_this);
  74 |             });
  75 |         },
  76 | 
  77 |         renderPlug: function(html){
  78 |             var li = Y.Node.create(this.renderTPL(html));
  79 |             li.addClass('codecola-item');
  80 |             Y.one('#codecola-controls').append(li);
  81 |         },
  82 | 
  83 |         _renderPanel: function(){
  84 |             Y.one('html').append(Y.Node.create(this.renderTPL(
  85 |                 '<div id="codecola" class="codecola-wrap">'+
  86 |                 '   <div id="codecola-option">'+
  87 |                 '       <div id="codecola-fold" title="{{opt_fold}}"><ccs></ccs><ccb></ccb></div>'+
  88 |                 '       <span id="codecola-show-about" class="codecola-icon" title="{{opt_about}}"></span>'+
  89 |                 '       <div id="codecola-drag"></div>'+
  90 |                 '   </div>' +
  91 |                 '   <div id="codecola-current-info">'+
  92 |                 '       <cccode id="codecola-current-node">none</cccode> * '+
  93 |                 '       <cccode id="codecola-current-node-count">0</cccode>'+
  94 |                 '       <vabbr id="codecola-show-currentNode" title="{{opt_cNode}}">?</vabbr>'+
  95 |                 '       <span id="codecola-open-all" title="{{opt_unfoldAll}}"><ccb></ccb><ccu></ccu></span>'+
  96 |                 '       <span id="codecola-share" title="{{opt_share}}" class="codecola-opt-button codecola-icon"></span>'+
  97 |                 '       <span id="codecola-save" title="{{opt_link}}" class="codecola-opt-button codecola-icon"></span>'+
  98 |                 '       <span id="codecola-getHTML" title="{{opt_html}}" class="codecola-opt-button codecola-icon">&lt;&gt;</span>'+
  99 |                 '       <span id="codecola-getStyles" title="{{opt_showStyle}}" class="codecola-opt-button codecola-icon">{}</span>'+
 100 |                 '       <span id="codecola-switch" title="{{opt_turnOff}}" class="codecola-opt-button codecola-icon cc-open"></span>'+
 101 |                 '   </div>'+
 102 |                 '   <form id="codecola-patterns" action="http://codecolapatterns.com/submit" method="POST" target="_blank">'+
 103 |                 '       <textarea id="codecola-styles" class="codecola-code" name="css"></textarea><input type="hidden" name="client" value="codecola">'+
 104 |                 '   </form>'+
 105 |                 '   <ul id="codecola-controls" class="cc-close"></ul>'+
 106 |                 '   <ol id="codecola-selectors" class="codecola-wrap"></ol>'+
 107 |                 '   <div id="codecola-getHTML-wrap" class="codecola-pop codecola-wrap">'+
 108 |                 '       <span id="codecola-getHTML-title" class="codecola-pop-title">HTML</span>'+
 109 |                 '       <span id="codecola-getHTML-close" class="codecola-icon codecola-pop-close" title="{{opt_close}}"></span>'+
 110 |                 '       <textarea id="codecola-getHTML-content" class="codecola-code"></textarea>'+
 111 |                 '   </div>'+
 112 |                 '   <div id="codecola-save-wrap" class="codecola-pop codecola-wrap">'+
 113 |                 '       <span id="codecola-save-title" class="codecola-pop-title">URL</span>'+
 114 |                 '       <span id="codecola-save-close" class="codecola-icon codecola-pop-close" title="{{opt_close}}"></span>'+
 115 |                 '       <input id="codecola-save-content">'+
 116 |                 '   </div>'+
 117 |                 '   <div id="codecola-finder-wrap" class="codecola-pop codecola-wrap">'+
 118 |                 '       <span id="codecola-finder-title" class="codecola-pop-title">{{opt_finder}}</span>'+
 119 |                 '       <span id="codecola-finder-close" class="codecola-icon codecola-pop-close" title="{{opt_close}}"></span>'+
 120 |                 '       <input id="codecola-finder-content">'+
 121 |                 '   </div>'+
 122 |                 '   <div id="codecola-about-wrap" class="codecola-pop codecola-wrap">'+
 123 |                 '       <span class="codecola-about-title codecola-pop-title">About</span>'+
 124 |                 '       <span id="codecola-about-close" class="codecola-icon codecola-pop-close" title="{{opt_close}}"></span>'+
 125 |                 '       <div class="codecola-about-content">'+
 126 |                 '           <div class="codecola-about-global">'+
 127 |                 '               <div class="codecola-about-name">Code Cola</div>'+
 128 |                 '               <p class="codecola-about-version">v3.5.0</p>'+
 129 |                 '           </div>'+
 130 |                 '           <div class="codecola-about-detail">'+
 131 |                 '               <p class="codecola-about-doc">'+
 132 |                 '                   <a href="http://www.zhouqicf.com/code-cola" target="_blank">Documentation</a>,'+
 133 |                 '                   <a href="https://chrome.google.com/extensions/detail/lomkpheldlbkkfiifcbfifipaofnmnkn" target="_blank">Chrome extension</a>,'+
 134 |                 '                   <a href="https://github.com/zhouqicf/code-cola" target="_blank">Source</a>,'+
 135 |                 '                   <a href="http://codecolapatterns.com" target="_blank">CodeCola Patterns</a>'+
 136 |                 '               </p>'+
 137 |                 '               <p class="codecola-about-author">© 2010-2013 created by '+
 138 |                 '                   <a href="http://www.zhouqicf.com" target="_blank">Zhou Qi</a>'+
 139 |                 '               </p>'+
 140 |                 '           </div>'+
 141 |                 '       </div>'+
 142 |                 '   </div>'+
 143 |                 '</div>'
 144 |             )));
 145 |         },
 146 | 
 147 |         _bindBrowserAction: function(){
 148 |             var _this = this;
 149 |             this.chromeOnMessage(function(event){
 150 |                 if(event === 'browserAction'){
 151 |                     if(_this.isOn){
 152 |                         document.getElementById('codecola').style.display = 'none';
 153 |                     }else{
 154 |                         document.getElementById('codecola').style.display = 'block';
 155 |                     }
 156 |                     _this.isOn = !_this.isOn;
 157 |                 }
 158 |             });
 159 |         },
 160 | 
 161 |         _bindModules: function(){
 162 |             var _this = this,
 163 |                 plugs = _this.get('plugs').all;
 164 |             Y.each(plugs, function(plug){
 165 |                 _this[plug].bind(_this, Y);
 166 |             });
 167 |         },
 168 | 
 169 |         _bindInspect: function(){
 170 |             //TODO: can't stop event sametimes
 171 |             var _this = this,
 172 |                 mask = Y.Node.create('<ccmask id="codecola-mask"></ccmask>'),
 173 |                 NODE_tempNode,
 174 |                 CLASS_selecting = 'codecola-selecting',
 175 |                 mutilNodes = Y.all('codecola-nodelist'),
 176 |                 mutilStart = false;
 177 | 
 178 |             Y.one('#codecola').append(mask);
 179 | 
 180 |             Y.on('mouseover', function(e) {
 181 |                 if (!_this.isOn) {
 182 |                     return;
 183 |                 }
 184 |                 var target = e.target,
 185 |                     width = target.get('offsetWidth') - 2,
 186 |                     height = target.get('offsetHeight') - 2,
 187 |                     p = target.getXY();
 188 |                 NODE_tempNode = target;
 189 |                 //TODO:ie not support window.pageXOffset
 190 |                 mask.setAttribute('style', 'left:' + (p[0] - window.pageXOffset) + 'px;top:' + (p[1] - window.pageYOffset) + 'px;width:' + width + 'px;height:' + height + 'px;');
 191 |             }, 'body');
 192 |             Y.on('mouseout', function(e) {
 193 |                 if (!_this.isOn) {
 194 |                     return;
 195 |                 }
 196 |                 mask.setStyle('left', '-4000px');
 197 |             }, 'body');
 198 |             //TODO: yui3 support event capture?
 199 |             document.body.addEventListener('click', function(e) {
 200 |                 if (!_this.isOn) {
 201 |                     return;
 202 |                 }
 203 |                 e.preventDefault();
 204 |                 e.stopPropagation();
 205 |                 NODE_tempNode = Y.one(e.target);
 206 |                 //mac command key: e.metaKey
 207 |                 if (e.ctrlKey == 1 || e.metaKey) {
 208 |                     mutilStart = true;
 209 |                     if (NODE_tempNode.hasClass(CLASS_selecting)) {
 210 |                         var newMutilNodes = Y.all('codecola-nodelist');
 211 |                         mutilNodes.each(function(n) {
 212 |                             if (n != NODE_tempNode) {
 213 |                                 newMutilNodes.push(n);
 214 |                             }
 215 |                         });
 216 |                         mutilNodes = newMutilNodes;
 217 |                         NODE_tempNode.removeClass(CLASS_selecting);
 218 |                     } else {
 219 |                         mutilNodes.push(NODE_tempNode);
 220 |                         NODE_tempNode.addClass(CLASS_selecting);
 221 |                     }
 222 |                     _this.updateCurrentNode(mutilNodes.size(), 'mix');
 223 |                 } else {
 224 |                     mutilNodes.push(NODE_tempNode);
 225 |                     _this.initTab(mutilNodes, NODE_tempNode.get('nodeName'));
 226 |                     mutilStart = false;
 227 |                     mutilNodes = Y.all('codecola-nodelist');
 228 |                 }
 229 |             }, true);
 230 |             Y.on('keyup', function(e) {
 231 |                 if (_this.isOn && (e.keyCode == 17 || e.keyCode == 224 || e.keyCode == 91) && !mutilNodes.isEmpty()) {
 232 |                     mutilNodes.removeClass(CLASS_selecting);
 233 |                     _this.initTab(mutilNodes, 'mix');
 234 |                     mutilStart = false;
 235 |                     mutilNodes = Y.all('codecola-nodelist');
 236 |                 }
 237 |             });
 238 | 
 239 |             var hideTimeout = null,
 240 |                 selectorPanel = Y.one('#codecola-selectors'),
 241 |                 addLi = function(text, className, target) {
 242 |                     var li = Y.Node.create('<li class="'+className+'">'+text+'</li>');
 243 |                     selectorPanel.append(li);
 244 |                     attacthFindNode(li, target);
 245 |                 },
 246 |                 getNode = function(li, target) {
 247 |                     if (li.hasClass('tag-selector')) {
 248 |                         var pTag, tag = target.get('nodeName');
 249 |                         if (tag == 'LI') {
 250 |                             pTag = /^OL$|^UL$/;
 251 |                         } else if (tag == 'TD' || tag == 'TH') {
 252 |                             pTag = /^TABLE$/;
 253 |                         }
 254 |                         while (!pTag.test(target.get('nodeName'))) {
 255 |                             target = target.get('parentNode');
 256 |                         }
 257 |                         return target.all(tag);
 258 |                     } else {
 259 |                         return Y.all('.' + li.get('firstChild').get('text').replace('.', ''));
 260 |                     }
 261 |                 },
 262 |                 attacthFindNode = function(li, target) {
 263 |                     var nodes = getNode(li, target);
 264 |                     li.on('mouseover', function(e) {
 265 |                         nodes.addClass(CLASS_selecting);
 266 |                         clearTimeout(hideTimeout);
 267 |                     });
 268 |                     li.on('mouseout', function(e) {
 269 |                         nodes.removeClass(CLASS_selecting);
 270 |                         hideMenu();
 271 |                     });
 272 |                     li.on('click', function(e) {
 273 |                         Y.one('#codecola-selectors').setStyles({
 274 |                             opacity: 0,
 275 |                             top: '-9999px'
 276 |                         });
 277 |                         _this.initTab(nodes, li.get('firstChild').get('text'));
 278 |                     });
 279 |                 },
 280 |                 hideMenu = function(){
 281 |                     hideTimeout = setTimeout(function(e) {
 282 |                         selectorPanel.setStyles({
 283 |                             opacity: 0,
 284 |                             top: '-9999px'
 285 |                         });
 286 |                     }, 1500);
 287 |                 };
 288 |             Y.on('contextmenu', function(e) {
 289 |                 if (!_this.isOn) {
 290 |                     return
 291 |                 }
 292 |                 e.preventDefault();
 293 | 
 294 |                 clearTimeout(hideTimeout);
 295 | 
 296 |                 selectorPanel.empty().setStyles({
 297 |                     opacity: 1,
 298 |                     top: e.pageY - window.pageYOffset,
 299 |                     left: e.pageX - window.pageXOffset
 300 |                 });
 301 | 
 302 |                 var classes = Y.Lang.trim(NODE_tempNode.get('className').replace(CLASS_selecting, '')),
 303 |                     tag = e.target.get('nodeName');
 304 | 
 305 |                 if (tag == 'LI' || tag == 'TD' || tag == 'TH') {
 306 |                     addLi(tag, 'tag-selector', NODE_tempNode);
 307 |                 }
 308 | 
 309 |                 if (classes) {
 310 |                     classes = classes.split(/\s+/);
 311 |                     for (var i = 0, j = classes.length; i < j; i++) {
 312 |                         var cClass = classes[i];
 313 |                         if (cClass != CLASS_selecting) {
 314 |                             addLi('.' + cClass, 'class-selector', NODE_tempNode);
 315 |                         }
 316 |                     }
 317 |                 }
 318 | 
 319 |                 if (!selectorPanel.get('firstChild')) {
 320 |                     selectorPanel.append(Y.Node.create('<li class="no-selector">no selector</li>'));
 321 |                 }
 322 | 
 323 |                 hideMenu();
 324 |             }, 'body');
 325 | 
 326 |             _this._bindInspectByFinder();
 327 |         },
 328 | 
 329 |         _bindInspectByFinder: function(){
 330 |             var _this = this,
 331 |                 codecola = document.getElementById('codecola'),
 332 |                 //TODO: test
 333 |                 isType = function(){
 334 |                     var activeTag = document.activeElement,
 335 |                         activeTagName = activeTag.tagName.toLowerCase();
 336 |                     return activeTag.getAttribute('contenteditable') === 'true' || activeTagName === 'input' || activeTagName === 'select' || activeTagName === 'textarea';
 337 |                 };
 338 |             Y.on('keypress', function(e){
 339 |                 if(!_this.isOn || e.keyCode != 102 || isType()){
 340 |                     return;
 341 |                 }
 342 |                 e.preventDefault();
 343 |                 Y.one('#codecola-finder-wrap').addClass('cc-open');
 344 |                 Y.one('#codecola-finder-content').focus();
 345 |             });
 346 |             Y.on('keypress', function(e){
 347 |                 if(!_this.isOn || e.keyCode != 13){
 348 |                     return;
 349 |                 }
 350 |                 var selector = this.get('value'),
 351 |                     allNodes = Y.all(selector)._nodes,
 352 |                     dropNodes = codecola.getElementsByTagName('*'),
 353 |                     nodes = Y.all('codecola-nodelist');
 354 |                 //TODO: bad
 355 |                 for(var i = allNodes.length;i>-1;i--){
 356 |                     var use = true, node = allNodes[i];
 357 |                     (function(){
 358 |                         for(var j = dropNodes.length;j>-1;j--){
 359 |                             if(node == dropNodes[j]){
 360 |                                 use = false;
 361 |                                 return;
 362 |                             }
 363 |                         }
 364 |                         if(node == codecola){
 365 |                             use = false;
 366 |                             return;
 367 |                         }
 368 |                     })();
 369 |                     if(use){
 370 |                         nodes.push(node);
 371 |                     }
 372 |                 }
 373 |                 if(nodes.size() == 0){
 374 |                     alert(_this.chromeGetMSG('error_find_none'));
 375 |                     this.select();
 376 |                     return;
 377 |                 }
 378 |                 _this.initTab(nodes, selector);
 379 |                 Y.one('#codecola-finder-wrap').removeClass('cc-open');
 380 |                 this.blur();
 381 |             }, '#codecola-finder-content');
 382 |             Y.on('click', function(e){
 383 |                 Y.one('#codecola-finder-wrap').removeClass('cc-open');
 384 |             }, '#codecola-finder-close');
 385 |         },
 386 | 
 387 |         initTab: function(node, selector){
 388 |             var _this = this,
 389 |                 wrap = Y.one('#codecola-controls'),
 390 |                 eyes = Y.all('.cc-close'),
 391 |                 items = [],
 392 |                 nodeType = node._nodes[0].nodeName.toLowerCase(),
 393 |                 plugs = _this.get('plugs'),
 394 |                 isClassOrMix = /\.|^mix$/.test(selector);
 395 |             
 396 |             if (!isClassOrMix && plugs[nodeType]) {
 397 |                 items = plugs[nodeType];
 398 |             } else if(isClassOrMix){
 399 |                 items = plugs['all'];
 400 |             } else{
 401 |                 items = plugs['normal'];
 402 |             }
 403 | 
 404 |             eyes.removeClass('cc-close').set('title', _this.chromeGetMSG('opt_hide'));
 405 | 
 406 |             Y.each(plugs.all, function(n) {
 407 |                 Y.one('#codecola-item-'+n).setStyle('display', '');
 408 |             });
 409 |             _this.set('codecolaCurrentNode', node);
 410 |             var isShow = Y.one('#codecola').hasClass('codecola-allOpen');
 411 |             Y.each(items, function(n) {
 412 |                 var li = Y.one('#codecola-item-' + n);
 413 |                 li.setStyle('display', 'block');
 414 |                 if (isShow) {
 415 |                     li.addClass('codecola-item-open');
 416 |                 }
 417 |                 li.removeClass('codecola-disable');
 418 |                 _this.initControls(n);
 419 |                 //sort
 420 |                 wrap.append(li);
 421 |             });
 422 | 
 423 |             _this._toggleMini('open');
 424 |             wrap.set('className', '');
 425 |             _this.updateCurrentNode(node.size(), selector);
 426 |             _this.updateStyle();
 427 |         },
 428 | 
 429 |         updateCurrentNode: function(len, selector) {
 430 |             Y.one('#codecola-current-node').set('title', selector).set('text', selector);
 431 |             Y.one('#codecola-current-node-count').set('text', len);
 432 |         },
 433 | 
 434 |         _bindOpenControl: function(){
 435 |             Y.one('#codecola-controls').delegate('click', function(e) {
 436 |                 if(e.target.hasClass('codecola-icon')){
 437 |                     return;
 438 |                 }
 439 |                 this.get('parentNode').toggleClass('codecola-item-open');
 440 |             }, '.codecola-item-title');
 441 |         },
 442 | 
 443 |         _bindCancel: function(){
 444 |             var cssStuff = [],
 445 |                 _this = this,
 446 |                 delegator = Y.one('#codecola-controls');
 447 |             delegator.delegate('click', function(e) {
 448 |                 e.stopPropagation();
 449 |                 var that = e.target,
 450 |                     data = this.getAttribute('data'),
 451 |                     propertys = data.split(','),
 452 |                     mutil = that.getAttribute('mutil');
 453 |                 Y.each(propertys, function(n) {
 454 |                     _this.setStyle(_this.get('codecolaCurrentNode'), n, '');
 455 |                     cssStuff[n] = '';
 456 |                     if (!mutil) {
 457 |                         //TODO: terrible
 458 |                         if(n === 'backgroundImage'){
 459 |                             n = 'linearGradient';
 460 |                         }
 461 |                         _this.initControls(n);
 462 |                     }
 463 |                 });
 464 |                 if (mutil) {
 465 |                     _this.initControls(mutil);
 466 |                 }
 467 |             }, '.codecola-cancel');
 468 | 
 469 |             delegator.delegate('click', function(e) {
 470 |                 e.stopPropagation();
 471 |                 var that = e.target,
 472 |                     data = that.getAttribute('data'),
 473 |                     propertys = data.split(','),
 474 |                     codecolaCurrentNode = _this.get('codecolaCurrentNode'),
 475 |                     wrap = that.ancestor('.codecola-item');
 476 |                 if (that.hasClass('cc-close')) {
 477 |                     wrap.removeClass('codecola-disable');
 478 |                     Y.each(propertys, function(n) {
 479 |                         _this.setStyle(codecolaCurrentNode, n, cssStuff[n]);
 480 |                     });
 481 |                     that.removeClass('cc-close').set('title', _this.chromeGetMSG('opt_hide'));
 482 |                 } else {
 483 |                     wrap.addClass('codecola-disable');
 484 |                     Y.each(propertys, function(n) {
 485 |                         cssStuff[n] = _this.getStyle(codecolaCurrentNode, n);
 486 |                         _this.setStyle(codecolaCurrentNode, n, '');
 487 |                     });
 488 |                     that.addClass('cc-close').set('title', _this.chromeGetMSG('opt_show'));
 489 |                 }
 490 |             }, '.codecola-eye');
 491 |         },
 492 | 
 493 |         _bindOpenAll: function(){
 494 |             var codecola = Y.one('#codecola'),
 495 |                 _this = this;
 496 |             Y.on('click', function(e) {
 497 |                 var lis = Y.all('.codecola-item');
 498 |                 if (codecola.hasClass('codecola-allOpen')) {
 499 |                     this.set('title', _this.chromeGetMSG('opt_unfoldAll'));
 500 |                     codecola.removeClass('codecola-allOpen');
 501 |                     lis.removeClass('codecola-item-open');
 502 |                 } else {
 503 |                     this.set('title', _this.chromeGetMSG('opt_foldAll'));
 504 |                     codecola.addClass('codecola-allOpen');
 505 |                     lis.addClass('codecola-item-open');
 506 |                 }
 507 |             }, '#codecola-open-all');
 508 |         },
 509 | 
 510 |         _bindMin: function(){
 511 |             var _this = this;
 512 |             Y.on('click', function(e) {
 513 |                 if (this.hasClass('cc-close')) {
 514 |                     _this._toggleMini('close');
 515 |                     Y.one('#codecola-controls').set('className', 'cc-close');
 516 |                 } else {
 517 |                     _this._toggleMini('open');
 518 |                     Y.one('#codecola-controls').set('className', '');
 519 |                 }
 520 |             }, '#codecola-fold');
 521 |         },
 522 | 
 523 |         _bindShowCurrentNode: function(){
 524 |             var _this = this;
 525 |             Y.on('mouseover', function(e) {
 526 |                 var codecolaCurrentNode = _this.get('codecolaCurrentNode');
 527 |                 if (codecolaCurrentNode) {
 528 |                     codecolaCurrentNode.addClass('codecola-selecting');
 529 |                     Y.one('#codecola').addClass('cc-fade');
 530 |                 }
 531 |             }, '#codecola-show-currentNode');
 532 |             Y.on('mouseout', function(e) {
 533 |                 var codecolaCurrentNode = _this.get('codecolaCurrentNode');
 534 |                 if (codecolaCurrentNode) {
 535 |                     codecolaCurrentNode.removeClass('codecola-selecting');
 536 |                     Y.one('#codecola').removeClass('cc-fade');
 537 |                 }
 538 |             }, '#codecola-show-currentNode');
 539 |         },
 540 | 
 541 |         _bindSwitch: function(){
 542 |             var _this = this;
 543 |             Y.on('click', function(e) {
 544 |                 if (this.hasClass('cc-open')) {
 545 |                     _this.isOn = false;
 546 |                     this.removeClass('cc-open').addClass('cc-close').set('title', _this.chromeGetMSG('opt_isOn'));
 547 |                 } else {
 548 |                     _this.isOn = true;
 549 |                     this.removeClass('cc-close').addClass('cc-open').set('title', _this.chromeGetMSG('opt_turnOff'));
 550 |                 }
 551 |             }, '#codecola-switch');
 552 |         },
 553 | 
 554 |         _bindGetStyle: function(){
 555 |             var _this = this;
 556 |             Y.on('click', function(e) {
 557 |                 if (this.hasClass('cc-open')) {
 558 |                     this.removeClass('cc-open').set('title', _this.chromeGetMSG('opt_showStyle'));
 559 |                     Y.one('#codecola-styles').removeClass('cc-open');
 560 |                 } else {
 561 |                     this.addClass('cc-open').set('title', _this.chromeGetMSG('opt_hideStyle'));
 562 |                     Y.one('#codecola-styles').addClass('cc-open');
 563 |                 }
 564 |             }, '#codecola-getStyles');
 565 |         },
 566 | 
 567 |         _bindSetStyle: function(){
 568 |             var node = Y.one('#codecola-styles'),
 569 |                 _this = this;
 570 |             node.on('keyup', function(e) {
 571 |                 var codecolaCurrentNode = _this.get('codecolaCurrentNode');
 572 |                 if (!_this.isOn || !codecolaCurrentNode) {
 573 |                     return
 574 |                 }
 575 |                 codecolaCurrentNode.setAttribute('style', this.get('value'));
 576 |             });
 577 |             node.on('change', function(e) {
 578 |                 if (!_this.isOn || !_this.get('codecolaCurrentNode')) {
 579 |                     return
 580 |                 }
 581 |                 _this.initControls();
 582 |             });
 583 |         },
 584 | 
 585 |         _bindGetHtml: function(){
 586 |             var wrap = Y.one('#codecola-getHTML-wrap'),
 587 |                 content = Y.one('#codecola-getHTML-content'),
 588 |                 _this = this;
 589 |             Y.on('click', function() {
 590 |                 Y.io(window.location.href, {
 591 |                     method: 'GET',
 592 |                     on: {
 593 |                         start: function() {
 594 |                             wrap.addClass('loadding');
 595 |                             content.set('value', 'loadding...');
 596 |                         },
 597 |                         success: function(id, o) {
 598 |                             var r = o.responseText.replace(/<body[\s\S]*<\/body>/i, document.body.outerHTML).replace(/(href|src|action)\s*\=\s*("|')[^"']+("|')/ig, function(url) {
 599 |                                 var rUrl = url.replace(/^(href|src|action)\s*\=\s*("|')/i, '').replace(/("|')$/, '');
 600 |                                 return url.replace(rUrl, _this.getAbsolutePath(rUrl));
 601 |                             });
 602 | 
 603 |                             content.set('value', r);
 604 |                             wrap.addClass('cc-open');
 605 |                         }
 606 |                     }
 607 |                 });
 608 |             }, '#codecola-getHTML');
 609 |             Y.on('click', function() {
 610 |                 wrap.removeClass('cc-open').removeClass('loadding');
 611 |             }, '#codecola-getHTML-close');
 612 |         },
 613 | 
 614 |         _bindGetLink: function(){
 615 |             var wrap = Y.one('#codecola-save-wrap'),
 616 |                 content = Y.one('#codecola-save-content'),
 617 |                 _this = this;
 618 |             Y.on('click', function() {
 619 |                 var action,
 620 |                     optionUrl = _this.chromeGetURL('options.html');
 621 |                 _this.chromeSendRequest('getUrls', function(o) {
 622 |                     action = o.action;
 623 |                     if (!action) {
 624 |                         window.open(optionUrl);
 625 |                         return;
 626 |                     }
 627 |                     var config = {
 628 |                         method: 'GET',
 629 |                         on: {
 630 |                             start: function() {
 631 |                                 wrap.addClass('loadding');
 632 |                                 content.set('value', 'loadding...');
 633 |                             },
 634 |                             success: function(id, o) {
 635 |                                 var r = o.responseText.replace(/<body[\s\S]*<\/body>/i, document.body.outerHTML).replace(/(href|src|action)\s*\=\s*("|')[^"']+("|')/ig, function(url) {
 636 |                                     var rUrl = url.replace(/^(href|src|action)\s*\=\s*("|')/i, '').replace(/("|')$/, '');
 637 |                                     return url.replace(rUrl, _this.getAbsolutePath(rUrl));
 638 |                                 });
 639 |                                 try {
 640 |                                     Y.io(action, {
 641 |                                         method: 'POST',
 642 |                                         data: 'charset=' + document.charset + '&html=' + encodeURIComponent(r),
 643 |                                         headers: {
 644 |                                             'Content-Type': 'application/x-www-form-urlencoded'
 645 |                                         },
 646 |                                         on: {
 647 |                                             success: function(id, o) {
 648 |                                                 try {
 649 |                                                     var json = JSON.parse(o.responseText);
 650 |                                                 } catch (ex) {
 651 |                                                     wrap.removeClass('loadding');
 652 |                                                     alert(_this.chromeGetMSG('error_server_fail'));
 653 |                                                 }
 654 |                                                 if (json.code == '200') {
 655 |                                                     content.set('value', json.url);
 656 |                                                     wrap.addClass('cc-open');
 657 |                                                     content.select();
 658 |                                                 } else if (json.code == '900') {
 659 |                                                     content.set('value', json.message);
 660 |                                                     wrap.addClass('cc-open');
 661 |                                                 }
 662 |                                             }
 663 |                                         }
 664 |                                     });
 665 |                                 } catch (ex2) {
 666 |                                     window.open(optionUrl);
 667 |                                     alert(_this.chromeGetMSG('error_connect_server'));
 668 |                                 }
 669 |                             }
 670 |                         }
 671 |                     };
 672 |                     Y.io(window.location.href, config);
 673 |                 });
 674 |             }, '#codecola-save');
 675 |             Y.on('click', function() {
 676 |                 wrap.removeClass('cc-open').removeClass('loadding');
 677 |             }, '#codecola-save-close');
 678 |         },
 679 | 
 680 |         _bindAbout: function(){
 681 |             Y.on('click', function() {
 682 |                 Y.one('#codecola-about-wrap').addClass('cc-open');
 683 |             }, '#codecola-show-about');
 684 |             Y.on('click', function() {
 685 |                 Y.one('#codecola-about-wrap').removeClass('cc-open');
 686 |             }, '#codecola-about-close');
 687 |         },
 688 | 
 689 |         _bindShare: function(){
 690 |             var _this = this, form = Y.one('#codecola-patterns');
 691 |             Y.on('click', function(e) {
 692 |                 form.submit();
 693 |             }, '#codecola-share');
 694 |         },
 695 | 
 696 |         _bindDrag: function(){
 697 |             var codecola = Y.one('#codecola');
 698 |             codecola.plug(Y.Plugin.Drag);
 699 |             codecola.dd.addHandle('#codecola-drag');
 700 |         },
 701 | 
 702 |         _bindBeforeunload: function(){
 703 |             var _this = this;
 704 |             //TODO: yui3 event bug
 705 |             window.onbeforeunload = function(){
 706 |                 return _this.chromeGetMSG('confirm_unload');
 707 |             }
 708 |         },
 709 | 
 710 |         chromeGetURL: function(url){
 711 |             return Y.codecola.isChromeExtension?chrome.extension.getURL(url):url;
 712 |         },
 713 | 
 714 |         chromeGetMSG: function(key) {
 715 |             if(Y.codecola.isChromeExtension){
 716 |                 return chrome.i18n.getMessage(key);
 717 |             }else{
 718 |                 return codecola.i18n[key].message;
 719 |             }
 720 |         },
 721 | 
 722 |         chromeSendRequest: function(query, callback){
 723 |             if(Y.codecola.isChromeExtension){
 724 |                 chrome.extension.sendRequest(query, callback);
 725 |             }else{
 726 |                 if(query == 'getUrls'){
 727 |                     var action = this.get('saveAction');
 728 |                     if(!action){
 729 |                         alert('Please config the property of "saveAction"!');
 730 |                         return;
 731 |                     }
 732 |                     callback({
 733 |                         action: action
 734 |                     });
 735 |                 }
 736 |             }
 737 |         },
 738 | 
 739 |         chromeOnMessage: function(callback){
 740 |             if(Y.codecola.isChromeExtension){
 741 |                 chrome.runtime.onMessage.addListener(callback);
 742 |             }
 743 |         },
 744 | 
 745 |         renderTPL: function(html){
 746 |             var _this = this;
 747 |             html = html.replace(/{{([\w_]+)}}/gi, function(match, key){
 748 |                 return _this.chromeGetMSG(key);
 749 |             });
 750 |             return html;
 751 |         },
 752 | 
 753 |         getAbsolutePath: function(url) {
 754 |             var a = document.createElement('a');
 755 |             a.href = url;
 756 |             return a.href;
 757 |         },
 758 | 
 759 |         getStyle: function(node, property) {
 760 |             if (node._nodes) {
 761 |                 node = node.item(0);
 762 |             }
 763 |             //property = CODECOLA.cssExtension(property);
 764 |             switch (property) {
 765 |             case 'borderTop':
 766 |                 property = ['borderTopWidth', 'borderTopStyle', 'borderTopColor'];
 767 |                 break;
 768 |             case 'borderRight':
 769 |                 property = ['borderRightWidth', 'borderRightColor', 'borderRightStyle'];
 770 |                 break;
 771 |             case 'borderBottom':
 772 |                 property = ['borderBottomWidth', 'borderBottomColor', 'borderBottomStyle'];
 773 |                 break;
 774 |             case 'borderLeft':
 775 |                 property = ['borderLeftWidth', 'borderLeftColor', 'borderLeftStyle'];
 776 |                 break;
 777 |             case 'borderRadius':
 778 |                 property = ['borderTopLeftRadius', 'borderTopRightRadius', 'borderBottomRightRadius', 'borderBottomLeftRadius'];
 779 |                 break;
 780 |             case 'padding':
 781 |                 property = ['paddingTop', 'paddingRight', 'paddingBottom', 'paddingLeft'];
 782 |                 break;
 783 |             case 'margin':
 784 |                 property = ['marginTop', 'marginRight', 'marginBottom', 'marginLeft'];
 785 |                 break;
 786 |             case 'listStyle':
 787 |                 property = ['listStylePosition', 'listStyleType'];
 788 |                 break;
 789 |             }
 790 |             if (typeof property == 'string') {
 791 |                 return node.getStyle(property);
 792 |             } else {
 793 |                 var value = [];
 794 |                 for (var i = 0, j = property.length; i < j; i++) {
 795 |                     value[i] = node.getStyle(property[i]);
 796 |                 }
 797 |                 return value.join(' ');
 798 |             }
 799 |         },
 800 | 
 801 |         getCombinedStyle: function(style) {
 802 |             var styles = Y.Lang.trim(style).split(/;(?!base64)/),
 803 |                 cssRules = {},
 804 |                 styleProperty = '',
 805 |                 deleteFun = function(array) {
 806 |                     Y.each(array, function(n) {
 807 |                         delete cssRules[n];
 808 |                     });
 809 |                 },
 810 |                 layoutFun = function(list, property, defaultValue, space) {
 811 |                     var t = cssRules[list[0]],
 812 |                         r = cssRules[list[1]],
 813 |                         b = cssRules[list[2]],
 814 |                         l = cssRules[list[3]];
 815 |                     space = space?space:' ';
 816 |                     if (t || r || b || l) {
 817 |                         t = t ? t : defaultValue;
 818 |                         r = r ? r : defaultValue;
 819 |                         b = b ? b : defaultValue;
 820 |                         l = l ? l : defaultValue;
 821 |                         if (t == r && t == b && t == l) {
 822 |                             cssRules[property] = t;
 823 |                         } else {
 824 |                             cssRules[property] = t + space + r + space + b + space + l;
 825 |                         }
 826 |                         deleteFun(list);
 827 |                     }
 828 |                 };
 829 |             for (var i = 0, j = styles.length - 1; i < j; i++) {
 830 |                 if (styles[i] == '') {
 831 |                     continue;
 832 |                 }
 833 |                 var s = styles[i].split(/:(?!\/\/|image)/),
 834 |                     //url(http://xxx)
 835 |                     s0 = Y.Lang.trim(s[0]),
 836 |                     s1 = Y.Lang.trim(s[1]);
 837 |                 //webkit only
 838 |                 if(s0 != '-webkit-mask-image' && s0 != '-webkit-mask' && s0 != '-webkit-box-reflect' && s0 != '-webkit-text-stroke' && s0 != '-webkit-text-stroke-width' && s0 != '-webkit-text-stroke-color' && s0 != '-webkit-text-fill-color' && s0 != '-webkit-text-size-adjust'){
 839 |                     s0 = s0.replace(/-webkit-|-o-|-ms-|-moz-/, '');
 840 |                 }
 841 |                 cssRules[s0] = s1;
 842 |             }
 843 |             //combine border
 844 |             var borderTop = ['border-top-width', 'border-top-style', 'border-top-color'],
 845 |                 borderRight = ['border-right-width', 'border-right-style', 'border-right-color'],
 846 |                 borderBottom = ['border-bottom-width', 'border-bottom-style', 'border-bottom-color'],
 847 |                 borderLeft = ['border-left-width', 'border-left-style', 'border-left-color'],
 848 |                 borders = {
 849 |                     'border-top': borderTop,
 850 |                     'border-right': borderRight,
 851 |                     'border-bottom': borderBottom,
 852 |                     'border-left': borderLeft
 853 |                 };
 854 |             if (typeof cssRules[borderTop[0]] != 'undefined' && typeof cssRules[borderTop[1]] != 'undefined' && typeof cssRules[borderTop[2]] != 'undefined' && cssRules[borderTop[0]] == cssRules[borderRight[0]] && cssRules[borderTop[0]] == cssRules[borderBottom[0]] && cssRules[borderTop[0]] == cssRules[borderLeft[0]] && cssRules[borderTop[1]] == cssRules[borderRight[1]] && cssRules[borderTop[1]] == cssRules[borderBottom[1]] && cssRules[borderTop[1]] == cssRules[borderLeft[1]] && cssRules[borderTop[2]] == cssRules[borderRight[2]] && cssRules[borderTop[2]] == cssRules[borderBottom[2]] && cssRules[borderTop[2]] == cssRules[borderLeft[2]]) {
 855 |                 if (cssRules[borderTop[1]] == 'none' || cssRules[borderTop[0]] == '0px') {
 856 |                     cssRules['border'] = 'none';
 857 |                 } else {
 858 |                     cssRules['border'] = cssRules[borderTop[0]] + ' ' + cssRules[borderTop[1]] + ' ' + cssRules[borderTop[2]];
 859 |                 }
 860 |                 deleteFun(borderTop.concat(borderRight.concat(borderBottom.concat(borderLeft))));
 861 |             } else {
 862 |                 for (var i in borders) {
 863 |                     var b = borders[i];
 864 |                     if (cssRules[b[0]] && cssRules[b[1]] && cssRules[b[2]]) {
 865 |                         if (cssRules[b[1]] == 'none' || cssRules[b[0]] == '0px') {
 866 |                             cssRules[i] = 'none';
 867 |                         } else {
 868 |                             cssRules[i] = cssRules[b[0]] + ' ' + cssRules[b[1]] + ' ' + cssRules[b[2]];
 869 |                         }
 870 |                         deleteFun(b);
 871 |                     }
 872 |                 }
 873 |             }
 874 |             //combine padding
 875 |             layoutFun(['padding-top', 'padding-right', 'padding-bottom', 'padding-left'], 'padding', '0px');
 876 |             //combine margin
 877 |             layoutFun(['margin-top', 'margin-right', 'margin-bottom', 'margin-left'], 'margin', '0px');
 878 |             //combine border-radius
 879 |             layoutFun(['border-top-left-radius', 'border-top-right-radius', 'border-bottom-right-radius', 'border-bottom-left-radius'], 'border-radius', '0px 0px', ',');
 880 |             for (var i in cssRules) {
 881 |                 if (i == 'font-family') {
 882 |                     styleProperty += 'font-family:' + escape(cssRules[i].replace(/\s*,\s*/g, ',')).replace(/%/g, '\\').replace(/\\2C/g, ',').replace(/\\20/g, ' ').replace(/\\27/g, '"') + ';';
 883 |                 }else if (i == 'box-shadow') {
 884 |                     styleProperty += ('-webkit-box-shadow:' + cssRules[i] + ';-moz-box-shadow:' + cssRules[i] + ';box-shadow:' + cssRules[i] + ';');
 885 |                 } else if (i == 'border-radius') {
 886 |                     styleProperty += ('-webkit-border-radius:' + cssRules[i] + ';-moz-border-radius:' + cssRules[i] + ';border-radius:' + cssRules[i] + ';');
 887 |                 } else if (i == 'background-image' && (/linear\-gradient/.test(cssRules[i]) || /webkit\-gradient\(linear/.test(cssRules[i]))) {
 888 |                     var _gradients = this.linearGradient.gradient.getGradient(true);
 889 |                     styleProperty += ('background-image:' + _gradients.webkit + ';background-image:' + _gradients.moz + ';background-image:' + _gradients.o + ';background-image:' + _gradients.ms + ';');
 890 |                 } else if (i == 'transform') {
 891 |                     styleProperty += ('-webkit-transform:' + cssRules[i] + ';-moz-transform:' + cssRules[i] + ';-o-transform:' + cssRules[i] + ';-ms-transform:' + cssRules[i] + ';transform:' + cssRules[i] + ';');
 892 |                 } else if (/transform-origin/.test(i)) {
 893 |                     cssRules['transform-origin-x'] = cssRules['transform-origin-x']?cssRules['transform-origin-x']:'50%';
 894 |                     cssRules['transform-origin-y'] = cssRules['transform-origin-y']?cssRules['transform-origin-y']:'50%';
 895 |                     cssRules['transform-origin'] = cssRules['transform-origin-x'] == cssRules['transform-origin-y']?cssRules['transform-origin-x']:cssRules['transform-origin-x'] + ' ' + cssRules['transform-origin-y'];
 896 |                     deleteFun(['transform-origin-x', 'transform-origin-y']);
 897 |                     styleProperty += ('-webkit-transform-origin:' + cssRules['transform-origin'] + ';-moz-transform-origin:' + cssRules['transform-origin'] + ';-o-transform-origin:' + cssRules['transform-origin'] + ';-ms-transform-origin:' + cssRules['transform-origin'] + ';transform-origin:' + cssRules['transform-origin'] + ';');
 898 |                 } else {
 899 |                     styleProperty += i + ':' + cssRules[i] + ';';
 900 |                 }
 901 |             }
 902 |             return styleProperty.replace(/;(?!base64)/g, ';\r\n');
 903 |         },
 904 | 
 905 |         setStyle: function(nodes, property, value) {
 906 |             nodes.setStyle(property, value);
 907 |             this.updateStyle();
 908 |         },
 909 | 
 910 |         getAttr: function(nodes, property) {
 911 |             return nodes.getAttribute(property)[0];
 912 |         },
 913 | 
 914 |         updateStyle: function() {
 915 |             var codecolaCurrentNode = this.get('codecolaCurrentNode');
 916 |             if (!codecolaCurrentNode || !this.isOn) {
 917 |                 return;
 918 |             } //fix -webkit-user-select
 919 |             var style = this.getAttr(codecolaCurrentNode, 'style');
 920 |             if (!style) {
 921 |                 Y.one('#codecola-styles').set('value', '');
 922 |             } else {
 923 |                 Y.one('#codecola-styles').set('value', this.getCombinedStyle(style));
 924 |             }
 925 |         },
 926 | 
 927 |         _toggleMini: function(type){
 928 |             if(type == 'close'){
 929 |                 Y.one('#codecola-fold').set('className', '').set('title', this.chromeGetMSG('opt_unfold'));
 930 |             }else{
 931 |                 Y.one('#codecola-fold').set('className', 'cc-close').set('title', this.chromeGetMSG('opt_fold'));
 932 |             }
 933 |         },
 934 | 
 935 |         initControls: function(control){
 936 |             var _this = this;
 937 |             if(!control){
 938 |                 var items = _this.get('plugs').all;
 939 |                 Y.each(items, function(n) {
 940 |                     _this[n].sync(_this, Y);
 941 |                 });
 942 |             }else{
 943 |                 _this[control].sync(_this, Y);
 944 |             }
 945 |         },
 946 | 
 947 |         //for plugins
 948 |         bindRange: function(selector, format, type, callback) {
 949 |             var wrap = Y.one(selector),
 950 |                 items = type=='select'?wrap.all('select'):wrap.all('input'),
 951 |                 allSame = wrap.one('input'),
 952 |                 len = items.size(),
 953 |                 _this = this;
 954 |             items.each(function(item){
 955 |                 if(item.get('type') == 'checkbox'){
 956 |                     return
 957 |                 }
 958 |                 item.on("change", function(e) {
 959 |                     var that = this,
 960 |                         value = that.get('value'),
 961 |                         property = that.get('name'),
 962 |                         next = that.next(),
 963 |                         previous = that.previous();
 964 |                     if (allSame.get('checked')) {
 965 |                         property = allSame.get('name');
 966 |                         for (var k = type=='select'?1:2; k < len; k++) {
 967 |                             items.item(k).set('value', value);
 968 |                         }
 969 |                     }
 970 |                     if(next){
 971 |                         next.set('value', value);
 972 |                     }else if(previous){
 973 |                         previous.set('value', value);
 974 |                     }
 975 |                     value = format?format(value):value;
 976 |                     if(callback){
 977 |                         callback(value);
 978 |                     }else{
 979 |                         _this.setStyle(_this.get('codecolaCurrentNode'), property, value);
 980 |                     }
 981 |                 });
 982 |             });
 983 |         },
 984 | 
 985 |         bindSame: function(selector) {
 986 |             var _this = this;
 987 |             Y.one(selector).on("click", function(e) {
 988 |                 var that = this,
 989 |                     items = that.get('parentNode').next().all('input,select'),
 990 |                     len = items.size(),
 991 |                     name = that.get('name'),
 992 |                     k = /selects/.test(that.get('className')) ? 1 : 2;
 993 |                 if (!that.get('checked')) {
 994 |                     for (; k < len; k++) {
 995 |                         items.item(k).set('disabled', false);
 996 |                     }
 997 |                 } else {
 998 |                     var firstItem = items.item(0),
 999 |                         value = firstItem.get('value');
1000 |                     for (; k < len; k++) {
1001 |                         items.item(k).set('value', value).set('disabled', true);
1002 |                     }
1003 |                     value = !isNaN(value) ? value + "px" : value;
1004 |                     firstItem.focus();
1005 |                     _this.setStyle(_this.get('codecolaCurrentNode'), name, value);
1006 |                 }
1007 |             });
1008 |         },
1009 | 
1010 |         initRange: function(control, filter, format, callback){
1011 |             control = Y.one(control);
1012 |             var value = this.getStyle(this.get('codecolaCurrentNode'), control.get('name'));
1013 | 
1014 |             if (!filter || !filter.test(value)) {
1015 |                 value = value.replace(/px/g, '');
1016 |                 if(format){
1017 |                     value = format(value);
1018 |                 }
1019 |                 control.set('value', value).next().set('value', value);
1020 |             }
1021 |         },
1022 | 
1023 |         initSelect: function(control, filter, format, callback){
1024 |             control = Y.one(control);
1025 |             var value = this.getStyle(this.get('codecolaCurrentNode'), control.get('name'));
1026 | 
1027 |             if (!filter || !filter.test(value)) {
1028 |                 control.set('value', value);
1029 |             }
1030 |         }
1031 |     }, {
1032 | 
1033 |         isChromeExtension: typeof chrome != 'undefined' && chrome.extension,
1034 | 
1035 |         ATTRS:{
1036 |             plugs: {
1037 |                 value: function(){
1038 |                     var LOADER = {
1039 |                         all: ['fontFamily', 'fontSize', 'lineHeight', 'color', 'fontOther', 'textAlign', 'textShadow', 'webkitTextStroke', 'background', 'linearGradient', 'opacity', 'boxShadow', 'webkitMaskImage', 'webkitBoxReflect', 'transform', 'border', 'borderRadius', 'layout', 'size', 'listStyle'],
1040 |                         normal: ['fontFamily', 'fontSize', 'lineHeight', 'color', 'fontOther', 'textAlign', 'textShadow', 'webkitTextStroke', 'background', 'linearGradient', 'opacity', 'boxShadow', 'webkitMaskImage', 'webkitBoxReflect', 'transform', 'border', 'borderRadius', 'layout', 'size'],
1041 |                         list: ['listStyle', 'fontFamily', 'fontSize', 'lineHeight', 'color', 'fontOther', 'textAlign', 'textShadow', 'webkitTextStroke', 'background', 'linearGradient', 'opacity', 'boxShadow', 'webkitMaskImage', 'webkitBoxReflect', 'transform', 'borderRadius', 'border', 'layout', 'size'],
1042 |                         img: ['size', 'border', 'borderRadius', 'boxShadow', 'transform', 'opacity', 'background', 'linearGradient', 'webkitMaskImage', 'webkitBoxReflect', 'layout']
1043 |                     };
1044 |                     if(!Y.UA.webkit){
1045 |                         Y.each(LOADER, function(i, key){
1046 |                             Y.each(i, function(item, index){
1047 |                                 if(/webkit/.test(item)){
1048 |                                     delete LOADER[key][index];
1049 |                                 }
1050 |                             });
1051 |                         });
1052 |                     }
1053 |                     LOADER['li'] = LOADER['ol'] = LOADER['ul'] = LOADER.list;
1054 |                     return LOADER;
1055 |                 }()
1056 |             },
1057 |             saveAction: {
1058 |                 validator: function(val){
1059 |                     return /^([^:]+):\/\/(?:([^:@]+):?([^@]*)@)?(?:([^/?#:]+):?(\d*))([^?#]*)(?:\?([^#]+))?(?:#(.+))?$/.test(val);
1060 |                 }
1061 |             }
1062 |         }
1063 |     });
1064 | }, '3.5.0', {requires:['codecola-i18n', 'codecola-plugs', 'codecola-color', 'codecola-gradient', 'codecola-degree', 'codecola-css', 'widget-base', 'node-base', 'event-base', 'io-base', 'dd-plugin', 'ua', 'json-parse']});
1065 | 
1066 | YUI().use('codecola', function(Y){
1067 |     var _codecola = new Y.codecola({
1068 |         //for get link function when not in chrome extension environment
1069 |         //saveAction: 'http://dev/dev/codecola/codecola.php'
1070 |     });
1071 | 
1072 |     var plugs = window.codecola.plug;
1073 |     Y.each(plugs, function(plug){
1074 |         _codecola.plug(plug);
1075 |     });
1076 | 
1077 |     _codecola.render();
1078 | });
1079 | 
1080 | })();


--------------------------------------------------------------------------------