{"_id":"jquery-select-areas","_rev":"1-4d6b8a5641725ae7f84933be25e881eb","name":"jquery-select-areas","description":"jQuery-select-areas is a jQuery plugin that let you select multiple areas of an image, move them and resize them.","dist-tags":{"latest":"0.1.0"},"versions":{"0.1.0":{"name":"jquery-select-areas","version":"0.1.0","description":"jQuery-select-areas is a jQuery plugin that let you select multiple areas of an image, move them and resize them.","main":"jquery.selectareas.js","repository":{"type":"git","url":"git+https://github.com/360Learning/jquery-select-areas.git"},"keywords":["jquery","select","areas"],"author":{"name":"360learning"},"license":"MIT","bugs":{"url":"https://github.com/360Learning/jquery-select-areas/issues"},"homepage":"https://github.com/360Learning/jquery-select-areas#readme","dependencies":{"jquery":"^3.2.1"},"gitHead":"7b32f74fb9bc392d045391b95133d8d5a1f3575d","_id":"jquery-select-areas@0.1.0","_npmVersion":"5.0.3","_nodeVersion":"8.1.3","_npmUser":{"name":"luhuiguo","email":"luhuiguo@gmail.com"},"dist":{"integrity":"sha512-tP2A++llwx4pUHmdRfFTZo2m4+WVmd7ky0ixtzQfJkzBFKZVK4Mnwv2TnsYcWTFdUFTKvRaYbQloV2YaXy3gew==","shasum":"a42fb9833c1f093d3abe72e8d18f4982c040fb63","tarball":"https://registry.npmjs.org/jquery-select-areas/-/jquery-select-areas-0.1.0.tgz","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDScQGOg84Lo/Wfe3//kayp+D/o57fMBmEzA0gOoy60pgIgGsniGmSzQsNG9dN2m35pE1wOO5b2TblGbjLu+3EEyyU="}]},"maintainers":[{"name":"luhuiguo","email":"luhuiguo@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/jquery-select-areas-0.1.0.tgz_1499005040952_0.1789845791645348"}}},"readme":"jQuery-select-areas\n===================\n\njQuery-select-areas is a jQuery plugin that let you select multiple areas of an image,\nmove them and resize them.\n\nIt is used by:\n - [360learning](https://360learning.com)\n\n![jQuery-select-areas Preview](https://rawgit.com/360Learning/jquery-select-areas/master/jQuerySelectAreas-Preview.png)\n\n# Project continuation\n\nWe (360Learning) no longer have the time to maintain this project, so the issue tracker has been closed. If someone wants to get admin access to this repository to fix the few bugs that are reported, we would gladly agree. Else, there already are some forks of this project, so don't hesitate to use them if they have fixed a bug that is bother you.\nBest regards\n\n# Quick Start\n\n## Use like so:\n\n    $(\"#mypic\").selectAreas({\n      minSize: [30, 30],    // Minimum size of a selection\n      maxSize: [400, 300],  // Maximum size of a selection\n      onChanged: $.noop,    // fired when a selection is released\n      onChanging: $.noop    // fired during the modification of a selection\n    });\n\n\n## Want an example to learn from?\nCheck out [example/example.html](https://rawgit.com/360Learning/jquery-select-areas/master/example/example.html)\n\n## Browser Compatibiilty:\nThis plugin is fully compatible with every modern browser and IE >= 9.\n\nOne of the features : scaling image, in order to display it smaller or bigger than it actually is, is not compatible with IE8.\nIf you need to use this feature and to maintain a compatibility with IE8, you can add the alternate stylesheet *resources/jquery.selectareas.ie8.css*.\nThis will make it work but uglify the whole plugin. This stylesheet can be added for IE8 only with conditional comments (see *example/example.html*).\n\n# API Doc\n\n## Area\nAn area is described (when retrieved or set) by a json object:\n\n    {\n        id, // ID identifying the area in the plugin\n        x,  // X coordinate (Position)\n        y,  // Y coordinate (Position)\n        z,  // Z-index (0 when inactive or 100 when focused)\n        width,  // Width of the area (Size)\n        height  // Height of the area (Size)\n    }\n\n## Options\nHere is a list of available options for selectAreas, with their *default value*:\n\n - **allowEdit** (*true*) : When set to false, unset allowMove, allowResize, allowSelect and allowDelete\n - **allowMove** (*true*) : When set to false, Areas can not be moved with a drag & drop.\n - **allowResize** (*true*) : When set to false, Areas can not be resized.\n - **allowSelect** (*true*) : When set to false, Areas can not be created.\n - **allowDelete** (*true*) : When set to false, Areas can not be deleted.\n - **allowNudge** (*true*) : When set to false, Areas can not be moved with arrow keys.\n - **aspectRatio** (*0*) : When not 0, force a ratio between height and width for the selections.\n - **minSize** (*[0, 0]*) : When not 0, set the minimum size for a selection [width, height]\n - **maxSize** (*[0, 0]*) : When not 0, set the maximum size for a selection [width, height]\n - **maxAreas** (*0*) : When not 0, set the maximum number of area that can be drawn.\n - **outlineOpacity** (*0.5*) : opacity of the moving dotted outline around a selection.\n - **overlayOpacity** (*0.5*) : opacity of the overlay layer over the image\n - **areas** (*[]*) : list of areas to add to the image from the beginning  (id will be ignored)\n - **onChanging** (*null*) : triggered when the event \"changing\" is fired\n - **onChanged** (*null*) : triggered when the event \"changed\" is fired\n - **onLoaded** (*null*) : triggered when the event \"loaded\" is fired\n - **width** (*0*) : When not 0, scale the image to this width (px). The coordinates of the areas on the full image can be retrieved with method relativeAreas()\n\n## Events\nThree events are fired by the plugin:\n - **loaded** : fired when plugin is loaded\n - **changing** : fired during the modification of a selection. arguments : (event, id, areas)\n - **changed**  : fired when a selection is released. arguments : (event, id, areas)\n\n## Methods\nOnce you added a *selectAreas* plugin on an image, several method are exposed to help you\nmanipulate and retrieve these areas:\n - **areas ()** : returns an array of areas\n - **relativeAreas ()** : returns an array of areas, with their size and coordinates on the original image (see option width). Equal to areas() when the image is displayed in full size.\n - **add (options)** : add an area\n - **remove (id)** : remove an area with its id\n - **reset ()** : remove all areas\n - **destroy ()** : remove the *selectAreas* plugin\n - **blurAll ()** : blur (unfocus) all the areas\n - **contains (point)** : return true or false whether or not a point ({x: X, y: Y}) is included in at least one area\n","maintainers":[{"name":"luhuiguo","email":"luhuiguo@gmail.com"}],"time":{"modified":"2022-05-06T17:33:33.173Z","created":"2017-07-02T14:17:21.209Z","0.1.0":"2017-07-02T14:17:21.209Z"},"homepage":"https://github.com/360Learning/jquery-select-areas#readme","keywords":["jquery","select","areas"],"repository":{"type":"git","url":"git+https://github.com/360Learning/jquery-select-areas.git"},"author":{"name":"360learning"},"bugs":{"url":"https://github.com/360Learning/jquery-select-areas/issues"},"license":"MIT","readmeFilename":"README.md"}