Merge pull request #122 from jonataswalker/v3

Rewrite to v3

Author: jonataswalker

.eslintrc.js

@@ -0,0 +1,10 @@
+module.exports = {
+  extends: ['jwalker'],
+  rules: {
+    'no-console': 1
+  },
+  globals: {
+    ContextMenu: true,
+    ol: true,
+  },
+};

.travis.yml

@@ -2,30 +2,30 @@ sudo: required
 dist: trusty
 
 language: node_js
-
 node_js:
-  - "6"
+  - "8"
 
 cache:
   bundler: true
   directories:
-    - travis-phantomjs
     - node_modules
 
+addons:
+  chrome: stable
+
 before_install:
-  # PhantomJS
-  - "if [ $(phantomjs --version) != '2.1.1' ]; then rm -rf $PWD/travis-phantomjs; mkdir -p $PWD/travis-phantomjs; fi"
-  - "if [ $(phantomjs --version) != '2.1.1' ]; then wget https://github.com/BIGjuevos/phantomjs-builds/archive/v2.1.1.tar.gz -O $PWD/travis-phantomjs/v2.1.1.tar.gz; fi"
-  - "if [ $(phantomjs --version) != '2.1.1' ]; then tar -xf $PWD/travis-phantomjs/v2.1.1.tar.gz -C $PWD/travis-phantomjs; fi"
-  - "if [ $(phantomjs --version) != '2.1.1' ]; then sudo ln -sf $PWD/travis-phantomjs/phantomjs-builds-2.1.1/bin/phantomjs $(which phantomjs); fi"
-  - "phantomjs --version"
+  - stty cols 80
+  - sudo apt-get -qq update
+  - sudo apt-get install -y libcairo2-dev libjpeg8-dev libpango1.0-dev libgif-dev build-essential g++
+  - sudo apt-get install -y fluxbox
+  - npm i -g npm@5
 
 before_script:
-
-script:
-  - xvfb-run -a npm run test
+  - "export DISPLAY=:99.0"
+  - "sh -e /etc/init.d/xvfb start"
+  - sleep 3
+  - fluxbox >/dev/null 2>&1 &
 
 branches:
   only:
     - "master"
-    - /^greenkeeper-.*$/

README.md

@@ -1,48 +1,45 @@
 # OpenLayers Custom Context Menu
 
 <p align="center">
-  <a href="https://travis-ci.org/jonataswalker/ol3-contextmenu">
-    <img src="https://travis-ci.org/jonataswalker/ol3-contextmenu.svg?branch=master" alt="build status">
+  <a href="https://travis-ci.org/jonataswalker/ol-contextmenu">
+    <img src="https://travis-ci.org/jonataswalker/ol-contextmenu.svg?branch=master" alt="build status">
   </a>
-  <a href="https://www.npmjs.com/package/ol3-contextmenu">
-    <img src="https://img.shields.io/npm/v/ol3-contextmenu.svg"
+  <a href="https://www.npmjs.com/package/ol-contextmenu">
+    <img src="https://img.shields.io/npm/v/ol-contextmenu.svg"
       alt="npm version">
   </a>
-  <a href="https://github.com/jonataswalker/ol3-contextmenu/blob/master/LICENSE">
-    <img src="https://img.shields.io/npm/l/ol3-contextmenu.svg"
+  <a href="https://github.com/jonataswalker/ol-contextmenu/blob/master/LICENSE">
+    <img src="https://img.shields.io/npm/l/ol-contextmenu.svg"
       alt="license">
   </a>
-  <a href="https://david-dm.org/jonataswalker/ol3-contextmenu">
-    <img src="https://david-dm.org/jonataswalker/ol3-contextmenu/status.svg"
+  <a href="https://david-dm.org/jonataswalker/ol-contextmenu">
+    <img src="https://david-dm.org/jonataswalker/ol-contextmenu/status.svg"
       alt="dependency status">
   </a>
