add build script

README.mkd

@@ -3,7 +3,8 @@
 This module is a very simple [Vue][] component providing the
 goodness of [SVG-Pan-Zoom][] for SVG elements.
 
-/!\ WARNING: the module is young, basic, and likely to have
+/!\ WARNING: the module is young, basic, probably will have its
+API change with no notice, and likely to have
 bugs. Use at your own risk, send patches for my eternal gratitude.
 
 ## Basic Use
@@ -38,29 +39,29 @@ In a Single File Component:
 
 * `SvgPanZoom` accepts as attributes all `svg-pan-zoom` options:
 
-| attribute | default | 
+    | attribute                 | default                |
-| --------- | -------- |
+    | ---------                 | --------               |
-|zoomEnabled |     true |
+    | zoomEnabled               | true                   |
-|controlIconsEnabled |   false |
+    | controlIconsEnabled       | false                  |
-|fit |         true |
+    | fit                       | true                   |
-|panEnabled |  true |
+    | panEnabled                | true                   |
-|dblClickZoomEnabled |  true | 
+    | dblClickZoomEnabled       | true                   |
-|mouseWheelZoomEnabled |  true | 
+    | mouseWheelZoomEnabled     | true                   |
-|preventMouseEventsDefault |true | 
+    | preventMouseEventsDefault | true                   |
-|contain |             false | 
+    | contain                   | false                  |
-|center |         true | 
+    | center                    | true                   |
-|viewportSelector |             .svg-pan-zoom_viewport |
+    | viewportSelector          | .svg-pan-zoom_viewport |
-|zoomScaleSensitivity |  0.2 |
+    | zoomScaleSensitivity      | 0.2                    |
-|minZoom |             0.5 |
+    | minZoom                   | 0.5                    |
-|maxZoom |              10 |
+    | maxZoom                   | 10                     |
-|refreshRate |       auto | 
+    | refreshRate               | auto                   |
-|beforeZoom |           |
+    | beforeZoom                |                        |
-|onZoom |               |
+    | onZoom                    |                        |
-|beforePan |            |
+    | beforePan                 |                        |
-|onPan |                |
+    | onPan                     |                        |
-|onUpdatedCTM |         |
+    | onUpdatedCTM              |                        |
-|customEventsHandler |  |
+    | customEventsHandler       |                        |
-|eventsListenerElement | |
+    | eventsListenerElement     |                        |
 
 ## Use with thumbnails
 
@@ -71,30 +72,38 @@ In a Single File Component:
             style="width: 300px; height: 500px; border:1px solid black; "
         >
             <svg> ... </svg>
-            <SvgPanZoomThumbnail>
+            <svg slot="thumbnail" class="thumbViewClass">
-                <svg> ... </svg>
+                ...
-            </SvgPanZoomThumbnail>
+            </svg>
         </SvgPanZoom>
     </template>
 
 
     <script>
-        import { SvgPanZoom, SvgPanZoomThumbnail } from 'vue-svg-pan-zoom';
+        import  SvgPanZoom from 'vue-svg-pan-zoom';
 
         export default {
-            components: {  SvgPanZoom, SvgPanZoomThumbnail },
+            components: {  SvgPanZoom },
         };
 
     </script>
 
+    <style>
+        @import 'vue-svg-pan-zoom/dist/vue-svg-pan-zoom.css';
+    </style>
+
+Note that for the css import to work, you'll have to have 
+[postcss-import](https://github.com/postcss/postcss-import)
+installed as a dep.
+
 ### Notes
 
-* Just like the `SvgPanZoom`component, `SvgPanZoomThumbnail` only accepts 
+* Just like the main `SvgPanZoom`component, the `thumbnail` slot needs to 
-a `svg` child -- `embed` won't work.
+be assigned to a `svg` node -- `embed` won't work.
 
 ### Storybook demos
 
-To run [Storybook][] stories duplicating the demos of
+To run [Storybook][https://github.com/storybooks/storybook] stories duplicating the demos of
 the main `SVG-Pan-Zoom` project, do
 
     $ yarn install --dev

package.json

@@ -2,7 +2,7 @@
   "name": "vue-svg-pan-zoom",
   "version": "0.0.1",
   "description": "Vue component for svg-pan-zoom",
-  "main": "index.js",
+  "main": "dist/vue-svg-pan-zoom.js",
   "author": "Yanick Champoux",
   "license": "MIT",
   "devDependencies": {
@@ -23,6 +23,7 @@
     "svg-pan-zoom": "^3.5.3"
   },
   "scripts": {
+    "build": "poi build src/index.js --format cjs --library",
     "storybook": "start-storybook -p 9009 -s public",
     "build-storybook": "build-storybook -s public"
   }

src/index.vue

@@ -0,0 +1,71 @@
+<template>
+    <div>
+        <slot />
+        <SvgPanZoomThumbnail v-if="has_thumbnail">
+            <slot name="thumbnail" />
+        </SvgPanZoomThumbnail>
+    </div>
+</template>
+
+<script>
+import svg_pan_zoom from 'svg-pan-zoom';
+
+import SvgPanZoomThumbnail from './SvgPanZoomThumbnail.vue';
+export { SvgPanZoomThumbnail } from './SvgPanZoomThumbnail.vue';
+
+import thumbnailViewer from './thumbnailViewer';
+
+let props = {
+        'zoomEnabled':               { type: Boolean, default: true },
+        'controlIconsEnabled':       { type: Boolean, default: false },
+        'fit':                       { type: Boolean, default: true },
+        'panEnabled':                { type: Boolean, default: true },
+        'dblClickZoomEnabled':       { type: Boolean, default: true },
+        'mouseWheelZoomEnabled':     { type: Boolean, default: true },
+        'preventMouseEventsDefault': { type: Boolean, default: true },
+        'contain':                   { type: Boolean, default: false },
+        'center':                    { type: Boolean, default: true },
+        viewportSelector:            { default: '.svg-pan-zoom_viewport' }
+        , zoomScaleSensitivity:      { default: 0.2}
+        , minZoom:                   { default: 0.5}
+        , maxZoom:                   { default: 10}
+        , refreshRate:               { default: 'auto'}
+        , beforeZoom:                { }
+        , onZoom:                    { }
+        , beforePan:                 { }
+        , onPan:                     { }
+        , onUpdatedCTM:              { }
+        , customEventsHandler:   { }
+        , eventsListenerElement: {  }
+};
+
+export const SvgPanZoom = {
+    props,
+    components: { SvgPanZoomThumbnail },
+    computed: {
+        has_thumbnail: function() { return this.$slots.thumbnail }
+    },
+    mounted: function() {
+        let options = {};
+
+        Object.keys(props).filter( k => this[k] !== undefined ).forEach( k => options[k] = this[k] );
+        console.log(options);
+
+        if( this.has_thumbnail ) {
+            console.log( this.$slots.default[0].elm.id );
+            console.log( this.$slots.thumbnail );
+            thumbnailViewer({
+                mainViewId: this.$slots.default[0].elm.id,
+                thumbViewId: 'thumbView',
+            });
+        }
+        else {
+            svg_pan_zoom( this.$slots.default[0].elm , options );
+        }
+//        svg_pan_zoom( '#mainView', options );
+    },
+};
+
+export default SvgPanZoom;
+
+</script>