增加了搜索功能和点击查看功能

.gitignore

@@ -1,2 +1,5 @@
 node_modules
 
+yarn.lock
+yarn-error.log
+

index.html

@@ -28,6 +28,35 @@
             padding: 10px 20px;
         }
 
+        /* 搜索框位置 */
+        #search {
+            position: absolute;
+            right: 100px;
+            top:   20px;
+        }
+
+        .serachbar {background: #F9F0DA;}
+        .serachbar input {
+            border: 2px solid #c5464a;
+            border-radius: 5px;
+            background: transparent;
+            top: 0;
+            right: 0;
+            font-size: 16px;
+        }
+        .serachbar button {
+            background: #c5464a;
+            border-radius: 0 5px 5px 0;
+            width: 60px;
+            top: 0;
+            right: 0;
+        }
+        .serachbar button:before {
+            content: "搜索";
+            font-size: 16px;
+            color: #F9F0DA;
+        }
+
         #info {
             position: absolute;
             right: 10px;
@@ -91,6 +120,15 @@ <h3 id="lipstick-info">
         </h3>
     </div>
 
+    <!-- 给出颜色值搜索框, 搜索 给出一个标识点, 便于查找位置 -->
+    <div id="search" class = "serachbar">
+        当前口红颜色值: <span id="lipstick-hex"></span>
+        <form method="GET" id = "search_form">
+            <input type="text" name="color" id="color_" placeholder="请输入您要的颜色 #HEX 值..." >
+            <button type="submit"></button>
+        </form>
+    </div>
+
     <div id="info">
         <h1>口红颜色可视化</h1>
         <div id="link">
@@ -107,8 +145,31 @@ <h1>口红颜色可视化</h1>
     <script src="dist/lib/zepto.min.js"></script>
     <script src="dist/lib/zrender.min.js"></script>
 
-    <!-- <script src="src/index.js"></script> -->
-    <script src="dist/index-min.js"></script>
+    <script src="src/index.js"></script>
+    <!-- <script src="dist/index-min.js"></script> -->
+
+    <script>
+    // 获取参数 标识出来需要查找的位置
+    function getQueryVariable(variable)
+    {
+        var query = window.location.search.substring(1);
+        var vars = query.split("&");
+        for (var i=0;i<vars.length;i++) {
+                var pair = vars[i].split("=");
+                if(pair[0] == variable){return pair[1];}
+        }
+        return(false);
+    }
+
+    // 获取参数之后 如果有效 标识出来颜色值
+    let color = getQueryVariable("color");
+    if(color != false) {
+        showSearchResult("#"+color);
+    }
+
+    </script>
+
+
 
     <script>
     var _hmt = _hmt || [];

package.json

@@ -4,18 +4,20 @@
   "description": "",
   "main": "index.js",
   "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1"
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "start": "anywhere 2333"
   },
   "author": "Ovilia",
   "license": "MIT",
   "dependencies": {
+    "anywhere": "^1.5.0",
     "tinycolor2": "^1.4.1",
     "zepto": "^1.2.0",
     "zrender": "^4.0.3"
   },
   "devDependencies": {
     "get-pixels": "^3.3.0",
-    "gulp": "^3.9.1",
+    "gulp": "^4.0.2",
     "gulp-jsonminify": "^1.1.0",
     "gulp-minify": "^2.1.0"
   }

src/index.js

@@ -5,6 +5,8 @@ var width = 0;
 var height = 0;
 var lipstickData = null;
 
+var search_color = null;    ///< 标识搜索得到的结果 如果没有搜索 结果为-1  有结果就显示有结果的值
+
 function init() {
     width = Math.floor(window.innerWidth * bgDpi);
     height = Math.floor(window.innerHeight * bgDpi);
@@ -22,13 +24,28 @@ function init() {
         updateLipstickData(data);
 
         var minMax = getMinMax(lipstickData);
+
+        g_minMax = minMax;
         renderBackground(bgDom, minMax);
         renderDataPoints(lipstickData, minMax);
 
-        hover({ target: lipstickData[0].group.childAt(0) });
-        updateUi(lipstickData[0]);
+        var idx_ = 0;
+        // 如果没有赋值 表示是标识是直接通过链接直接进入的
+        // 如果有值, 则搜索最近的颜色显示
+        if(search_color == null) {
+            // id 不连续 导致随机可能有些值不存在
+            // idx_ = Math.ceil(Math.random()*lipstickData.length);
+            idx_ = 10
+
+        } else {
+            idx_ = searchLipstickData(search_color,lipstickData);
+        }
+
+        showPageByColorID(idx_);
+
         document.getElementById('ui').setAttribute('style', 'display:block');
     });
+
 }
 
 function updateLipstickData(rawData) {
@@ -46,6 +63,7 @@ function updateLipstickData(rawData) {
     }
 }
 
+// get json data min and Max data range to show
 function getMinMax(lipstickData) {
     var minHue = Number.MAX_VALUE;
     var maxHue = Number.MIN_VALUE;
@@ -364,23 +382,130 @@ function encodeHue(hue) {
     }
 }
 
