├── src ├── public │ ├── CNAME │ ├── favicon.ico │ ├── favicon.png │ ├── images │ │ ├── icons.png │ │ ├── logo.png │ │ └── farbtastic │ │ │ ├── mask.png │ │ │ ├── marker.png │ │ │ └── wheel.png │ └── index.html ├── css │ ├── _sake.scss │ └── main.scss ├── vendor │ ├── css │ │ └── farbtastic.scss │ └── js │ │ ├── farbtastic.js │ │ └── jquery-1.9.1.min.js └── js │ ├── start.js │ ├── sake.js │ └── main.js ├── .gitignore ├── .circleci └── config.yml ├── postcss.config.js ├── README.md ├── scripts └── deploy-ghpages.sh └── package.json /src/public/CNAME: -------------------------------------------------------------------------------- 1 | getcolor.ru -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | dist 3 | .idea 4 | src/css/*.css -------------------------------------------------------------------------------- /src/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pfrankov/getcolor/HEAD/src/public/favicon.ico -------------------------------------------------------------------------------- /src/public/favicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pfrankov/getcolor/HEAD/src/public/favicon.png -------------------------------------------------------------------------------- /src/public/images/icons.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pfrankov/getcolor/HEAD/src/public/images/icons.png -------------------------------------------------------------------------------- /src/public/images/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pfrankov/getcolor/HEAD/src/public/images/logo.png -------------------------------------------------------------------------------- /src/public/images/farbtastic/mask.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pfrankov/getcolor/HEAD/src/public/images/farbtastic/mask.png -------------------------------------------------------------------------------- /src/public/images/farbtastic/marker.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pfrankov/getcolor/HEAD/src/public/images/farbtastic/marker.png -------------------------------------------------------------------------------- /src/public/images/farbtastic/wheel.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pfrankov/getcolor/HEAD/src/public/images/farbtastic/wheel.png -------------------------------------------------------------------------------- /.circleci/config.yml: -------------------------------------------------------------------------------- 1 | version: 2 2 | general: 3 | branches: 4 | ignore: 5 | - gh-pages 6 | 7 | test: 8 | override: 9 | - exit 0 10 | jobs: 11 | build: 12 | docker: 13 | - image: circleci/node:latest 14 | steps: 15 | - checkout 16 | - run: npm install 17 | - run: npm run build 18 | - deploy: 19 | name: GH Pages 20 | command: ./scripts/deploy-ghpages.sh dist 21 | -------------------------------------------------------------------------------- /postcss.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | plugins: [ 3 | require("autoprefixer")({ 4 | browsers: ["last 2 versions", "> 1%", "ie >= 7"] 5 | }), 6 | require("postcss-csso")({ 7 | comments: false 8 | }), 9 | require("cssnano")({ 10 | mergeRules: false, 11 | discardComments: false 12 | }), 13 | require("postcss-cssstats")(function (stats) { 14 | console.log("Size: ", stats.size, ", ", "gzip Size", stats.gzipSize); 15 | }) 16 | ] 17 | }; -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # getColor 2 | Colors exchanging SPA right from 2010. 3 | 4 | Pull requests welcome! 5 | 6 | If you want to help but have no idea where to start — just check the ToDo below. 7 | 8 | #### ToDo list: 9 | - [ ] Improve development procedure. Now it's `npm run build && npm run preview` 10 | - [ ] Fix non-retina images and icons 11 | - [ ] Change favicon for retina displays 12 | - [ ] Switch from farbtastic to something more 13 | - [ ] Other UX/UI improvements 14 | - [ ] TypeScript or ES6+ compilation 15 | -------------------------------------------------------------------------------- /src/css/_sake.scss: -------------------------------------------------------------------------------- 1 | ul.sake { 2 | list-style: none; 3 | position: absolute; 4 | margin: 6px 0 0; 5 | z-index: 10; 6 | padding: 0 8px; 7 | text-align: center; 8 | left: 0; 9 | top: 37px; 10 | 11 | li.sake { 12 | cursor: pointer; 13 | line-height: 1.2em; 14 | margin: 0 6px 6px 0; 15 | 16 | display: inline-block; 17 | 18 | border-radius: 10px; 19 | 20 | &.active { 21 | //background:#90e6ff; 22 | } 23 | b { 24 | font-size: 1.5em; 25 | font-weight: normal; 26 | } 27 | } 28 | } 29 | -------------------------------------------------------------------------------- /src/vendor/css/farbtastic.scss: -------------------------------------------------------------------------------- 1 | /** 2 | * Farbtastic Color Picker 1.2 3 | * © 2008 Steven Wittens 4 | * 5 | * This program is free software; you can redistribute it and/or modify 6 | * it under the terms of the GNU General Public License as published by 7 | * the Free Software Foundation; either version 2 of the License, or 8 | * (at your option) any later version. 9 | * 10 | * This program is distributed in the hope that it will be useful, 11 | * but WITHOUT ANY WARRANTY; without even the implied warranty of 12 | * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the 13 | * GNU General Public License for more details. 14 | * 15 | * You should have received a copy of the GNU General Public License 16 | * along with this program; if not, write to the Free Software 17 | * Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301 USA 18 | */ 19 | .farbtastic { 20 | position: relative; 21 | } 22 | .farbtastic * { 23 | position: absolute; 24 | cursor: crosshair; 25 | } 26 | .farbtastic, .farbtastic .wheel { 27 | width: 195px; 28 | height: 195px; 29 | } 30 | .farbtastic .color, .farbtastic .overlay { 31 | top: 47px; 32 | left: 47px; 33 | width: 101px; 34 | height: 101px; 35 | } 36 | .farbtastic .wheel { 37 | background: url(../images/farbtastic/wheel.png) no-repeat; 38 | width: 195px; 39 | height: 195px; 40 | } 41 | .farbtastic .overlay { 42 | background: url(../images/farbtastic/mask.png) no-repeat; 43 | } 44 | .farbtastic .marker { 45 | width: 17px; 46 | height: 17px; 47 | margin: -8px 0 0 -8px; 48 | overflow: hidden; 49 | background: url(../images/farbtastic/marker.png) no-repeat; 50 | } 51 | -------------------------------------------------------------------------------- /scripts/deploy-ghpages.sh: -------------------------------------------------------------------------------- 1 | #!/bin/sh 2 | # ideas used from https://gist.github.com/motemen/8595451 3 | 4 | # abort the script if there is a non-zero error 5 | set -e 6 | 7 | # show where we are on the machine 8 | pwd 9 | 10 | remote=$(git config remote.origin.url) 11 | 12 | siteSource="$1" 13 | 14 | if [ ! -d "$siteSource" ] 15 | then 16 | echo "Usage: $0 " 17 | exit 1 18 | fi 19 | 20 | # make a directory to put the gp-pages branch 21 | mkdir gh-pages-branch 22 | cd gh-pages-branch 23 | # now lets setup a new repo so we can update the gh-pages branch 24 | git config --global user.email "$GH_EMAIL" > /dev/null 2>&1 25 | git config --global user.name "$GH_NAME" > /dev/null 2>&1 26 | git init 27 | git remote add --fetch origin "$remote" 28 | 29 | # switch into the the gh-pages branch 30 | if git rev-parse --verify origin/gh-pages > /dev/null 2>&1 31 | then 32 | git checkout gh-pages 33 | # delete any old site as we are going to replace it 34 | # Note: this explodes if there aren't any, so moving it here for now 35 | git rm -rf . 36 | else 37 | git checkout --orphan gh-pages 38 | fi 39 | 40 | # copy over or recompile the new site 41 | cp -a "../${siteSource}/." . 42 | 43 | # stage any changes and new files 44 | git add -A 45 | # now commit, ignoring branch gh-pages doesn't seem to work, so trying skip 46 | git commit --allow-empty -m "Deploy to GitHub pages [ci skip]" 47 | # and push, but send any output to /dev/null to hide anything sensitive 48 | git push --force --quiet origin gh-pages > /dev/null 2>&1 49 | 50 | # go back to where we started and remove the gh-pages git repo we made and used 51 | # for deployment 52 | cd .. 53 | rm -rf gh-pages-branch 54 | 55 | echo "Finished Deployment!" 56 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "getcolor", 3 | "version": "1.0.0", 4 | "description": "Tooltips that works on touch-based devices", 5 | "scripts": { 6 | "uglify-main": "mkdir -p dist/js/ && uglifyjs src/vendor/js/jquery-1.9.1.min.js src/vendor/js/farbtastic.js src/js/main.js src/js/sake.js --compress --mangle -o dist/js/main.js", 7 | "uglify-start": "mkdir -p dist/js/ && uglifyjs src/js/start.js --compress --mangle -o dist/js/start.js", 8 | "copy-public": "cpx \"src/public/**\" dist/", 9 | "post": "postcss -c postcss.config.js -o dist/css/main.css src/css/*.css", 10 | "pre": "node-sass src/css/ --output src/css", 11 | "watch": "npm run pre -- --watch", 12 | "preview": "lite-server --baseDir=\"./dist/\" --open", 13 | "server": "concurrently \"npm run preview\" \"npm run watch\"", 14 | "build": "rimraf dist && npm run copy-public && npm run pre && npm run post && npm run uglify-main && npm run uglify-start", 15 | "deploy": "deploy-to-git" 16 | }, 17 | "repository": { 18 | "type": "git", 19 | "url": "git+https://github.com/pfrankov/getcolor.git" 20 | }, 21 | "author": { 22 | "name": "Pavel Frankov", 23 | "email": "pavel@frankov.ru" 24 | }, 25 | "license": "MIT", 26 | "bugs": { 27 | "url": "https://github.com/pfrankov/getcolor/issues" 28 | }, 29 | "homepage": "https://github.com/pfrankov/getcolor", 30 | "devDependencies": { 31 | "autoprefixer": "^6.7.7", 32 | "concurrently": "^3.4.0", 33 | "copyfiles": "^1.2.0", 34 | "cpx": "^1.5.0", 35 | "cssnano": "^3.10.0", 36 | "http-server": "^0.9.0", 37 | "lite-server": "^2.3.0", 38 | "node-sass": "^4.5.3", 39 | "postcss-cli": "^3.0.0", 40 | "postcss-csso": "^2.0.0", 41 | "postcss-cssstats": "^1.0.0", 42 | "rimraf": "^2.6.2", 43 | "uglify-js": "^3.1.3" 44 | } 45 | } 46 | -------------------------------------------------------------------------------- /src/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | getColor — online color picker 11 | 12 | 13 | 14 | 15 |
16 |

