imageLabel

├── .babelrc ├── .bowerrc ├── .editorconfig ├── .gitattributes ├── .gitignore ├── .yo-rc.json ├── README.md ├── _config.yml ├── app ├── apple-touch-icon.png ├── company.html ├── favicon.ico ├── images │ ├── border.gif │ └── pic.gif ├── index.html ├── robots.txt ├── scripts │ ├── main.js │ └── template.js ├── styles │ ├── edit.scss │ └── main.scss └── test.html ├── bower.json ├── dist ├── apple-touch-icon.png ├── company.html ├── favicon.ico ├── images │ ├── border.gif │ └── pic.gif ├── index.html ├── robots.txt ├── scripts │ ├── jquery.imageLabel.min.js │ ├── jquery.js │ └── template.js ├── styles │ ├── edit.css │ └── jquery.imageLabel.min.css └── test.html ├── gulpfile.js ├── package-lock.json ├── package.json ├── test ├── index.html └── spec │ └── test.js └── yarn.lock /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": [ 3 | "es2015" 4 | ] 5 | } 6 | -------------------------------------------------------------------------------- /.bowerrc: -------------------------------------------------------------------------------- 1 | { 2 | "directory": "bower_components" 3 | } 4 | -------------------------------------------------------------------------------- /.editorconfig: -------------------------------------------------------------------------------- 1 | # EditorConfig helps developers define and maintain consistent 2 | # coding styles between different editors and IDEs 3 | # editorconfig.org 4 | 5 | root = true 6 | 7 | 8 | [*] 9 | 10 | # change these settings to your own preference 11 | indent_style = space 12 | indent_size = 4 13 | 14 | # we recommend you to keep these unchanged 15 | end_of_line = lf 16 | charset = utf-8 17 | trim_trailing_whitespace = true 18 | insert_final_newline = true 19 | 20 | [*.md] 21 | trim_trailing_whitespace = false 22 | 23 | [{package,bower}.json] 24 | indent_style = space 25 | indent_size = 4 26 | -------------------------------------------------------------------------------- /.gitattributes: -------------------------------------------------------------------------------- 1 | * text=auto -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | .tmp 3 | bower_components 4 | test/bower_components 5 | -------------------------------------------------------------------------------- /.yo-rc.json: -------------------------------------------------------------------------------- 1 | { 2 | "generator-mocha": { 3 | "ui": "bdd", 4 | "rjs": false 5 | } 6 | } -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # imageLabel 2 | 3 | >基于jquery的图片标注插件（之后会有其他版本，请关注） 4 | 5 | ## example (图片展示) 6 | ![pic](https://codingdogs.github.io/imageLabel/dist/images/pic.gif) 7 | 8 | ## [demo](https://codingdogs.github.io/imageLabel/dist/) 9 | ## install 10 | ```shell 11 | bower install --save imageLabel 12 | ``` 13 | ## start 14 | >引入jquery，以及插件的css，js 15 | ```html 16 | 17 | 18 | 19 | ``` 20 | ## use 21 | ```javascript 22 | var $imageLabel = imageLabel({ 23 | img: 'https://i1.mifile.cn/f/i/18/mitv4A/40/build.jpg', //要修改的图片地址 24 | editPop: true, //调用默认弹窗 25 | data: [{ 26 | "x": 0.22570911285455642, 27 | "y": 0.37189688291389805, 28 | "ex": 0.45141822570911283, 29 | "ey": 0.6551396000355341, 30 | "name": "小米电视" 31 | }, { 32 | "x": 0.5932407966203983, 33 | "y": 0.36803448222587576, 34 | "ex": 0.8117079058539529, 35 | "ey": 0.6512771993475117, 36 | "name": "小米电视" 37 | }], 38 | close: function (d) { //关闭按钮事件 return false 阻止默认关闭 39 | console.log(d);//选区数据 40 | return true; 41 | }, 42 | confirm: function (d) { //确定按钮事件 return false 阻止默认关闭 43 | console.log(d);//选区数据 44 | return true; 45 | } 46 | }) 47 | 48 | 49 | //$imageLabel方法 50 | $imageLabel.getData()//获取选区数据，返回array 51 | $imageLabel.clearArea()//清除选区 52 | $imageLabel.close()//关闭 53 | ``` 54 | 55 | ## props 56 | 57 | | name 名称 | type 类型 | default 默认值 | describe 描述 | 58 | | ------------ | :-----: | :---------: | ---------------------------------------- | 59 | | img | String | | 必填值，图片路径 | 60 | | data | Array | [] |区域数据，默认渲染| 61 | | editPop | Boolean | true | 是否启用默认修改弹窗 | 62 | | only | Boolean | false | 选中单个区域是否隐藏其他区域，更加洁净 | 63 | | shade | Boolean | true | 是否显示遮罩 | 64 | | close |Function | | 关闭按钮事件 return false 阻止默认关闭 | 65 | | confirm |Function | | 确定按钮事件 return false 阻止默认关闭 | 66 | 67 | ## class(目前仅支持class修改样式) 68 | 69 | > 选区class imageLabel-drop 70 | 71 | > 点击选取添加 imageLabel-drop-now 72 | 73 | > 拖动选取添加 imageLabel-drop-now&imageLabel-drop-move 74 | 75 | > 编辑选取添加 imageLabel-drop-edit 76 | 77 | > 选区有编辑内容 imageLabel-drop-has 78 | -------------------------------------------------------------------------------- /_config.yml: -------------------------------------------------------------------------------- 1 | theme: jekyll-theme-cayman -------------------------------------------------------------------------------- /app/apple-touch-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codingdogs/imageLabel/0f456dfd0d2c4828c45aa5cd682e588d309cb008/app/apple-touch-icon.png -------------------------------------------------------------------------------- /app/company.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | imageLabel 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 68 | 69 | 86 | 91 | 96 |

97 | 98 | 99 | 100 | 101 | 102 | 103 | 104 | 105 | 106 | 320 | 321 | 322 | 323 | -------------------------------------------------------------------------------- /app/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codingdogs/imageLabel/0f456dfd0d2c4828c45aa5cd682e588d309cb008/app/favicon.ico -------------------------------------------------------------------------------- /app/images/border.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codingdogs/imageLabel/0f456dfd0d2c4828c45aa5cd682e588d309cb008/app/images/border.gif -------------------------------------------------------------------------------- /app/images/pic.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codingdogs/imageLabel/0f456dfd0d2c4828c45aa5cd682e588d309cb008/app/images/pic.gif -------------------------------------------------------------------------------- /app/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | imageLabel 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 38 | 39 | 40 |

41 | 42 | Imagelabel 43 | 44 | 45 | 46 |

47 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 107 | 108 | 109 | 110 | -------------------------------------------------------------------------------- /app/robots.txt: -------------------------------------------------------------------------------- 1 | # robotstxt.org/ 2 | 3 | User-agent: * 4 | Disallow: 5 | -------------------------------------------------------------------------------- /app/scripts/main.js: -------------------------------------------------------------------------------- 1 | function imageLabel(c) { 2 | if (!c.img) { 3 | alert('请填写图片地址'); 4 | return false; 5 | } 6 | var $imageLabel = { 7 | getData: function () { 8 | var d = []; 9 | $('.imageLabel-imgdrop').each(function () { 10 | d.push(JSON.parse($(this).attr('data-json'))); 11 | }) 12 | return d; 13 | }, 14 | clearArea:function(){ 15 | $('.imageLabel-imgdrop').remove(); 16 | }, 17 | close:function(){ 18 | $('.imageLabel-closes').click(); 19 | } 20 | }; 21 | var config = { 22 | only: false, //选中是否只显示自己 23 | shade: true, //遮罩 24 | editPop: true, //修改内容弹窗 25 | close: function () { 26 | return true; 27 | }, 28 | edit: function () { 29 | 30 | }, 31 | confirm:function(){ 32 | return true; 33 | }, 34 | startArea: function () { 35 | 36 | }, 37 | clickArea: function () { 38 | 39 | }, 40 | data:[],//默认渲染的数据 41 | } 42 | config = $.extend(config, c); 43 | $('.imageLabel-box').remove(); 44 | var html = `

45 |

46 |

47 | 48 |

49 |

50 |

51 |

52 |

53 |

54 | 55 |

56 |

57 | 58 | 73 |

74 |

75 |

关闭

76 |

确定

77 |

78 |

79 |

80 |

81 |

82 | 编辑内容 83 | X 84 |

85 |

86 | 87 |

88 | 89 |

90 |

取消

91 |

确定

92 |

93 |

94 |

95 |

96 |

97 |

` 98 | var $html = $(html); 99 | // $html.find('') 100 | function next() { 101 | var obj, $d, objt, $t=$('.imageLabel-content'), button, objm, $ii; 102 | var s_time; 103 | var flag = false, 104 | flag_target = false, 105 | flag_i = false; 106 | var $menu = $('.imageLabel-drap-menu'); 107 | $('.imageLabel-content')[0].oncontextmenu = function () { 108 | return false; 109 | } 110 | $menu[0].oncontextmenu = function () { 111 | return false; 112 | } 113 | $('body').click(function (e) { 114 | $menu.hide(); 115 | }) 116 | $.each(config.data,function(i,o){//渲染默认数据 117 | $d = $( 118 | `

${o.name||''}

