state.active exposed to init

README.md

@@ -31,13 +31,14 @@ Use it!
 
 ```js
 jerboa.init({
-    data: {},               // Custom data that is included in the annotation object,
-    points: [],             // Pre-populates the page with this array of annotation objects
-    currentUser: 'John Perkins',   // Display name of current user,
-    currentUserId: '259837',    // User's Id
-    isAdmin: 'false',  // true or false, determines auth for changing status and owner of annotations
-    positioning: 'percent', // Valid values are 'pixel' and 'percent'
-    strategy: jerboa.strategies.global // Determines what element(s) is chosen to be the container
+    active:           false             //Start with feedback toggle engaged, or disengaged
+    data:             {},               // Custom data that is included in the annotation object
+    points:           [],               // Pre-populates the page with this array of annotation objects
+    currentUser:      'John Perkins',   // Display name of current user
+    currentUserId:    '259837',         // User's Id
+    isAdmin:          'false',          // true or false, determines auth for changing status and owner of annotations
+    positioning:      'PERCENT',        // Valid values are 'PIXEL' and 'PERCENT'
+    strategy:         jerboa.strategies.global // Determines what element(s) is chosen to be the container
 });
 ```
 
@@ -97,6 +98,7 @@ Listenable events are:
 * `deleteComment` - Fires when the user deletes a reply comment
 * `changeOwner` - Fires when the user changes the owner of an annotation
 * `changeStatus` - Fires when the user changes the status of an annotation
+* `active` - Fires when feedback toggle is changed. The value of the event indicates the state.
 
 
 -----

package.json

@@ -32,6 +32,7 @@
   },
   "homepage": "https://github.com/camman3d/jerboa.js",
   "devDependencies": {
+    "exp-publish-node": "^0.1.0",
     "autoprefixer": "^6.3.7",
     "babel-core": "^6.10.4",
     "babel-loader": "^6.2.4",
@@ -52,5 +53,6 @@
   "dependencies": {
     "axios": "^0.15.2",
     "blueimp-md5": "^2.3.1"
-  }
+  },
+  "private": true
 }

src/jerboa.js

@@ -132,26 +132,29 @@ function createToggleButton() {
     buttonContainer.style.left = left;
     buttonContainer.style.position = 'fixed';
 
-    buttonDiv.addEventListener('click', event => {
-        event.preventDefault();
+    let matchState=function(){
         let feedbackSpots = document.getElementsByClassName('feedback-spot');
-        if (buttonDiv.classList.contains('toggle-button-selected')) {
-            buttonDiv.classList.remove('toggle-button-selected');
-            buttonLabel.textContent = 'Feedback Off';
-            state.active = false;
-            Array.prototype.forEach.call(feedbackSpots, (feedbackSpotElement) => {
-                feedbackSpotElement.classList.add('off');
-            });
-        } else {
+        if (state.active) {
             buttonDiv.classList.add('toggle-button-selected');
             buttonLabel.textContent = 'Feedback On';
-            state.active = true;
             Array.prototype.forEach.call(feedbackSpots, (feedbackSpotElement) => {
                 feedbackSpotElement.classList.remove('off');
             });
+        } else {
+            buttonDiv.classList.remove('toggle-button-selected');
+            buttonLabel.textContent = 'Feedback Off';
+            Array.prototype.forEach.call(feedbackSpots, (feedbackSpotElement) => {
+                feedbackSpotElement.classList.add('off');
+            });
         }
+    }
+    buttonDiv.addEventListener('click', event => {
+        event.preventDefault();
+        state.active = !state.active;
+        matchState()
+        emit('active', state.active);
     });
-
+    matchState()
     document.body.appendChild(buttonContainer);
 }
 
@@ -183,6 +186,7 @@ export default {
     init(options) {
         console.log('options', options);
         options = options || {};
+        state.active = options.active || false
         state.currentStrategy = options.strategy || strategies.global;
         state.currentPositioning = options.positioning || 'PERCENT';
         state.currentUser = options.currentUser;