-
Notifications
You must be signed in to change notification settings - Fork 331
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #419 from techfg/migrate-im-website
feat: migrate im website to github pages
- Loading branch information
Showing
88 changed files
with
10,828 additions
and
10,566 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -18,4 +18,3 @@ build/ | |
| !.vscode/extensions.json | ||
| !.vscode/settings.json | ||
| /docs/ | ||
|
|
||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -7,265 +7,32 @@ | |
| [](https://www.jsdelivr.com/package/npm/imagemapster) | ||
| [](https://cdnjs.com/libraries/imagemapster) | ||
| [](https://github.com/prettier/prettier) | ||
| [](https://github.com/jamietre/ImageMapster/actions/workflows/gh-pages-deploy.yml) | ||
|
|
||
| ImageMapster activates the areas in HTML image maps so you can highlight and select them. It has lots of other features for manual control, tooltips, resizing, and more. It is designed to be compatible with every common platform, and is tested with Internet Explorer 6-10, Firefox 3.0+, Safari, Opera, and Chrome. It works on mobile devices and doesn't use Flash. | ||
|
|
||
| ## Release Information | ||
|
|
||
| See the [change log](CHANGELOG.md) for details on the release history and roadmap. | ||
|
|
||
| Read the [release notes](http://blog.outsharked.com/2012/06/imagemapster-125-released.html) for 1.2.5, the last significant feature update. | ||
|
|
||
| ## Getting Started | ||
|
|
||
| ### Installation | ||
|
|
||
| #### NPM | ||
|
|
||
| This package can be installed via NPM: | ||
|
|
||
| ```sh | ||
| npm install jquery imagemapster --save | ||
| ``` | ||
|
|
||
| #### Browser | ||
|
|
||
| > ⚠️ **Warning** | ||
| > | ||
| > As of ImageMapster v1.3.0, if targeting ES5 browers, you must include a Promise polyfill such as [es6-promise](https://www.npmjs.com/package/es6-promise). See [Issue 341](https://github.com/jamietre/ImageMapster/issues/341) for details. | ||
| Download the latest version of ImageMapster from the [Releases](https://github.com/jamietre/ImageMapster/releases) page and include in your webpage: | ||
|
|
||
| ```html | ||
| <!-- Optional: If targeting ES5 browers, as of ImageMapster v1.3.0, a Promise polyfill is required! --> | ||
| <script | ||
| type="text/javascript" | ||
| src="https://cdn.jsdelivr.net/npm/es6-promise/dist/es6-promise.auto.min.js" | ||
| ></script> | ||
| <script | ||
| type="text/javascript" | ||
| src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js" | ||
| ></script> | ||
| <script type="text/javascript" src="jquery.imagemapster.min.js"></script> | ||
| ``` | ||
|
|
||
| Alternatively, you can include ImageMapster from one of the following CDNs: | ||
|
|
||
| 1. [jsDelivr](https://www.jsdelivr.com/package/npm/imagemapster) - <https://www.jsdelivr.com/package/npm/imagemapster> | ||
| 2. [cdnjs](https://cdnjs.com/libraries/imagemapster) - <https://cdnjs.com/libraries/imagemapster> | ||
|
|
||
| ### Usage | ||
|
|
||
| Activate all image maps on the page with default options: on mouseover areas are highlighted with a gray fill with no border, and clicking an area causes it to become selected. | ||
|
|
||
| ```js | ||
| $('img[usemap]').mapster(); | ||
| ``` | ||
|
|
||
| Activate all image maps on the page with some specific options. | ||
|
|
||
| ```js | ||
| $('img[usemap]').mapster({ | ||
| fillColor: 'ff0000', | ||
| stroke: true, | ||
| singleSelect: true | ||
| }); | ||
| ``` | ||
|
|
||
| #### Methods | ||
|
|
||
| There are lots of ways to manipulate the image map from Javascript. Here area a few, see the [ImageMapster web site](http://www.outsharked.com/imagemapster) for complete documentation. | ||
|
|
||
| **select**: Cause an area to become "selected" | ||
|
|
||
| ```js | ||
| $('area').mapster('select'); | ||
| ``` | ||
|
|
||
| Programatically select elements from the image map. The programmatic selection/deselection methods will not honor the staticState property. | ||
|
|
||
| **deselect**: Cause an area to become "deselected" | ||
|
|
||
| ```js | ||
| $('area').mapster('deselect'); | ||
| ``` | ||
|
|
||
| **set**: select or deselect an element. If `selected` is true, the area is selected, if false, it is deselected. | ||
|
|
||
| ```js | ||
| $('area').mapster('set', selected); | ||
| ``` | ||
|
|
||
| You can also select or deselect areas using a their `mapKey`. This is an attribute on each area in your HTML that identifies it. You define a mapKey using a configuration option: `mapKey: 'data-key'`. | ||
|
|
||
| ```js | ||
| $('img[usemap]').mapster('set', true, 'key1,key2'); | ||
| ``` | ||
|
|
||
| If two areas share the same value for the `mapKey` they will be automatically grouped together when activated. You can also use the values of the mapKey to select areas from code. | ||
|
|
||
| You can pass options to change the rendering effects when using set as the last parameter: | ||
|
|
||
| ```js | ||
| $('img[usemap]').mapster('set', true, 'key', { fillColor: 'ff0000' }); | ||
| ``` | ||
|
|
||
| MapKeys can contain more than one value. The first value always defines groups when you mouse over. Other values can be used to create logical groups. For example: | ||
|
|
||
| ```html | ||
| <img id="usamap" src="map.jpeg" usemap="#usa" /> | ||
| <map name="usa"> | ||
| <area data-key="maine,new-england,really-cold" shape="poly" coords="..." /> | ||
| <area | ||
| data-key="new-hampshire,new-england,really-cold" | ||
| shape="poly" | ||
| coords="..." | ||
| /> | ||
| <area data-key="vermont,new-england,really-cold" shape="poly" coords="..." /> | ||
| <area data-key="connecticut,new-england" shape="poly" coords="..." /> | ||
| <area data-key="rhode-island,new-england" shape="poly" coords="..." /> | ||
| <area data-key="massachusetts,new-england" shape="poly" coords="..." /> | ||
| <!-- more states... --> | ||
| </map> | ||
| ``` | ||
|
|
||
| ```js | ||
| $('#usamap').mapster({ mapKey: 'data-key' }); | ||
| ``` | ||
|
|
||
| Mousing over each state would cause just that state to be higlighted. You can also select other logical groups from code code: | ||
| ## Documentation | ||
|
|
||
| ```js | ||
| // select all New England states | ||
| $('#usamap').mapster('set', true, 'new-england'); | ||
| Available on the [ImageMapster Website](https://jamietre.github.io/ImageMapster). | ||
|
|
||
| // select just Maine, New Hampshire & Vermont | ||
| $('#usamap').mapster('set', true, 'really-cold'); | ||
| ``` | ||
|
|
||
| Groups created this way are _independent_ of the primary group. If you select "new-england" from code, you can't unselect just "MA" by clicking on it. You would have to unselect "new-england" from code. | ||
|
|
||
| To simply indentify a set of areas to turn on or off, but not treat them as a logical group, you can use CSS classes and select areas directly, or use the `keys` option to identify the primary keys associated with a group (see documentation). | ||
|
|
||
| #### Options | ||
|
|
||
| Please see the [ImageMapster web site](http://www.outsharked.com/imagemapster/default.aspx?docs.html) for complete documentation. | ||
|
|
||
| ## Demos | ||
|
|
||
| ImageMapster includes several examples. To view the examples: | ||
|
|
||
| 1. Clone the repo | ||
| 2. Open [index.html](examples/index.html) directly from your file system in a browser | ||
|
|
||
| > ℹ️ **Note** | ||
| > | ||
| > By default, examples will run using jQuery. To run examples using Zepto, modify the examples HTML file per the information in [Development -> Examples](#examples). | ||
| ## Zepto Compatibility | ||
|
|
||
| As of ImageMapster v1.3.2, ImageMapster contains full support for Zepto v1.2.0. The latest Zepto compatible version of ImageMapster is [1.6.0](https://github.com/jamietre/ImageMapster/releases/tag/v1.6.0). | ||
|
|
||
| Prior to ImageMapster v1.3.2 and with any version of Zepto except v1.2.0, ImageMapster is unlikely to work as expected. In the early versions of ImageMapster, Zepto support was maintained, however due to changes in Zepto, as of v1.2.5 of ImageMapster, support for Zepto compatability was not maintained as it required too much effort and pushing ImageMapster forward with jQuery was the priority. | ||
|
|
||
| > ⚠️ **Warning** | ||
| > | ||
| > Given that Zepto is no longer actively developed and with plans in the ImageMapster Roadmap to convert to a Native JS Library, ImageMapster will be officially dropping support of Zepto as of ImageMapster v2.0.0. | ||
| To use ImageMapster >= v1.3.2 < 2.0.0 with Zepto v.1.2.0, Zepto must contain the following [Zepto Modules](https://github.com/madrobby/zepto#zepto-modules) at a minimum: | ||
|
|
||
| - zepto | ||
| - event | ||
| - ie | ||
| - fx | ||
| - touch | ||
| - selector (required as of v1.5.0) | ||
|
|
||
| ### Browser - Zepto | ||
|
|
||
| > ⚠️ **Warning** | ||
| > | ||
| > As of ImageMapster v1.3.0, if targeting ES5 browers, you must include a Promise polyfill such as [es6-promise](https://www.npmjs.com/package/es6-promise). See [Issue 341](https://github.com/jamietre/ImageMapster/issues/341) for details. | ||
| Download the latest Zepto version of ImageMapster from the [Releases](https://github.com/jamietre/ImageMapster/releases) page and include in your webpage **making sure to use `jquery.imagemapster.zepto.min.js` or `jquery.imagemapster.zepto.js`**: | ||
|
|
||
| ```html | ||
| <!-- Optional: If targeting ES5 browers, as of ImageMapster v1.3.0, a Promise polyfill is required! --> | ||
| <script | ||
| type="text/javascript" | ||
| src="https://cdn.jsdelivr.net/npm/es6-promise/dist/es6-promise.auto.min.js" | ||
| ></script> | ||
| <script type="text/javascript" src="/path/to/your/custom/zeptodist"></script> | ||
| <script | ||
| type="text/javascript" | ||
| src="/path/to/cdn/for/v1.6.0/dist/jquery.imagemapster.zepto.min.js" | ||
| ></script> | ||
| ``` | ||
|
|
||
| Alternatively, you can include the Zepto version of ImageMapster from one of the following CDNs: | ||
|
|
||
| 1. [jsDelivr](https://www.jsdelivr.com/package/npm/imagemapster?version=1.6.0) - <https://www.jsdelivr.com/package/npm/imagemapster?version=1.6.0> | ||
| 2. [cdnjs](https://cdnjs.com/libraries/imagemapster/1.6.0) - <https://cdnjs.com/libraries/imagemapster/1.6.0> | ||
|
|
||
| ### NPM - Zepto | ||
|
|
||
| The maintainers of Zepto decided not to support any module loaders so there is no official support of Zepto using AMD/CJS/etc. Given this, the Zepto version of ImageMapster expects a dependency of `jquery` when using a module loader. The Zepto version of ImageMapster will work with jQuery or Zepto. If you'd like to utilize Zepto, there are some projects that wrap Zepto and support UMD such as [zepto-modules](https://www.npmjs.com/package/zepto-modules). In order to use Zepto, you will need to configure your bundler to map `jquery` to your Zepto build. | ||
|
|
||
| Using `webpack` and `zepto-modules` as an example: | ||
|
|
||
| #### Install from NPM | ||
|
|
||
| ```sh | ||
| npm install zepto-modules [email protected] --save | ||
| ``` | ||
|
|
||
| #### src/yourzepto.js | ||
|
|
||
| ```js | ||
| var $ = require('zepto-modules/zepto'); | ||
|
|
||
| require('zepto-modules/event'); | ||
| require('zepto-modules/ie'); | ||
| require('zepto-modules/fx'); | ||
| require('zepto-modules/touch'); | ||
| require('zepto-modules/selector'); | ||
|
|
||
| module.exports = $; | ||
| ``` | ||
|
|
||
| #### src/yourmodule.js | ||
|
|
||
| ```js | ||
| import $ from './yourzepto.js'; | ||
| import im from 'imagemapster/dist/jquery.imagemapster.zepto.js'; | ||
|
|
||
| $(yourImage).mapster({ | ||
| // your config here | ||
| }); | ||
| ``` | ||
|
|
||
| #### webpack.config.js | ||
| ## Release Information | ||
|
|
||
| ```js | ||
| module.exports = { | ||
| resolve: { | ||
| alias: { | ||
| jquery: path.resolve('./src/yourzepto') | ||
| } | ||
| } | ||
| }; | ||
| ``` | ||
| See the [change log](CHANGELOG.md) for details on the release history and roadmap. | ||
|
|
||
| ## Find out More | ||
| ## Support | ||
|
|
||
| Please see how to obtain [ImageMapster Support](SUPPORT.md). | ||
| See the [support page](SUPPORT.md) for details on how to obtain support. | ||
|
|
||
| ## Contributing | ||
|
|
||
| Please see our [Contributing Guidelines](CONTRIBUTING.md). | ||
| See the [contributing guidelines](CONTRIBUTING.md) for details on how to contribute. | ||
|
|
||
| ## Development | ||
|
|
||
| The below covers the ImageMapster jQuery plugin. For information on how to develop the ImageMapster website, see its [README](site/README.md). | ||
|
|
||
| You can simultaneously make changes to both the plugin and the website by running `npm run dev` in both the plugin (./) and site (./site) directories. Any changes made to the plugin will be reflected in the site as its [imagemapster](./site/package.json#L17) dependency is linked to the root plugin package. | ||
|
|
||
| ### Build | ||
|
|
||
| The source code is broken into several modules to make management easier and to make it possible to create feature-targeted builds. ImageMapster is built using grunt and can be invoked as follows: | ||
|
|
@@ -276,11 +43,11 @@ The source code is broken into several modules to make management easier and to | |
| - Debug Build (uncompressed) - `npm run build` | ||
| - Release Build (uncompressed/compressed/sourcemap) - `npm run dist` | ||
|
|
||
| ### Debug | ||
| ### Dev | ||
|
|
||
| 1. Clone the repo | ||
| 2. Install NPM dependencies - `npm install` | ||
| 3. Run the debug task - `npm run debug` | ||
| 3. Run the dev task - `npm run dev` | ||
|
|
||
| ### Tests | ||
|
|
||
|
|
||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,14 +1,14 @@ | ||
| # ImageMapster Support | ||
|
|
||
| **Please do not use the issue tracker for personal support requests.** | ||
| > \[!NOTE] | ||
| > Please do not use the issue tracker for personal support requests. | ||
| Have questions? Looking for support for ImageMapster? | ||
|
|
||
| - There are lots of examples and documentation on the [ImageMapster web site](http://www.outsharked.com/imagemapster). | ||
| - I write about ImageMapster on my blog from time to time. See [posts about imagemapster](http://blog.outsharked.com/search/label/imagemapster). | ||
| - There are lots of examples and documentation on the [ImageMapster web site](https://jamietre.github.io/ImageMapster/). | ||
| - Take a look at [ImageMapster questions on StackOverflow](http://stackoverflow.com/search?q=imagemapster); there are quite a few. Maybe someone's asked the same question already. | ||
| - There are also some very detailed discussions in the [GitHub issues](https://github.com/jamietre/imagemapster/issues?direction=desc&labels=support&page=1&sort=created&state=closed) section that I've flagged as "support". The issues section is no longer the way to request support but these issues can provide valuable insight. | ||
| - You can also check the [feedback](http://www.outsharked.com/imagemapster/default.aspx?feedback.html) page on the project web site. | ||
| - You can also check the [feedback](https://jamietre.github.io/ImageMapster/resources/feedback/) page on the project web site. | ||
| - You can review the [source code on GitHub](https://github.com/jamietre/ImageMapster). | ||
|
|
||
| If you identify a bug, please file a [bug report](https://github.com/jamietre/ImageMapster/issues/new?template=bug_report.yml) and if you'd like to see a new feature, please file a [feature request](https://github.com/jamietre/ImageMapster/issues/new?template=feature_request.yml)! |
Oops, something went wrong.