+// 计算一个颜色的座标值
+function getColorCoord(color,minMax) {
+    var hsl = colorHexToHsl(color);
+    return getHslCoord(hsl,minMax);
+}
+// #hex  值转变为 hsl 值
+function colorHexToHsl(color) {
+    color = color.charAt(0) == "#" ?color:("#"+color); ///< 如果第一位是# 就不加了
+    var hsl = tinycolor(color).toHsl();
+    hsl.l *= 100;
+    return hsl;
+}
+// 根据 hsl 获取座标值
+function getHslCoord(hsl,minMax) {
+    var hue = encodeHue(hsl.h);
+    var light = hsl.l;
+    return {
+        x: (hue - minMax.minHue) * width / (minMax.maxHue - minMax.minHue) / bgDpi,
+        y: height / bgDpi - (light - minMax.minLight) * height / (minMax.maxLight - minMax.minLight) / bgDpi
+    };
+
+}
+
+// 返回最接近的颜色值 // 计算 RGB 最接近的值 
+// 如果存在当前值 直接返回当前值
+// 返回在数组中的  索引值 
+function searchLipstickData(color,lipstickData) {
+    var min_error = Number.MAX_VALUE;   ///< 记录最小误差
+    var min_error_l = 0;   ///< 记录最小误差 出现的位置 // 下标
+
+    for(var i=0; i<lipstickData.length; i++) {
+        var e = calcColorError(color,lipstickData[i].color);
+
+        if(e == 0)
+            return i ; // lipstickData[i].id;
+
+        if(e < min_error) {
+            min_error = e;
+            min_error_l =  i;  // lipstickData[i].id;
+        }
+    }
+    return min_error_l;
+}
+
+// 给定两个颜色值 计算差值 均是正值 如果一致 返回 0
+// 颜色为 #FFFFFF  六位hex 大写字母
+// 计算 6位hex 值的依次三个值 的颜色差的绝对值
+function calcColorError(color1, color2) {
+    color1 = tinycolor(color1).toRgb();
+    color2 = tinycolor(color2).toRgb();
+    return Math.abs(color1.r-color2.r) + 
+           Math.abs(color1.g-color2.g) + 
+           Math.abs(color1.b-color2.b);
+}
+
+// 根据参数 更新页面显示  // ID 不是序号 
+// id可能重复 这里考虑使用在 lipstickData 的下标
+function showPageByColorID(idx)
+{
+    // 下标界限
+    if(idx <0 || idx >= lipstickData.length)
+        idx  = 0
+
+    hover({ target: lipstickData[idx].group.childAt(0) });
+    updateUi(lipstickData[idx]);
+
+    // for(var i=0;i<lipstickData.length;i++)
+    // {
+    //     if(lipstickData[i].id == id)
+    //     {
+    //         hover({ target: lipstickData[i].group.childAt(0) });
+    //         updateUi(lipstickData[i]);
+    //         return ;
+    //     }
+    // }
+}
+
+// 将结果显示在界面上 // 正则验证颜色值
+//  返回搜索结果最贴近的颜色的
+// 点击左上角系列下面的颜色触发搜索
+function showSearchResult(color) {
+    // init(); // 初始话 更新数据
+    color = color.toUpperCase();
+    console.log("Serach color:" + color);
+    var pattern = /^#[0-9a-fA-F]{6}$/;      // 验证 #开头 6位hex  值
+    if(color.match(pattern) == null) {
+        alert("Search color is invalided" + color);
+        // console.log("Search color is invalided:" + color);
+    } else {
+
+        // 如果已经有值 标识 点击过了 或者搜索过了
+        if(search_color != null) {
+            var id = searchLipstickData(color,lipstickData);
+            showPageByColorID(id)
+        }
+
+        search_color = color;   ///< 每次搜索都进行 赋值  根据赋值情况处理后续显示
+    }
+
+}
+
 function updateUi(lipstick) {
     document.getElementById('brand-name').innerText = lipstick.brand.name;
     document.getElementById('series-name').innerText = lipstick.series.name;
     document.getElementById('lipstick-id').innerText = lipstick.id;
     document.getElementById('lipstick-name').innerText = lipstick.name;
+    document.getElementById('lipstick-hex').innerText = lipstick.color;
     document.getElementById('lipstick-info').setAttribute('style', 'color:' + lipstick.color);
 
     var seriesColors = document.getElementById('series-colors');
     seriesColors.innerText = '';
-
+    // 跟新左上角的系列 颜色和 当前颜色
     var siblings = lipstick.series.lipsticks;
     for (var i = 0; i < siblings.length; ++i) {
         var el = document.createElement('div');
         el.setAttribute('style', 'background-color:' + siblings[i].color);
 
         var className = siblings[i] === lipstick ? 'series-color active' : 'series-color';
         el.setAttribute('class', className);
+        // 设置点击链接
+        // el.setAttribute('onclick',
+        // "window.location.href=\'http://"+window.location.host + window.location.pathname +"?color=" +siblings[i].color.substr(1) + "\';return false");
+
+        el.setAttribute('onclick','showSearchResult(\"'+siblings[i].color+'\")');
         seriesColors.appendChild(el);
     }
 }