dropmic - npm Package Compare versions

Comparing version 0.2.7 to 0.3.0

dist/dropmic.js

@@ -6,2 +6,4 @@ (function(f){if(typeof exports==="object"&&typeof module!=="undefined"){module.exports=f()}else if(typeof define==="function"&&define.amd){define([],f)}else{var g;if(typeof window!=="undefined"){g=window}else if(typeof global!=="undefined"){g=global}else if(typeof self!=="undefined"){g=self}else{g=this}g.Dropmic = f()}})(function(){var define,module,exports;return (function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s})({1:[function(require,module,exports){
 
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
 function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
@@ -19,6 +21,7 @@
 
-        this.defaults = {
+        this.defaults = _defineProperty({
             onOpen: null,
-            onClose: null
-        };
+            onClose: null,
+            beforeClose: null
+        }, "beforeClose", null);
 
@@ -203,3 +206,3 @@ this.options = this.extendObject({}, this.defaults, options);
         /**
-        * Callback methodes
+        * Callback methods
         */
@@ -210,3 +213,5 @@
         value: function _onOpen() {
-            this.options.onOpen();
+            if (this.options.onOpen) {
+                this.options.onOpen();
+            }
         }
@@ -216,4 +221,20 @@ }, {
         value: function _onClose() {
-            this.options.onClose();
+            if (this.options.onClose) {
+                this.options.onClose();
+            }
         }
+    }, {
+        key: "_beforeOpen",
+        value: function _beforeOpen() {
+            if (this.options.beforeOpen) {
+                this.options.beforeOpen();
+            }
+        }
+    }, {
+        key: "_beforeClose",
+        value: function _beforeClose() {
+            if (this.options.beforeClose) {
+                this.options.beforeClose();
+            }
+        }
 
@@ -238,3 +259,3 @@ /**
         /**
-        * Public methodes to generate menu
+        * Public methods to generate menu
         */
@@ -299,2 +320,10 @@
 
+        // Update target button content
+
+    }, {
+        key: "updateTargetBtn",
+        value: function updateTargetBtn(content) {
+            this.btn.innerHTML = content;
+        }
+
         // Open dropdown
@@ -305,2 +334,3 @@
         value: function open() {
+            this._beforeOpen();
             this.target.classList.add(dropmicClassShow);
@@ -320,2 +350,3 @@ this.target.querySelector("[aria-hidden]").setAttribute("aria-hidden", "false");
         value: function close() {
+            this._beforeClose();
             this.target.classList.remove(dropmicClassShow);
@@ -322,0 +353,0 @@ this.target.querySelector("[aria-hidden]").setAttribute("aria-hidden", "true");

package.json

 {
   "name": "dropmic",
-  "version": "0.2.7",
+  "version": "0.3.0",
   "description": "A lightweight dropdown plugin",
@@ -5,0 +5,0 @@ "main": "dist/dropmic.js",

README.md

@@ -25,3 +25,3 @@ # dropmic
 
-```
+```html
 <link rel="stylesheet" href="dist/dropmic.css">
@@ -32,3 +32,3 @@ ```
 
-```
+```html
 <script src="dist/dropmic.js"></script>
@@ -54,3 +54,3 @@ ```
 Example:
-```
+```html
 <div class="dropmic" data-dropmic="42"
@@ -63,3 +63,3 @@ data-dropmic-direction="bottom-right">
 #### Instantiate your new dropdown
-```
+```javascript
 var dropmic = new Dropmic(document.querySelector('[data-dropmic="42"]'));
@@ -69,6 +69,7 @@ ```
 #### Add content
-You can create the content by yourself or use the API.
-  - Use this template (`<div class="dropmic-menu">` is needed, otherwise you can completely customize the content)
+  You can create the content by yourself or use the API (cf. below)
 
-  ```
+  Use this template (`<div class="dropmic-menu">` is needed, otherwise you can completely customize his content)
+
+  ```html
   <div class="dropmic" data-dropmic="42" data-dropmic-direction="bottom-right" role="navigation">
@@ -89,4 +90,7 @@ <button data-dropmic-btn>click me</button>
   ```
-  - You can use the API to generate content and open or close your dropdown with JS :
 
+## API
+
+You can use the API to generate content and open or close your dropdown with JS:
+
   Name                      | Parameter type(s)       | Description
@@ -98,2 +102,3 @@ ------------------------- | ----------------------- | ----------
   setCustomContent(content) | string                  | Set a custom content
+  updateTargetBtn(content)  | string                  | Update target button content
   open()                    |                         | Open your dropdown
@@ -103,3 +108,3 @@ close()                   |                         | Close your dropdown
   Example:
-  ```
+  ```javascript
 dropmic.setCustomContent("toto custom");
@@ -113,2 +118,24 @@ dropmic.addLink('link label', 'http://example.com');
 
+## Options
+
+  Name        | Type     | Description
+------------- | -------- | -----------------------------------------
+  onOpen      | function | Callback to execute when dropmic is open
+  onClose     | function | Callback to execute when dropmic is closed
+  beforeOpen  | function | Callback to execute before opening dropmic
+  beforeClose | function | Callback to execute before closing dropmic
+
+
+  Example:
+  ```javascript
+var dropmic = new Dropmic(document.querySelector('[data-dropmic="1"]'), {
+    onOpen: function() {
+        dropmic.updateTargetBtn("Click to close");
+    },
+    onClose: function() {
+        dropmic.updateTargetBtn("Bottom right (default)");
+    }
+});
+  ```
+
 ## Roadmap
@@ -118,5 +145,5 @@ - [x] Add open and close public method in the API
 - [x] A11y friendly (with keyboard navigation)
+- [x] Permit to update button content with dropdown is open
 - [ ] Instantiate severals dropmic with one initialization command
 - [ ] Permit to update a list item value
-- [ ] Permit to update button content with dropdown is open
 
@@ -123,0 +150,0 @@ ## Licence

src/dropmic.js

@@ -11,3 +11,5 @@ const dropmicClassShow = "dropmic--show";
             onOpen: null,
-            onClose: null
+            onClose: null,
+            beforeClose: null,
+            beforeClose: null
         };
@@ -172,13 +174,29 @@
     /**
-    * Callback methodes
+    * Callback methods
     */
 
     _onOpen() {
-        this.options.onOpen();
+        if(this.options.onOpen) {
+            this.options.onOpen();
+        }
     }
 
     _onClose() {
-        this.options.onClose();
+        if(this.options.onClose) {
+            this.options.onClose();
+        }
     }
 
+    _beforeOpen() {
+        if(this.options.beforeOpen) {
+            this.options.beforeOpen();
+        }
+    }
+
+    _beforeClose() {
+        if(this.options.beforeClose) {
+            this.options.beforeClose();
+        }
+    }
+
     /**
@@ -200,3 +218,3 @@ * Helpers
     /**
-    * Public methodes to generate menu
+    * Public methods to generate menu
     */
@@ -249,4 +267,11 @@
 
+    // Update target button content
+
+    updateTargetBtn(content) {
+        this.btn.innerHTML = content;
+    }
+
     // Open dropdown
     open() {
+        this._beforeOpen();
         this.target.classList.add(dropmicClassShow);
@@ -263,2 +288,3 @@ this.target.querySelector("[aria-hidden]").setAttribute("aria-hidden", "false");
     close() {
+        this._beforeClose();
         this.target.classList.remove(dropmicClassShow);
@@ -265,0 +291,0 @@ this.target.querySelector("[aria-hidden]").setAttribute("aria-hidden", "true");

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

194044

increased by1.32%

Lines of code

1114

increased by4.7%

Number of lines in readme file

143

increased by23.28%

No dependency changes