` 119 | ); 120 | for (let index = 0; index < 8; index++) { 121 | $d.find('.imageLable-i-s').append('') 122 | } 123 | if (config.shade) { 124 | for (let index = 0; index < 4; index++) { 125 | $d.append('') 126 | } 127 | } 128 | var objt = o; 129 | $d.css({ 130 | left: (objt.ex - objt.x > 0 ? objt.x : objt.ex) * 100 + '%', 131 | top: (objt.ey - objt.y > 0 ? objt.y : objt.ey) * 100 + '%', 132 | width: Math.abs(objt.ex - objt.x) * 100 + '%', 133 | height: Math.abs(objt.ey - objt.y) * 100 + '%', 134 | }).attr('data-json',JSON.stringify(o)); 135 | $t.append($d); 136 | 137 | }) 138 | function paiZindex () { 139 | var $drops = $('.imageLabel-imgdrop'); 140 | var d = []; 141 | $drops.each(function (index, obj) { 142 | var n = $(obj).width() * $(obj).height(); 143 | d.push(n); 144 | }); 145 | $drops.each(function (index, obj) { 146 | var $t = $(obj); 147 | var n = $t.width() * $t.height(); 148 | var num = 0; 149 | $.each(d, function (i, o) { 150 | if (n <= o) { 151 | num++; 152 | } 153 | }) 154 | $t.css({ 155 | 'z-index': num 156 | }) 157 | }); 158 | } 159 | paiZindex(); 160 | $('.imageLabel-content').mousedown(function (e) { 161 | button = e.button; 162 | if (e.button != 2) { //左键点击事件 163 | $menu.hide(); 164 | 165 | flag = true; 166 | $t = $(this); 167 | obj = { 168 | x: $t.offset().left, //box--left 169 | y: $t.offset().top, //box--top 170 | cx: e.clientX, //鼠标距离网页左边的距离 171 | cy: e.clientY, 172 | w: $t.width(), 173 | h: $t.height(), 174 | }; 175 | objt = { 176 | x: (obj.cx - obj.x) / obj.w, 177 | y: (obj.cy - obj.y) / obj.h, 178 | ex: 0, 179 | ey: 0 180 | } 181 | if ($(e.target).hasClass('imageLabel-imgdrop')) { 182 | flag_target = true; 183 | $d = $(e.target); 184 | objm = JSON.parse($d.attr('data-json')); 185 | objt = $.extend({}, objm); 186 | config.startArea(); 187 | } else if ($(e.target).hasClass('imageLable-i')) { 188 | flag_i = true; 189 | $ii = $(e.target); 190 | $d = $(e.target).parents('.imageLabel-imgdrop'); 191 | objm = JSON.parse($d.attr('data-json')); 192 | objt = $.extend({}, objm); 193 | } else { 194 | s_time = new Date().getTime(); 195 | flag_target = false; 196 | $d = $( 197 | '
' 198 | ); 199 | for (let index = 0; index < 8; index++) { 200 | $d.find('.imageLable-i-s').append('') 201 | } 202 | if (config.shade) { 203 | for (let index = 0; index < 4; index++) { 204 | $d.append('') 205 | } 206 | } 207 | 208 | $d.addClass('imageLabel-drop-edit').appendTo($t); 209 | $d.siblings().removeClass('imageLabel-drop-edit'); 210 | } 211 | $d.addClass('imageLabel-drop-now'); 212 | if (config.only) { 213 | $(this).find('.imageLabel-imgdrop').hide(); 214 | } 215 | } else { 216 | if ($(e.target).hasClass('imageLabel-imgdrop')) { 217 | $d = $(e.target); 218 | setTimeout(() => { 219 | $menu.css({ 220 | left: e.clientX, 221 | top: e.clientY 222 | }).show(); 223 | }, 0); 224 | } 225 | } 226 | 227 | }); 228 | $('.imageLabel-img-boxs').mousemove(function (e) { 229 | if (flag) { 230 | if (flag_target) { 231 | objt.x = objm.x + (e.clientX - obj.cx) / obj.w; 232 | objt.ex = objm.ex + (e.clientX - obj.cx) / obj.w; 233 | objt.y = objm.y + (e.clientY - obj.cy) / obj.h; 234 | objt.ey = objm.ey + (e.clientY - obj.cy) / obj.h; 235 | } else if (flag_i) { 236 | var i = $ii.index(); 237 | if (i == 0) { 238 | objt.x = objm.x + (e.clientX - obj.cx) / obj.w; 239 | objt.y = objm.y + (e.clientY - obj.cy) / obj.h; 240 | } 241 | if (i == 1) { 242 | objt.ex = objm.ex + (e.clientX - obj.cx) / obj.w; 243 | objt.y = objm.y + (e.clientY - obj.cy) / obj.h; 244 | } 245 | if (i == 2) { 246 | objt.ex = objm.ex + (e.clientX - obj.cx) / obj.w; 247 | objt.ey = objm.ey + (e.clientY - obj.cy) / obj.h; 248 | } 249 | if (i == 3) { 250 | objt.x = objm.x + (e.clientX - obj.cx) / obj.w; 251 | objt.ey = objm.ey + (e.clientY - obj.cy) / obj.h; 252 | 253 | } 254 | if (i == 4) { 255 | objt.y = objm.y + (e.clientY - obj.cy) / obj.h; 256 | } 257 | if (i == 5) { 258 | objt.ex = objm.ex + (e.clientX - obj.cx) / obj.w; 259 | } 260 | if (i == 6) { 261 | objt.ey = objm.ey + (e.clientY - obj.cy) / obj.h; 262 | } 263 | if (i == 7) { 264 | objt.x = objm.x + (e.clientX - obj.cx) / obj.w; 265 | } 266 | 267 | } else { 268 | objt.ex = (e.clientX - obj.x) / obj.w; 269 | objt.ey = (e.clientY - obj.y) / obj.h; 270 | } 271 | //解决超出问题 272 | // // var b = $.extend({}, objt); 273 | if (objt.y < 0) { 274 | objt.y = 0 275 | } 276 | if (objt.x < 0) { 277 | objt.x = 0 278 | } 279 | if (objt.ey < 0) { 280 | objt.ey = 0 281 | } 282 | if (objt.ex < 0) { 283 | objt.ex = 0 284 | } 285 | if (objt.ey > 1) { 286 | objt.ey = 1; 287 | } 288 | if (objt.ex > 1) { 289 | objt.ex = 1; 290 | } 291 | if (objt.y > 1) { 292 | objt.y = 1; 293 | } 294 | if (objt.x > 1) { 295 | objt.x = 1; 296 | } 297 | $d.css({ 298 | left: (objt.ex - objt.x > 0 ? objt.x : objt.ex) * 100 + '%', 299 | top: (objt.ey - objt.y > 0 ? objt.y : objt.ey) * 100 + '%', 300 | width: Math.abs(objt.ex - objt.x) * 100 + '%', 301 | height: Math.abs(objt.ey - objt.y) * 100 + '%', 302 | }).addClass('imageLabel-drop-move'); 303 | } 304 | }).mouseup(function (e) { 305 | if (flag) { 306 | var o = { 307 | 308 | } 309 | // var j = $.extend({}, objt); 310 | if (objt.x < objt.ex) { 311 | o.x = objt.x 312 | o.ex = objt.ex; 313 | } else { 314 | o.x = objt.ex 315 | o.ex = objt.x; 316 | } 317 | if (objt.y < objt.ey) { 318 | o.y = objt.y 319 | o.ey = objt.ey; 320 | } else { 321 | o.y = objt.ey 322 | o.ey = objt.y; 323 | } 324 | 325 | $d.attr('data-json', JSON.stringify($.extend(objt,o))); 326 | if (Math.abs(e.clientX - obj.cx) > 10 && 327 | Math.abs(e.clientY - obj.cy) > 10 && !flag_target && !flag_i) { 328 | if (config.editPop) { 329 | $('.imageLabel-input').addClass('imageLabel-active').find('input').val(''); 330 | setTimeout(function(){ 331 | var a=$('.imageLabel-input').find('input').focus(); 332 | a[0].setSelectionRange(-1,-1); 333 | },500) 334 | } 335 | config.edit($d) 336 | } else { 337 | if (!flag_target && !flag_i) { 338 | // alert(1) 339 | $d.remove(); 340 | } 341 | } 342 | flag = false; 343 | flag_target = false; 344 | flag_i = false; 345 | //让小的方块层级更高，便于选中； 346 | paiZindex(); 347 | $d.removeClass('imageLabel-drop-now imageLabel-drop-move'); 348 | 349 | } 350 | if (config.only) { 351 | $(this).find('.imageLabel-imgdrop').show(); 352 | } 353 | }); 354 | var $input = $('.imageLabel-input'), 355 | $i = $input.find('input'); 356 | $input.find('.imageLabel-input-close').click(function () { //关闭 357 | $input.removeClass('imageLabel-active') 358 | }) 359 | $input.find('.imageLabel-input-ok').click(function () { 360 | $d.find('.imageLabel-imgdrop-font').html($i.val()); 361 | var j = JSON.parse($d.attr('data-json')); 362 | j.name = $i.val(); 363 | $d.attr('data-json',JSON.stringify(j)) 364 | $input.removeClass('imageLabel-active'); 365 | if($i.val()){ 366 | $d.addClass('imageLabel-drop-has'); 367 | }else{ 368 | $d.removeClass('imageLabel-drop-has'); 369 | 370 | } 371 | }) 372 | $('.imageLabel-delete').click(function () { //删除操作 373 | $d.remove(); 374 | $menu.hide(); 375 | }) 376 | $('.imageLabel-edit').click(function () { //修改操作 377 | config.edit($d) 378 | $d.addClass('imageLabel-drop-edit').siblings().removeClass('imageLabel-drop-edit') 379 | if (config.editPop) { 380 | $input.addClass('imageLabel-active').find('input').val($d.find('.imageLabel-imgdrop-font').html()); 381 | setTimeout(function(){ 382 | var a=$input.find('input').focus(); 383 | a[0].setSelectionRange(-1,-1); 384 | },500) 385 | } 386 | $menu.hide(); 387 | }) 388 | $i.keydown(function (e) { 389 | if (e.keyCode == 13) { //回车事件 390 | $input.find('.imageLabel-input-ok').click(); 391 | } 392 | }) 393 | $(window).keydown(function (e) { //esc 事件 394 | if (e.keyCode == 27 && $input.hasClass('imageLabel-active')) { 395 | $input.removeClass('imageLabel-active') 396 | } 397 | 398 | }) 399 | 400 | function j() { 401 | var $img = $('.imageLabel-img'); 402 | var $j = $('.imageLabel-jisuan') 403 | var w = $img[0].naturalWidth, 404 | h = $img[0].naturalHeight; 405 | var w1 = $img.parents('.imageLabel-img-body').width(), 406 | h1 = $img.parents('.imageLabel-img-body').height(); 407 | if (w / h > w1 / h1) { 408 | $j.css({ 409 | width: '100%', 410 | height: h / w * w1 411 | }) 412 | } else { 413 | $j.css({ 414 | height: '100%', 415 | width: w / h * h1 416 | }) 417 | } 418 | // $('.imageLabel-content').css({ 419 | // left:$img.position().left, 420 | // top:$img.position().left, 421 | // width:$img.width(), 422 | // height:$img.height() 423 | // }) 424 | } 425 | j(); 426 | $(window).resize(j); 427 | //关闭整个事件 428 | 429 | $('.imageLabel-closes').click(function () { 430 | if (config.close($imageLabel.getData())) { // 431 | $html.removeClass('imageLabel-box-active'); 432 | setTimeout(function(){ 433 | $html.remove(); 434 | },500) 435 | } 436 | }).next().click(function(){ 437 | if (config.confirm($imageLabel.getData())) { // 438 | $html.removeClass('imageLabel-box-active'); 439 | } 440 | }) 441 | 442 | } 443 | $html.find('.imageLabel-img').one('load', function () { 444 | $(this).addClass('imageLabel-img-active'); 445 | $('.imageLabel-loading-body').hide(); 446 | next(); 447 | }) 448 | $html.appendTo('body'); 449 | setTimeout(function () { 450 | $html.addClass('imageLabel-box-active'); 451 | }, 0) 452 | 453 | 454 | 455 | return $imageLabel; 456 | } 457 | -------------------------------------------------------------------------------- /app/scripts/template.js: -------------------------------------------------------------------------------- 1 | /*! art-template@4.12.1 for browser | https://github.com/aui/art-template */ 2 | ! function (e, t) { 3 | e=window; 4 | 'object' == typeof exports && 'object' == typeof module ? module.exports = t() : 'function' == typeof define && define.amd ? define([], t) : 'object' == typeof exports ? exports.template = t() : e.template = t() 5 | }(this, function () { 6 | return function (e) { 7 | function t(r) { 8 | if (n[r]) return n[r].exports; 9 | var i = n[r] = { 10 | i: r, 11 | l: !1, 12 | exports: {} 13 | }; 14 | return e[r].call(i.exports, i, i.exports, t), i.l = !0, i.exports 15 | } 16 | var n = {}; 17 | return t.m = e, t.c = n, t.d = function (e, n, r) { 18 | t.o(e, n) || Object.defineProperty(e, n, { 19 | configurable: !1, 20 | enumerable: !0, 21 | get: r 22 | }) 23 | }, t.n = function (e) { 24 | var n = e && e.__esModule ? function () { 25 | return e['default'] 26 | } : function () { 27 | return e 28 | }; 29 | return t.d(n, 'a', n), n 30 | }, t.o = function (e, t) { 31 | return Object.prototype.hasOwnProperty.call(e, t) 32 | }, t.p = '', t(t.s = 6) 33 | }([function (e, t, n) { 34 | (function (t) { 35 | e.exports = !1; 36 | try { 37 | e.exports = '[object process]' === Object.prototype.toString.call(t.process) 38 | } catch (n) {} 39 | }).call(t, n(4)) 40 | }, function (e, t, n) { 41 | 'use strict'; 42 | var r = n(8), 43 | i = n(3), 44 | o = n(23), 45 | s = function (e, t) { 46 | t.onerror(e, t); 47 | var n = function () { 48 | return '{Template Error}' 49 | }; 50 | return n.mappings = [], n.sourcesContent = [], n 51 | }, 52 | a = function c(e) { 53 | var t = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {}; 54 | 'string' != typeof e ? t = e : t.source = e, t = i.$extend(t), e = t.source, !0 === t.debug && (t.cache = !1, t.minimize = !1, t.compileDebug = !0), t.compileDebug && (t.minimize = !1), t.filename && (t.filename = t.resolveFilename(t.filename, t)); 55 | var n = t.filename, 56 | a = t.cache, 57 | u = t.caches; 58 | if (a && n) { 59 | var p = u.get(n); 60 | if (p) return p 61 | } 62 | if (!e) try { 63 | e = t.loader(n, t), t.source = e 64 | } catch (d) { 65 | var l = new o({ 66 | name: 'CompileError', 67 | path: n, 68 | message: 'template not found: ' + d.message, 69 | stack: d.stack 70 | }); 71 | if (t.bail) throw l; 72 | return s(l, t) 73 | } 74 | var f = void 0, 75 | h = new r(t); 76 | try { 77 | f = h.build() 78 | } catch (l) { 79 | if (l = new o(l), t.bail) throw l; 80 | return s(l, t) 81 | } 82 | var m = function (e, n) { 83 | try { 84 | return f(e, n) 85 | } catch (l) { 86 | if (!t.compileDebug) return t.cache = !1, t.compileDebug = !0, c(t)(e, n); 87 | if (l = new o(l), t.bail) throw l; 88 | return s(l, t)() 89 | } 90 | }; 91 | return m.mappings = f.mappings, m.sourcesContent = f.sourcesContent, m.toString = function () { 92 | return f.toString() 93 | }, a && n && u.set(n, m), m 94 | }; 95 | a.Compiler = r, e.exports = a 96 | }, function (e, t) { 97 | Object.defineProperty(t, '__esModule', { 98 | value: !0 99 | }), t['default'] = /((['"])(?:(?!\2|\\).|\\(?:\r\n|[\s\S]))*(\2)?|`(?:[^`\\$]|\\[\s\S]|\$(?!\{)|\$\{(?:[^{}]|\{[^}]*\}?)*\}?)*(`)?)|(\/\/.*)|(\/\*(?:[^*]|\*(?!\/))*(\*\/)?)|(\/(?!\*)(?:\[(?:(?![\]\\]).|\\.)*\]|(?![\/\]\\]).|\\.)+\/(?:(?!\s*(?:\b|[\u0080-\uFFFF$\\'"~({]|[+\-!](?!=)|\.?\d))|[gmiyu]{1,5}\b(?![\u0080-\uFFFF$\\]|\s*(?:[+\-*%&|^<>!=?({]|\/(?![\/*])))))|(0[xX][\da-fA-F]+|0[oO][0-7]+|0[bB][01]+|(?:\d*\.\d+|\d+\.?)(?:[eE][+-]?\d+)?)|((?!\d)(?:(?!\s)[$\w\u0080-\uFFFF]|\\u[\da-fA-F]{4}|\\u\{[\da-fA-F]+\})+)|(--|\+\+|&&|\|\||=>|\.{3}|(?:[+\-\/%&|^]|\*{1,2}|<{1,2}|>{1,3}|!=?|={1,2})=?|[?~.,:;[\](){}])|(\s+)|(^$|[\s\S])/g, t.matchToToken = function (e) { 100 | var t = { 101 | type: 'invalid', 102 | value: e[0] 103 | }; 104 | return e[1] ? (t.type = 'string', t.closed = !(!e[3] && !e[4])) : e[5] ? t.type = 'comment' : e[6] ? (t.type = 'comment', t.closed = !!e[7]) : e[8] ? t.type = 'regex' : e[9] ? t.type = 'number' : e[10] ? t.type = 'name' : e[11] ? t.type = 'punctuator' : e[12] && (t.type = 'whitespace'), t 105 | } 106 | }, function (e, t, n) { 107 | 'use strict'; 108 | 109 | function r() { 110 | this.$extend = function (e) { 111 | return e = e || {}, s(e, e instanceof r ? e : this) 112 | } 113 | } 114 | var i = n(0), 115 | o = n(12), 116 | s = n(13), 117 | a = n(14), 118 | c = n(15), 119 | u = n(16), 120 | p = n(17), 121 | l = n(18), 122 | f = n(19), 123 | h = n(20), 124 | m = n(22), 125 | d = { 126 | source: null, 127 | filename: null, 128 | rules: [f, l], 129 | escape: !0, 130 | debug: !!i && 'production' !== process.env.NODE_ENV, 131 | bail: !0, 132 | cache: !0, 133 | minimize: !0, 134 | compileDebug: !1, 135 | resolveFilename: m, 136 | include: a, 137 | htmlMinifier: h, 138 | htmlMinifierOptions: { 139 | collapseWhitespace: !0, 140 | minifyCSS: !0, 141 | minifyJS: !0, 142 | ignoreCustomFragments: [] 143 | }, 144 | onerror: c, 145 | loader: p, 146 | caches: u, 147 | root: '/', 148 | extname: '.art', 149 | ignore: [], 150 | imports: o 151 | }; 152 | r.prototype = d, e.exports = new r 153 | }, function (e, t) { 154 | var n; 155 | n = function () { 156 | return this 157 | }(); 158 | try { 159 | n = n || Function('return this')() || (0, eval)('this') 160 | } catch (r) { 161 | 'object' == typeof window && (n = window) 162 | } 163 | e.exports = n 164 | }, function (e, t) {}, function (e, t, n) { 165 | 'use strict'; 166 | var r = n(7), 167 | i = n(1), 168 | o = n(24), 169 | s = function (e, t) { 170 | return t instanceof Object ? r({ 171 | filename: e 172 | }, t) : i({ 173 | filename: e, 174 | source: t 175 | }) 176 | }; 177 | s.render = r, s.compile = i, s.defaults = o, e.exports = s 178 | }, function (e, t, n) { 179 | 'use strict'; 180 | var r = n(1), 181 | i = function (e, t, n) { 182 | return r(e, n)(t) 183 | }; 184 | e.exports = i 185 | }, function (e, t, n) { 186 | 'use strict'; 187 | 188 | function r(e, t) { 189 | if (!(e instanceof t)) throw new TypeError('Cannot call a class as a function') 190 | } 191 | var i = n(9), 192 | o = n(11), 193 | s = '$data', 194 | a = '$imports', 195 | c = 'print', 196 | u = 'include', 197 | p = 'extend', 198 | l = 'block', 199 | f = '$$out', 200 | h = '$$line', 201 | m = '$$blocks', 202 | d = '$$slice', 203 | v = '$$from', 204 | g = '$$options', 205 | y = function (e, t) { 206 | return e.hasOwnProperty(t) 207 | }, 208 | b = JSON.stringify, 209 | x = function () { 210 | function e(t) { 211 | var n, i, y = this; 212 | r(this, e); 213 | var b = t.source, 214 | x = t.minimize, 215 | w = t.htmlMinifier; 216 | if (this.options = t, this.stacks = [], this.context = [], this.scripts = [], this.CONTEXT_MAP = {}, this.ignore = [s, a, g].concat(t.ignore), this.internal = (n = {}, n[f] = '\'\'', n[h] = '[0,0]', n[m] = 'arguments[1]||{}', n[v] = 'null', n[c] = 'function(){var s=\'\'.concat.apply(\'\',arguments);' + f + '+=s;return s}', n[u] = 'function(src,data){var s=' + g + '.include(src,data||' + s + ',arguments[2]||' + m + ',' + g + ');' + f + '+=s;return s}', n[p] = 'function(from){' + v + '=from}', n[d] = 'function(c,p,s){p=' + f + ';' + f + '=\'\';c();s=' + f + ';' + f + '=p+s;return s}', n[l] = 'function(){var a=arguments,s;if(typeof a[0]===\'function\'){return ' + d + '(a[0])}else if(' + v + '){' + m + '[a[0]]=' + d + '(a[1])}else{s=' + m + '[a[0]];if(typeof s===\'string\'){' + f + '+=s}else{s=' + d + '(a[1])}return s}}', n), this.dependencies = (i = {}, i[c] = [f], i[u] = [f, g, s, m], i[p] = [v, u], i[l] = [d, v, f, m], i), this.importContext(f), t.compileDebug && this.importContext(h), x) try { 217 | b = w(b, t) 218 | } catch (E) {} 219 | this.source = b, this.getTplTokens(b, t.rules, this).forEach(function (e) { 220 | e.type === o.TYPE_STRING ? y.parseString(e) : y.parseExpression(e) 221 | }) 222 | } 223 | return e.prototype.getTplTokens = function () { 224 | return o.apply(undefined, arguments) 225 | }, e.prototype.getEsTokens = function (e) { 226 | return i(e) 227 | }, e.prototype.getVariables = function (e) { 228 | var t = !1; 229 | return e.filter(function (e) { 230 | return 'whitespace' !== e.type && 'comment' !== e.type 231 | }).filter(function (e) { 232 | return 'name' === e.type && !t || (t = 'punctuator' === e.type && '.' === e.value, !1) 233 | }).map(function (e) { 234 | return e.value 235 | }) 236 | }, e.prototype.importContext = function (e) { 237 | var t = this, 238 | n = '', 239 | r = this.internal, 240 | i = this.dependencies, 241 | o = this.ignore, 242 | c = this.context, 243 | u = this.options, 244 | p = u.imports, 245 | l = this.CONTEXT_MAP; 246 | y(l, e) || -1 !== o.indexOf(e) || (y(r, e) ? (n = r[e], y(i, e) && i[e].forEach(function (e) { 247 | return t.importContext(e) 248 | })) : n = '$escape' === e || '$each' === e || y(p, e) ? a + '.' + e : s + '.' + e, l[e] = n, c.push({ 249 | name: e, 250 | value: n 251 | })) 252 | }, e.prototype.parseString = function (e) { 253 | var t = e.value; 254 | if (t) { 255 | var n = f + '+=' + b(t); 256 | this.scripts.push({ 257 | source: t, 258 | tplToken: e, 259 | code: n 260 | }) 261 | } 262 | }, e.prototype.parseExpression = function (e) { 263 | var t = this, 264 | n = e.value, 265 | r = e.script, 266 | i = r.output, 267 | s = this.options.escape, 268 | a = r.code; 269 | i && (a = !1 === s || i === o.TYPE_RAW ? f + '+=' + r.code : f + '+=$escape(' + r.code + ')'); 270 | var c = this.getEsTokens(a); 271 | this.getVariables(c).forEach(function (e) { 272 | return t.importContext(e) 273 | }), this.scripts.push({ 274 | source: n, 275 | tplToken: e, 276 | code: a 277 | }) 278 | }, e.prototype.checkExpression = function (e) { 279 | for (var t = [ 280 | [/^\s*}[\w\W]*?{?[\s;]*$/, ''], 281 | [/(^[\w\W]*?$[\w\W]*?(?:=>|\([\w\W]*?$)\s*{[\s;]*$)/, '$1})'], 282 | [/(^[\w\W]*?$[\w\W]*?$\s*{[\s;]*$)/, '$1}'] 283 | ], n = 0; n < t.length;) { 284 | if (t[n][0].test(e)) { 285 | var r; 286 | e = (r = e).replace.apply(r, t[n]); 287 | break 288 | } 289 | n++ 290 | } 291 | try { 292 | return new Function(e), !0 293 | } catch (i) { 294 | return !1 295 | } 296 | }, e.prototype.build = function () { 297 | var e = this.options, 298 | t = this.context, 299 | n = this.scripts, 300 | r = this.stacks, 301 | i = this.source, 302 | c = e.filename, 303 | l = e.imports, 304 | d = [], 305 | x = y(this.CONTEXT_MAP, p), 306 | w = 0, 307 | E = function (e, t) { 308 | var n = t.line, 309 | i = t.start, 310 | o = { 311 | generated: { 312 | line: r.length + w + 1, 313 | column: 1 314 | }, 315 | original: { 316 | line: n + 1, 317 | column: i + 1 318 | } 319 | }; 320 | return w += e.split(/\n/).length - 1, o 321 | }, 322 | k = function (e) { 323 | return e.replace(/^[\t ]+|[\t ]$/g, '') 324 | }; 325 | r.push('function(' + s + '){'), r.push('\'use strict\''), r.push(s + '=' + s + '||{}'), r.push('var ' + t.map(function (e) { 326 | return e.name + '=' + e.value 327 | }).join(',')), e.compileDebug ? (r.push('try{'), n.forEach(function (e) { 328 | e.tplToken.type === o.TYPE_EXPRESSION && r.push(h + '=[' + [e.tplToken.line, e.tplToken.start].join(',') + ']'), d.push(E(e.code, e.tplToken)), r.push(k(e.code)) 329 | }), r.push('}catch(error){'), r.push('throw {' + ['name:\'RuntimeError\'', 'path:' + b(c), 'message:error.message', 'line:' + h + '[0]+1', 'column:' + h + '[1]+1', 'source:' + b(i), 'stack:error.stack'].join(',') + '}'), r.push('}')) : n.forEach(function (e) { 330 | d.push(E(e.code, e.tplToken)), r.push(k(e.code)) 331 | }), x && (r.push(f + '=\'\''), r.push(u + '(' + v + ',' + s + ',' + m + ')')), r.push('return ' + f), r.push('}'); 332 | var T = r.join('\n'); 333 | try { 334 | var O = new Function(a, g, 'return ' + T)(l, e); 335 | return O.mappings = d, O.sourcesContent = [i], O 336 | } catch (F) { 337 | for (var $ = 0, j = 0, S = 0, _ = void 0; $ < n.length;) { 338 | var C = n[$]; 339 | if (!this.checkExpression(C.code)) { 340 | j = C.tplToken.line, S = C.tplToken.start, _ = C.code; 341 | break 342 | } 343 | $++ 344 | } 345 | throw { 346 | name: 'CompileError', 347 | path: c, 348 | message: F.message, 349 | line: j + 1, 350 | column: S + 1, 351 | source: i, 352 | generated: _, 353 | stack: F.stack 354 | } 355 | } 356 | }, e 357 | }(); 358 | x.CONSTS = { 359 | DATA: s, 360 | IMPORTS: a, 361 | PRINT: c, 362 | INCLUDE: u, 363 | EXTEND: p, 364 | BLOCK: l, 365 | OPTIONS: g, 366 | OUT: f, 367 | LINE: h, 368 | BLOCKS: m, 369 | SLICE: d, 370 | FROM: v, 371 | ESCAPE: '$escape', 372 | EACH: '$each' 373 | }, e.exports = x 374 | }, function (e, t, n) { 375 | 'use strict'; 376 | var r = n(10), 377 | i = n(2)['default'], 378 | o = n(2).matchToToken, 379 | s = function (e) { 380 | return e.match(i).map(function (e) { 381 | return i.lastIndex = 0, o(i.exec(e)) 382 | }).map(function (e) { 383 | return 'name' === e.type && r(e.value) && (e.type = 'keyword'), e 384 | }) 385 | }; 386 | e.exports = s 387 | }, function (e, t, n) { 388 | 'use strict'; 389 | var r = { 390 | 'abstract': !0, 391 | await: !0, 392 | 'boolean': !0, 393 | 'break': !0, 394 | 'byte': !0, 395 | 'case': !0, 396 | 'catch': !0, 397 | 'char': !0, 398 | 'class': !0, 399 | 'const': !0, 400 | 'continue': !0, 401 | 'debugger': !0, 402 | 'default': !0, 403 | 'delete': !0, 404 | 'do': !0, 405 | 'double': !0, 406 | 'else': !0, 407 | 'enum': !0, 408 | 'export': !0, 409 | 'extends': !0, 410 | 'false': !0, 411 | 'final': !0, 412 | 'finally': !0, 413 | 'float': !0, 414 | 'for': !0, 415 | 'function': !0, 416 | 'goto': !0, 417 | 'if': !0, 418 | 'implements': !0, 419 | 'import': !0, 420 | 'in': !0, 421 | 'instanceof': !0, 422 | 'int': !0, 423 | 'interface': !0, 424 | 'let': !0, 425 | 'long': !0, 426 | 'native': !0, 427 | 'new': !0, 428 | 'null': !0, 429 | 'package': !0, 430 | 'private': !0, 431 | 'protected': !0, 432 | 'public': !0, 433 | 'return': !0, 434 | 'short': !0, 435 | 'static': !0, 436 | 'super': !0, 437 | 'switch': !0, 438 | 'synchronized': !0, 439 | 'this': !0, 440 | 'throw': !0, 441 | 'transient': !0, 442 | 'true': !0, 443 | 'try': !0, 444 | 'typeof': !0, 445 | 'var': !0, 446 | 'void': !0, 447 | 'volatile': !0, 448 | 'while': !0, 449 | 'with': !0, 450 | 'yield': !0 451 | }; 452 | e.exports = function (e) { 453 | return r.hasOwnProperty(e) 454 | } 455 | }, function (e, t, n) { 456 | 'use strict'; 457 | 458 | function r(e, t, n, r) { 459 | var i = new String(e); 460 | return i.line = t, i.start = n, i.end = r, i 461 | } 462 | var i = function (e, t) { 463 | for (var n = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {}, i = [{ 464 | type: 'string', 465 | value: e, 466 | line: 0, 467 | start: 0, 468 | end: e.length 469 | }], o = 0; o < t.length; o++) ! function (e) { 470 | for (var t = e.test.ignoreCase ? 'ig' : 'g', o = e.test.source + '|^$|[\\w\\W]', s = new RegExp(o, t), a = 0; a < i.length; a++) 471 | if ('string' === i[a].type) { 472 | for (var c = i[a].line, u = i[a].start, p = i[a].end, l = i[a].value.match(s), f = [], h = 0; h < l.length; h++) { 473 | var m = l[h]; 474 | e.test.lastIndex = 0; 475 | var d = e.test.exec(m), 476 | v = d ? 'expression' : 'string', 477 | g = f[f.length - 1], 478 | y = g || i[a], 479 | b = y.value; 480 | u = y.line === c ? g ? g.end : u : b.length - b.lastIndexOf('\n') - 1, p = u + m.length; 481 | var x = { 482 | type: v, 483 | value: m, 484 | line: c, 485 | start: u, 486 | end: p 487 | }; 488 | if ('string' === v) g && 'string' === g.type ? (g.value += m, g.end += m.length) : f.push(x); 489 | else { 490 | d[0] = new r(d[0], c, u, p); 491 | var w = e.use.apply(n, d); 492 | x.script = w, f.push(x) 493 | } 494 | c += m.split(/\n/).length - 1 495 | } 496 | i.splice.apply(i, [a, 1].concat(f)), a += f.length - 1 497 | } 498 | }(t[o]); 499 | return i 500 | }; 501 | i.TYPE_STRING = 'string', i.TYPE_EXPRESSION = 'expression', i.TYPE_RAW = 'raw', i.TYPE_ESCAPE = 'escape', e.exports = i 502 | }, function (e, t, n) { 503 | 'use strict'; 504 | (function (t) { 505 | function r(e) { 506 | return 'string' != typeof e && (e = e === undefined || null === e ? '' : 'function' == typeof e ? r(e.call(e)) : JSON.stringify(e)), e 507 | } 508 | 509 | function i(e) { 510 | var t = '' + e, 511 | n = a.exec(t); 512 | if (!n) return e; 513 | var r = '', 514 | i = void 0, 515 | o = void 0, 516 | s = void 0; 517 | for (i = n.index, o = 0; i < t.length; i++) { 518 | switch (t.charCodeAt(i)) { 519 | case 34: 520 | s = '"'; 521 | break; 522 | case 38: 523 | s = '&'; 524 | break; 525 | case 39: 526 | s = '''; 527 | break; 528 | case 60: 529 | s = '<'; 530 | break; 531 | case 62: 532 | s = '>'; 533 | break; 534 | default: 535 | continue 536 | } 537 | o !== i && (r += t.substring(o, i)), o = i + 1, r += s 538 | } 539 | return o !== i ? r + t.substring(o, i) : r 540 | } /*! art-template@runtime | https://github.com/aui/art-template */ 541 | var o = n(0), 542 | s = Object.create(o ? t : window), 543 | a = /["&'<>]/; 544 | s.$escape = function (e) { 545 | return i(r(e)) 546 | }, s.$each = function (e, t) { 547 | if (Array.isArray(e)) 548 | for (var n = 0, r = e.length; n < r; n++) t(e[n], n); 549 | else 550 | for (var i in e) t(e[i], i) 551 | }, e.exports = s 552 | }).call(t, n(4)) 553 | }, function (e, t, n) { 554 | 'use strict'; 555 | var r = Object.prototype.toString, 556 | i = function (e) { 557 | return null === e ? 'Null' : r.call(e).slice(8, -1) 558 | }, 559 | o = function s(e, t) { 560 | var n = void 0, 561 | r = i(e); 562 | if ('Object' === r ? n = Object.create(t || {}) : 'Array' === r && (n = [].concat(t || [])), n) { 563 | for (var o in e) e.hasOwnProperty(o) && (n[o] = s(e[o], n[o])); 564 | return n 565 | } 566 | return e 567 | }; 568 | e.exports = o 569 | }, function (e, t, n) { 570 | 'use strict'; 571 | var r = function (e, t, r, i) { 572 | var o = n(1); 573 | return i = i.$extend({ 574 | filename: i.resolveFilename(e, i), 575 | bail: !0, 576 | source: null 577 | }), o(i)(t, r) 578 | }; 579 | e.exports = r 580 | }, function (e, t, n) { 581 | 'use strict'; 582 | var r = function (e) { 583 | console.error(e.name, e.message) 584 | }; 585 | e.exports = r 586 | }, function (e, t, n) { 587 | 'use strict'; 588 | var r = { 589 | __data: Object.create(null), 590 | set: function (e, t) { 591 | this.__data[e] = t 592 | }, 593 | get: function (e) { 594 | return this.__data[e] 595 | }, 596 | reset: function () { 597 | this.__data = {} 598 | } 599 | }; 600 | e.exports = r 601 | }, function (e, t, n) { 602 | 'use strict'; 603 | var r = n(0), 604 | i = function (e) { 605 | if (r) { 606 | return n(5).readFileSync(e, 'utf8') 607 | } 608 | var t = document.getElementById(e); 609 | return t.value || t.innerHTML 610 | }; 611 | e.exports = i 612 | }, function (e, t, n) { 613 | 'use strict'; 614 | var r = { 615 | test: /{{([@#]?)[ \t]*(\/?)([\w\W]*?)[ \t]*}}/, 616 | use: function (e, t, n, i) { 617 | var o = this, 618 | s = o.options, 619 | a = o.getEsTokens(i), 620 | c = a.map(function (e) { 621 | return e.value 622 | }), 623 | u = {}, 624 | p = void 0, 625 | l = !!t && 'raw', 626 | f = n + c.shift(), 627 | h = function (t, n) { 628 | console.warn((s.filename || 'anonymous') + ':' + (e.line + 1) + ':' + (e.start + 1) + '\nTemplate upgrade: {{' + t + '}} -> {{' + n + '}}') 629 | }; 630 | switch ('#' === t && h('#value', '@value'), f) { 631 | case 'set': 632 | i = 'var ' + c.join('').trim(); 633 | break; 634 | case 'if': 635 | i = 'if(' + c.join('').trim() + '){'; 636 | break; 637 | case 'else': 638 | var m = c.indexOf('if'); 639 | ~m ? (c.splice(0, m + 1), i = '}else if(' + c.join('').trim() + '){') : i = '}else{'; 640 | break; 641 | case '/if': 642 | i = '}'; 643 | break; 644 | case 'each': 645 | p = r._split(a), p.shift(), 'as' === p[1] && (h('each object as value index', 'each object value index'), p.splice(1, 1)); 646 | i = '$each(' + (p[0] || '$data') + ',function(' + (p[1] || '$value') + ',' + (p[2] || '$index') + '){'; 647 | break; 648 | case '/each': 649 | i = '})'; 650 | break; 651 | case 'block': 652 | p = r._split(a), p.shift(), i = 'block(' + p.join(',').trim() + ',function(){'; 653 | break; 654 | case '/block': 655 | i = '})'; 656 | break; 657 | case 'echo': 658 | f = 'print', h('echo value', 'value'); 659 | case 'print': 660 | case 'include': 661 | case 'extend': 662 | if (0 !== c.join('').trim().indexOf('(')) { 663 | p = r._split(a), p.shift(), i = f + '(' + p.join(',') + ')'; 664 | break 665 | } 666 | default: 667 | if (~c.indexOf('|')) { 668 | var d = a.reduce(function (e, t) { 669 | var n = t.value, 670 | r = t.type; 671 | return '|' === n ? e.push([]) : 'whitespace' !== r && 'comment' !== r && (e.length || e.push([]), ':' === n && 1 === e[e.length - 1].length ? h('value | filter: argv', 'value | filter argv') : e[e.length - 1].push(t)), e 672 | }, []).map(function (e) { 673 | return r._split(e) 674 | }); 675 | i = d.reduce(function (e, t) { 676 | var n = t.shift(); 677 | return t.unshift(e), '$imports.' + n + '(' + t.join(',') + ')' 678 | }, d.shift().join(' ').trim()) 679 | } 680 | l = l || 'escape' 681 | } 682 | return u.code = i, u.output = l, u 683 | }, 684 | _split: function (e) { 685 | e = e.filter(function (e) { 686 | var t = e.type; 687 | return 'whitespace' !== t && 'comment' !== t 688 | }); 689 | for (var t = 0, n = e.shift(), r = /\]|\)/, i = [ 690 | [n] 691 | ]; t < e.length;) { 692 | var o = e[t]; 693 | 'punctuator' === o.type || 'punctuator' === n.type && !r.test(n.value) ? i[i.length - 1].push(o) : i.push([o]), n = o, t++ 694 | } 695 | return i.map(function (e) { 696 | return e.map(function (e) { 697 | return e.value 698 | }).join('') 699 | }) 700 | } 701 | }; 702 | e.exports = r 703 | }, function (e, t, n) { 704 | 'use strict'; 705 | var r = { 706 | test: /<%(#?)((?:==|=#|[=-])?)[ \t]*([\w\W]*?)[ \t]*(-?)%>/, 707 | use: function (e, t, n, r) { 708 | return n = { 709 | '-': 'raw', 710 | '=': 'escape', 711 | '': !1, 712 | '==': 'raw', 713 | '=#': 'raw' 714 | }[n], t && (r = '/*' + r + '*/', n = !1), { 715 | code: r, 716 | output: n 717 | } 718 | } 719 | }; 720 | e.exports = r 721 | }, function (e, t, n) { 722 | 'use strict'; 723 | var r = n(0), 724 | i = function (e, t) { 725 | if (r) { 726 | var i, o = n(21).minify, 727 | s = t.htmlMinifierOptions, 728 | a = t.rules.map(function (e) { 729 | return e.test 730 | }); 731 | (i = s.ignoreCustomFragments).push.apply(i, a), e = o(e, s) 732 | } 733 | return e 734 | }; 735 | e.exports = i 736 | }, function (e, t) { 737 | ! function (e) { 738 | e.noop = function () {} 739 | }('object' == typeof e && 'object' == typeof e.exports ? e.exports : window) 740 | }, function (e, t, n) { 741 | 'use strict'; 742 | var r = n(0), 743 | i = /^\.+\//, 744 | o = function (e, t) { 745 | if (r) { 746 | var o = n(5), 747 | s = t.root, 748 | a = t.extname; 749 | if (i.test(e)) { 750 | var c = t.filename, 751 | u = !c || e === c, 752 | p = u ? s : o.dirname(c); 753 | e = o.resolve(p, e) 754 | } else e = o.resolve(s, e); 755 | o.extname(e) || (e += a) 756 | } 757 | return e 758 | }; 759 | e.exports = o 760 | }, function (e, t, n) { 761 | 'use strict'; 762 | 763 | function r(e, t) { 764 | if (!(e instanceof t)) throw new TypeError('Cannot call a class as a function') 765 | } 766 | 767 | function i(e, t) { 768 | if (!e) throw new ReferenceError('this hasn\'t been initialised - super() hasn\'t been called'); 769 | return !t || 'object' != typeof t && 'function' != typeof t ? e : t 770 | } 771 | 772 | function o(e, t) { 773 | if ('function' != typeof t && null !== t) throw new TypeError('Super expression must either be null or a function, not ' + typeof t); 774 | e.prototype = Object.create(t && t.prototype, { 775 | constructor: { 776 | value: e, 777 | enumerable: !1, 778 | writable: !0, 779 | configurable: !0 780 | } 781 | }), t && (Object.setPrototypeOf ? Object.setPrototypeOf(e, t) : e.__proto__ = t) 782 | } 783 | 784 | function s(e) { 785 | var t = e.name, 786 | n = e.source, 787 | r = e.path, 788 | i = e.line, 789 | o = e.column, 790 | s = e.generated, 791 | a = e.message; 792 | if (!n) return a; 793 | var c = n.split(/\n/), 794 | u = Math.max(i - 3, 0), 795 | p = Math.min(c.length, i + 3), 796 | l = c.slice(u, p).map(function (e, t) { 797 | var n = t + u + 1; 798 | return (n === i ? ' >> ' : ' ') + n + '| ' + e 799 | }).join('\n'); 800 | return (r || 'anonymous') + ':' + i + ':' + o + '\n' + l + '\n\n' + t + ': ' + a + (s ? '\n generated: ' + s : '') 801 | } 802 | var a = function (e) { 803 | function t(n) { 804 | r(this, t); 805 | var o = i(this, e.call(this, n.message)); 806 | return o.name = 'TemplateError', o.message = s(n), Error.captureStackTrace && Error.captureStackTrace(o, o.constructor), o 807 | } 808 | return o(t, e), t 809 | }(Error); 810 | e.exports = a 811 | }, function (e, t, n) { 812 | 'use strict'; 813 | e.exports = n(3) 814 | }]) 815 | }); 816 | -------------------------------------------------------------------------------- /app/styles/edit.scss: -------------------------------------------------------------------------------- 1 | 2 | .right-select-box { 3 | color:#333; 4 | * { 5 | box-sizing: border-box; 6 | list-style: none; 7 | margin: 0; 8 | padding: 0; 9 | } 10 | .full { 11 | width: 100%; 12 | height: 100%; 13 | } 14 | .full-w { 15 | width: 100%; 16 | } 17 | .full-h { 18 | height: 100%; 19 | } 20 | .flex-box { 21 | display: -webkit-box; 22 | display: -ms-flexbox; 23 | display: flex; 24 | } 25 | .flex1 { 26 | flex: 1; 27 | -webkit-box-flex: 1; 28 | overflow: hidden; 29 | } 30 | .cover { 31 | object-fit: cover; 32 | width:100%; 33 | height:100%; 34 | } 35 | .cover-body{ 36 | position: relative; 37 | overflow: hidden; 38 | -webkit-transform: rotateZ(0deg); 39 | .cover{ 40 | position: absolute; 41 | } 42 | } 43 | .ellipsis { 44 | white-space: nowrap; 45 | overflow: hidden; 46 | text-overflow: ellipsis; 47 | } 48 | $b:#959595; 49 | $sub:#959595; //副标题色 50 | position: fixed; 51 | width:300px; 52 | bottom:0; 53 | top:10px; 54 | z-index: 200; 55 | right:0; 56 | user-select: none; 57 | box-shadow: -5px 50px 50px 3px rgba(0, 0, 0, 0.1); 58 | border-left:1px solid $b; 59 | transition: all 0.4s; 60 | transform: translate(100%, 0); 61 | .select-close { 62 | position: absolute; 63 | right: 100%; 64 | top: 50%; 65 | display: block; 66 | padding: 5px 5px; 67 | background: #fff; 68 | border: 1px solid $b; 69 | border-right: none; 70 | cursor: pointer; 71 | svg { 72 | transform: rotate(-90deg); 73 | transition: all 0.3s; 74 | } 75 | } 76 | &.select-active { 77 | transform: translate(0, 0); 78 | visibility: visible; 79 | .select-close { 80 | svg { 81 | transform: rotate(90deg); 82 | } 83 | } 84 | } 85 | .select-title { 86 | position: relative; 87 | z-index: 2; 88 | border-bottom: 1px solid $sub; 89 | .btns { 90 | font-size: 14px; 91 | margin-top: -3px; 92 | color: $sub; 93 | padding: 5px 20px; 94 | border: 1px solid $sub; 95 | border-radius: 5px 5px 0 0; 96 | margin-left: -1px; 97 | background-color: #fff; 98 | cursor: pointer; 99 | position: relative; 100 | border-color: transparent; 101 | opacity: 0.9; 102 | transition: all 0.4s; 103 | &.active { 104 | border-color: $sub; 105 | border-bottom-color: #fff; 106 | z-index: 1; 107 | opacity: 1; 108 | top: 1px; 109 | } 110 | } 111 | } 112 | .select-content { 113 | width: 100%; 114 | height: 100%; 115 | display: flex; 116 | flex-direction: column; 117 | position: relative; 118 | z-index: 0; 119 | .select-content-inner { 120 | background-color: #fff; 121 | position: relative; 122 | z-index: 0; 123 | overflow: hidden; // background-color: #f1f4f6; 124 | .inner-lists { 125 | width: 200%; 126 | transition: margin 0.4s; 127 | padding-top:10px; 128 | .inner-list{ 129 | overflow: hidden; 130 | overflow-y: auto; 131 | } 132 | } 133 | } 134 | } 135 | .ajax-loading{ 136 | margin-top:20px; 137 | margin-bottom:10px; 138 | position: relative; 139 | text-align: center; 140 | font-size: 12px; 141 | color: #959595; 142 | &:after{ 143 | content:''; 144 | display: block; 145 | margin:0 auto; 146 | width:20px; 147 | height:20px; 148 | border-radius: 50%; 149 | border:2px solid #000; 150 | border-right-color:transparent; 151 | animation: ajaxLoading 0.8s infinite linear; 152 | } 153 | &.over{ 154 | &:after{ 155 | display: none; 156 | 157 | } 158 | &:before{ 159 | content: '已经全部加载完成~'; 160 | } 161 | } 162 | &.nothing{ 163 | &:after{ 164 | display: none; 165 | 166 | } 167 | &:before{ 168 | content: '没有搜索到相关的产品~'; 169 | } 170 | } 171 | } 172 | } 173 | @keyframes ajaxLoading { 174 | form { 175 | transform: rotate(0deg) 176 | } 177 | to { 178 | transform: rotate(360deg) 179 | } 180 | } 181 | .products-lists{ 182 | .list{ 183 | padding:10px; 184 | border-bottom:1px solid rgba(0,0,0,0.1); 185 | cursor: pointer; 186 | transition: all 0.3s; 187 | position: relative; 188 | overflow: hidden; 189 | .jiao{ 190 | width:25px; 191 | height:25px; 192 | background-color: tomato; 193 | position: absolute; 194 | left:-12px; 195 | top:-12px; 196 | transform: rotate(135deg); 197 | display: none; 198 | z-index: 1; 199 | 200 | } 201 | &.active{ 202 | .jiao{ 203 | display: block; 204 | } 205 | } 206 | &:hover{ 207 | background-color: rgba(0,0,0,0.1); 208 | } 209 | } 210 | .cover-body{ 211 | width:60px; 212 | height:60px; 213 | border-radius: 4px; 214 | min-width:60px; 215 | } 216 | .fonts{ 217 | margin-left:10px; 218 | font-size: 14px; 219 | .title{ 220 | 221 | } 222 | p{ 223 | color: #959595; 224 | font-size:12px; 225 | margin-top: 2px; 226 | } 227 | } 228 | } 229 | .products-list-body{ 230 | padding-top:100px; 231 | .form-body{ 232 | box-shadow: 0 8px 10px rgba(0,0,0,0.1); 233 | position: absolute; 234 | top:0; 235 | width: 100%; 236 | height:90px; 237 | left:0; 238 | z-index: 10; 239 | background-color: #fff; 240 | padding:10px; 241 | input{ 242 | width:100%; 243 | height:30px; 244 | margin-bottom:10px; 245 | padding:0 10px; 246 | } 247 | select{ 248 | height:30px; 249 | margin-right:10px; 250 | } 251 | button[type=submit]{ 252 | padding:0 20px; 253 | background-color: #4B5060; 254 | color: #fff; 255 | border-radius: 2px; 256 | cursor: pointer; 257 | } 258 | } 259 | } 260 | .loading-top{ 261 | position: fixed; 262 | width:100%; 263 | height:100%; 264 | z-index: 300; 265 | left:0; 266 | top:0; 267 | background-color: rgba(255,255,255,0.4); 268 | visibility: hidden; 269 | opacity: 0; 270 | transition: all 0.3s; 271 | &.active{ 272 | visibility: visible; 273 | opacity: 1; 274 | } 275 | &:after{ 276 | width:40px; 277 | height:40px; 278 | border-radius: 50%; 279 | border:3px solid #000; 280 | border-right-color:transparent; 281 | animation: ajaxLoading 0.8s infinite linear; 282 | content:''; 283 | display: block; 284 | position: absolute; 285 | left:50%; 286 | top:50%; 287 | margin-left:-20px; 288 | margin-top:-20px; 289 | } 290 | } 291 | 292 | -------------------------------------------------------------------------------- /app/styles/main.scss: -------------------------------------------------------------------------------- 1 | //便于循环编写css 目前没有找到更好的办法 2 | $colorImageLabel:( "primary":#4B5060, // 主题颜色 3 | "title":#363636, // 标题色 4 | "sub":#959595, //副标题色 5 | "content":#252525, //文字内容色 6 | "grey":#ccc, "white":#fff, //白色 7 | "black":#000, //黑色 8 | "bg":#252525, //背景颜色 9 | "bgLight":#363636, //稍浅背景颜色 10 | "greyBg":#fafafa, //浅色背景颜色 11 | "greyDark":#f2f2f2, "border":#f3f3f3, "borderLight":#f3f3f3, "success":#57c90c, "error":#ff4048); 12 | @function colorImageLabel($n) { 13 | @return map-get($colorImageLabel, $n); 14 | } 15 | 16 | @mixin full() { 17 | width: 100%; 18 | height: 100%; 19 | } 20 | 21 | @mixin zero() { 22 | left: 0; 23 | top: 0; 24 | } 25 | 26 | @mixin middle() { 27 | justify-content: center; 28 | align-items: center; 29 | } 30 | 31 | @mixin middle_j() { 32 | justify-content: center; 33 | } 34 | 35 | @mixin middle_a() { 36 | align-items: center; 37 | } 38 | 39 | .imageLabel-box { 40 | font-size: 14px; 41 | visibility: hidden; 42 | opacity: 0; 43 | position: fixed; 44 | @include full; 45 | @include zero; 46 | background-color: #363636; 47 | z-index: 100; 48 | // transform: scale(0.8); 49 | transition: all 0.4s; 50 | &.imageLabel-box-active{ 51 | visibility: visible; 52 | opacity: 1; 53 | transform: scale(1); 54 | } 55 | * { 56 | -webkit-tap-highlight-color: rgba(255, 0, 0, 0); 57 | outline: none; 58 | box-sizing: border-box; 59 | list-style: none; 60 | margin: 0; 61 | padding: 0; 62 | } 63 | button { 64 | -webkit-user-select: none; 65 | } 66 | input[type="number"] { 67 | -moz-appearance: textfield; 68 | } 69 | input::-webkit-outer-spin-button, 70 | input::-webkit-inner-spin-button { 71 | -webkit-appearance: none !important; 72 | margin: 0; 73 | } 74 | input[type=text], 75 | input[type=number], 76 | input[type=tel], 77 | input[type=password], 78 | button { 79 | -webkit-appearance: none; 80 | } 81 | input::-webkit-search-cancel-button { 82 | display: none; 83 | } 84 | user-select: none; 85 | .imageLabel { 86 | @include full; 87 | display: flex; 88 | flex-direction: column; 89 | .imageLabel-box { 90 | @include full; 91 | } 92 | } 93 | .imageLabel-buttons{ 94 | padding:10px; 95 | text-align: center; 96 | div{ 97 | padding:5px 10px; 98 | margin:0 10px; 99 | background-color: colorImageLabel(primary); 100 | &.imageLabel-closes{ 101 | background-color: colorImageLabel(sub ); 102 | } 103 | } 104 | } 105 | .imageLabel-img-boxs { 106 | @include full; 107 | @include middle; 108 | flex:1; 109 | display: flex; 110 | .imageLabel-img-body { 111 | position: relative; 112 | overflow: hidden; 113 | @include full; 114 | display: flex; 115 | @include middle; 116 | } 117 | } 118 | .imageLabel-drap-menu { 119 | background-color: #fff; 120 | width: 100px; 121 | position: fixed; 122 | z-index: 9999; 123 | display: none; 124 | box-shadow: 0 16px 24px 2px rgba(0, 0, 0, 0.06), 0 6px 30px 5px rgba(0, 0, 0, 0.12), 0 8px 10px -7px rgba(0, 0, 0, 0.2); 125 | .btns{ 126 | padding:5px 10px; 127 | text-align: center; 128 | &:hover{ 129 | background-color: rgba(0,0,0,0.1); 130 | } 131 | &:active{ 132 | opacity: 0.9; 133 | } 134 | } 135 | } 136 | } 137 | 138 | // .imageLabel-content{ 139 | // &:before{ 140 | // content:''; 141 | // position: absolute; 142 | // @include full; 143 | // @include zero; 144 | // background-color: rgba(0,0,0,0.3); 145 | // } 146 | // } 147 | .imageLabel-img{ 148 | visibility: hidden; 149 | opacity: 0; 150 | transition: all 0.3s; 151 | &.imageLabel-img-active{ 152 | visibility: visible; 153 | opacity: 1; 154 | } 155 | } 156 | .imageLabel-content { 157 | cursor: crosshair; 158 | @include full; 159 | @include zero; 160 | position: absolute; 161 | } 162 | 163 | .imageLabel-imgdrop { 164 | cursor: move; 165 | position: absolute; 166 | min-width: 7px; 167 | min-height: 7px; 168 | background-color: rgba(0, 0, 0, .3); 169 | border: 1px dashed colorImageLabel(sub); 170 | 171 | z-index: 10; 172 | display: flex; 173 | 174 | @include middle; 175 | span{ 176 | color: #fff; 177 | 178 | } 179 | em.imageLable-em { 180 | //遮罩 181 | $w: 10000px; 182 | display: none; 183 | z-index: -1; 184 | position: absolute; 185 | background-color: rgba(0, 0, 0, 0.4); 186 | &:nth-of-type(1) { 187 | bottom: 100%; 188 | left: 50%; 189 | width: $w; 190 | margin-bottom: 1px; 191 | height: $w; 192 | margin-left: -$w/2; 193 | } 194 | &:nth-of-type(2) { 195 | left: 100%; 196 | margin-left: 1px; 197 | top: -1px; 198 | width: $w; 199 | bottom: -1px; 200 | } 201 | &:nth-of-type(3) { 202 | top: 100%; 203 | left: 50%; 204 | width: $w; 205 | margin-top: 1px; 206 | height: $w; 207 | margin-left: -$w/2; 208 | } 209 | &:nth-of-type(4) { 210 | right: 100%; 211 | top: -1px; 212 | width: $w; 213 | margin-right: 1px; 214 | bottom: -1px; 215 | } 216 | } 217 | i { 218 | $zhi: 9px; 219 | width: $zhi; 220 | height: $zhi; // background-color: rgba(255,255,255,0.6); 221 | border-radius: 50%; 222 | border: 1px solid #fff; 223 | background-color: colorImageLabel(sub); 224 | 225 | position: absolute; 226 | cursor: default !important; 227 | $chazhi: -5px; 228 | &:nth-of-type(1) { 229 | left: $chazhi; 230 | top: $chazhi; 231 | cursor: nw-resize; 232 | } 233 | &:nth-of-type(2) { 234 | right: $chazhi; 235 | top: $chazhi; 236 | cursor: ne-resize; 237 | } 238 | &:nth-of-type(3) { 239 | right: $chazhi; 240 | bottom: $chazhi; 241 | cursor: se-resize; 242 | } 243 | &:nth-of-type(4) { 244 | left: $chazhi; 245 | bottom: $chazhi; 246 | cursor: sw-resize; 247 | } 248 | &:nth-of-type(5) { 249 | left: 50%; 250 | top: $chazhi; 251 | margin-left: $chazhi; 252 | cursor: col-resize; 253 | } 254 | &:nth-of-type(6) { 255 | right: $chazhi; 256 | top: 50%; 257 | margin-top: $chazhi; 258 | cursor: ew-resize; 259 | } 260 | &:nth-of-type(7) { 261 | left: 50%; 262 | bottom: $chazhi; 263 | margin-left: $chazhi; 264 | cursor: col-resize; 265 | } 266 | &:nth-of-type(8) { 267 | left: $chazhi; 268 | top: 50%; 269 | margin-top: $chazhi; 270 | cursor: ew-resize; 271 | } 272 | } 273 | 274 | em.imageLable-em{ 275 | pointer-events: none; 276 | } 277 | 278 | &.imageLabel-drop-has{ 279 | .imageLabel-imgdrop-font{ 280 | opacity: 1; 281 | } 282 | background-color: rgba(255,0,0,0.3); 283 | } 284 | &.imageLabel-drop-edit{ 285 | border:2px solid transparent; 286 | border-image:url('../images/border.gif') 1 1 round; 287 | &.imageLabel-drop-has{ 288 | background-color: rgba(0,0,255,0.3); 289 | } 290 | } 291 | &.imageLabel-drop-move{//最重要 292 | .imageLabel-imgdrop-font{ 293 | opacity: 0; 294 | } 295 | background-color: transparent!important; 296 | } 297 | 298 | &.imageLabel-drop-now { 299 | .imageLabel-imgdrop-font{ 300 | opacity: 0; 301 | } 302 | display: block!important; 303 | background-color: transparent; 304 | em.imageLable-em { 305 | display: block; 306 | } // box-shadow:rgba(0, 0, 0, 0.5) 0px 0px 0px 99999999999px; 307 | } 308 | .imageLabel-imgdrop-font{ 309 | pointer-events: none; 310 | overflow: hidden; 311 | padding:2px; 312 | position: absolute; 313 | @include full; 314 | @include zero; 315 | display: flex; 316 | @include middle; 317 | } 318 | } 319 | 320 | .imageLabel-input { 321 | @include full; 322 | position: fixed; 323 | display: flex; 324 | @include middle; 325 | @include zero; 326 | user-select: none; 327 | visibility: hidden; 328 | transition: all 0.4s; 329 | opacity: 0; 330 | z-index: 999999; 331 | .imageLabel-input-box { 332 | transform: scale(0); 333 | transition: all 0.4s; 334 | } 335 | &.imageLabel-active { 336 | opacity: 1; 337 | visibility: visible; 338 | .imageLabel-input-box { 339 | transform: scale(1); 340 | } 341 | } 342 | } 343 | 344 | .imageLabel-btn { 345 | padding: 6px 10px; 346 | background-color: #333; 347 | color: #fff; 348 | user-select: none; 349 | border-radius: 3px; 350 | cursor: pointer; 351 | text-align: center; 352 | display: inline-block; 353 | box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.06), 0 1px 10px 0 rgba(0, 0, 0, 0.12), 0 2px 4px -1px rgba(0, 0, 0, 0.3); 354 | &:active { 355 | opacity: 0.8; 356 | } 357 | } 358 | 359 | .imageLabel-loading-body { 360 | @include full; 361 | position: absolute; 362 | @include zero; 363 | display: flex; 364 | @include middle; 365 | } 366 | 367 | .imageLabel-loading { 368 | width: 50px; 369 | height: 50px; 370 | border-radius: 50%; 371 | border: 2px solid #fff; 372 | border-right-color: rgba(255, 255, 255, 0.2); 373 | animation: imageLabelLoading 1s infinite linear; 374 | } 375 | 376 | @keyframes imageLabelLoading { 377 | form { 378 | transform: rotate(0deg) 379 | } 380 | to { 381 | transform: rotate(360deg) 382 | } 383 | } 384 | 385 | 386 | 387 | 388 | -------------------------------------------------------------------------------- /app/test.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | My page 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | -------------------------------------------------------------------------------- /bower.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "imagelabel", 3 | "version":"0.10", 4 | "dependencies": { 5 | "jquery": "^3.3.1", 6 | "art-template": "^4.12.1" 7 | }, 8 | "homepage": "https://github.com/codingdogs/imageLabel", 9 | "authors": [ 10 | "704175885@qq.com" 11 | ], 12 | "description": "image label tool", 13 | "main": "jquery.imageLabel.min.js", 14 | "keywords": [ 15 | "imageLabel" 16 | ], 17 | "license": "MIT", 18 | "ignore": [ 19 | "**/.*", 20 | "node_modules", 21 | "bower_components", 22 | "test", 23 | "tests" 24 | ] 25 | } 26 | -------------------------------------------------------------------------------- /dist/apple-touch-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codingdogs/imageLabel/0f456dfd0d2c4828c45aa5cd682e588d309cb008/dist/apple-touch-icon.png -------------------------------------------------------------------------------- /dist/company.html: -------------------------------------------------------------------------------- 1 | imageLabel
产品

-------------------------------------------------------------------------------- /dist/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codingdogs/imageLabel/0f456dfd0d2c4828c45aa5cd682e588d309cb008/dist/favicon.ico -------------------------------------------------------------------------------- /dist/images/border.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codingdogs/imageLabel/0f456dfd0d2c4828c45aa5cd682e588d309cb008/dist/images/border.gif -------------------------------------------------------------------------------- /dist/images/pic.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codingdogs/imageLabel/0f456dfd0d2c4828c45aa5cd682e588d309cb008/dist/images/pic.gif -------------------------------------------------------------------------------- /dist/index.html: -------------------------------------------------------------------------------- 1 | imageLabel
Imagelabel
图片链接:

-------------------------------------------------------------------------------- /dist/robots.txt: -------------------------------------------------------------------------------- 1 | # robotstxt.org/ 2 | 3 | User-agent: * 4 | Disallow: 5 | -------------------------------------------------------------------------------- /dist/scripts/jquery.imageLabel.min.js: -------------------------------------------------------------------------------- 1 | "use strict";function imageLabel(e){function a(){function e(){var e=$(".imageLabel-imgdrop"),a=[];e.each(function(e,i){var n=$(i).width()*$(i).height();a.push(n)}),e.each(function(e,i){var n=$(i),t=n.width()*n.height(),l=0;$.each(a,function(e,a){t<=a&&l++}),n.css({"z-index":l})})}function a(){var e=$(".imageLabel-img"),a=$(".imageLabel-jisuan"),i=e[0].naturalWidth,n=e[0].naturalHeight,t=e.parents(".imageLabel-img-body").width(),l=e.parents(".imageLabel-img-body").height();i/n>t/l?a.css({width:"100%",height:n/i*t}):a.css({height:"100%",width:i/n*l})}var t,s,o,d,c,g,m,r=$(".imageLabel-content"),b=!1,p=!1,v=!1,f=$(".imageLabel-drap-menu");$(".imageLabel-content")[0].oncontextmenu=function(){return!1},f[0].oncontextmenu=function(){return!1},$("body").click(function(e){f.hide()}),$.each(n.data,function(e,a){s=$('
'+(a.name||"")+'
');for(var i=0;i<8;i++)s.find(".imageLable-i-s").append('');if(n.shade)for(var t=0;t<4;t++)s.append('');var l=a;s.css({left:100*(l.ex-l.x>0?l.x:l.ex)+"%",top:100*(l.ey-l.y>0?l.y:l.ey)+"%",width:100*Math.abs(l.ex-l.x)+"%",height:100*Math.abs(l.ey-l.y)+"%"}).attr("data-json",JSON.stringify(a)),r.append(s)}),e(),$(".imageLabel-content").mousedown(function(e){if(d=e.button,2!=e.button){if(f.hide(),b=!0,r=$(this),t={x:r.offset().left,y:r.offset().top,cx:e.clientX,cy:e.clientY,w:r.width(),h:r.height()},o={x:(t.cx-t.x)/t.w,y:(t.cy-t.y)/t.h,ex:0,ey:0},$(e.target).hasClass("imageLabel-imgdrop"))p=!0,s=$(e.target),c=JSON.parse(s.attr("data-json")),o=$.extend({},c),n.startArea();else if($(e.target).hasClass("imageLable-i"))v=!0,g=$(e.target),s=$(e.target).parents(".imageLabel-imgdrop"),c=JSON.parse(s.attr("data-json")),o=$.extend({},c);else{m=(new Date).getTime(),p=!1,s=$('
');for(var a=0;a<8;a++)s.find(".imageLable-i-s").append('');if(n.shade)for(var i=0;i<4;i++)s.append('');s.addClass("imageLabel-drop-edit").appendTo(r),s.siblings().removeClass("imageLabel-drop-edit")}s.addClass("imageLabel-drop-now"),n.only&&$(this).find(".imageLabel-imgdrop").hide()}else $(e.target).hasClass("imageLabel-imgdrop")&&(s=$(e.target),setTimeout(function(){f.css({left:e.clientX,top:e.clientY}).show()},0))}),$(".imageLabel-img-boxs").mousemove(function(e){if(b){if(p)o.x=c.x+(e.clientX-t.cx)/t.w,o.ex=c.ex+(e.clientX-t.cx)/t.w,o.y=c.y+(e.clientY-t.cy)/t.h,o.ey=c.ey+(e.clientY-t.cy)/t.h;else if(v){var a=g.index();0==a&&(o.x=c.x+(e.clientX-t.cx)/t.w,o.y=c.y+(e.clientY-t.cy)/t.h),1==a&&(o.ex=c.ex+(e.clientX-t.cx)/t.w,o.y=c.y+(e.clientY-t.cy)/t.h),2==a&&(o.ex=c.ex+(e.clientX-t.cx)/t.w,o.ey=c.ey+(e.clientY-t.cy)/t.h),3==a&&(o.x=c.x+(e.clientX-t.cx)/t.w,o.ey=c.ey+(e.clientY-t.cy)/t.h),4==a&&(o.y=c.y+(e.clientY-t.cy)/t.h),5==a&&(o.ex=c.ex+(e.clientX-t.cx)/t.w),6==a&&(o.ey=c.ey+(e.clientY-t.cy)/t.h),7==a&&(o.x=c.x+(e.clientX-t.cx)/t.w)}else o.ex=(e.clientX-t.x)/t.w,o.ey=(e.clientY-t.y)/t.h;o.y<0&&(o.y=0),o.x<0&&(o.x=0),o.ey<0&&(o.ey=0),o.ex<0&&(o.ex=0),o.ey>1&&(o.ey=1),o.ex>1&&(o.ex=1),o.y>1&&(o.y=1),o.x>1&&(o.x=1),s.css({left:100*(o.ex-o.x>0?o.x:o.ex)+"%",top:100*(o.ey-o.y>0?o.y:o.ey)+"%",width:100*Math.abs(o.ex-o.x)+"%",height:100*Math.abs(o.ey-o.y)+"%"}).addClass("imageLabel-drop-move")}}).mouseup(function(a){if(b){var i={};o.x10&&Math.abs(a.clientY-t.cy)>10&&!p&&!v?(n.editPop&&($(".imageLabel-input").addClass("imageLabel-active").find("input").val(""),setTimeout(function(){$(".imageLabel-input").find("input").focus()[0].setSelectionRange(-1,-1)},500)),n.edit(s)):p||v||s.remove(),b=!1,p=!1,v=!1,e(),s.removeClass("imageLabel-drop-now imageLabel-drop-move")}n.only&&$(this).find(".imageLabel-imgdrop").show()});var y=$(".imageLabel-input"),u=y.find("input");y.find(".imageLabel-input-close").click(function(){y.removeClass("imageLabel-active")}),y.find(".imageLabel-input-ok").click(function(){s.find(".imageLabel-imgdrop-font").html(u.val());var e=JSON.parse(s.attr("data-json"));e.name=u.val(),s.attr("data-json",JSON.stringify(e)),y.removeClass("imageLabel-active"),u.val()?s.addClass("imageLabel-drop-has"):s.removeClass("imageLabel-drop-has")}),$(".imageLabel-delete").click(function(){s.remove(),f.hide()}),$(".imageLabel-edit").click(function(){n.edit(s),s.addClass("imageLabel-drop-edit").siblings().removeClass("imageLabel-drop-edit"),n.editPop&&(y.addClass("imageLabel-active").find("input").val(s.find(".imageLabel-imgdrop-font").html()),setTimeout(function(){y.find("input").focus()[0].setSelectionRange(-1,-1)},500)),f.hide()}),u.keydown(function(e){13==e.keyCode&&y.find(".imageLabel-input-ok").click()}),$(window).keydown(function(e){27==e.keyCode&&y.hasClass("imageLabel-active")&&y.removeClass("imageLabel-active")}),a(),$(window).resize(a),$(".imageLabel-closes").click(function(){n.close(i.getData())&&(l.removeClass("imageLabel-box-active"),setTimeout(function(){l.remove()},500))}).next().click(function(){n.confirm(i.getData())&&l.removeClass("imageLabel-box-active")})}if(!e.img)return alert("请填写图片地址"),!1;var i={getData:function(){var e=[];return $(".imageLabel-imgdrop").each(function(){e.push(JSON.parse($(this).attr("data-json")))}),e},clearArea:function(){$(".imageLabel-imgdrop").remove()},close:function(){$(".imageLabel-closes").click()}},n={only:!1,shade:!0,editPop:!0,close:function(){return!0},edit:function(){},confirm:function(){return!0},startArea:function(){},clickArea:function(){},data:[]};n=$.extend(n,e),$(".imageLabel-box").remove();var t='
\n
\n
\n \n
\n
\n
\n
\n \n
\n\n
\n
\n \n
\n
\n
删除
\n
编辑
\n
\n \x3c!--\n\n
\n 红色\n
\n
\n 红色\n
\n --\x3e\n
\n
\n
\n
关闭
\n
确定
\n
\n
\n
\n
\n
\n 编辑内容\n X\n
\n
\n\n
\n \n
\n
取消
\n
确定
\n
\n
\n
\n
\n
\n
',l=$(t);return l.find(".imageLabel-img").one("load",function(){$(this).addClass("imageLabel-img-active"),$(".imageLabel-loading-body").hide(),a()}),l.appendTo("body"),setTimeout(function(){l.addClass("imageLabel-box-active")},0),i} -------------------------------------------------------------------------------- /dist/scripts/template.js: -------------------------------------------------------------------------------- 1 | !function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t():"function"==typeof define&&define.amd?define([],t):"object"==typeof exports?exports.template=t():e.template=t()}(this,function(){return function(e){function t(r){if(n[r])return n[r].exports;var i=n[r]={i:r,l:!1,exports:{}};return e[r].call(i.exports,i,i.exports,t),i.l=!0,i.exports}var n={};return t.m=e,t.c=n,t.d=function(e,n,r){t.o(e,n)||Object.defineProperty(e,n,{configurable:!1,enumerable:!0,get:r})},t.n=function(e){var n=e&&e.__esModule?function(){return e.default}:function(){return e};return t.d(n,"a",n),n},t.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},t.p="",t(t.s=6)}([function(e,t,n){(function(t){e.exports=!1;try{e.exports="[object process]"===Object.prototype.toString.call(t.process)}catch(e){}}).call(t,n(4))},function(e,t,n){"use strict";var r=n(8),i=n(3),o=n(23),s=function(e,t){t.onerror(e,t);var n=function(){return"{Template Error}"};return n.mappings=[],n.sourcesContent=[],n},a=function e(t){var n=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};"string"!=typeof t?n=t:n.source=t,n=i.$extend(n),t=n.source,!0===n.debug&&(n.cache=!1,n.minimize=!1,n.compileDebug=!0),n.compileDebug&&(n.minimize=!1),n.filename&&(n.filename=n.resolveFilename(n.filename,n));var a=n.filename,c=n.cache,u=n.caches;if(c&&a){var p=u.get(a);if(p)return p}if(!t)try{t=n.loader(a,n),n.source=t}catch(e){var f=new o({name:"CompileError",path:a,message:"template not found: "+e.message,stack:e.stack});if(n.bail)throw f;return s(f,n)}var l=void 0,h=new r(n);try{l=h.build()}catch(f){if(f=new o(f),n.bail)throw f;return s(f,n)}var m=function(t,r){try{return l(t,r)}catch(i){if(!n.compileDebug)return n.cache=!1,n.compileDebug=!0,e(n)(t,r);if(i=new o(i),n.bail)throw i;return s(i,n)()}};return m.mappings=l.mappings,m.sourcesContent=l.sourcesContent,m.toString=function(){return l.toString()},c&&a&&u.set(a,m),m};a.Compiler=r,e.exports=a},function(e,t){Object.defineProperty(t,"__esModule",{value:!0}),t.default=/((['"])(?:(?!\2|\\).|\\(?:\r\n|[\s\S]))*(\2)?|`(?:[^`\\$]|\\[\s\S]|\$(?!\{)|\$\{(?:[^{}]|\{[^}]*\}?)*\}?)*(`)?)|(\/\/.*)|(\/\*(?:[^*]|\*(?!\/))*(\*\/)?)|(\/(?!\*)(?:\[(?:(?![\]\\]).|\\.)*\]|(?![\/\]\\]).|\\.)+\/(?:(?!\s*(?:\b|[\u0080-\uFFFF$\\'"~({]|[+\-!](?!=)|\.?\d))|[gmiyu]{1,5}\b(?![\u0080-\uFFFF$\\]|\s*(?:[+\-*%&|^<>!=?({]|\/(?![\/*])))))|(0[xX][\da-fA-F]+|0[oO][0-7]+|0[bB][01]+|(?:\d*\.\d+|\d+\.?)(?:[eE][+-]?\d+)?)|((?!\d)(?:(?!\s)[$\w\u0080-\uFFFF]|\\u[\da-fA-F]{4}|\\u\{[\da-fA-F]+\})+)|(--|\+\+|&&|\|\||=>|\.{3}|(?:[+\-\/%&|^]|\*{1,2}|<{1,2}|>{1,3}|!=?|={1,2})=?|[?~.,:;[\](){}])|(\s+)|(^$|[\s\S])/g,t.matchToToken=function(e){var t={type:"invalid",value:e[0]};return e[1]?(t.type="string",t.closed=!(!e[3]&&!e[4])):e[5]?t.type="comment":e[6]?(t.type="comment",t.closed=!!e[7]):e[8]?t.type="regex":e[9]?t.type="number":e[10]?t.type="name":e[11]?t.type="punctuator":e[12]&&(t.type="whitespace"),t}},function(e,t,n){"use strict";function r(){this.$extend=function(e){return e=e||{},s(e,e instanceof r?e:this)}}var i=n(0),o=n(12),s=n(13),a=n(14),c=n(15),u=n(16),p=n(17),f=n(18),l=n(19),h=n(20),m=n(22),v={source:null,filename:null,rules:[l,f],escape:!0,debug:!!i&&"production"!==process.env.NODE_ENV,bail:!0,cache:!0,minimize:!0,compileDebug:!1,resolveFilename:m,include:a,htmlMinifier:h,htmlMinifierOptions:{collapseWhitespace:!0,minifyCSS:!0,minifyJS:!0,ignoreCustomFragments:[]},onerror:c,loader:p,caches:u,root:"/",extname:".art",ignore:[],imports:o};r.prototype=v,e.exports=new r},function(e,t){var n;n=function(){return this}();try{n=n||Function("return this")()||(0,eval)("this")}catch(e){"object"==typeof window&&(n=window)}e.exports=n},function(e,t){},function(e,t,n){"use strict";var r=n(7),i=n(1),o=n(24),s=function(e,t){return t instanceof Object?r({filename:e},t):i({filename:e,source:t})};s.render=r,s.compile=i,s.defaults=o,e.exports=s},function(e,t,n){"use strict";var r=n(1),i=function(e,t,n){return r(e,n)(t)};e.exports=i},function(e,t,n){"use strict";function r(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}var i=n(9),o=n(11),s="$data",a="$imports",c="print",u="include",p="extend",f="block",l="$$out",h="$$line",m="$$blocks",v="$$slice",d="$$from",g="$$options",y=function(e,t){return e.hasOwnProperty(t)},b=JSON.stringify,x=function(){function e(t){var n,i,y=this;r(this,e);var b=t.source,x=t.minimize,w=t.htmlMinifier;if(this.options=t,this.stacks=[],this.context=[],this.scripts=[],this.CONTEXT_MAP={},this.ignore=[s,a,g].concat(t.ignore),this.internal=(n={},n[l]="''",n[h]="[0,0]",n[m]="arguments[1]||{}",n[d]="null",n[c]="function(){var s=''.concat.apply('',arguments);"+l+"+=s;return s}",n[u]="function(src,data){var s="+g+".include(src,data||"+s+",arguments[2]||"+m+","+g+");"+l+"+=s;return s}",n[p]="function(from){"+d+"=from}",n[v]="function(c,p,s){p="+l+";"+l+"='';c();s="+l+";"+l+"=p+s;return s}",n[f]="function(){var a=arguments,s;if(typeof a[0]==='function'){return "+v+"(a[0])}else if("+d+"){"+m+"[a[0]]="+v+"(a[1])}else{s="+m+"[a[0]];if(typeof s==='string'){"+l+"+=s}else{s="+v+"(a[1])}return s}}",n),this.dependencies=(i={},i[c]=[l],i[u]=[l,g,s,m],i[p]=[d,u],i[f]=[v,d,l,m],i),this.importContext(l),t.compileDebug&&this.importContext(h),x)try{b=w(b,t)}catch(e){}this.source=b,this.getTplTokens(b,t.rules,this).forEach(function(e){e.type===o.TYPE_STRING?y.parseString(e):y.parseExpression(e)})}return e.prototype.getTplTokens=function(){return o.apply(void 0,arguments)},e.prototype.getEsTokens=function(e){return i(e)},e.prototype.getVariables=function(e){var t=!1;return e.filter(function(e){return"whitespace"!==e.type&&"comment"!==e.type}).filter(function(e){return"name"===e.type&&!t||(t="punctuator"===e.type&&"."===e.value,!1)}).map(function(e){return e.value})},e.prototype.importContext=function(e){var t=this,n="",r=this.internal,i=this.dependencies,o=this.ignore,c=this.context,u=this.options,p=u.imports,f=this.CONTEXT_MAP;y(f,e)||-1!==o.indexOf(e)||(y(r,e)?(n=r[e],y(i,e)&&i[e].forEach(function(e){return t.importContext(e)})):n="$escape"===e||"$each"===e||y(p,e)?a+"."+e:s+"."+e,f[e]=n,c.push({name:e,value:n}))},e.prototype.parseString=function(e){var t=e.value;if(t){var n=l+"+="+b(t);this.scripts.push({source:t,tplToken:e,code:n})}},e.prototype.parseExpression=function(e){var t=this,n=e.value,r=e.script,i=r.output,s=this.options.escape,a=r.code;i&&(a=!1===s||i===o.TYPE_RAW?l+"+="+r.code:l+"+=$escape("+r.code+")");var c=this.getEsTokens(a);this.getVariables(c).forEach(function(e){return t.importContext(e)}),this.scripts.push({source:n,tplToken:e,code:a})},e.prototype.checkExpression=function(e){for(var t=[[/^\s*}[\w\W]*?{?[\s;]*$/,""],[/(^[\w\W]*?$[\w\W]*?(?:=>|\([\w\W]*?$)\s*{[\s;]*$)/,"$1})"],[/(^[\w\W]*?$[\w\W]*?$\s*{[\s;]*$)/,"$1}"]],n=0;n2&&void 0!==arguments[2]?arguments[2]:{},i=[{type:"string",value:e,line:0,start:0,end:e.length}],o=0;o]/;s.$escape=function(e){return i(r(e))},s.$each=function(e,t){if(Array.isArray(e))for(var n=0,r=e.length;n/,use:function(e,t,n,r){return n={"-":"raw","=":"escape","":!1,"==":"raw","=#":"raw"}[n],t&&(r="/*"+r+"*/",n=!1),{code:r,output:n}}};e.exports=r},function(e,t,n){"use strict";var r=n(0),i=function(e,t){if(r){var i,o=n(21).minify,s=t.htmlMinifierOptions,a=t.rules.map(function(e){return e.test});(i=s.ignoreCustomFragments).push.apply(i,a),e=o(e,s)}return e};e.exports=i},function(e,t){!function(e){e.noop=function(){}}("object"==typeof e&&"object"==typeof e.exports?e.exports:window)},function(e,t,n){"use strict";var r=n(0),i=/^\.+\//,o=function(e,t){if(r){var o=n(5),s=t.root,a=t.extname;if(i.test(e)){var c=t.filename,u=!c||e===c,p=u?s:o.dirname(c);e=o.resolve(p,e)}else e=o.resolve(s,e);o.extname(e)||(e+=a)}return e};e.exports=o},function(e,t,n){"use strict";function r(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function i(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!=typeof t&&"function"!=typeof t?e:t}function o(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)}function s(e){var t=e.name,n=e.source,r=e.path,i=e.line,o=e.column,s=e.generated,a=e.message;if(!n)return a;var c=n.split(/\n/),u=Math.max(i-3,0),p=Math.min(c.length,i+3),f=c.slice(u,p).map(function(e,t){var n=t+u+1;return(n===i?" >> ":" ")+n+"| "+e}).join("\n");return(r||"anonymous")+":"+i+":"+o+"\n"+f+"\n\n"+t+": "+a+(s?"\n generated: "+s:"")}var a=function(e){function t(n){r(this,t);var o=i(this,e.call(this,n.message));return o.name="TemplateError",o.message=s(n),Error.captureStackTrace&&Error.captureStackTrace(o,o.constructor),o}return o(t,e),t}(Error);e.exports=a},function(e,t,n){"use strict";e.exports=n(3)}])}); -------------------------------------------------------------------------------- /dist/styles/edit.css: -------------------------------------------------------------------------------- 1 | @charset "UTF-8";.right-select-box{color:#333;position:fixed;width:300px;bottom:0;top:10px;z-index:200;right:0;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;box-shadow:-5px 50px 50px 3px rgba(0,0,0,.1);border-left:1px solid #959595;transition:all .4s;transform:translate(100%)}.right-select-box *{box-sizing:border-box;list-style:none;margin:0;padding:0}.right-select-box .full{width:100%;height:100%}.right-select-box .full-w{width:100%}.right-select-box .full-h{height:100%}.right-select-box .flex-box{display:-ms-flexbox;display:flex}.right-select-box .flex1{-ms-flex:1;flex:1;-webkit-box-flex:1;overflow:hidden}.right-select-box .cover{-o-object-fit:cover;object-fit:cover;width:100%;height:100%}.right-select-box .cover-body{position:relative;overflow:hidden;-webkit-transform:rotate(0deg)}.right-select-box .cover-body .cover{position:absolute}.right-select-box .ellipsis{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.right-select-box .select-close{position:absolute;right:100%;top:50%;display:block;padding:5px;background:#fff;border:1px solid #959595;border-right:none;cursor:pointer}.right-select-box .select-close svg{transform:rotate(-90deg);transition:all .3s}.right-select-box.select-active{transform:translate(0);visibility:visible}.right-select-box.select-active .select-close svg{transform:rotate(90deg)}.right-select-box .select-title{position:relative;z-index:2;border-bottom:1px solid #959595}.right-select-box .select-title .btns{font-size:14px;margin-top:-3px;color:#959595;padding:5px 20px;border:1px solid #959595;border-radius:5px 5px 0 0;margin-left:-1px;background-color:#fff;cursor:pointer;position:relative;border-color:transparent;opacity:.9;transition:all .4s}.right-select-box .select-title .btns.active{border-color:#959595;border-bottom-color:#fff;z-index:1;opacity:1;top:1px}.right-select-box .select-content{width:100%;height:100%;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;position:relative;z-index:0}.right-select-box .select-content .select-content-inner{background-color:#fff;position:relative;z-index:0;overflow:hidden}.right-select-box .select-content .select-content-inner .inner-lists{width:200%;transition:margin .4s;padding-top:10px}.right-select-box .select-content .select-content-inner .inner-lists .inner-list{overflow:hidden;overflow-y:auto}.right-select-box .ajax-loading{margin-top:20px;margin-bottom:10px;position:relative;text-align:center;font-size:12px;color:#959595}.right-select-box .ajax-loading:after{content:"";display:block;margin:0 auto;width:20px;height:20px;border-radius:50%;border:2px solid #000;border-right-color:transparent;animation:ajaxLoading .8s infinite linear}.right-select-box .ajax-loading.over:after{display:none}.right-select-box .ajax-loading.over:before{content:"已经全部加载完成~"}.right-select-box .ajax-loading.nothing:after{display:none}.right-select-box .ajax-loading.nothing:before{content:"没有搜索到相关的产品~"}@keyframes ajaxLoading{form{transform:rotate(0deg)}to{transform:rotate(1turn)}}.products-lists .list{padding:10px;border-bottom:1px solid rgba(0,0,0,.1);cursor:pointer;transition:all .3s;position:relative;overflow:hidden}.products-lists .list .jiao{width:25px;height:25px;background-color:tomato;position:absolute;left:-12px;top:-12px;transform:rotate(135deg);display:none;z-index:1}.products-lists .list.active .jiao{display:block}.products-lists .list:hover{background-color:rgba(0,0,0,.1)}.products-lists .cover-body{width:60px;height:60px;border-radius:4px;min-width:60px}.products-lists .fonts{margin-left:10px;font-size:14px}.products-lists .fonts p{color:#959595;font-size:12px;margin-top:2px}.products-list-body{padding-top:100px}.products-list-body .form-body{box-shadow:0 8px 10px rgba(0,0,0,.1);position:absolute;top:0;width:100%;height:90px;left:0;z-index:10;background-color:#fff;padding:10px}.products-list-body .form-body input{width:100%;height:30px;margin-bottom:10px;padding:0 10px}.products-list-body .form-body select{height:30px;margin-right:10px}.products-list-body .form-body button[type=submit]{padding:0 20px;background-color:#4b5060;color:#fff;border-radius:2px;cursor:pointer}.loading-top{position:fixed;width:100%;height:100%;z-index:300;left:0;top:0;background-color:hsla(0,0%,100%,.4);visibility:hidden;opacity:0;transition:all .3s}.loading-top.active{visibility:visible;opacity:1}.loading-top:after{width:40px;height:40px;border-radius:50%;border:3px solid #000;border-right-color:transparent;animation:ajaxLoading .8s infinite linear;content:"";display:block;position:absolute;left:50%;top:50%;margin-left:-20px;margin-top:-20px} -------------------------------------------------------------------------------- /dist/styles/jquery.imageLabel.min.css: -------------------------------------------------------------------------------- 1 | .imageLabel-box{font-size:14px;visibility:hidden;opacity:0;position:fixed;width:100%;height:100%;left:0;top:0;background-color:#363636;z-index:100;transition:all .4s;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.imageLabel-box.imageLabel-box-active{visibility:visible;opacity:1;transform:scale(1)}.imageLabel-box *{-webkit-tap-highlight-color:rgba(255,0,0,0);outline:none;box-sizing:border-box;list-style:none;margin:0;padding:0}.imageLabel-box button{-webkit-user-select:none}.imageLabel-box input[type=number]{-moz-appearance:textfield}.imageLabel-box input::-webkit-inner-spin-button,.imageLabel-box input::-webkit-outer-spin-button{-webkit-appearance:none!important;margin:0}.imageLabel-box button,.imageLabel-box input[type=number],.imageLabel-box input[type=password],.imageLabel-box input[type=tel],.imageLabel-box input[type=text]{-webkit-appearance:none}.imageLabel-box input::-webkit-search-cancel-button{display:none}.imageLabel-box .imageLabel{width:100%;height:100%;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}.imageLabel-box .imageLabel .imageLabel-box{width:100%;height:100%}.imageLabel-box .imageLabel-buttons{padding:10px;text-align:center}.imageLabel-box .imageLabel-buttons div{padding:5px 10px;margin:0 10px;background-color:#4b5060}.imageLabel-box .imageLabel-buttons div.imageLabel-closes{background-color:#959595}.imageLabel-box .imageLabel-img-boxs{-ms-flex-pack:center;-ms-flex-align:center;-ms-flex:1;flex:1}.imageLabel-box .imageLabel-img-boxs,.imageLabel-box .imageLabel-img-boxs .imageLabel-img-body{width:100%;height:100%;justify-content:center;align-items:center;display:-ms-flexbox;display:flex}.imageLabel-box .imageLabel-img-boxs .imageLabel-img-body{position:relative;overflow:hidden;-ms-flex-pack:center;-ms-flex-align:center}.imageLabel-box .imageLabel-drap-menu{background-color:#fff;width:100px;position:fixed;z-index:9999;display:none;box-shadow:0 16px 24px 2px rgba(0,0,0,.06),0 6px 30px 5px rgba(0,0,0,.12),0 8px 10px -7px rgba(0,0,0,.2)}.imageLabel-box .imageLabel-drap-menu .btns{padding:5px 10px;text-align:center}.imageLabel-box .imageLabel-drap-menu .btns:hover{background-color:rgba(0,0,0,.1)}.imageLabel-box .imageLabel-drap-menu .btns:active{opacity:.9}.imageLabel-img{visibility:hidden;opacity:0;transition:all .3s}.imageLabel-img.imageLabel-img-active{visibility:visible;opacity:1}.imageLabel-content{cursor:crosshair;width:100%;height:100%;left:0;top:0;position:absolute}.imageLabel-imgdrop{cursor:move;position:absolute;min-width:7px;min-height:7px;background-color:rgba(0,0,0,.3);border:1px dashed #959595;z-index:10;display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center}.imageLabel-imgdrop span{color:#fff}.imageLabel-imgdrop em.imageLable-em{display:none;z-index:-1;position:absolute;background-color:rgba(0,0,0,.4)}.imageLabel-imgdrop em.imageLable-em:first-of-type{bottom:100%;left:50%;width:10000px;margin-bottom:1px;height:10000px;margin-left:-5000px}.imageLabel-imgdrop em.imageLable-em:nth-of-type(2){left:100%;margin-left:1px;top:-1px;width:10000px;bottom:-1px}.imageLabel-imgdrop em.imageLable-em:nth-of-type(3){top:100%;left:50%;width:10000px;margin-top:1px;height:10000px;margin-left:-5000px}.imageLabel-imgdrop em.imageLable-em:nth-of-type(4){right:100%;top:-1px;width:10000px;margin-right:1px;bottom:-1px}.imageLabel-imgdrop i{width:9px;height:9px;border-radius:50%;border:1px solid #fff;background-color:#959595;position:absolute;cursor:default!important}.imageLabel-imgdrop i:first-of-type{left:-5px;top:-5px;cursor:nw-resize}.imageLabel-imgdrop i:nth-of-type(2){right:-5px;top:-5px;cursor:ne-resize}.imageLabel-imgdrop i:nth-of-type(3){right:-5px;bottom:-5px;cursor:se-resize}.imageLabel-imgdrop i:nth-of-type(4){left:-5px;bottom:-5px;cursor:sw-resize}.imageLabel-imgdrop i:nth-of-type(5){left:50%;top:-5px;margin-left:-5px;cursor:col-resize}.imageLabel-imgdrop i:nth-of-type(6){right:-5px;top:50%;margin-top:-5px;cursor:ew-resize}.imageLabel-imgdrop i:nth-of-type(7){left:50%;bottom:-5px;margin-left:-5px;cursor:col-resize}.imageLabel-imgdrop i:nth-of-type(8){left:-5px;top:50%;margin-top:-5px;cursor:ew-resize}.imageLabel-imgdrop em.imageLable-em{pointer-events:none}.imageLabel-imgdrop.imageLabel-drop-has{background-color:rgba(255,0,0,.3)}.imageLabel-imgdrop.imageLabel-drop-has .imageLabel-imgdrop-font{opacity:1}.imageLabel-imgdrop.imageLabel-drop-edit{border:2px solid transparent;-o-border-image:url(../images/border.gif) 1 1 round;border-image:url(../images/border.gif) 1 1 round}.imageLabel-imgdrop.imageLabel-drop-edit.imageLabel-drop-has{background-color:rgba(0,0,255,.3)}.imageLabel-imgdrop.imageLabel-drop-move{background-color:transparent!important}.imageLabel-imgdrop.imageLabel-drop-move .imageLabel-imgdrop-font{opacity:0}.imageLabel-imgdrop.imageLabel-drop-now{display:block!important;background-color:transparent}.imageLabel-imgdrop.imageLabel-drop-now .imageLabel-imgdrop-font{opacity:0}.imageLabel-imgdrop.imageLabel-drop-now em.imageLable-em{display:block}.imageLabel-imgdrop .imageLabel-imgdrop-font{pointer-events:none;overflow:hidden;padding:2px;position:absolute}.imageLabel-imgdrop .imageLabel-imgdrop-font,.imageLabel-input{width:100%;height:100%;left:0;top:0;display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center}.imageLabel-input{position:fixed;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;visibility:hidden;transition:all .4s;opacity:0;z-index:999999}.imageLabel-input .imageLabel-input-box{transform:scale(0);transition:all .4s}.imageLabel-input.imageLabel-active{opacity:1;visibility:visible}.imageLabel-input.imageLabel-active .imageLabel-input-box{transform:scale(1)}.imageLabel-btn{padding:6px 10px;background-color:#333;color:#fff;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;border-radius:3px;cursor:pointer;text-align:center;display:inline-block;box-shadow:0 4px 5px 0 rgba(0,0,0,.06),0 1px 10px 0 rgba(0,0,0,.12),0 2px 4px -1px rgba(0,0,0,.3)}.imageLabel-btn:active{opacity:.8}.imageLabel-loading-body{width:100%;height:100%;position:absolute;left:0;top:0;display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center}.imageLabel-loading{width:50px;height:50px;border-radius:50%;border:2px solid #fff;border-right-color:hsla(0,0%,100%,.2);animation:imageLabelLoading 1s infinite linear}@keyframes imageLabelLoading{form{transform:rotate(0deg)}to{transform:rotate(1turn)}} -------------------------------------------------------------------------------- /dist/test.html: -------------------------------------------------------------------------------- 1 | My page -------------------------------------------------------------------------------- /gulpfile.js: -------------------------------------------------------------------------------- 1 | // generated on 2018-04-14 using generator-webapp 3.0.1 2 | const gulp = require('gulp'); 3 | const gulpLoadPlugins = require('gulp-load-plugins'); 4 | const browserSync = require('browser-sync').create(); 5 | const del = require('del'); 6 | const wiredep = require('wiredep').stream; 7 | const runSequence = require('run-sequence'); 8 | 9 | const $ = gulpLoadPlugins(); 10 | const reload = browserSync.reload; 11 | 12 | let dev = true; 13 | 14 | gulp.task('styles', () => { 15 | return gulp.src('app/styles/*.scss') 16 | .pipe($.plumber()) 17 | .pipe($.if(dev, $.sourcemaps.init())) 18 | .pipe($.sass.sync({ 19 | outputStyle: 'expanded', 20 | precision: 10, 21 | includePaths: ['.'] 22 | }).on('error', $.sass.logError)) 23 | .pipe($.autoprefixer({browsers: ['> 1%', 'last 2 versions', 'Firefox ESR']})) 24 | .pipe($.if(dev, $.sourcemaps.write())) 25 | .pipe(gulp.dest('.tmp/styles')) 26 | .pipe(reload({stream: true})); 27 | }); 28 | 29 | gulp.task('scripts', () => { 30 | return gulp.src('app/scripts/**/*.js') 31 | .pipe($.plumber()) 32 | .pipe($.if(dev, $.sourcemaps.init())) 33 | .pipe($.babel()) 34 | .pipe($.if(dev, $.sourcemaps.write('.'))) 35 | .pipe(gulp.dest('.tmp/scripts')) 36 | .pipe(reload({stream: true})); 37 | }); 38 | 39 | function lint(files) { 40 | return gulp.src(files) 41 | .pipe($.eslint({ fix: true })) 42 | .pipe(reload({stream: true, once: true})) 43 | .pipe($.eslint.format()) 44 | .pipe($.if(!browserSync.active, $.eslint.failAfterError())); 45 | } 46 | 47 | gulp.task('lint', () => { 48 | return lint('app/scripts/**/*.js') 49 | .pipe(gulp.dest('app/scripts')); 50 | }); 51 | gulp.task('lint:test', () => { 52 | return lint('test/spec/**/*.js') 53 | .pipe(gulp.dest('test/spec')); 54 | }); 55 | 56 | gulp.task('html', ['styles', 'scripts'], () => { 57 | return gulp.src('app/*.html') 58 | .pipe($.useref({searchPath: ['.tmp', 'app', '.']})) 59 | .pipe($.if(/\.js$/, $.uglify({compress: {drop_console: true}}))) 60 | .pipe($.if(/\.css$/, $.cssnano({safe: true, autoprefixer: false}))) 61 | .pipe($.if(/\.html$/, $.htmlmin({ 62 | collapseWhitespace: true, 63 | minifyCSS: true, 64 | minifyJS: {compress: {drop_console: true}}, 65 | processConditionalComments: true, 66 | removeComments: true, 67 | removeEmptyAttributes: true, 68 | removeScriptTypeAttributes: true, 69 | removeStyleLinkTypeAttributes: true 70 | }))) 71 | .pipe(gulp.dest('dist')); 72 | }); 73 | 74 | gulp.task('images', () => { 75 | return gulp.src('app/images/**/*') 76 | .pipe($.cache($.imagemin())) 77 | .pipe(gulp.dest('dist/images')); 78 | }); 79 | 80 | gulp.task('fonts', () => { 81 | return gulp.src(require('main-bower-files')('**/*.{eot,svg,ttf,woff,woff2}', function (err) {}) 82 | .concat('app/fonts/**/*')) 83 | .pipe($.if(dev, gulp.dest('.tmp/fonts'), gulp.dest('dist/fonts'))); 84 | }); 85 | 86 | gulp.task('extras', () => { 87 | return gulp.src([ 88 | 'app/*', 89 | '!app/*.html' 90 | ], { 91 | dot: true 92 | }).pipe(gulp.dest('dist')); 93 | }); 94 | 95 | gulp.task('clean', del.bind(null, ['.tmp', 'dist'])); 96 | 97 | gulp.task('serve', () => { 98 | runSequence(['clean', 'wiredep'], ['styles', 'scripts', 'fonts'], () => { 99 | browserSync.init({ 100 | notify: false, 101 | port: 9000, 102 | server: { 103 | baseDir: ['app','.tmp'], 104 | directory: true, 105 | routes: { 106 | '/bower_components': 'bower_components' 107 | } 108 | } 109 | }); 110 | 111 | gulp.watch([ 112 | 'app/*.html', 113 | 'app/images/**/*', 114 | '.tmp/fonts/**/*' 115 | ]).on('change', reload); 116 | 117 | gulp.watch('app/styles/**/*.scss', ['styles']); 118 | gulp.watch('app/scripts/**/*.js', ['scripts']); 119 | gulp.watch('app/fonts/**/*', ['fonts']); 120 | gulp.watch('bower.json', ['wiredep', 'fonts']); 121 | }); 122 | }); 123 | 124 | gulp.task('serve:dist', ['default'], () => { 125 | browserSync.init({ 126 | notify: false, 127 | port: 9000, 128 | server: { 129 | baseDir: ['dist'] 130 | } 131 | }); 132 | }); 133 | 134 | gulp.task('serve:test', ['scripts'], () => { 135 | browserSync.init({ 136 | notify: false, 137 | port: 9000, 138 | ui: false, 139 | server: { 140 | baseDir: 'test', 141 | routes: { 142 | '/scripts': '.tmp/scripts', 143 | '/bower_components': 'bower_components' 144 | } 145 | } 146 | }); 147 | 148 | gulp.watch('app/scripts/**/*.js', ['scripts']); 149 | gulp.watch(['test/spec/**/*.js', 'test/index.html']).on('change', reload); 150 | gulp.watch('test/spec/**/*.js', ['lint:test']); 151 | }); 152 | 153 | // inject bower components 154 | gulp.task('wiredep', () => { 155 | gulp.src('app/styles/*.scss') 156 | .pipe($.filter(file => file.stat && file.stat.size)) 157 | .pipe(wiredep({ 158 | ignorePath: /^(\.\.\/)+/ 159 | })) 160 | .pipe(gulp.dest('app/styles')); 161 | 162 | gulp.src('app/*.html') 163 | .pipe(wiredep({ 164 | exclude: ['bootstrap-sass'], 165 | ignorePath: /^(\.\.\/)*\.\./ 166 | })) 167 | .pipe(gulp.dest('app')); 168 | }); 169 | 170 | gulp.task('build', ['lint', 'html', 'images', 'fonts', 'extras'], () => { 171 | return gulp.src('dist/**/*').pipe($.size({title: 'build', gzip: true})); 172 | }); 173 | 174 | gulp.task('default', () => { 175 | return new Promise(resolve => { 176 | dev = false; 177 | runSequence(['clean', 'wiredep'], 'build', resolve); 178 | }); 179 | }); 180 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "imageLabel", 3 | "version": "0.1.0", 4 | "description": "image label tool", 5 | "main": "gulpfile.js", 6 | "private":false, 7 | "directories": { 8 | "test": "test" 9 | }, 10 | "scripts": { 11 | "start": "gulp serve", 12 | "build": "gulp build" 13 | }, 14 | "repository": { 15 | "type": "git", 16 | "url": "git+https://codingdogs@github.com/codingdogs/imageLabel.git" 17 | }, 18 | "keywords": [ 19 | "imageLabel", 20 | "image", 21 | "label" 22 | ], 23 | "author": "codewa", 24 | "license": "ISC", 25 | "bugs": { 26 | "url": "https://github.com/codingdogs/imageLabel/issues" 27 | }, 28 | "homepage": "https://github.com/codingdogs/imageLabel#readme", 29 | "engines": { 30 | "node": ">=4" 31 | }, 32 | "devDependencies": { 33 | "babel-core": "^6.4.0", 34 | "babel-preset-es2015": "^6.3.13", 35 | "babel-register": "^6.5.2", 36 | "browser-sync": "^2.2.1", 37 | "del": "^2.2.0", 38 | "gulp": "^3.9.0", 39 | "gulp-autoprefixer": "^3.0.1", 40 | "gulp-babel": "^6.1.1", 41 | "gulp-cache": "^0.4.2", 42 | "gulp-cssnano": "^2.0.0", 43 | "gulp-eslint": "^3.0.0", 44 | "gulp-filter": "^4.0.0", 45 | "gulp-htmlmin": "^3.0.0", 46 | "gulp-if": "^2.0.2", 47 | "gulp-imagemin": "^3.0.1", 48 | "gulp-load-plugins": "^1.2.4", 49 | "gulp-plumber": "^1.0.1", 50 | "gulp-sass": "^3.0.0", 51 | "gulp-size": "^2.1.0", 52 | "gulp-sourcemaps": "^2.2.0", 53 | "gulp-uglify": "^2.0.0", 54 | "gulp-useref": "^3.0.0", 55 | "main-bower-files": "^2.5.0", 56 | "run-sequence": "^1.2.2", 57 | "wiredep": "^4.0.0" 58 | }, 59 | "eslintConfig": { 60 | "env": { 61 | "es6": true, 62 | "node": true, 63 | "browser": true 64 | }, 65 | "rules": { 66 | "quotes": [ 67 | 2, 68 | "single" 69 | ] 70 | } 71 | } 72 | 73 | } 74 | -------------------------------------------------------------------------------- /test/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Mocha Spec Runner 6 | 7 | 8 | 9 |
10 | 11 | 12 | 13 | 18 | 19 | 20 | 21 | 22 | 23 | 28 | 29 | 30 | -------------------------------------------------------------------------------- /test/spec/test.js: -------------------------------------------------------------------------------- 1 | (function () { 2 | 'use strict'; 3 | 4 | describe('Give it some context', function () { 5 | describe('maybe a bit more context here', function () { 6 | it('should run here few assertions', function () { 7 | 8 | }); 9 | }); 10 | }); 11 | })(); 12 | --------------------------------------------------------------------------------