Add Hover Mode

dist/sharee-react.js.js

@@ -1,5 +1,5 @@
 import { useRef as n, useEffect as u } from "react";
-import { S as o } from "./Sharee.05d84ac2.js";
+import { S as o } from "./Sharee.60987b84.js";
 import { jsx as f } from "react/jsx-runtime";
 import "lodash.merge";
 function m(e) {

dist/sharee-vue.js.js

@@ -1,5 +1,5 @@
 import { defineComponent as a, ref as r, onMounted as s, onUnmounted as u, openBlock as p, createElementBlock as i } from "vue";
-import { S as c } from "./Sharee.05d84ac2.js";
+import { S as c } from "./Sharee.60987b84.js";
 import "lodash.merge";
 const _ = /* @__PURE__ */ a({
   __name: "Sharee",

dist/sharee.js

@@ -1,4 +1,4 @@
-import { S as a } from "./Sharee.05d84ac2.js";
+import { S as a } from "./Sharee.60987b84.js";
 import "lodash.merge";
 export {
   a as default

src/assets/styles/style-hover.css

@@ -0,0 +1,11 @@
+.sharee__hover {
+    transform: translate(-50%, 0);
+}
+
+.sharee__dropdown.fade-down.sharee__hover.show {
+    transform: translate(-50%, 0);
+}
+
+.sharee__dropdown.fade-down:not(.show) {
+    transform: translate(-50%, -10px);
+}

src/assets/styles/style.css

@@ -3,3 +3,4 @@
 @import "./style-fixed.css";
 @import "./style-text.css";
 @import "./style-dropdown.css";
+@import "./style-hover.css";

src/common/ShareeOptions.ts

@@ -10,8 +10,8 @@ export default interface ShareeOptions {
   shareLink?: string;
   shareText?: string;
   ripple?: boolean;
-  mode?: 'dropdown'|'text'|'normal'|'fixed';
-  modeOptions?: any
+  mode?: 'dropdown'|'text'|'normal'|'fixed'|'hover';
+  modeOptions?: any;
 }
 
 const shareeDefaultOptions: ShareeOptions = {

src/lib/helpers/index.ts

@@ -1,6 +1,6 @@
 export function hasClass(element: any, className: string) {
   do {
-    if (element?.className?.includes(className)) {
+    if (typeof element?.className?.includes !== 'undefined' && element?.className?.includes(className)) {
       return true;
     }
     element = element.parentNode;

src/lib/strategies/HoverStrategy.ts

@@ -0,0 +1,66 @@
+import Sharee from "../Sharee";
+import Driver from "../drivers/Driver";
+import DropdownStrategy from "./DropdownStrategy";
+
+export default class HoverStrategy extends DropdownStrategy{
+  constructor(sharee: Sharee) {
+    super(sharee);
+    this.options.type = 'row'
+  }
+
+  destroy() {
+    super.destroy();
+  }
+
+  public render() {
+    super.render();
+    this.shareeEl.classList.add('sharee__text')
+    this.shareeEl.classList.add('sharee__hover')
+  }
+
+  protected show() {
+    this.shareeEl.classList.add('showing')
+    setTimeout(() => {
+      this.shareeEl.classList.add('show')
+      const bCR = this.sharee.targetElement.getBoundingClientRect();
+      const x = bCR.x;
+      const y = bCR.y;
+      if (this.sharee.lang.Direction === 'ltr') {
+        this.shareeEl.style.left = `${x + (bCR.width / 2)}px`;
+        this.shareeEl.style.right = 'unset';
+      } else {
+        this.shareeEl.style.right = `${x}px`;
+        this.shareeEl.style.left = 'unset';
+      }
+      this.shareeEl.style.top = `${y + bCR.height}px`;
+    })
+  }
+
+  protected listenEvents() {
+    this.shareeEl.addEventListener('mouseenter', this.shareElOnMouseEnter.bind(this))
+    this.shareeEl.addEventListener('mouseleave', this.shareElOnMouseLeave.bind(this))
+    const onMouseEnter = this.elementOnMouseEnter.bind(this)
+    const onMouseLeave = this.elementOnMouseLeave.bind(this)
+    this.sharee.targetElement.addEventListener('mouseenter', onMouseEnter)
+    this.sharee.targetElement.addEventListener('mouseleave', onMouseLeave)
+    this.eventListeners.push([this.sharee.targetElement, 'mouseenter', onMouseEnter])
+    this.eventListeners.push([this.sharee.targetElement, 'mouseleave', onMouseLeave])
+  }
+
+  public renderDriver(driver: Driver) {
+    driver.mainEl = document.createElement('a');
+    driver.mainEl.title = driver.getButtonText()
+    if ('getLink' in driver) {
+      // @ts-ignore
+      driver.mainEl.href = driver.getLink();
+    }
+    this.initDriverStyles(driver)
+    this.listenDriverEvents(driver);
+    const icon = document.createElement('div');
+    icon.innerHTML = driver.icon;
+    driver.mainEl.appendChild(icon);
+
+    return driver.mainEl;
+  }
+
+}

src/lib/strategies/index.ts

@@ -2,12 +2,14 @@ import DropdownStrategy from "./DropdownStrategy";
 import TextStrategy from "./TextStrategy";
 import NormalStrategy from "./NormalStrategy";
 import FixedStrategy from "./FixedStrategy";
+import HoverStrategy from "./HoverStrategy";
 
 const strategies = {
   dropdown: DropdownStrategy,
   text: TextStrategy,
   normal: NormalStrategy,
-  fixed: FixedStrategy
+  fixed: FixedStrategy,
+  hover: HoverStrategy
 }
 
 export default strategies;

src/main.ts

@@ -18,6 +18,10 @@ if (document.location.pathname === '/vue') {
       <h2>Normal</h2>
       <div><div id="sharee-normal"></div></div>
     </div>
+    <div>
+      <h2>Hover Button</h2>
+      <div><button id="sharee-hover" class="transition-all duration-300 bg-app-light-blue-10 hover:bg-app-light-blue-9 text-white rounded-lg font-300 p-1.7 sm:p-2" data-v-e56f4d16=""><svg width="25" height="25" viewBox="0 0 25 25" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M18.5 22.5C20.1569 22.5 21.5 21.1569 21.5 19.5C21.5 17.8431 20.1569 16.5 18.5 16.5C16.8431 16.5 15.5 17.8431 15.5 19.5C15.5 21.1569 16.8431 22.5 18.5 22.5Z" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path><path d="M6.5 15.5C8.15685 15.5 9.5 14.1569 9.5 12.5C9.5 10.8431 8.15685 9.5 6.5 9.5C4.84315 9.5 3.5 10.8431 3.5 12.5C3.5 14.1569 4.84315 15.5 6.5 15.5Z" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path><path d="M9.09 14.01L15.92 17.99" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path><path d="M18.5 8.5C20.1569 8.5 21.5 7.15685 21.5 5.5C21.5 3.84315 20.1569 2.5 18.5 2.5C16.8431 2.5 15.5 3.84315 15.5 5.5C15.5 7.15685 16.8431 8.5 18.5 8.5Z" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path><path d="M15.91 7.01001L9.09 10.99" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path></svg></button></div>
+    </div>
     <div>
       <h2>Normal without title</h2>
       <div><div id="sharee-normal-no-title"></div></div>
@@ -71,6 +75,11 @@ if (document.location.pathname === '/vue') {
     lang: 'en'
   });
 
+  new Sharee(document.querySelector('#sharee-hover')!, {
+    mode: 'hover',
+    lang: 'en'
+  });
+
   new Sharee(document.querySelector('#sharee-normal-no-title')!, {
     mode: 'normal',
     lang: 'fa',

src/style.css

@@ -92,3 +92,17 @@ button:focus-visible {
   }
 }
 
+
+/*! CSS Used from: Embedded */
+svg{display:block;vertical-align:middle;}
+.bg-app-light-blue-10{--tw-bg-opacity:1;background-color:rgba(0, 122, 255, var(--tw-bg-opacity));}
+.hover\:bg-app-light-blue-9:hover{--tw-bg-opacity:1;background-color:rgba(36, 141, 255, var(--tw-bg-opacity));}
+.rounded-lg{border-radius:0.5rem;}
+.font-300{font-weight:300;}
+.p-1\.7{padding:0.425rem;}
+.text-white{--tw-text-opacity:1;color:rgba(255, 255, 255, var(--tw-text-opacity));}
+.transition-all{transition-property:all;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms;}
+.duration-300{transition-duration:300ms;}
+@media (min-width: 640px){
+  .sm\:p-2{padding:0.5rem;}
+}