-  <a href="https://david-dm.org/jonataswalker/ol3-contextmenu">
-    <img src="https://david-dm.org/jonataswalker/ol3-contextmenu/dev-status.svg" alt="devDependency status">
+  <a href="https://david-dm.org/jonataswalker/ol-contextmenu">
+    <img src="https://david-dm.org/jonataswalker/ol-contextmenu/dev-status.svg" alt="devDependency status">
   </a>
 </p>
 
 A `contextmenu` extension for [OpenLayers](http://openlayers.org/). **Requires** OpenLayers **v3.11.0** or higher.
 
-![contextmenu anim](https://raw.githubusercontent.com/jonataswalker/ol3-contextmenu/screenshot/images/anim.gif)
+![contextmenu anim](https://raw.githubusercontent.com/jonataswalker/ol-contextmenu/screenshot/images/anim.gif)
 
 ## Demo
-You can see [here a demo](http://rawgit.com/jonataswalker/ol3-contextmenu/master/examples/contextmenu.html) or [JSFiddle](https://jsfiddle.net/jonataswalker/ooxs1w5d/).
+You can see [here a demo](http://rawgit.com/jonataswalker/ol-contextmenu/master/examples/contextmenu.html) or [JSFiddle](https://jsfiddle.net/jonataswalker/ooxs1w5d/).
 
 ## How to use it?
-##### CDN Hosted - [jsDelivr](http://www.jsdelivr.com/projects/openlayers.contextmenu)
-Load CSS and Javascript:
-```HTML
-<link href="//cdn.jsdelivr.net/openlayers.contextmenu/latest/ol3-contextmenu.min.css" rel="stylesheet">
-<script src="//cdn.jsdelivr.net/openlayers.contextmenu/latest/ol3-contextmenu.js"></script>
-```
+##### NPM
+`npm install ol-contextmenu`
+
 ##### CDN Hosted - UNPKG
 Load CSS and Javascript:
 ```HTML
-<link href="https://unpkg.com/ol3-contextmenu/build/ol3-contextmenu.min.css" rel="stylesheet">
-<script src="https://unpkg.com/ol3-contextmenu/build/ol3-contextmenu.js"></script>
+<link href="https://unpkg.com/ol-contextmenu/dist/ol-contextmenu.min.css" rel="stylesheet">
+<script src="https://unpkg.com/ol-contextmenu"></script>
 ```
 ##### Self hosted
-Download [latest release](https://github.com/jonataswalker/ol3-contextmenu/releases/latest) and (obviously) load CSS and Javascript.
+Download [latest release](https://github.com/jonataswalker/ol-contextmenu/releases/latest) and (obviously) load CSS and Javascript.
 
 ##### Instantiate with some options and add the Control
 ```javascript
@@ -98,7 +95,7 @@ var all_items = [
 
 ##### Would you like to propagate custom data to the callback handler?
 ```javascript
-var removeMarker = function(obj){
+var removeMarker = function (obj) {
   vectorLayer.getSource().removeFeature(obj.data.marker);
 };
 var removeMarkerItem = {
@@ -108,15 +105,13 @@ var removeMarkerItem = {
 };
 
 var restore = false;
-contextmenu.on('open', function(evt){
-  var feature = map.forEachFeatureAtPixel(evt.pixel, function(ft, l){
+contextmenu.on('open', function (evt) {
+  var feature = map.forEachFeatureAtPixel(evt.pixel, function (ft, l) {
     return ft;
   });
   if (feature) {
     contextmenu.clear();
-    removeMarkerItem.data = {
-      marker: feature
-    };
+    removeMarkerItem.data = { marker: feature };
     contextmenu.push(removeMarkerItem);
     restore = true;
   } else if (restore) {
@@ -206,8 +201,8 @@ Update menu's position.
 #### If you want to disable this plugin under certain circumstances, listen to `beforeopen`
 
 ```javascript
-contextmenu.on('beforeopen', function(evt){
-  var feature = map.forEachFeatureAtPixel(evt.pixel, function(ft, l){
+contextmenu.on('beforeopen', function (evt) {
+  var feature = map.forEachFeatureAtPixel(evt.pixel, function (ft, l) {
     return ft;
   });
 
@@ -223,7 +218,7 @@ contextmenu.on('beforeopen', function(evt){
 
 ```javascript
 contextmenu.on('open', function(evt){
-  var feature = map.forEachFeatureAtPixel(evt.pixel, function(ft, l){
+  var feature = map.forEachFeatureAtPixel(evt.pixel, function (ft, l) {
     return ft;
   });
 
@@ -236,7 +231,7 @@ contextmenu.on('open', function(evt){
 #### Any action when context menu gets closed?
 
 ```javascript
-contextmenu.on('close', function(evt){
+contextmenu.on('close', function (evt) {
   // it's upon you
 });
 ```

build-css.js

@@ -0,0 +1,62 @@
+const { writeFileSync, readFileSync } = require('fs');
+const boxen = require('boxen');
+const chalk = require('chalk');
+const gzip = require('gzip-size');
+const bytes = require('bytes');
+const sass = require('node-sass');
+const jsonImporter = require('node-sass-json-importer');
+const autoprefixer = require('autoprefixer');
+const postcss = require('postcss');
+const postcssReport = require('postcss-reporter');
+const cssnano = require('cssnano');
+const pkg = require('../package.json');
+
+var banner = readFileSync('./build/banner.js', 'utf-8')
+  .replace('${name}', pkg.name)
+  .replace('${description}', pkg.description)
+  .replace('${homepage}', pkg.homepage)
+  .replace('${version}', pkg.version)
+  .replace('${time}', new Date());
+
+
+sass.render({
+  file: './src/sass/main.scss',
+  importer: jsonImporter
+}, (err, result) => {
+  if (err) throw err.message;
+
+  const prefixer = postcss([
+    autoprefixer({ browsers: ['> 5%'] }),
+    postcssReport({ clearMessages: true })
+  ]);
+  prefixer.process(result.css).then(res => {
+    res.warnings().forEach((warn) => {
+      console.warn(warn.toString());
+    });
+
+    writeFileSync('./dist/ol-contextmenu.css', banner + res.css);
+
+    cssnano.process(res.css).then(min => {
+      writeFileSync('./dist/ol-contextmenu.min.css', banner + min.css);
+
+      const cssSize = bytes(Buffer.byteLength(res.css));
+      const cssMinSize = bytes(Buffer.byteLength(min.css));
+      const cssGzip = bytes(gzip.sync(res.css));
+      const cssMinGzip = bytes(gzip.sync(min.css));
+
+      // eslint-disable-next-line no-console
+      console.log(boxen([
+        chalk.green.bold('CSS: '),
+        chalk.yellow.bold(cssSize), ', ',
+        chalk.green.bold('Gzipped: '),
+        chalk.yellow.bold(cssGzip), '\n',
+        chalk.green.bold('Minified: '),
+        chalk.yellow.bold(cssMinSize), ', ',
+        chalk.green.bold('Gzipped: '),
+        chalk.yellow.bold(cssMinGzip), '\n',
+        chalk.green.bold('Now: '),
+        chalk.yellow.bold(new Date())
+      ].join(''), { padding: 1 }));
+    });
+  });
+});