├── .babelrc
├── .eslintignore
├── .eslintrc.js
├── .gitignore
├── .npmignore
├── .remarkrc
├── CHANGES.md
├── LICENSE-MIT.txt
├── README.md
├── demo
├── images
│ ├── bt_right_arrow_22072.png
│ ├── mapmarker_drawingpin_right_pink_23026.png
│ ├── mapmarker_marker_outside_azure_23007.png
│ └── mapmarker_pushpin_right_azure_22998.png
├── index.html
├── index.js
└── stylesheets
│ ├── github-light.css
│ ├── index.css
│ ├── normalize.css
│ └── stylesheet.css
├── dist
├── index.esm.js
├── index.esm.min.js
├── index.esm.min.js.map
├── index.umd.js
├── index.umd.min.js
└── index.umd.min.js.map
├── docs
└── jsdoc-config.js
├── lgtm.yml
├── package.json
├── params.json
├── rollup.config.js
├── src
├── jquery.imageMaps.js
└── typedefs.js
└── test
├── accessibility.js
└── ui.js
/.babelrc:
--------------------------------------------------------------------------------
1 | {
2 | "presets": [
3 | ["@babel/preset-env"]
4 | ]
5 | }
6 |
--------------------------------------------------------------------------------
/.eslintignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | jquery.imageMaps.min.js
3 | docs/jsdoc
4 | dist
5 |
--------------------------------------------------------------------------------
/.eslintrc.js:
--------------------------------------------------------------------------------
1 | /* eslint-env node */
2 | module.exports = {
3 | env: {
4 | browser: true,
5 | es6: true
6 | },
7 | settings: {
8 | polyfills: [
9 | "Array.isArray",
10 | "console",
11 | "Error"
12 | ]
13 | },
14 | overrides: {
15 | files: ['docs/jsdoc-config.js'],
16 | rules: {
17 | strict: 0,
18 | 'import/unambiguous': 0,
19 | 'import/no-commonjs': 0
20 | }
21 | },
22 | extends: ['ash-nazg/sauron', 'plugin:testcafe/recommended'],
23 | globals: {
24 | Atomics: 'readonly',
25 | SharedArrayBuffer: 'readonly'
26 | },
27 | parserOptions: {
28 | ecmaVersion: 2018,
29 | sourceType: 'module'
30 | },
31 | rules: {
32 | indent: ['error', 4],
33 | 'valid-jsdoc': 0
34 | }
35 | };
36 |
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | docs/jsdoc
3 | package-lock.json
4 |
--------------------------------------------------------------------------------
/.npmignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | docs
3 | test
4 |
--------------------------------------------------------------------------------
/.remarkrc:
--------------------------------------------------------------------------------
1 | {}
2 |
--------------------------------------------------------------------------------
/CHANGES.md:
--------------------------------------------------------------------------------
1 | # ImageMaps
2 |
3 | ## ?
4 |
5 | - Compatibility fix: Add `core-js-bundle` to demo (since
6 | Babelification may still require some polyfills
7 | be added for the sake of some older browsers)
8 | - Fix: Avoid error if `getNaturalImageSize` is supplied a string
9 | - Fix: For non-IE8, set a `targetAreaEl` for `onClick` call
10 | - Update: Remove deprecated `@babel/polyfill` in favor of its
11 | recommended replacement, `core-js-bundle`
12 | - Enhancement: Add a `copyImageMaps` static method (on `$.imageMaps`);
13 | allows for preserving width/height/shapes at earlier state (e.g.,
14 | if rebuilding the same map element with different qualities); also
15 | use internally
16 | - npm: Further devDeps updates (non-major version changes)
17 | - npm: Update jquery, devDeps
18 | - npm: Add jquery to `peerDependencies` (since expected to be
19 | present, but as we are a plugin, it is not a direct dependency)
20 |
21 | ## 1.0.0
22 |
23 | - Fix: Reference to undefined `shapetype` -> `shapeType`
24 | - Fix: Avoid error in `onMouseMove` if `coords` is false
25 | - Fix: Grammar nit in thrown error
26 | - Breaking enhancement: ES6 Modules (changes script path)
27 | - Enhancement: Avoid zoom if less than 0 or NaN
28 | - Update: Save copies of no-longer-cross-origin-accessible images locally;
29 | use npm jquery
30 | - Accessibility: Add more color contrast to Github ribbon; image alt text;
31 | use labels, visible colors, main role, fieldset/legend group, visible
32 | link text
33 | - Refactoring: Use ES6
34 | - Refactoring: Change `getCoordsByRatio` to class method since does
35 | not require `this`
36 | - Linting (ESLint): Add eslint-config-ash-nazg/sauron; line breaks, avoid
37 | now redundant radix to `parseInt`, prefer `const`/`let`; indicate polyfills
38 | for sake of eslint-plugin-compat (though `Array.isArray()` is made
39 | available by @babel/polyfill).
40 | - Docs: Add JSDoc, CHANGES; integrate demo, adding external files and
41 | making local
42 | - License: Rename file to add ".txt" extension and to reflect license type
43 | - npm: Add `package.json`/`package-lock.json`; add `eslint`, `start`,
44 | `open`/`open-docs`, `docs`, `rollup`, `prepublishOnly` scripts
45 |
--------------------------------------------------------------------------------
/LICENSE-MIT.txt:
--------------------------------------------------------------------------------
1 | The MIT License (MIT)
2 |
3 | Copyright (c) 2016 NAVER Corp.
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining a copy
6 | of this software and associated documentation files (the "Software"), to deal
7 | in the Software without restriction, including without limitation the rights
8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 |
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 |
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # image-maps
2 |
3 | image maps jQuery plugin
4 |
5 | ## supported devices and browser
6 |
7 | * PC - IE9+, Chrome, Firefox
8 | * Mobile - iOS, Android (editing is not supported)
9 |
10 | ## example
11 |
12 | ImageMaps by naver
7 |
27 | Fork me on GitHub
29 |
30 |
ImageMaps
31 |
32 |
0. Shape Url
33 |
36 |
37 |
38 |
51 |
57 |
58 |
59 |
3. Text Shape Type
60 |
Size:
61 |
63 |
64 |
Text:
65 |
67 |
add text
68 |
69 |
70 |
97 |
98 |
102 |
103 |
Edit Image Maps
104 |
106 |
107 |
108 |
109 |
115 |
117 |
118 |
465 | */
466 |
467 | /**
468 | *
469 | * @returns {module:imageMaps.AllShapeInfo}
470 | */
471 |
472 | }, {
473 | key: "getAllShapesInfo",
474 | value: function getAllShapesInfo() {
475 | return $.extend(true, {}, this.allShapeInfo);
476 | }
477 | /**
478 | *
479 | * @param {Float[]} percentages
480 | * @returns {void}
481 | */
482 |
483 | }, {
484 | key: "zoom",
485 | value: function zoom(percentages) {
486 | _zoom.call(this, percentages);
487 | }
488 | /**
489 | *
490 | * @returns {void}
491 | */
492 |
493 | }, {
494 | key: "enableClick",
495 | value: function enableClick() {
496 | this.attachEvents(this.svgEl.find('.' + shapeFaceClass), [{
497 | type: 'touchstart',
498 | handler: onTouchStart
499 | }, {
500 | type: 'click touchend',
501 | handler: onClickShapeFace
502 | }]);
503 | }
504 | /**
505 | *
506 | * @returns {void}
507 | */
508 |
509 | }, {
510 | key: "disableClick",
511 | value: function disableClick() {
512 | this.detachEvents(this.svgEl.find('.' + shapeFaceClass), [{
513 | type: 'touchstart',
514 | handler: onTouchStart
515 | }, {
516 | type: 'click touchend',
517 | handler: onClickShapeFace
518 | }]);
519 | }
520 | /**
521 | *
522 | * @param {module:imageMaps.ShapeCoords} coords
523 | * @returns {void}
524 | */
525 |
526 | }, {
527 | key: "setShapeCoords",
528 | value: function setShapeCoords(coords) {
529 | this.shapeCoords = coords;
530 | }
531 | /**
532 | *
533 | * @param {module:imageMaps.VertexCoords} coords
534 | * @returns {void}
535 | */
536 |
537 | }, {
538 | key: "setVertexCoords",
539 | value: function setVertexCoords(coords) {
540 | this.vertexCoords = coords;
541 | }
542 | /**
543 | *
544 | * @param {module:imageMaps.ShapeElement} element
545 | * @returns {void}
546 | */
547 |
548 | }, {
549 | key: "setShapeElement",
550 | value: function setShapeElement(element) {
551 | this.shapeEl = element;
552 | }
553 | /**
554 | * @typedef {Element} module:imageMaps.VertexElement
555 | */
556 |
557 | /**
558 | *
559 | * @param {module:imageMaps.VertexElement} element
560 | * @returns {void}
561 | */
562 |
563 | }, {
564 | key: "setVertexElement",
565 | value: function setVertexElement(element) {
566 | this.vertexEl = element;
567 | }
568 | /**
569 | *
570 | * @param {module:imageMaps.VertexElements} elements
571 | * @returns {void}
572 | */
573 |
574 | }, {
575 | key: "setVertexElements",
576 | value: function setVertexElements(elements) {
577 | this.vertexEls = elements;
578 | }
579 | /**
580 | * @typedef {PlainObject} module:imageMaps.TypeHandler
581 | * @property {string} type
582 | * @property {function} handler
583 | */
584 |
585 | /**
586 | * ImageMaps: 이미지맵 이벤트 할당.
587 | * @param {Node|external:jQuery} element
588 | * @param {module:imageMaps.TypeHandler[]} eventOptions
589 | * @returns {void}
590 | */
591 |
592 | }, {
593 | key: "attachEvents",
594 | value: function attachEvents(element, eventOptions) {
595 | var _this2 = this;
596 |
597 | element = $(element);
598 | eventOptions.forEach(function (_ref) {
599 | var type = _ref.type,
600 | handler = _ref.handler;
601 | element.on(type + '.' + areaClass, $.proxy(handler, _this2));
602 | });
603 | }
604 | /**
605 | * ImageMaps: 이미지맵 이벤트 해제.
606 | * @param {external:jQuery} element
607 | * @param {module:imageMaps.TypeHandler[]} eventOptions
608 | * @returns {void}
609 | */
610 |
611 | }, {
612 | key: "detachEvents",
613 | value: function detachEvents(element, eventOptions) {
614 | var _this3 = this;
615 |
616 | element = $(element);
617 | eventOptions.forEach(function (_ref2) {
618 | var type = _ref2.type,
619 | handler = _ref2.handler;
620 | var eventType = type || '';
621 | var eventHandler = handler ? $.proxy(handler, _this3) : '';
622 |
623 | if (eventHandler) {
624 | element.off(eventType + '.' + areaClass, eventHandler);
625 | } else {
626 | element.off(eventType + '.' + areaClass);
627 | }
628 | });
629 | }
630 | }]);
631 |
632 | return ImageMaps;
633 | }();
634 |
635 | ImageMaps.getCoordsByRatio = getCoordsByRatio;
636 | /**
637 | * @memberof module:imageMaps.jqueryImageMaps~
638 | * @this module:imageMaps~ImageMaps
639 | * @param {?(module:imageMaps.Coords)} coords
640 | * @param {Url} linkUrl
641 | * @returns {void}
642 | */
643 |
644 | function _createMaps(coords, linkUrl) {
645 | // 최초 맵영역을 만드는 순간에 map 엘리먼트를 만들고 하위에 area 엘리먼트 생성.
646 | var uid = guid();
647 |
648 | if (!this.container.attr('usemap')) {
649 | this.mapEl = $('0&&w.call(e,i,r)})}).call(this,t)}},{key:"enableClick",value:function(){this.attachEvents(this.svgEl.find("."+s),[{type:"touchstart",handler:m},{type:"click touchend",handler:x}])}},{key:"disableClick",value:function(){this.detachEvents(this.svgEl.find("."+s),[{type:"touchstart",handler:m},{type:"click touchend",handler:x}])}},{key:"setShapeCoords",value:function(t){this.shapeCoords=t}},{key:"setVertexCoords",value:function(t){this.vertexCoords=t}},{key:"setShapeElement",value:function(t){this.shapeEl=t}},{key:"setVertexElement",value:function(t){this.vertexEl=t}},{key:"setVertexElements",value:function(t){this.vertexEls=t}},{key:"attachEvents",value:function(t,e){var a=this;t=d(t),e.forEach(function(e){var s=e.type,i=e.handler;t.on(s+"."+r,d.proxy(i,a))})}},{key:"detachEvents",value:function(t,e){var a=this;t=d(t),e.forEach(function(e){var s=e.type,i=e.handler,n=s||"",h=i?d.proxy(i,a):"";h?t.off(n+"."+r,h):t.off(n+"."+r)})}}])&&t(a.prototype,i),n&&t(a,n),e}();function u(t,e){var i=function(){function t(){return Math.floor(65536*(1+Math.random())).toString(16).substring(1)}return t()+t()+"-"+t()+"-"+t()+"-"+t()+"-"+t()+t()+t()}();if(this.container.attr("usemap")){var r=this.container.attr("usemap").replace("#","");this.mapEl=d("body").find("map[name="+r+"]")}else this.mapEl=d("0&&w.call(e,i,r)})}).call(this,t)}},{key:"enableClick",value:function(){this.attachEvents(this.svgEl.find("."+s),[{type:"touchstart",handler:m},{type:"click touchend",handler:x}])}},{key:"disableClick",value:function(){this.detachEvents(this.svgEl.find("."+s),[{type:"touchstart",handler:m},{type:"click touchend",handler:x}])}},{key:"setShapeCoords",value:function(t){this.shapeCoords=t}},{key:"setVertexCoords",value:function(t){this.vertexCoords=t}},{key:"setShapeElement",value:function(t){this.shapeEl=t}},{key:"setVertexElement",value:function(t){this.vertexEl=t}},{key:"setVertexElements",value:function(t){this.vertexEls=t}},{key:"attachEvents",value:function(t,e){var a=this;t=d(t),e.forEach(function(e){var s=e.type,i=e.handler;t.on(s+"."+r,d.proxy(i,a))})}},{key:"detachEvents",value:function(t,e){var a=this;t=d(t),e.forEach(function(e){var s=e.type,i=e.handler,n=s||"",h=i?d.proxy(i,a):"";h?t.off(n+"."+r,h):t.off(n+"."+r)})}}])&&t(a.prototype,i),n&&t(a,n),e}();function u(t,e){var i=function(){function t(){return Math.floor(65536*(1+Math.random())).toString(16).substring(1)}return t()+t()+"-"+t()+"-"+t()+"-"+t()+"-"+t()+t()+t()}();if(this.container.attr("usemap")){var r=this.container.attr("usemap").replace("#","");this.mapEl=d("body").find("map[name="+r+"]")}else this.mapEl=d(" 
106 |