From 24b48bb2775180608872a63c4c929cbbdba858a1 Mon Sep 17 00:00:00 2001 From: darkscript Date: Sat, 17 Feb 2018 18:16:06 +0300 Subject: [PATCH] simplified publishing script and added sample (build dir) npm module from the project --- CONTRIBUTING.md | 2 +- LICENCE.md => LICENSE.md | 0 build/.npmignore | 5 + build/CHANGELOG.md | 29 + build/CONTRIBUTING.md | 32 + build/DEVELOPING.md | 77 + build/LICENCE.md | 44 + build/README.md | 90 + build/composer.json | 11 + build/control/Bar.css | 263 +++ build/control/Bar.js | 181 ++ build/control/Button.js | 45 + build/control/CanvasAttribution.js | 127 ++ build/control/CanvasScaleLine.js | 138 ++ build/control/CanvasTitle.js | 155 ++ build/control/Cloud.js | 225 +++ build/control/Compass.js | 181 ++ build/control/Disable.js | 47 + build/control/Gauge.css | 26 + build/control/Gauge.js | 57 + build/control/GeoBookmark.css | 79 + build/control/GeoBookmark.js | 179 ++ build/control/Globe.css | 124 ++ build/control/Globe.js | 191 ++ build/control/Graticule.js | 294 +++ build/control/GridReference.css | 38 + build/control/GridReference.js | 309 +++ build/control/LayerPopup.css | 58 + build/control/LayerPopup.js | 56 + build/control/LayerSwitcher.css | 440 +++++ build/control/LayerSwitcher.js | 691 +++++++ build/control/LayerSwitcherImage.css | 100 + build/control/LayerSwitcherImage.js | 68 + build/control/Overlay.css | 117 ++ build/control/Overlay.js | 119 ++ build/control/Overview.css | 59 + build/control/Overview.js | 308 +++ build/control/Permalink.css | 14 + build/control/Permalink.js | 246 +++ build/control/PirateMap.css | 11 + build/control/PirateMap.js | 242 +++ build/control/Profil.css | 102 + build/control/Profile.js | 377 ++++ build/control/Search.css | 65 + build/control/Search.js | 197 ++ build/control/SearchBAN.js | 60 + build/control/SearchFeature.js | 81 + build/control/SearchPhoton.js | 128 ++ build/control/Swipe.css | 59 + build/control/Swipe.js | 215 ++ build/control/Target.js | 153 ++ build/control/TextButton.js | 26 + build/control/Toggle.js | 151 ++ build/control/piratecontrol.jpg | Bin 0 -> 369455 bytes build/control/piratecontrol.png | Bin 0 -> 12963 bytes build/control/piratecontrol.svg | 528 +++++ build/featureanimation/Bounce.js | 45 + build/featureanimation/Drop.js | 51 + build/featureanimation/Fade.js | 32 + build/featureanimation/FeatureAnimation.js | 231 +++ build/featureanimation/None.js | 29 + build/featureanimation/Null.js | 18 + build/featureanimation/Path.js | 65 + build/featureanimation/Shake.js | 48 + build/featureanimation/Show.js | 29 + build/featureanimation/Slide.js | 42 + build/featureanimation/Teleport.js | 41 + build/featureanimation/Throw.js | 53 + build/featureanimation/Zoom.js | 86 + build/filter/Base.js | 140 ++ build/filter/Clip.js | 118 ++ build/filter/Colorize.js | 113 ++ build/filter/Composite.js | 40 + build/filter/Crop.js | 37 + build/filter/Fold.js | 115 ++ build/filter/Lego.js | 159 ++ build/filter/Mask.js | 94 + build/filter/Texture.js | 179 ++ build/filter/TextureImage.js | 23 + build/filter/legostud.svg | 996 ++++++++++ build/geom/ConvexHull.js | 97 + build/geom/GeomUtils.js | 122 ++ build/interaction/CenterTouch.js | 149 ++ build/interaction/Clip.js | 148 ++ build/interaction/DrawHole.js | 171 ++ build/interaction/DrawRegular.js | 417 ++++ build/interaction/DrawTouch.js | 241 +++ build/interaction/DropFile.js | 110 ++ build/interaction/Flashlight.js | 118 ++ build/interaction/GeolocationDraw.js | 338 ++++ build/interaction/Hover.js | 127 ++ build/interaction/LongTouch.js | 58 + build/interaction/Ripple.js | 197 ++ build/interaction/SelectCluster.js | 291 +++ build/interaction/SnapGuides.js | 256 +++ build/interaction/Split.js | 260 +++ build/interaction/Splitter.js | 254 +++ build/interaction/Synchronize.css | 27 + build/interaction/Synchronize.js | 151 ++ build/interaction/TinkerBell.js | 97 + build/interaction/TouchCompass.js | 182 ++ build/interaction/Transform.js | 452 +++++ build/interaction/touchcompass.svg | 74 + build/layer/AnimatedCluster.js | 222 +++ build/layer/GetPreview.js | 115 ++ build/layer/Render3D.js | 256 +++ build/ol-ext.css | 2071 ++++++++++++++++++++ build/overlay/Magnify.css | 40 + build/overlay/Magnify.js | 137 ++ build/overlay/Popup.anim.css | 64 + build/overlay/Popup.css | 347 ++++ build/overlay/Popup.js | 227 +++ build/package.json | 58 + build/render/AnimExtent.js | 68 + build/render/Cspline.js | 153 ++ build/render/HexGrid.js | 318 +++ build/render/Markup.js | 90 + build/render/Ordering.js | 44 + build/render/Pulse.js | 85 + build/source/DBPedia.js | 226 +++ build/source/GeoImage.js | 233 +++ build/source/HexBin.js | 163 ++ build/source/Mapillary.js | 124 ++ build/source/WikiCommons.js | 133 ++ build/style/Chart.js | 287 +++ build/style/FillPattern.js | 584 ++++++ build/style/FontAwesomeDef.js | 684 +++++++ build/style/FontMakiDef.js | 136 ++ build/style/FontSymbol.js | 413 ++++ build/style/Photo.js | 324 +++ build/style/SetTextPath.js | 249 +++ build/style/Shadow.js | 122 ++ build/utils/Exif2Geojson.js | 83 + build/utils/ExportMap.js | 92 + build/utils/WSynchro.js | 69 + tasks/{readme.md => PUBLISH_GUIDE.md} | 0 tasks/publish.sh | 31 +- 137 files changed, 22964 insertions(+), 25 deletions(-) rename LICENCE.md => LICENSE.md (100%) create mode 100644 build/.npmignore create mode 100644 build/CHANGELOG.md create mode 100644 build/CONTRIBUTING.md create mode 100644 build/DEVELOPING.md create mode 100644 build/LICENCE.md create mode 100644 build/README.md create mode 100644 build/composer.json create mode 100644 build/control/Bar.css create mode 100644 build/control/Bar.js create mode 100644 build/control/Button.js create mode 100644 build/control/CanvasAttribution.js create mode 100644 build/control/CanvasScaleLine.js create mode 100644 build/control/CanvasTitle.js create mode 100644 build/control/Cloud.js create mode 100644 build/control/Compass.js create mode 100644 build/control/Disable.js create mode 100644 build/control/Gauge.css create mode 100644 build/control/Gauge.js create mode 100644 build/control/GeoBookmark.css create mode 100644 build/control/GeoBookmark.js create mode 100644 build/control/Globe.css create mode 100644 build/control/Globe.js create mode 100644 build/control/Graticule.js create mode 100644 build/control/GridReference.css create mode 100644 build/control/GridReference.js create mode 100644 build/control/LayerPopup.css create mode 100644 build/control/LayerPopup.js create mode 100644 build/control/LayerSwitcher.css create mode 100644 build/control/LayerSwitcher.js create mode 100644 build/control/LayerSwitcherImage.css create mode 100644 build/control/LayerSwitcherImage.js create mode 100644 build/control/Overlay.css create mode 100644 build/control/Overlay.js create mode 100644 build/control/Overview.css create mode 100644 build/control/Overview.js create mode 100644 build/control/Permalink.css create mode 100644 build/control/Permalink.js create mode 100644 build/control/PirateMap.css create mode 100644 build/control/PirateMap.js create mode 100644 build/control/Profil.css create mode 100644 build/control/Profile.js create mode 100644 build/control/Search.css create mode 100644 build/control/Search.js create mode 100644 build/control/SearchBAN.js create mode 100644 build/control/SearchFeature.js create mode 100644 build/control/SearchPhoton.js create mode 100644 build/control/Swipe.css create mode 100644 build/control/Swipe.js create mode 100644 build/control/Target.js create mode 100644 build/control/TextButton.js create mode 100644 build/control/Toggle.js create mode 100644 build/control/piratecontrol.jpg create mode 100644 build/control/piratecontrol.png create mode 100644 build/control/piratecontrol.svg create mode 100644 build/featureanimation/Bounce.js create mode 100644 build/featureanimation/Drop.js create mode 100644 build/featureanimation/Fade.js create mode 100644 build/featureanimation/FeatureAnimation.js create mode 100644 build/featureanimation/None.js create mode 100644 build/featureanimation/Null.js create mode 100644 build/featureanimation/Path.js create mode 100644 build/featureanimation/Shake.js create mode 100644 build/featureanimation/Show.js create mode 100644 build/featureanimation/Slide.js create mode 100644 build/featureanimation/Teleport.js create mode 100644 build/featureanimation/Throw.js create mode 100644 build/featureanimation/Zoom.js create mode 100644 build/filter/Base.js create mode 100644 build/filter/Clip.js create mode 100644 build/filter/Colorize.js create mode 100644 build/filter/Composite.js create mode 100644 build/filter/Crop.js create mode 100644 build/filter/Fold.js create mode 100644 build/filter/Lego.js create mode 100644 build/filter/Mask.js create mode 100644 build/filter/Texture.js create mode 100644 build/filter/TextureImage.js create mode 100644 build/filter/legostud.svg create mode 100644 build/geom/ConvexHull.js create mode 100644 build/geom/GeomUtils.js create mode 100644 build/interaction/CenterTouch.js create mode 100644 build/interaction/Clip.js create mode 100644 build/interaction/DrawHole.js create mode 100644 build/interaction/DrawRegular.js create mode 100644 build/interaction/DrawTouch.js create mode 100644 build/interaction/DropFile.js create mode 100644 build/interaction/Flashlight.js create mode 100644 build/interaction/GeolocationDraw.js create mode 100644 build/interaction/Hover.js create mode 100644 build/interaction/LongTouch.js create mode 100644 build/interaction/Ripple.js create mode 100644 build/interaction/SelectCluster.js create mode 100644 build/interaction/SnapGuides.js create mode 100644 build/interaction/Split.js create mode 100644 build/interaction/Splitter.js create mode 100644 build/interaction/Synchronize.css create mode 100644 build/interaction/Synchronize.js create mode 100644 build/interaction/TinkerBell.js create mode 100644 build/interaction/TouchCompass.js create mode 100644 build/interaction/Transform.js create mode 100644 build/interaction/touchcompass.svg create mode 100644 build/layer/AnimatedCluster.js create mode 100644 build/layer/GetPreview.js create mode 100644 build/layer/Render3D.js create mode 100644 build/ol-ext.css create mode 100644 build/overlay/Magnify.css create mode 100644 build/overlay/Magnify.js create mode 100644 build/overlay/Popup.anim.css create mode 100644 build/overlay/Popup.css create mode 100644 build/overlay/Popup.js create mode 100644 build/package.json create mode 100644 build/render/AnimExtent.js create mode 100644 build/render/Cspline.js create mode 100644 build/render/HexGrid.js create mode 100644 build/render/Markup.js create mode 100644 build/render/Ordering.js create mode 100644 build/render/Pulse.js create mode 100644 build/source/DBPedia.js create mode 100644 build/source/GeoImage.js create mode 100644 build/source/HexBin.js create mode 100644 build/source/Mapillary.js create mode 100644 build/source/WikiCommons.js create mode 100644 build/style/Chart.js create mode 100644 build/style/FillPattern.js create mode 100644 build/style/FontAwesomeDef.js create mode 100644 build/style/FontMakiDef.js create mode 100644 build/style/FontSymbol.js create mode 100644 build/style/Photo.js create mode 100644 build/style/SetTextPath.js create mode 100644 build/style/Shadow.js create mode 100644 build/utils/Exif2Geojson.js create mode 100644 build/utils/ExportMap.js create mode 100644 build/utils/WSynchro.js rename tasks/{readme.md => PUBLISH_GUIDE.md} (100%) diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index c1f2f14f..4fd745f5 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -18,7 +18,7 @@ This page describes what you need to know to contribute code to OpenLayers as a ## Contributor License Agreement -Your contribution will be under our [license](LICENCE.md) +Your contribution will be under our [license](LICENSE.md) as per [GitHub's terms of service](https://help.github.com/articles/github-terms-of-service/#6-contributions-under-repository-license). The CeCILL licence is a french BSD licence. diff --git a/LICENCE.md b/LICENSE.md similarity index 100% rename from LICENCE.md rename to LICENSE.md diff --git a/build/.npmignore b/build/.npmignore new file mode 100644 index 00000000..44483c81 --- /dev/null +++ b/build/.npmignore @@ -0,0 +1,5 @@ +# ignore examples +examples +img +# ignore doc pages +doc/doc-pages \ No newline at end of file diff --git a/build/CHANGELOG.md b/build/CHANGELOG.md new file mode 100644 index 00000000..a974f850 --- /dev/null +++ b/build/CHANGELOG.md @@ -0,0 +1,29 @@ +# Change log + +## v1.1.3 2018-02-07 +This is the last v1 release. +- Next release (v2) will use ES6 module syntax [#33](https://github.com/Viglino/ol3-ext/issues/33). +- Switch to the `./dist/ol-ext.js` to keep on running on next version. + +## v1.1.2 2017-12 +**change project name ol-ext is now ol-ext** +- add doc-pages [#53](https://github.com/Viglino/ol3-ext/issues/53) +- see [#65](https://github.com/Viglino/ol3-ext/issues/65) + +## v1.0.0 2016-11-12 +see [#8](https://github.com/Viglino/ol3-ext/issues/8) and [#10](https://github.com/Viglino/ol3-ext/issues/10) +- `ol.control.Toggle` inherits from `ol.control.Button` (this means you have to add the ol.control.Button.js to your pages). +- Move subbar from `ol.control.Bar` to `ol.control.Toggle`. +Instead of: +```javascript +var c = new ol.control.Toggle (); +bar.addControl (c, subbar); +``` +use: +```javascript +var c = new ol.control.Toggle ({ bar: subbar }); +bar.addControl (c); +``` +- add `autoActive` option to `ol.control.Toggle` to auto activate the control when inserted in a subbar +- add `autoDeactivate` option to `ol.control.Bar` to auto deactivate all controls in a subbar when desactivating it + diff --git a/build/CONTRIBUTING.md b/build/CONTRIBUTING.md new file mode 100644 index 00000000..c1f2f14f --- /dev/null +++ b/build/CONTRIBUTING.md @@ -0,0 +1,32 @@ +# Contributing to ol-ext + +Thanks for your interest in contributing to ol-ext. + +## Submitting Bug Reports or Asking Questions + +Please use the [GitHub issue tracker](https://github.com/Viglino/ol-ext/issues). +Before creating a new issue, do a quick search to see if the problem has been reported already. + +## Contributing Code + +See [`DEVELOPING.md`](DEVELOPING.md) to learn how to get started developing. + +Clone the repository and [pull requests](https://help.github.com/articles/using-pull-requests). Make sure +that your pull request follows our pull request guidelines below before submitting it. + +This page describes what you need to know to contribute code to OpenLayers as a developer. + +## Contributor License Agreement + +Your contribution will be under our [license](LICENCE.md) +as per [GitHub's terms of service](https://help.github.com/articles/github-terms-of-service/#6-contributions-under-repository-license). + +The CeCILL licence is a french BSD licence. + +## Pull request guidelines + +Your pull request must: +* Follow the naming convention in the [DEVELOPING.md](DEVELOPING.md) +* Address a single issue or add a single item of functionality. +* Use clear commit messages. +* Be possible to merge automatically. diff --git a/build/DEVELOPING.md b/build/DEVELOPING.md new file mode 100644 index 00000000..d8f0f1db --- /dev/null +++ b/build/DEVELOPING.md @@ -0,0 +1,77 @@ +# Developing + +## Setting up development environment + +You will obviously start by [forking](https://github.com/openlayers/openlayers/fork) the OpenLayers repository. + +### Install the dependencies + +Go in the project directory and run the `npm install` that wil install the dependencies in the local node_modules folder. + +### Creating the distribution + +Since v.2 the extensions are provided as ES6 modules. +To be used in a web page you have to create the distribution. + +Use the gulp command to create a distribution of the project into the `/dist` directory: +```` +gulp +```` + +To recreate the distribution on `js` file change, use the watch task +```` +gulp watch +```` + + +## Adding new extensions + +To ensure the correct translation beetween the modules and the distribution on ol classes: +- Export one class per file as default +- Use the naming convention + +### Naming convention + +To ensure the correct translation beetween the modules and the distribution on ol classes, we use the follownig naming convention. + +In Openlayers classes just replace the `point` by a `underscore`. +- Thus the `ol.layer.Vector` class must be imported as `ol_layer_Vector`. +- A new control `ol.control.MyControl` must be declared as `ol_control_MyControl` + +The file name must reflect the name of the extension and should be placed in the src directory corresponding to its namespace. +Thus `ol_control_MyControl`must be created in the `./src/control/MyControl.js` file and can be used in a webpack as: +````javascript +import ol_control_MyControl from 'ol-ext/control/MyControl'; +```` + +Example: +````javascript +// Import ol classes +import ol from 'ol' +import ol_control_Control from 'ol/control/control' + +// Create my control +var ol_control_MyControl = function(options) { + ol_control_Control.call(this,options); +} +ol.inherits(ol_control_MyControl, ol_control_Control); + +// Export my control +export default ol_control_MyControl + +```` + + +## Building the documentation: + +The documentation use [gulp-jsdoc3](https://www.npmjs.com/package/gulp-jsdoc3) to create the doc. + +1. install the gulp-jsdoc3 project at the root directory: +```` +npm install gulp-jsdoc3 +```` +2. then run the gulp command to create the doc in the [doc/doc-pages](http://viglino.github.io/ol-ext/doc/doc-pages/) directory: +```` +gulp doc +```` + diff --git a/build/LICENCE.md b/build/LICENCE.md new file mode 100644 index 00000000..23c0664e --- /dev/null +++ b/build/LICENCE.md @@ -0,0 +1,44 @@ +# LICENCE + +ol-ext (c) 2016-2018 - Jean-Marc Viglino, IGN-France + +[ol-ext](https://github.com/Viglino/ol-ext) is licenced under the French Opensource **BSD** compatible CeCILL-B FREE SOFTWARE LICENSE. + +Some resources (mapping services and API) used in this sofware may have a specific license. +You must check before use. + +Full text license in English: http://www.cecill.info/licences/Licence_CeCILL-B_V1-en.txt +Full text license in French: http://www.cecill.info/licences/Licence_CeCILL-C_V1-fr.txt + +## CeCILL-B FREE SOFTWARE LICENSE AGREEMENT : + +This Agreement is an open source software license intended to give users +significant freedom to modify and redistribute the software licensed +hereunder. + +The exercising of this freedom is conditional upon a strong obligation +of giving credits for everybody that distributes a software +incorporating a software ruled by the current license so as all +contributions to be properly identified and acknowledged. + +In consideration of access to the source code and the rights to copy, +modify and redistribute granted by the license, users are provided only +with a limited warranty and the software's author, the holder of the +economic rights, and the successive licensors only have limited liability. + +In this respect, the risks associated with loading, using, modifying +and/or developing or reproducing the software by the user are brought to +the user's attention, given its Free Software status, which may make it +complicated to use, with the result that its use is reserved for +developers and experienced professionals having in-depth computer +knowledge. Users are therefore encouraged to load and test the +suitability of the software as regards their requirements in conditions +enabling the security of their systems and/or data to be ensured and, +more generally, to use and operate it in the same conditions of +security. This Agreement may be freely reproduced and published, +provided it is not altered, and that no provisions are either added or +removed herefrom. + +This Agreement may apply to any or all software for which the holder of +the economic rights decides to submit the use thereof to its provisions. + diff --git a/build/README.md b/build/README.md new file mode 100644 index 00000000..6395954b --- /dev/null +++ b/build/README.md @@ -0,0 +1,90 @@ +# ol-ext +*Cool extensions for [OpenLayers](https://github.com/openlayers/openlayers) (ol)*. + +[ol-ext](https://github.com/Viglino/ol-ext) is a set of extensions, controls, interactions to use with Openlayers. +[View live examples online](http://viglino.github.io/ol-ext/) or the [API documentation](http://viglino.github.io/ol-ext/doc/doc-pages/). + +### ! ol3-ext is now [ol-ext](https://github.com/Viglino/ol-ext) ! +ol3-ext has been renamed to ol-ext and is [now available on NPM](https://www.npmjs.com/package/ol-ext): **update your bookmark and your code**. + +**Keywords:** CSS popup, +Font Awesome symbol renderer, +charts for statistical map (pie/bar), +layer switcher, +wikipedia layer, +animations + +> [ +![Font style](img/map.style.font.jpg?raw=true) +![Charts](img/map.style.chart.jpg?raw=true) +![](img/map.style.pattern.jpg?raw=true) +![](img/map.style.photo.jpg?raw=true) +![](img/map.style.textpath.jpg?raw=true) +![](img/map.filter.colorize.jpg?raw=true) +![](img/map.control.compass.jpg?raw=true) +![](img/map.control.graticule.jpg?raw=true) +![](img/map.interaction.transform.jpg?raw=true) +![](img/map.control.editbar.jpg?raw=true) +![](img/map.switcher.image.jpg?raw=true) +![](img/map.control.profil.jpg?raw=true) +![](img/map.control.swipe.jpg?raw=true) +![](img/map.popup.anim.jpg?raw=true) +![](img/map.layer.hexbin.jpg?raw=true) +![](img/map.geom.cspline.jpg?raw=true) +![](img/map.cluster.convexhull.jpg?raw=true) +![](img/map.overlay.magnify.jpg?raw=true) +![](img/map.filter.lego.jpg?raw=true) +![](img/map.interaction.synchronize.jpg?raw=true) +](http://viglino.github.io/ol-ext/) + +## Getting Started + +## using ol-ext in a web page + +* Just download the [build script](dist) in the dist directory of the project. +* If you just want to add a ` + + + + + + + + +```` +* Use npm [ol-ext package](https://www.npmjs.com/package/ol-ext) and link to the node_modules directory: +```` +npm install ol-ext +```` + +## using ol-ext in a webpack + +Visit the [this repository](https://github.com/darkscript/ol-ol-ext-webpack-example) for a good example of working with ol-ext npm version and bundler (webpack) + +## Documentation + +Check out the [hosted examples](http://viglino.github.io/ol-ext/) or the [API documentation](http://viglino.github.io/ol-ext/doc/doc-pages/). + +## Contributing + +Please see our [contributing guidelines](https://github.com/Viglino/ol-ext/blob/master/CONTRIBUTING.md) if you're interested in getting involved. + +## Bugs + +Please use the [GitHub issue tracker](https://github.com/Viglino/ol-ext/issues) for all bugs and feature requests. Before creating a new issue, do a quick search to see if the problem has been reported already. + +## Licence + +ol-ext is licenced under the French Opensource **BSD** compatible CeCILL-B FREE SOFTWARE LICENSE. + (c) 2016-2017 - Jean-Marc Viglino + +Some resources (mapping services and API) used in this sofware may have a specific license. +You must check before use. + +> [Full text license in English](http://www.cecill.info/licences/Licence_CeCILL-B_V1-en.txt) +> [Full text license in French](http://www.cecill.info/licences/Licence_CeCILL-B_V1-fr.txt) + +For convenience you can use the BSD licence instead when publish content to webpack. diff --git a/build/composer.json b/build/composer.json new file mode 100644 index 00000000..09635c4d --- /dev/null +++ b/build/composer.json @@ -0,0 +1,11 @@ +{ + "name": "viglino/ol-ext", + "description": "Cool extensions for OpenLayers (ol)", + "license": "CeCILL-B", + "authors": [ + { + "name": "Jean-Marc Viglino", + "email": "jean-marc.viglino@ign.fr" + } + ] +} diff --git a/build/control/Bar.css b/build/control/Bar.css new file mode 100644 index 00000000..a1187272 --- /dev/null +++ b/build/control/Bar.css @@ -0,0 +1,263 @@ +/* Bar style */ +.ol-control.ol-bar +{ left: 50%; + min-height: 1em; + min-width: 1em; + position: absolute; + top: 0.5em; + transform: translate(-50%,0); + -webkit-transform: translate(-50%,0); +} + +/* Hide subbar when not inserted in a parent bar */ +.ol-control.ol-toggle .ol-option-bar +{ display: none; +} + +/* Default position for controls */ +.ol-control.ol-bar .ol-bar +{ position: static; +} +.ol-control.ol-bar .ol-control +{ position: relative; + top: auto; + left:auto; + right:auto; + bottom: auto; + display: inline-block; + vertical-align: middle; + background: none; + padding: 0; + margin: 0; + transform: none; + -webkit-transform: none; +} +.ol-control.ol-bar .ol-bar +{ position: static; +} +.ol-control.ol-bar .ol-control button +{ margin:2px 1px; +} + +/* Positionning */ +.ol-control.ol-bar.ol-left +{ left: 0.5em; + top: 50%; + transform: translate(0px, -50%); +} +.ol-control.ol-bar.ol-left .ol-control +{ display: block; +} + +.ol-control.ol-bar.ol-right +{ left: auto; + right: 0.5em; + top: 50%; + transform: translate(0px, -50%); +} +.ol-control.ol-bar.ol-right .ol-control +{ display: block; +} + +.ol-control.ol-bar.ol-bottom +{ top: auto; + bottom: 0.5em; +} + +.ol-control.ol-bar.ol-top.ol-left, +.ol-control.ol-bar.ol-top.ol-right +{ top: 4.5em; + transform:none; +} +.ol-touch .ol-control.ol-bar.ol-top.ol-left, +.ol-touch .ol-control.ol-bar.ol-top.ol-right +{ top: 5.5em; +} +.ol-control.ol-bar.ol-bottom.ol-left, +.ol-control.ol-bar.ol-bottom.ol-right +{ top: auto; + bottom: 0.5em; + transform:none; +} + +/* Group buttons */ +.ol-control.ol-bar.ol-group +{ margin: 1px 1px 1px 0; +} +.ol-control.ol-bar.ol-right .ol-group, +.ol-control.ol-bar.ol-left .ol-group +{ margin: 1px 1px 0 1px; +} + +.ol-control.ol-bar.ol-group button +{ border-radius:0; + margin: 0 0 0 1px; +} +.ol-control.ol-bar.ol-right.ol-group button, +.ol-control.ol-bar.ol-left.ol-group button, +.ol-control.ol-bar.ol-right .ol-group button, +.ol-control.ol-bar.ol-left .ol-group button +{ margin: 0 0 1px 0; +} +.ol-control.ol-bar.ol-group .ol-control:first-child > button +{ border-radius: 5px 0 0 5px; +} +.ol-control.ol-bar.ol-group .ol-control:last-child > button +{ border-radius: 0 5px 5px 0; +} +.ol-control.ol-bar.ol-left.ol-group .ol-control:first-child > button, +.ol-control.ol-bar.ol-right.ol-group .ol-control:first-child > button, +.ol-control.ol-bar.ol-left .ol-group .ol-control:first-child > button, +.ol-control.ol-bar.ol-right .ol-group .ol-control:first-child > button +{ border-radius: 5px 5px 0 0; +} +.ol-control.ol-bar.ol-left.ol-group .ol-control:last-child > button, +.ol-control.ol-bar.ol-right.ol-group .ol-control:last-child > button, +.ol-control.ol-bar.ol-left .ol-group .ol-control:last-child > button, +.ol-control.ol-bar.ol-right .ol-group .ol-control:last-child > button +{ border-radius: 0 0 5px 5px; +} + +/* */ +.ol-control.ol-bar .ol-rotate +{ opacity:1; + visibility: visible; +} +.ol-control.ol-bar .ol-rotate button +{ display: block +} + +/* Active buttons */ +.ol-control.ol-bar .ol-toggle.ol-active > button +{ background: rgba(60, 136, 0, 0.7) +} +.ol-control.ol-bar .ol-toggle.ol-active button:hover +{ background: rgba(60, 136, 0, 0.7) +} +.ol-control.ol-toggle button:disabled +{ background: rgba(0,60,136,.3); +} + +/* Subbar toolbar */ +.ol-control.ol-bar .ol-control.ol-option-bar +{ display: none; + position:absolute; + top:100%; + left:0; + margin: 5px 0; + border-radius: 0; + background: rgba(255,255,255, 0.8); + /* border: 1px solid rgba(0, 60, 136, 0.5); */ + box-shadow: 0 0 0 1px rgba(0, 60, 136, 0.5), 1px 1px 2px rgba(0, 0, 0, 0.5); +} + +.ol-control.ol-bar .ol-option-bar:before +{ content: ""; + border: 0.5em solid transparent; + border-color: transparent transparent rgba(0, 60, 136, 0.5); + position: absolute; + bottom: 100%; + left: 0.3em; +} + +.ol-control.ol-bar .ol-option-bar .ol-control +{ display: table-cell; +} +.ol-control.ol-bar .ol-control .ol-bar +{ display: none; +} +.ol-control.ol-bar .ol-control.ol-active > .ol-option-bar +{ display: block; +} + +.ol-control.ol-bar .ol-control.ol-collapsed ul +{ display: none; +} + +.ol-control.ol-bar .ol-control.ol-text-button > button:hover, +.ol-control.ol-bar .ol-control.ol-text-button > button +{ background: none; + color: rgba(0, 60, 136, 0.5); + width: auto; + min-width: 1.375em; + margin: 0; +} + +.ol-control.ol-bar .ol-control.ol-text-button +{ font-size:0.9em; + border-left: 1px solid rgba(0, 60, 136, 0.8); + border-radius: 0; +} +.ol-control.ol-bar .ol-control.ol-text-button:first-child +{ border-left:0; +} +.ol-control.ol-bar .ol-control.ol-text-button button +{ padding:0 0.3em; + font-weight: normal; + height:1.4em; +} +.ol-control.ol-bar .ol-control.ol-text-button button:hover +{ color: rgba(0, 60, 136, 1); +} + +.ol-control.ol-bar.ol-bottom .ol-option-bar +{ top: auto; + bottom: 100%; +} +.ol-control.ol-bar.ol-bottom .ol-option-bar:before +{ border-color: rgba(0, 60, 136, 0.5) transparent transparent ; + bottom: auto; + top: 100%; +} + +.ol-control.ol-bar.ol-left .ol-option-bar +{ left:100%; + top: 0; + bottom: auto; + margin: 0 5px; +} +.ol-control.ol-bar.ol-left .ol-option-bar:before +{ border-color: transparent rgba(0, 60, 136, 0.5) transparent transparent; + bottom: auto; + right: 100%; + left: auto; + top: 0.3em; +} +.ol-control.ol-bar.ol-right .ol-option-bar +{ right:100%; + left:auto; + top: 0; + bottom: auto; + margin: 0 5px; +} +.ol-control.ol-bar.ol-right .ol-option-bar:before +{ border-color: transparent transparent transparent rgba(0, 60, 136, 0.5); + bottom: auto; + left: 100%; + top: 0.3em; +} + +.ol-control.ol-bar.ol-left .ol-option-bar .ol-option-bar, +.ol-control.ol-bar.ol-right .ol-option-bar .ol-option-bar +{ top: 100%; + bottom: auto; + left: 0.3em; + right: auto; + margin: 5px 0; +} +.ol-control.ol-bar.ol-right .ol-option-bar .ol-option-bar +{ right: 0.3em; + left: auto; +} +.ol-control.ol-bar.ol-left .ol-option-bar .ol-option-bar:before, +.ol-control.ol-bar.ol-right .ol-option-bar .ol-option-bar:before +{ border-color: transparent transparent rgba(0, 60, 136, 0.5); + bottom: 100%; + top: auto; + left: 0.3em; + right: auto; +} +.ol-control.ol-bar.ol-right .ol-option-bar .ol-option-bar:before +{ right: 0.3em; + left: auto; +} diff --git a/build/control/Bar.js b/build/control/Bar.js new file mode 100644 index 00000000..723ea9ce --- /dev/null +++ b/build/control/Bar.js @@ -0,0 +1,181 @@ +/* Copyright (c) 2016 Jean-Marc VIGLINO, + released under the CeCILL-B license (French BSD license) + (http://www.cecill.info/licences/Licence_CeCILL-B_V1-en.txt). +*/ + +import ol from 'ol' +import ol_control_Control from 'ol/control/control' + +/** Control bar for OL3 + * The control bar is a container for other controls. It can be used to create toolbars. + * Control bars can be nested and combined with ol.control.Toggle to handle activate/deactivate. + * + * @constructor + * @extends {ol_control_Control} + * @param {Object=} options Control options. + * @param {String} options.className class of the control + * @param {bool} options.group is a group, default false + * @param {bool} options.toggleOne only one toggle control is active at a time, default false + * @param {bool} options.autoDeactivate used with subbar to deactivate all control when top level control deactivate, default false + * @param {Array<_ol_control_>} options.controls a list of control to add to the bar + */ +var ol_control_Bar = function(options) +{ if (!options) options={}; + var element = $("
").addClass('ol-unselectable ol-control ol-bar'); + if (options.className) element.addClass(options.className); + if (options.group) element.addClass('ol-group'); + + ol_control_Control.call(this, + { element: element.get(0), + target: options.target + }); + + this.set('toggleOne', options.toggleOne); + this.set('autoDeactivate', options.autoDeactivate); + + this.controls_ = []; + if (options.controls instanceof Array) + { for (var i=0; i} +*/ +ol_control_Bar.prototype.getControls = function () +{ return this.controls_; +}; + +/** Set tool bar position +* @param {top|left|bottom|right} pos +*/ +ol_control_Bar.prototype.setPosition = function (pos) +{ $(this.element).removeClass('ol-left ol-top ol-bottom ol-right'); + pos=pos.split ('-'); + for (var i=0; i test auto activate + if (!this.getActiveControls().length) + { for (var i=0, c; c=this.controls_[i]; i++) + { if (c.get("autoActivate")) + { c.setActive(); + break; + } + } + } + } + } +}; + +export default ol_control_Bar diff --git a/build/control/Button.js b/build/control/Button.js new file mode 100644 index 00000000..987a2c0c --- /dev/null +++ b/build/control/Button.js @@ -0,0 +1,45 @@ +/* Copyright (c) 2016 Jean-Marc VIGLINO, + released under the CeCILL-B license (French BSD license) + (http://www.cecill.info/licences/Licence_CeCILL-B_V1-en.txt). +*/ +import ol from 'ol' +import ol_control_Control from 'ol/control/control' +/** A simple push button control +* @constructor +* @extends {ol_control_Control} +* @param {Object=} options Control options. +* @param {String} options.className class of the control +* @param {String} options.title title of the control +* @param {String} options.html html to insert in the control +* @param {function} options.handleClick callback when control is clicked (or use change:active event) +*/ +var ol_control_Button = function(options) +{ options = options || {}; + var element = $("
").addClass((options.className||"") + ' ol-button ol-unselectable ol-control'); + var self = this; + + var bt = $("