17 | Поиск цвета по названию 18 |

19 |
20 | 21 |
22 |
23 |
24 |
25 |

26 |

27 |
28 |
29 | 30 |
31 |
32 | 36 |
37 |
38 |
39 | 40 |
41 |
42 |
43 |
44 | 66 |
67 | 68 | 69 | getColor 70 | 71 |
72 |

73 | getColor — лёгкий и удобный online color picker, позволяющий выбрать цвет и обмениваться полученными цветами. Ничего более. 74 |

75 | Сделано с любовью. Павел Франков 76 |
77 |
78 | 79 | 80 | 81 | 82 | 83 | 84 | 85 | 99 | -------------------------------------------------------------------------------- /src/js/start.js: -------------------------------------------------------------------------------- 1 | var Cookies = { 2 | set: function (name, value, expires, path, domain, secure) { 3 | var now = new Date(); 4 | var twoYearsAfter = new Date(now.getTime() + (365 * 2 * 24 * 60 * 60 * 1000)); 5 | 6 | expires = expires || twoYearsAfter.toGMTString(); 7 | document.cookie = name + "=" + escape(value) + 8 | ((expires) ? "; expires=" + expires : "") + 9 | ((path) ? "; path=" + path : "") + 10 | ((domain) ? "; domain=" + domain : "") + 11 | ((secure) ? "; secure" : ""); 12 | return value; 13 | }, 14 | get: function (name) { 15 | var cookie = " " + document.cookie; 16 | var search = " " + name + "="; 17 | var setStr = null; 18 | var offset = 0; 19 | var end = 0; 20 | if (cookie.length > 0) { 21 | offset = cookie.indexOf(search); 22 | if (offset !== -1) { 23 | offset += search.length; 24 | end = cookie.indexOf(";", offset); 25 | if (end === -1) { 26 | end = cookie.length; 27 | } 28 | setStr = unescape(cookie.substring(offset, end)); 29 | } 30 | } 31 | return (setStr); 32 | } 33 | }; 34 | 35 | 36 | var Watch = { 37 | // obj:Object, property:String 38 | start: function (obj, property, callback) { 39 | obj.watchInterval = obj.watchInterval || {}; 40 | 41 | if (!obj.watchInterval[property]) { 42 | var startValue = obj[property]; 43 | 44 | 45 | obj.watchInterval[property] = setInterval(function () { 46 | if (startValue !== obj[property]) { 47 | callback(obj); 48 | startValue = obj[property]; 49 | } 50 | }, 10); 51 | } 52 | }, 53 | stop: function (obj, property) { 54 | if (!property) { 55 | 56 | for (property in obj) { 57 | clearInterval(obj.watchInterval[property]); 58 | } 59 | obj.watchInterval = {}; 60 | } 61 | clearInterval(obj.watchInterval[property]); 62 | obj.watchInterval[property] = null; 63 | } 64 | }; 65 | 66 | window.mainColor = "#000000"; 67 | 68 | function setMainColor() { 69 | if (window.location.hash) { 70 | switch (window.location.hash.length) { 71 | case 7: { 72 | window.mainColor = window.location.hash.toUpperCase(); 73 | break; 74 | } 75 | case 6: { 76 | window.mainColor = "#" + window.location.hash.toUpperCase(); 77 | break; 78 | } 79 | } 80 | } else { 81 | var pathname = window.location.pathname || window.location.hash; 82 | var expression = /([a-f\d]{6})$/i.exec(pathname); 83 | 84 | if (expression && expression[1]) { 85 | window.mainColor = "#" + expression[1]; 86 | } 87 | } 88 | } 89 | 90 | setMainColor(); 91 | Watch.start(window.location, "hash", function () { 92 | setMainColor(); 93 | }); 94 | 95 | function RGBToHSL(rgb) { 96 | var min, max, delta, h, s, l; 97 | var r = rgb[0], g = rgb[1], b = rgb[2]; 98 | min = Math.min(r, Math.min(g, b)); 99 | max = Math.max(r, Math.max(g, b)); 100 | delta = max - min; 101 | l = (min + max) / 2; 102 | s = 0; 103 | if (l > 0 && l < 1) { 104 | s = delta / (l < 0.5 ? (2 * l) : (2 - 2 * l)); 105 | } 106 | h = 0; 107 | if (delta > 0) { 108 | if (max === r && max !== g) h += (g - b) / delta; 109 | if (max === g && max !== b) h += (2 + (b - r) / delta); 110 | if (max === b && max !== r) h += (4 + (r - g) / delta); 111 | h /= 6; 112 | } 113 | return [h, s, l]; 114 | } 115 | 116 | function HEXToRGB(hexColor) { 117 | if (hexColor.length === 7) { 118 | return [parseInt('0x' + hexColor.substring(1, 3)) / 255, 119 | parseInt('0x' + hexColor.substring(3, 5)) / 255, 120 | parseInt('0x' + hexColor.substring(5, 7)) / 255]; 121 | } else if (hexColor.length === 4) { 122 | return [parseInt('0x' + hexColor.substring(1, 2)) / 15, 123 | parseInt('0x' + hexColor.substring(2, 3)) / 15, 124 | parseInt('0x' + hexColor.substring(3, 4)) / 15]; 125 | } 126 | return false 127 | } 128 | 129 | // return percents of difference 0...100 130 | function getColorDifference(rgb1, rgb2) { 131 | var rgbResult = []; 132 | var percents = 0; 133 | 134 | for (var i = 0; i < 3; i++) { 135 | var max = Math.max(rgb1[i], rgb2[i]); 136 | var min = Math.min(rgb1[i], rgb2[i]); 137 | 138 | if (max > 0) { 139 | rgbResult[i] = min / max * 100; 140 | } else { 141 | rgbResult[i] = 100; 142 | } 143 | percents += rgbResult[i]; 144 | } 145 | 146 | 147 | return percents / 3; 148 | } 149 | 150 | var Queue = function () { 151 | var queue = []; 152 | var position = 0; 153 | 154 | this.add = function (obj) { 155 | queue.push(obj); 156 | }; 157 | this.next = function () { 158 | var next = queue[position]; 159 | 160 | if (next) { 161 | position++; 162 | return next 163 | } 164 | return false 165 | 166 | }; 167 | this.getCurrentLength = function () { 168 | return queue.length; 169 | } 170 | }; 171 | 172 | var body = document.getElementsByTagName("body")[0]; 173 | var backgroundColors = document.getElementById("background-color-change").getElementsByTagName("li"); 174 | 175 | function backgroundColorChange(color) { 176 | var hexColor = this.innerHTML || color; 177 | 178 | if (RGBToHSL(HEXToRGB(hexColor))[2] <= 0.48) { 179 | body.className = "inverted"; 180 | } else { 181 | body.className = ""; 182 | } 183 | body.style.backgroundColor = hexColor; 184 | if (!color) { 185 | this.style.backgroundColor = hexColor; 186 | } 187 | 188 | var backgroundColorsArray = []; 189 | var backgroundColorsLength = backgroundColors.length; 190 | var i = 0; 191 | while (i < backgroundColorsLength) { 192 | var item = backgroundColors[i].getElementsByTagName("span")[0]; 193 | backgroundColorsArray.push(item.innerHTML); 194 | i++; 195 | } 196 | Cookies.set("backgroundColors", backgroundColorsArray.toString()); 197 | Cookies.set("currentBackgroundColor", hexColor); 198 | } 199 | 200 | 201 | (function () { 202 | function addEvent(elem, evType, fn) { 203 | if (elem.addEventListener) { 204 | elem.addEventListener(evType, fn, false); 205 | } 206 | else if (elem.attachEvent) { 207 | elem.attachEvent('on' + evType, function () { 208 | fn.call(elem); 209 | }); 210 | } 211 | else { 212 | elem['on' + evType] = function () { 213 | fn.call(elem); 214 | } 215 | } 216 | } 217 | 218 | var head = document.getElementsByTagName("head")[0]; 219 | 220 | var scriptQueue = new Queue(); 221 | var scriptLoad = function (url) { 222 | if (!url) { 223 | return false; 224 | } 225 | var script = document.createElement("script"); 226 | script.type = "text/javascript"; 227 | script.src = url; 228 | head.appendChild(script); 229 | 230 | script.onload = function () { 231 | scriptLoad(scriptQueue.next()); 232 | }; 233 | 234 | return script 235 | }; 236 | var scriptAdd = function (url) { 237 | scriptQueue.add(url); 238 | if (scriptQueue.getCurrentLength() === 1) { 239 | scriptLoad(scriptQueue.next()); 240 | } 241 | }; 242 | 243 | 244 | var styleLoad = function (url) { 245 | var style = document.createElement("link"); 246 | style.type = "text/css"; 247 | style.rel = "stylesheet"; 248 | style.href = url; 249 | head.appendChild(style); 250 | 251 | return style 252 | }; 253 | var imageLoad = function (url) { 254 | var image = new Image(); 255 | image.src = url; 256 | 257 | return image 258 | }; 259 | 260 | var list = document.getElementById("background-color-change"), 261 | listItems = list.getElementsByTagName("li"), 262 | listItemsLength = listItems.length; 263 | 264 | 265 | var cookiesBackgroundColors = Cookies.get("backgroundColors") || ""; 266 | cookiesBackgroundColors = cookiesBackgroundColors.split(","); 267 | 268 | var i = 0; 269 | while (i < listItemsLength) { 270 | var item = listItems[i].getElementsByTagName("span")[0]; 271 | item.innerHTML = cookiesBackgroundColors[i] || item.innerHTML; 272 | item.style.backgroundColor = item.innerHTML; 273 | 274 | addEvent(item, "mouseover", backgroundColorChange); 275 | 276 | i++; 277 | } 278 | 279 | var currentBackgroundColor = Cookies.get("currentBackgroundColor"); 280 | if (currentBackgroundColor) { 281 | backgroundColorChange(currentBackgroundColor); 282 | 283 | } 284 | 285 | scriptAdd("js/main.js"); 286 | scriptAdd("https://www.google-analytics.com/ga.js"); 287 | 288 | imageLoad("images/farbtastic/marker.png"); 289 | imageLoad("images/farbtastic/mask.png"); 290 | imageLoad("images/farbtastic/wheel.png"); 291 | 292 | 293 | }).call(this); -------------------------------------------------------------------------------- /src/css/main.scss: -------------------------------------------------------------------------------- 1 | @import "sake"; 2 | @import "../vendor/css/farbtastic"; 3 | 4 | .hide { 5 | display: none; 6 | } 7 | 8 | html { 9 | height: 100%; 10 | } 11 | 12 | body { 13 | margin: 0; 14 | padding: 0; 15 | font: 12px Trebuchet MS, Arial, sans-serif; 16 | color: #333; 17 | transition: all, 1s; 18 | 19 | &.inverted { 20 | color: #eee; 21 | 22 | #logo { 23 | background-position: left bottom; 24 | } 25 | .icon { 26 | &.pf { 27 | background-position: left bottom; 28 | } 29 | &.search { 30 | background-position: -46px -15px; 31 | } 32 | } 33 | } 34 | &.inverted h2 { 35 | color: #ccc !important; 36 | } 37 | &.inverted a, &.inverted h2 { 38 | color: #ccc; 39 | } 40 | a { 41 | color: #444; 42 | 43 | &.color { 44 | text-decoration: none; 45 | border-bottom: 1px dashed; 46 | } 47 | } 48 | } 49 | 50 | img { 51 | border: none; 52 | } 53 | 54 | .clearfix:after { 55 | clear: both; 56 | content: ""; 57 | display: block; 58 | height: 0; 59 | visibility: hidden; 60 | } 61 | 62 | .clearfix { 63 | zoom: 1; 64 | } 65 | 66 | textarea, input { 67 | font: 12px Arial; 68 | } 69 | 70 | h1, h2, h3, h4, h5, h6 { 71 | margin: 0; 72 | padding: 0; 73 | font-size: 12px; 74 | font-weight: normal; 75 | line-height: 12px; 76 | } 77 | 78 | .ajax { 79 | text-decoration: none; 80 | border-bottom: 1px dashed; 81 | cursor: pointer; 82 | } 83 | 84 | #colorize { 85 | visibility: hidden; 86 | opacity: 0; 87 | $size: 300px; 88 | width: $size; 89 | position: absolute; 90 | top: 50%; 91 | left: 50%; 92 | margin: - $size/2 0 0 -1 * $size/2; 93 | 94 | transition: opacity 1s; 95 | 96 | &.visible { 97 | opacity: 1; 98 | visibility: visible; 99 | } 100 | 101 | #color { 102 | width: 100%; 103 | height: $size; 104 | background: #000; 105 | transition: all, 0.2s; 106 | 107 | border-radius: 20px; 108 | } 109 | 110 | h1 { 111 | font-size: 18px; 112 | line-height: 1em; 113 | margin: 10px 20px 0; 114 | 115 | #current-color { 116 | font-size: 25px; 117 | font-weight: bold; 118 | } 119 | } 120 | h2 { 121 | margin: 5px 20px 0; 122 | color: #444; 123 | font-family: Arial, sans-serif; 124 | line-height: 1.2em; 125 | } 126 | 127 | } 128 | 129 | #background-color-change { 130 | padding: 0; 131 | list-style: none; 132 | 133 | $size: 30px; 134 | 135 | position: absolute; 136 | top: 50%; 137 | margin: -135px 0 0; 138 | left: 20px; 139 | 140 | li { 141 | position: relative; 142 | height: $size; 143 | padding: 10px; 144 | 145 | span { 146 | width: $size; 147 | height: $size; 148 | float: left; 149 | overflow: hidden; 150 | background: #fff; 151 | text-indent: -9999px; 152 | box-shadow: #333 0 2px 2px; 153 | border-radius: 18px; 154 | } 155 | strong { 156 | width: 120px; 157 | display: none; 158 | height: $size; 159 | line-height: $size; 160 | padding: 0 5px; 161 | margin: 0 0 0 10px; 162 | border: 2px solid #00ADEF; 163 | //background:#fff; 164 | //color:#333; 165 | position: absolute; 166 | top: 8px; 167 | font-weight: normal; 168 | 169 | border-radius: 10px; 170 | } 171 | 172 | &:hover strong { 173 | display: inline-block; 174 | } 175 | 176 | } 177 | } 178 | 179 | #color-finder { 180 | width: 30%; 181 | margin: auto; 182 | position: relative; 183 | overflow: visible !important; 184 | opacity: 0; 185 | 186 | &.visible { 187 | opacity: 1; 188 | } 189 | 190 | h2 { 191 | font-size: 18px; 192 | line-height: 1em; 193 | margin: 10px 8px 10px; 194 | text-align: center; 195 | white-space: nowrap; 196 | 197 | &.active { 198 | float: left; 199 | } 200 | small { 201 | font-size: 0.6em; 202 | } 203 | .search { 204 | position: absolute; 205 | left: -18px; 206 | top: 3px; 207 | } 208 | a { 209 | position: relative; 210 | } 211 | } 212 | #color-finder-input { 213 | margin-left: 130px; 214 | display: none; 215 | 216 | input { 217 | width: 100%; 218 | padding: 6px; 219 | margin: 6px 0 0; 220 | border: 2px solid #ddd; 221 | border-radius: 15px; 222 | 223 | &:focus { 224 | outline: none; 225 | } 226 | } 227 | a { 228 | text-decoration: none; 229 | border: none; 230 | display: block; 231 | height: 100%; 232 | padding: 6px 9px; 233 | } 234 | ul { 235 | margin-left: -25%; 236 | 237 | li { 238 | &.active { 239 | 240 | } 241 | } 242 | } 243 | } 244 | } 245 | 246 | #main-colorpicker { 247 | position: absolute; 248 | top: 0; 249 | right: -220px; 250 | width: 200px; 251 | display: none; 252 | 253 | .mainColor { 254 | .colorInput { 255 | float: right; 256 | width: 5em; 257 | } 258 | .mainColorPicker { 259 | padding-top: 25px; 260 | } 261 | } 262 | h3 { 263 | font-size: 18px; 264 | line-height: 1em; 265 | margin: 15px 18px 10px; 266 | 267 | a { 268 | text-decoration: none; 269 | } 270 | } 271 | #link { 272 | 273 | input { 274 | width: 166px; 275 | margin: 0 10px; 276 | } 277 | } 278 | 279 | #i-like-it { 280 | position: relative; 281 | 282 | #vk_like { 283 | margin: 5px 0 0 10px; 284 | display: inline-block; 285 | } 286 | #plus { 287 | display: inline-block; 288 | position: absolute; 289 | top: 7px; 290 | right: 10px; 291 | } 292 | } 293 | 294 | } 295 | 296 | .colorInput { 297 | padding: 6px; 298 | border: 2px solid #ddd; 299 | background: #fff; 300 | color: #666; 301 | border-radius: 15px; 302 | 303 | &:focus { 304 | outline: none; 305 | } 306 | } 307 | 308 | .vcard { 309 | position: absolute; 310 | bottom: 30px; 311 | right: 20px; 312 | 313 | .fn { 314 | 315 | } 316 | .note { 317 | font: 11px/1em Arial, sans-serif; 318 | text-align: right; 319 | } 320 | } 321 | 322 | .icon { 323 | display: inline-block; 324 | position: relative; 325 | 326 | &.pf { 327 | overflow: hidden; 328 | text-indent: -9999px; 329 | text-align: left; 330 | width: 9px; 331 | height: 10px; 332 | background: url("../images/icons.png") no-repeat left top; 333 | } 334 | &.twitter { 335 | width: 35px; 336 | height: 19px; 337 | overflow: hidden; 338 | text-indent: -9999px; 339 | background: url("../images/icons.png") no-repeat -10px top; 340 | position: absolute; 341 | top: 3px; 342 | left: -25px; 343 | 344 | transition: all, 0.5s; 345 | 346 | &:hover { 347 | top: -2px; 348 | left: -20px; 349 | } 350 | } 351 | &.colorChange { 352 | width: 16px; 353 | height: 15px; 354 | overflow: hidden; 355 | text-indent: -9999px; 356 | background: url("../images/icons.png") no-repeat -10px -20px; 357 | margin: 0 5px 0 0; 358 | top: 3px; 359 | } 360 | &.search { 361 | width: 15px; 362 | height: 15px; 363 | overflow: hidden; 364 | text-indent: -9999px; 365 | background: url("../images/icons.png") no-repeat -46px 0; 366 | margin: 0 5px 0 0; 367 | top: 1px; 368 | } 369 | } 370 | 371 | #logo { 372 | width: 150px; 373 | height: 44px; 374 | background: url("../images/logo.png") no-repeat top left; 375 | text-indent: -9999px; 376 | overflow: hidden; 377 | } 378 | 379 | .backgroundColor { 380 | position: absolute; 381 | display: none; 382 | padding: 40px; 383 | 384 | .backgroundColorInput { 385 | width: 5em; 386 | float: right; 387 | } 388 | .backgroundColorPicker { 389 | padding-top: 25px; 390 | } 391 | } 392 | 393 | @media screen and (max-width: 740px) { 394 | body { 395 | width: 100%; 396 | } 397 | #main-colorpicker { 398 | display: block !important; 399 | overflow: hidden; 400 | height: 0; 401 | opacity: 0; 402 | position: relative; 403 | top: 0; 404 | right: 0; 405 | margin: 20px auto 20px; 406 | padding: 0 0 20px; 407 | 408 | transition: opacity 1s; 409 | 410 | &.visible { 411 | visibility: visible; 412 | opacity: 1; 413 | height: auto; 414 | } 415 | 416 | h3 { 417 | text-align: center; 418 | 419 | a { 420 | text-decoration: underline; 421 | } 422 | } 423 | } 424 | #colorize { 425 | position: relative; 426 | top: 0; 427 | left: 0; 428 | width: auto; 429 | margin: 20px; 430 | 431 | #color { 432 | border-radius: 30px; 433 | } 434 | } 435 | #color-finder { 436 | margin-top: 20px; 437 | width: 50% !important; 438 | 439 | #color-finder-input { 440 | margin: 0; 441 | display: block; 442 | width: 100%; 443 | } 444 | h2 { 445 | display: none; 446 | } 447 | } 448 | .vcard { 449 | display: none; 450 | } 451 | #background-color-change { 452 | opacity: 0; 453 | visibility: hidden; 454 | position: fixed; 455 | left: 0; 456 | border-radius: 0 10px 10px 0; 457 | background: rgba(#000, .8); 458 | 459 | transition: opacity 1s 2s; 460 | 461 | &.visible { 462 | opacity: 1; 463 | visibility: visible; 464 | } 465 | } 466 | } -------------------------------------------------------------------------------- /src/js/sake.js: -------------------------------------------------------------------------------- 1 | jQuery.sake = { 2 | entryMark: function (query, DataItemValue) { 3 | var position = DataItemValue.toLowerCase().indexOf(query.toLowerCase()); 4 | if (position >= 0) { 5 | var before = DataItemValue.substring(0, position), 6 | piece = DataItemValue.substring(position, query.length + position), 7 | after = DataItemValue.substring(query.length + position, DataItemValue.length); 8 | } 9 | 10 | return [before, piece, after]; 11 | } 12 | }; 13 | jQuery.fn.sake = function (options, callback) { 14 | 15 | var url, 16 | ajaxSetup = {}; 17 | 18 | // Create ajaxSetup if first argument is String 19 | if (typeof options === "string") { 20 | ajaxSetup = { 21 | url: options 22 | }; 23 | options = {}; 24 | options.change = callback || function () { 25 | }; 26 | 27 | } else if (options.ajax) { 28 | ajaxSetup = options.ajax; 29 | } 30 | ; 31 | 32 | ajaxSetup = jQuery.extend({ 33 | timeout: 100 34 | }, ajaxSetup); 35 | 36 | options = jQuery.extend({ 37 | listClass: "sake", // :String Class for suggestion list and his elements