Allow circle-basic in options.js - improved demo page

README.md

@@ -19,15 +19,15 @@ After that, import to your project by: `import { magicMouse } from 'magicmouse.j
 
 ## CDN
 If you want to include Magicmouse.js directly to your HTML, you can use this CDN. Include the js file to the bottom of your HTML file (right before the end of body tag):
-````html  
+````html
   <script type="text/javascript" src="https://res.cloudinary.com/veseylab/raw/upload/v1684982764/magicmouse-2.0.0.cdn.min.js"></script>
 ````
 ## Initialize
 ### Insert your options and initialize :
 ````html
 <script type="text/javascript">
     options = {
-	"cursorOuter": "circle-basic",
+	"cursorOuter": "circle",
 	"hoverEffect": "circle-move",
 	"hoverItemMove": false,
 	"defaultCursor": false,
@@ -52,13 +52,13 @@ Sometime you just don't want to use Magicmouse on some specific elements? Then y
 # Configuration list (updating):
 | Variable name | Value |
 |--|--|
-| cursorOuter | Default: "circle-basic", other options : "disable" |
+| cursorOuter | Default: "circle", other options : "disable" |
 | hoverEffect | default: "circle-move", other options : "pointer-blur", "pointer-overlay" |
 
 # License ❤️
-This package is totally free to use. However, if you want to use Magicmouse.js in your commercial projects, I require you to do a good thing for the poor people in your place. You can do whatever you think is "a good thing", like buy them some food, give them some money, etc. 
+This package is totally free to use. However, if you want to use Magicmouse.js in your commercial projects, I require you to do a good thing for the poor people in your place. You can do whatever you think is "a good thing", like buy them some food, give them some money, etc.
 I'm not requiring you to take a photo or do anything to prove it, just do it and you will feel great about yourself :)
-Let's make the world better place. 
+Let's make the world better place.
 
 # What's next?
 You should have the nice effect for your mouse now, of course you can override the CSS code to make it more elegant and suitable with your website (change color, size,..).

src/index.html

@@ -55,7 +55,6 @@
             <select class="form-control form-control-sm" v-model="selectedEffect">
               <option v-for="effect in effectList" :value="effect">{{effect}}</option>
             </select>
-            <button class="btn btn-mm-dark magic-hover magic-hover__square" @click="changeEffect()">Try it</button>
           </div>
 
         </div>

src/js/index.js

@@ -25,7 +25,7 @@ const app = createApp({
       switch (this.selectedEffect) {
         case "example #1":
           this.options.hoverEffect = "circle-move"
-          this.options.outerStyle = "circle-basic"
+          this.options.outerStyle = "circle"
           break
         case "example #2":
           this.options.hoverEffect = "pointer-overlay"
@@ -39,13 +39,13 @@ const app = createApp({
           this.options.outerWidth = 41
           this.options.outerHeight = 41
           this.options.hoverEffect = "pointer-blur"
-          this.options.outerStyle = "circle-basic"
+          this.options.outerStyle = "circle"
           break
         case "example #5":
           this.options.outerWidth = 41
           this.options.outerHeight = 41
           this.options.hoverEffect = "circle-move"
-          this.options.outerStyle = "circle-basic"
+          this.options.outerStyle = "circle"
           this.options.defaultCursor = true
           break
       }
@@ -68,6 +68,7 @@ const app = createApp({
   watch: {
     selectedEffect() {
       this.setSelectedEffect()
+      this.changeEffect()
     },
   },
 })

src/js/options.js

@@ -48,10 +48,10 @@ export default class Options {
         this.defaultOptions = this.generateDefault()
 
         // push user's options to default options one-by-one:
-        for(let key in options) {            
+        for(let key in options) {
             if(this.isValid(key, options[key])) {
                 this.defaultOptions[key] = options[key]
-            }  
+            }
         }
 
         return this.defaultOptions
@@ -66,28 +66,28 @@ export default class Options {
 
         let output = {}
         for(let key of acceptedKey) {
-            output[key] = this.getOptionByKey(key)['default']            
+            output[key] = this.getOptionByKey(key)['default']
         }
 
         return output
     }
 
     /**
      * This function is to check if an option is valid or not
-     * @param {String} key 
-     * @param {Any}} value 
+     * @param {String} key
+     * @param {Any}} value
      * @return {Boolean}
      */
-    isValid(key, value) {             
+    isValid(key, value) {
         // check if key is acceptable:
         const acceptedKey = pluck('name', allowedTypes)
 
         if(!acceptedKey.includes(key)) {
             // throw new Error(`${key} is not a valid option`)
             console.error(`${key} is not a valid option`)
             return false
-        }        
-        
+        }
+
         // check if the type of value is valid:
         const allowedOption = this.getOptionByKey(key)
         let isTypeValid = false
@@ -106,11 +106,11 @@ export default class Options {
                 isTypeValid = false
                 break;
         }
-        
-        if(!isTypeValid)  {            
+
+        if(!isTypeValid)  {
             console.error(`${value} is not a valid value for ${key}`)
         }
-        
+
         return isTypeValid
     }