@pluginjs/lightbox - npm Package Compare versions

Comparing version 0.2.6 to 0.2.7

package.json

@@ -5,9 +5,9 @@ {
 	"dependencies": {
-		"@pluginjs/component": "^0.2.8",
-		"@pluginjs/pluginjs": "^0.2.7",
-		"@pluginjs/template": "^0.2.6",
-		"@pluginjs/video": "^0.2.6",
-		"jquery": "*"
+		"@pluginjs/component": "^0.2.11",
+		"@pluginjs/dom": "^0.0.2",
+		"@pluginjs/pluginjs": "^0.2.11",
+		"@pluginjs/template": "^0.2.8",
+		"@pluginjs/video": "^0.2.7"
 	},
-	"version": "0.2.6",
+	"version": "0.2.7",
 	"description": "A flexible modern lightbox js plugin.",
@@ -35,3 +35,4 @@ "author": "Creation Studio Limited",
 	"standalone": "dist/lightbox.standalone.js",
-	"module": "dist/lightbox.esm.js"
+	"module": "dist/lightbox.esm.js",
+	"dev-main": "src/main.js"
 }

src/components/arrow.js

 import templateEngine from '@pluginjs/template'
 import Pj from '@pluginjs/pluginjs'
+import { addClass, removeClass } from '@pluginjs/dom/classes'
+import { setStyle } from '@pluginjs/dom/styled'
+import { bindEvent } from '@pluginjs/dom/events'
+import { append, query, parseHTML } from '@pluginjs/dom/html'
+
 class Arrow {
@@ -14,3 +19,3 @@ constructor (instance) {
   init () {
-    this.arrowRight = $(
+    this.arrowRight = parseHTML(
       templateEngine.render(this.options.templates.arrow.call(this), {
@@ -22,3 +27,3 @@ classes: this.classes,
     )
-    this.arrowLeft = $(
+    this.arrowLeft = parseHTML(
       templateEngine.render(this.options.templates.arrow.call(this), {
@@ -30,4 +35,4 @@ classes: this.classes,
     )
-    this.arrowRight.appendTo(this.instance.$wrap)
-    this.arrowLeft.appendTo(this.instance.$wrap)
+    append(this.arrowRight, this.instance.wrap)
+    append(this.arrowLeft, this.instance.wrap)
     this.bind()
@@ -37,19 +42,37 @@ }
   bind () {
-    this.arrowLeft.on('click', () => {
-      this.instance.pre()
-    })
+    bindEvent(
+      {
+        type: 'click',
+        handler: () => {
+          this.instance.pre()
+        }
+      },
+      this.arrowLeft
+    )
 
-    this.arrowRight.on('click', () => {
-      this.instance.next()
-    })
+    bindEvent(
+      {
+        type: 'click',
+        handler: () => {
+          this.instance.next()
+        }
+      },
+      this.arrowRight
+    )
   }
 
   in () {
-    this.arrowRight.addClass(this.classes.SLIDERIGHT)
-    this.arrowLeft.addClass(this.classes.SLIDELEFT)
+    this.reflow()
+    addClass(this.classes.SLIDERIGHT, this.arrowRight)
+    addClass(this.classes.SLIDELEFT, this.arrowLeft)
   }
 
+  reflow () {
+    const reflow = this.arrowRight.offsetHeight
+    return this.arrowLeft.offsetHeight
+  }
+
   out () {
-    this.arrowRight.removeClass(this.classes.SLIDERIGHT)
-    this.arrowLeft.removeClass(this.classes.SLIDELEFT)
+    removeClass(this.classes.SLIDERIGHT, this.arrowRight)
+    removeClass(this.classes.SLIDELEFT, this.arrowLeft)
   }
@@ -56,0 +79,0 @@ }

src/components/footer/footer.js

@@ -0,1 +1,5 @@
+import { addClass, removeClass } from '@pluginjs/dom/classes'
+import { setStyle } from '@pluginjs/dom/styled'
+import { bindEvent } from '@pluginjs/dom/events'
+import { append, query } from '@pluginjs/dom/html'
 import Thumbnails from './thumbnails'
@@ -12,10 +16,13 @@
   init () {
-    this.$footer = this.instance.getElement('footer')
-    this.$footer.appendTo(this.instance.$wrap)
-    this.$footer.on('click', event => {
-      event.stopPropagation()
+    this.footer = this.instance.getElement('footer')
+    append(this.footer, this.instance.wrap)
+    bindEvent({
+      type: 'click',
+      handler: e => {
+        e.stopPropagation()
+      }
     })
 
     this.thumbs = new Thumbnails(this.instance)
-    this.thumbs.appendTo(this.$footer)
+    this.thumbs.appendTo(this.footer)
   }
@@ -30,3 +37,4 @@
     // this.updateTitle()
-    this.$footer.addClass(this.classes.SLIDEBOTTOM)
+    this.reflow()
+    addClass(this.classes.SLIDEBOTTOM, this.footer)
 
@@ -36,4 +44,8 @@ this.thumbs.straightGoTo(this.instance.activeIndex)
 
+  reflow () {
+    return this.footer.offsetHeight
+  }
+
   out () {
-    this.$footer.removeClass(this.classes.SLIDEBOTTOM)
+    removeClass(this.classes.SLIDEBOTTOM, this.footer)
   }
@@ -40,0 +52,0 @@ }

src/components/footer/thumbnails.js

@@ -0,1 +1,5 @@
+import { addClass, removeClass, hasClass } from '@pluginjs/dom/classes'
+import { setStyle } from '@pluginjs/dom/styled'
+import { bindEvent } from '@pluginjs/dom/events'
+import { append, query } from '@pluginjs/dom/html'
 import Pj from '@pluginjs/pluginjs'
@@ -13,4 +17,4 @@
   init () {
-    this.$thumbs = this.instance.getElement('thumbnails')
-    this.inner = this.$thumbs.children()
+    this.thumbs = this.instance.getElement('thumbnails')
+    this.inner = this.thumbs.children[0]
     this.elements = {}
@@ -22,6 +26,6 @@
       const itemHtml = this.instance.getElement('thumb')
-      const image = itemHtml.children()
-      image[0].dataset.index = i
-      image.css({ 'background-image': `url(${item.thumbHref})` })
-      itemHtml.appendTo(this.inner)
+      const image = itemHtml.children[0]
+      image.dataset.index = i
+      setStyle({ 'background-image': `url(${item.thumbHref})` }, image)
+      append(itemHtml, this.inner)
       this.elements[i] = itemHtml
@@ -36,10 +40,16 @@ }
   bind () {
-    this.$thumbs.on('click', event => {
-      const target = $(event.target)
-      if (target.hasClass(this.classes.THUMBBG)) {
-        const data = parseInt(event.target.dataset.index)
-        this.instance.goTo(data)
-        console.log('text', data)
-      }
-    })
+    bindEvent(
+      {
+        type: 'click',
+        handler: event => {
+          const target = event.target
+          if (target.classList.contains(this.classes.THUMBBG)) {
+            const data = parseInt(event.target.dataset.index)
+            this.instance.goTo(data)
+            console.log('text', data)
+          }
+        }
+      },
+      this.thumbs
+    )
 
@@ -54,4 +64,4 @@ Pj.emitter.on('resize', this.resizeHandle.bind(this))
   goTo (index) {
-    if (!this.inner.hasClass(this.classes.THUMBSTRANSITION)) {
-      this.inner.addClass(this.classes.THUMBSTRANSITION)
+    if (!hasClass(this.classes.THUMBSTRANSITION, this.inner)) {
+      addClass(this.classes.THUMBSTRANSITION, this.inner)
     }
@@ -64,4 +74,4 @@ this.setTransform(index)
   straightGoTo (index) {
-    if (this.inner.hasClass(this.classes.THUMBSTRANSITION)) {
-      this.inner.removeClass(this.classes.THUMBSTRANSITION)
+    if (hasClass(this.classes.THUMBSTRANSITION, this.inner)) {
+      removeClass(this.classes.THUMBSTRANSITION, this.inner)
     }
@@ -77,9 +87,9 @@ this.setTransform(index)
     const p = halfPosition - baseSpace
-    this.inner.css({ transform: `translate3d(${p}px, 0px, 0px)` })
+    setStyle({ transform: `translate3d(${p}px, 0px, 0px)` }, this.inner)
   }
 
   addActiveClass (index) {
-    this.elements[this.index].removeClass(this.classes.THUMBACTIVE)
+    removeClass(this.classes.THUMBACTIVE, this.elements[this.index])
     this.index = index
-    this.elements[index].addClass(this.classes.THUMBACTIVE)
+    addClass(this.classes.THUMBACTIVE, this.elements[index])
   }
@@ -93,3 +103,3 @@
   appendTo (element) {
-    this.$thumbs.appendTo(element)
+    append(this.thumbs, element)
   }
@@ -96,0 +106,0 @@ }

src/components/overlay.js

@@ -0,1 +1,6 @@
+import { addClass, removeClass } from '@pluginjs/dom/classes'
+import { setStyle } from '@pluginjs/dom/styled'
+import { bindEvent } from '@pluginjs/dom/events'
+import { append, query } from '@pluginjs/dom/html'
+
 class overlay {
@@ -10,3 +15,3 @@ constructor (instance) {
   init () {
-    this.$overlay = this.instance.getElement('overlay')
+    this.overlay = this.instance.getElement('overlay')
 
@@ -19,11 +24,14 @@ this.bind()
   setStyle () {
-    this.$overlay.css({
-      height: Pj.$doc.height(),
-      position: 'absolute'
-    })
+    setStyle(
+      {
+        height: Pj.doc.innerHeight,
+        position: 'absolute'
+      },
+      this.overlay
+    )
 
     if (this.options.theme === null || this.options.theme === 'white') {
-      this.$overlay.addClass(this.classes.WHITE)
+      addClass(this.classes.WHITE, this.overlay)
     } else {
-      this.$overlay.addClass(this.classes.BLACK)
+      addClass(this.classes.BLACK, this.overlay)
     }
@@ -33,19 +41,25 @@ }
   bind () {
-    this.$overlay.on('click', () => {
-      if (this.options.clickBgClose) {
-        this.close()
-      }
-    })
+    bindEvent(
+      {
+        type: 'click',
+        handler: () => {
+          if (this.options.clickBgClose) {
+            this.close()
+          }
+        }
+      },
+      this.overlay
+    )
   }
 
   appendToBody () {
-    this.$overlay.prependTo($(document.body))
+    append(this.overlay, document.body)
   }
 
   hide () {
-    this.$overlay.hide()
+    this.overlay.style.display = 'none'
   }
 
   show () {
-    this.$overlay.show()
+    this.overlay.style.display = ''
 
@@ -56,7 +70,12 @@ this.fadeIn()
   fadeIn () {
-    this.$overlay.addClass(this.classes.READY)
+    this.reflow()
+    addClass(this.classes.READY, this.overlay)
   }
 
+  reflow () {
+    return this.overlay.offsetHeight
+  }
+
   fadeOut () {
-    this.$overlay.removeClass(this.classes.READY)
+    removeClass(this.classes.READY, this.overlay)
   }
@@ -63,0 +82,0 @@ }

src/components/slide/itemContainer.js

@@ -0,1 +1,4 @@
+import { addClass, removeClass } from '@pluginjs/dom/classes'
+import { setStyle } from '@pluginjs/dom/styled'
+import { append, query } from '@pluginjs/dom/html'
 import Image from './modules/image'
@@ -18,7 +21,7 @@ import Video from './modules/video'
   init () {
-    this.$item = this.instance.getElement('item')
-    this.$inner = this.$item.find(`.${this.classes.ITEMINNER}`)
+    this.item = this.instance.getElement('item')
+    this.inner = query(`.${this.classes.ITEMINNER}`, this.item)
     // this.instance.lastType = ''
     this.lastType = 'null'
-    // console.log('text inner', this.$inner.length)
+    // console.log('text inner', this.inner.length)
     // this.uptate()
@@ -78,3 +81,3 @@ this.updateType = {
   appendTo (el) {
-    this.$item.appendTo(el)
+    append(this.item, el)
   }
@@ -84,5 +87,11 @@
     const left = size * Pj.windowWidth
-    this.$item.css('left', left)
+    setStyle({ left }, this.item)
   }
 
+  getImage () {
+    if (['image'].includes(this.type)) {
+      return this[this.type].image
+    }
+  }
+
   update (index) {
@@ -125,3 +134,3 @@ const type = this.items[index].type
         this.removeType[this.lastType]()
-        this.image.appendTo(this.$inner)
+        this.image.appendTo(this.inner)
       }
@@ -132,3 +141,3 @@ this.image.update(this.index)
         this.removeType[this.lastType]()
-        this.image.appendTo(this.$inner)
+        this.image.appendTo(this.inner)
       }
@@ -144,3 +153,3 @@ this.image.update(this.index)
         this.removeType[this.lastType]()
-        this.video.appendTo(this.$inner)
+        this.video.appendTo(this.inner)
       }
@@ -151,3 +160,3 @@ this.video.update(this.index)
         this.removeType[this.lastType]()
-        this.video.appendTo(this.$inner)
+        this.video.appendTo(this.inner)
       }
@@ -163,7 +172,7 @@ this.video.update(this.index)
         this.removeType[this.lastType]()
-        this.map.appendTo(this.$inner)
+        this.map.appendTo(this.inner)
       }
     } else if (this.type !== this.lastType || this.lastType === 'null') {
       this.removeType[this.lastType]()
-      this.map.appendTo(this.$inner)
+      this.map.appendTo(this.inner)
     }
@@ -177,7 +186,7 @@ }
         this.removeType[this.lastType]()
-        this.iframe.appendTo(this.$inner)
+        this.iframe.appendTo(this.inner)
       }
     } else if (this.type !== this.lastType || this.lastType === 'null') {
       this.removeType[this.lastType]()
-      this.iframe.appendTo(this.$inner)
+      this.iframe.appendTo(this.inner)
     }
@@ -191,3 +200,3 @@ }
         this.removeType[this.lastType]()
-        this.inline.appendTo(this.$inner)
+        this.inline.appendTo(this.inner)
       }
@@ -198,3 +207,3 @@ this.inline.update(this.index)
         this.removeType[this.lastType]()
-        this.inline.appendTo(this.$inner)
+        this.inline.appendTo(this.inner)
       }
@@ -201,0 +210,0 @@ this.inline.update(this.index)

src/components/slide/modules/ajax.js

@@ -0,2 +1,7 @@
+import { addClass, removeClass, hasClass } from '@pluginjs/dom/classes'
+import { setStyle } from '@pluginjs/dom/styled'
+import { bindEvent, removeEvent } from '@pluginjs/dom/events'
+import { append, parseHTML, query, insertBefore } from '@pluginjs/dom/html'
 import Base from './base'
+
 class Ajax extends Base {
@@ -47,14 +52,14 @@ constructor (instance) {
     if (status === 'error') {
-      this.content.removeClass(this.classes.LOADED)
-      this.loader.html('load Ajax Error')
-      this.loader.removeClass(this.classes.HIDE)
+      removeClass(this.classes.LOADED, this.content)
+      this.loader.innerHTML = 'load Ajax Error'
+      removeClass(this.classes.HIDE, this.loader)
       // todo   show  error tip
     } else if (status === 'loading') {
-      this.content.removeClass(this.classes.LOADED)
-      this.loader.html('loading')
-      this.loader.removeClass(this.classes.HIDE)
+      removeClass(this.classes.LOADED, this.content)
+      this.loader.innerHTML = 'loading'
+      removeClass(this.classes.HIDE, this.loader)
       // todo    show loadind  tip
     } else if (status === 'loaded') {
-      this.content.addClass(this.classes.LOADED)
-      this.loader.addClass(this.classes.HIDE)
+      addClass(this.classes.LOADED, this.content)
+      addClass(this.classes.HIDE, this.loader)
     }
@@ -64,9 +69,9 @@ }
   appendTo (el) {
-    this.ajax.appendTo(el)
-    this.loader = el.find(`.${this.classes.LOADER}`)
+    append(this.ajax, el)
+    this.loader = query(`.${this.classes.LOADER}`, el)
   }
 
   remove () {
-    this.content.addClass(this.classes.HIDE)
-    this.ajax.detach()
+    addClass(this.classes.HIDE, this.content)
+    this.ajax.remove()
   }
@@ -73,0 +78,0 @@ }

src/components/slide/modules/base.js

@@ -0,1 +1,6 @@
+import { addClass, removeClass } from '@pluginjs/dom/classes'
+import { setStyle } from '@pluginjs/dom/styled'
+import { bindEvent, removeEvent } from '@pluginjs/dom/events'
+import { append, query } from '@pluginjs/dom/html'
+
 class Base {
@@ -10,8 +15,14 @@ constructor (instance) {
     if (this.options.title) {
-      this.$title = instance.getElement('title')
-      this.$title.on('click', event => {
-        event.stopPropagation()
-      })
+      this.title = instance.getElement('title')
+      bindEvent(
+        {
+          type: 'click',
+          handler: event => {
+            event.stopPropagation()
+          }
+        },
+        this.title
+      )
 
-      this.$title.appendTo(this.content)
+      append(this.title, this.content)
     }
@@ -22,3 +33,3 @@ }
     if (this.options.title) {
-      this.$title.html(title)
+      this.title.innerHTML = title
     }
@@ -28,8 +39,9 @@ }
   appendTo (el) {
-    this.content.appendTo(el)
-    this.loader = el.find(`.${this.classes.LOADER}`)
+    append(this.content, el)
+    this.inner = el
+    this.loader = query(`.${this.classes.LOADER}`, el)
   }
 
   remove () {
-    this.content.detach()
+    this.content.remove()
   }
@@ -36,0 +48,0 @@ }

src/components/slide/modules/iframe.js

@@ -0,2 +1,7 @@
+import { addClass, removeClass, hasClass } from '@pluginjs/dom/classes'
+import { setStyle } from '@pluginjs/dom/styled'
+import { bindEvent, removeEvent } from '@pluginjs/dom/events'
+import { append, parseHTML, query, prepend } from '@pluginjs/dom/html'
 import Base from './base'
+
 class Iframe extends Base {
@@ -12,3 +17,3 @@ constructor (instance) {
 
-    this.iframe.prependTo(this.content)
+    prepend(this.iframe, this.content)
 
@@ -25,3 +30,10 @@ this.loadHandler = () => {
   bind () {
-    this.iframe.on('load', this.loadHandler)
+    bindEvent(
+      {
+        type: 'load',
+        handler: this.loadHandler
+      },
+      this.iframe
+    )
+    // this.iframe.on('load', this.loadHandler)
   }
@@ -34,3 +46,3 @@
 
-    this.iframe.attr('src', data.href)
+    this.iframe.setAttribute('src', data.href)
     this.updateStatus('loading')
@@ -41,14 +53,14 @@ }
     if (status === 'error') {
-      this.content.removeClass(this.classes.LOADED)
-      this.loader.html('loadError')
-      this.loader.removeClass(this.classes.HIDE)
+      removeClass(this.classes.LOADED, this.content)
+      this.loader.innerHTML = 'loadError'
+      removeClass(this.classes.HIDE, this.loader)
       // todo   show  error tip
     } else if (status === 'loading') {
-      this.content.removeClass(this.classes.LOADED)
-      this.loader.html('loading')
-      this.loader.removeClass(this.classes.HIDE)
+      removeClass(this.classes.LOADED, this.content)
+      this.loader.innerHTML = 'loading'
+      removeClass(this.classes.HIDE, this.loader)
       // todo    show loadind  tip
     } else if (status === 'loaded') {
-      this.content.addClass(this.classes.LOADED)
-      this.loader.addClass(this.classes.HIDE)
+      addClass(this.classes.LOADED, this.content)
+      addClass(this.classes.HIDE, this.loader)
     }
@@ -65,3 +77,3 @@ }
   remove () {
-    this.iframe[0].src = '//about:blank'
+    this.iframe.src = '//about:blank'
     this.append = false
@@ -73,3 +85,3 @@
   resetSrc () {
-    this.iframe[0].src = '//about:blank'
+    this.iframe.src = '//about:blank'
   }
@@ -76,0 +88,0 @@ }

src/components/slide/modules/image.js

@@ -0,2 +1,7 @@
+import { addClass, removeClass, hasClass } from '@pluginjs/dom/classes'
+import { setStyle } from '@pluginjs/dom/styled'
+import { bindEvent, removeEvent } from '@pluginjs/dom/events'
+import { append, parseHTML, query, prepend } from '@pluginjs/dom/html'
 import Base from './base'
+
 class Image extends Base {
@@ -10,13 +15,15 @@ constructor (instance) {
   init () {
-    this.image = this.instance.getElement('image').on('mousedown', () => false)
+    this.image = this.instance.getElement('image')
 
-    this.image.prependTo(this.content)
+    this.image.ondragstart = () => false
+
+    prepend(this.image, this.content)
   }
 
   update (index) {
-    const data = this.items[index]
+    const itemData = this.items[index]
 
-    this.setTitle(data.title)
+    this.setTitle(itemData.title)
 
-    if (data.loadError) {
+    if (itemData.loadError) {
       this.updateStatus('error')
@@ -26,7 +33,8 @@ return
 
-    if (!data.loaded) {
+    if (!itemData.loaded) {
       this.updateStatus('loading')
       const loadCallback = () => {
         this.updateStatus('loaded')
-        this.image[0].src = data.href
+        this.image.src = itemData.href
+        this.instance.trigger('loaded', itemData)
       }
@@ -41,3 +49,3 @@
       this.updateStatus('loaded')
-      this.image[0].src = data.href
+      this.image.src = itemData.href
     }
@@ -49,30 +57,32 @@
   loadImage (index, loadCallback, errorCallback) {
-    const data = this.items[index]
-    if (data.loaded || data.loadError) {
+    const itemData = this.items[index]
+    if (itemData.loaded || itemData.loadError) {
       return
     }
 
-    if (!data.hasBind || this.instance.length <= 2) {
-      data.img = `<img class=${this.classes.IMG} />`
-      $(data.img)
-        .on('load', () => {
-          data.loaded = true
-          if (typeof loadCallback === 'function') {
-            if (index !== this.index) {
-              return
-            }
-            loadCallback()
+    if (!itemData.hasBind || this.instance.length <= 2) {
+      itemData.img = parseHTML(`<img class=${this.classes.IMG} />`)
+
+      itemData.img.onload = () => {
+        itemData.loaded = true
+        if (typeof loadCallback === 'function') {
+          if (index !== this.index) {
+            return
           }
-        })
-        .on('error', () => {
-          data.loadError = true
-          if (typeof errorCallback === 'function') {
-            if (index !== this.index) {
-              return
-            }
-            errorCallback()
+          loadCallback()
+        }
+      }
+
+      itemData.img.onerror = () => {
+        itemData.loadError = true
+        if (typeof errorCallback === 'function') {
+          if (index !== this.index) {
+            return
           }
-        })
-        .attr('src', data.href)
-      data.hasBind = true
+          errorCallback()
+        }
+      }
+
+      itemData.img.setAttribute('src', itemData.href)
+      itemData.hasBind = true
     }
@@ -83,14 +93,14 @@ }
     if (status === 'error') {
-      this.content.removeClass(this.classes.LOADED)
-      this.loader.html('loadError')
-      this.loader.removeClass(this.classes.HIDE)
+      this.content.removeClass(this.classes.LOADED, this.content)
+      this.loader.innerHTML = 'loadError'
+      removeClass(this.classes.HIDE, this.loader)
       // todo   show  error tip
     } else if (status === 'loading') {
-      this.content.removeClass(this.classes.LOADED)
-      this.loader.html('loading')
-      this.loader.removeClass(this.classes.HIDE)
+      removeClass(this.classes.LOADED, this.content)
+      this.loader.innerHTML = 'loading'
+      removeClass(this.classes.HIDE, this.loader)
       // todo    show loadind  tip
     } else if (status === 'loaded') {
-      this.content.addClass(this.classes.LOADED)
-      this.loader.addClass(this.classes.HIDE)
+      addClass(this.classes.LOADED, this.content)
+      addClass(this.classes.HIDE, this.loader)
     }
@@ -97,0 +107,0 @@ }

src/components/slide/modules/inline.js

@@ -0,2 +1,7 @@
+import { addClass, removeClass, hasClass } from '@pluginjs/dom/classes'
+import { setStyle } from '@pluginjs/dom/styled'
+import { bindEvent, removeEvent } from '@pluginjs/dom/events'
+import { append, parseHTML, query, prepend } from '@pluginjs/dom/html'
 import Base from './base'
+
 class Inline extends Base {
@@ -11,4 +16,3 @@ constructor (instance) {
     this.inline = this.instance.getElement('inline')
-
-    this.inline.prependTo(this.content)
+    prepend(this.inline, this.content)
   }
@@ -18,19 +22,26 @@
     const data = this.items[index]
-    this.inline.empty()
+    this.inline.innerHTML = ''
 
     this.setTitle(data.title)
 
-    this.htmlPop = $(data.href)
-      .clone()
-      .on('click', event => {
-        event.stopPropagation()
-      })
-    if (!this.htmlPop.length) {
+    this.htmlPop = query(data.href).cloneNode(true)
+
+    bindEvent(
+      {
+        type: 'click',
+        handler: event => {
+          event.stopPropagation()
+        }
+      },
+      this.htmlPop
+    )
+
+    if (!this.htmlPop) {
       this.updateStatus('error')
     } else {
       this.updateStatus('loaded')
-      if (this.htmlPop.hasClass(this.classes.HIDE)) {
-        this.htmlPop.removeClass(this.classes.HIDE)
+      if (hasClass(this.classes.HIDE, this.htmlPop)) {
+        removeClass(this.classes.HIDE, this.htmlPop)
       }
-      this.htmlPop.appendTo(this.inline)
+      append(this.htmlPop, this.inline)
     }
@@ -41,9 +52,9 @@ }
     if (status === 'error') {
-      this.content.removeClass(this.classes.LOADED)
-      this.loader.html('Content not found')
-      this.loader.removeClass(this.classes.HIDE)
+      removeClass(this.classes.LOADED, this.content)
+      this.loader.innerHTML = 'Content not found'
+      removeClass(this.classes.HIDE, this.loader)
       // todo   show  error tip
     } else if (status === 'loaded') {
-      this.content.addClass(this.classes.LOADED)
-      this.loader.addClass(this.classes.HIDE)
+      addClass(this.classes.LOADED, this.content)
+      addClass(this.classes.HIDE, this.loader)
     }
@@ -53,3 +64,3 @@ }
   remove () {
-    this.htmlPop.addClass(this.classes.HIDE)
+    addClass(this.classes.HIDE, this.htmlPop)
     super.remove()
@@ -56,0 +67,0 @@ }

src/components/slide/modules/map.js

@@ -0,2 +1,7 @@
+import { addClass, removeClass, hasClass } from '@pluginjs/dom/classes'
+import { setStyle } from '@pluginjs/dom/styled'
+import { bindEvent, removeEvent } from '@pluginjs/dom/events'
+import { append, parseHTML, query, prepend } from '@pluginjs/dom/html'
 import Base from './base'
+
 class Map extends Base {
@@ -11,3 +16,3 @@ constructor (instance) {
     this.map = this.instance.getElement('map')
-    this.map.prependTo(this.content)
+    prepend(this.map, this.content)
 
@@ -24,7 +29,15 @@ this.loadHandler = () => {
   bind () {
-    this.map.on('load', this.loadHandler)
+    bindEvent(
+      {
+        type: 'load',
+        handler: this.loadHandler
+      },
+      this.map
+    )
+    // this.map.on('load', this.loadHandler)
   }
 
   unbind () {
-    this.map.off('load', this.loadHandler)
+    removeEvent('load', this.map)
+    // this.map.off('load', this.loadHandler)
   }
@@ -39,3 +52,3 @@
     // this.update
-    this.map.attr('src', src)
+    this.map.setAttribute('src', src)
     this.updateStatus('loading')
@@ -46,14 +59,14 @@ }
     if (status === 'error') {
-      this.content.removeClass(this.classes.LOADED)
-      this.loader.html('loadError')
-      this.loader.removeClass(this.classes.HIDE)
+      removeClass(this.classes.LOADED, this.content)
+      this.loader.innerHTML = 'loadError'
+      removeClass(this.classes.HIDE, this.loader)
       // todo   show  error tip
     } else if (status === 'loading') {
-      this.content.removeClass(this.classes.LOADED)
-      this.loader.html('loading')
-      this.loader.removeClass(this.classes.HIDE)
+      removeClass(this.classes.LOADED, this.content)
+      this.loader.innerHTML = 'loading'
+      removeClass(this.classes.HIDE, this.loader)
       // todo    show loadind  tip
     } else if (status === 'loaded') {
-      this.content.addClass(this.classes.LOADED)
-      this.loader.addClass(this.classes.HIDE)
+      addClass(this.classes.LOADED, this.content)
+      addClass(this.classes.HIDE, this.loader)
     }
@@ -70,7 +83,7 @@ }
   resetSrc () {
-    this.map[0].src = '//about:blank'
+    this.map.src = '//about:blank'
   }
 
   remove () {
-    this.map[0].src = '//about:blank'
+    this.map.src = '//about:blank'
     this.append = false
@@ -77,0 +90,0 @@

src/components/slide/modules/video.js

@@ -0,2 +1,7 @@
+import { addClass, removeClass, hasClass } from '@pluginjs/dom/classes'
+import { setStyle } from '@pluginjs/dom/styled'
+import { bindEvent, removeEvent } from '@pluginjs/dom/events'
+import { append, parseHTML, query, prepend } from '@pluginjs/dom/html'
 import Base from './base'
+
 class Video extends Base {
@@ -9,13 +14,26 @@ constructor (instance) {
 
+  init () {
+    this.videoContainer = this.instance.getElement('video')
+    prepend(this.videoContainer, this.content)
+
+    this.bind()
+  }
+
   bind () {
-    this.videoContainer.on('click', e => {
-      if (!this.instance.drap) {
-        e.stopPropagation()
-        console.log('click video')
-        this.videoContainer.addClass(this.classes.LOADING)
-        if (!this.instance.video) {
-          this.createVideo()
+    bindEvent(
+      {
+        type: 'click',
+        handler: e => {
+          if (!this.instance.drap) {
+            e.stopPropagation()
+            console.log('click video')
+            addClass(this.classes.LOADING, this.videoContainer)
+            if (!this.instance.video) {
+              this.createVideo()
+            }
+          }
         }
-      }
-    })
+      },
+      this.videoContainer
+    )
 
@@ -27,29 +45,20 @@ // this.videoContainer.on('mousedown', e => {
 
-  init () {
-    this.videoContainer = this.instance.getElement('video')
-    this.videoContainer.prependTo(this.content)
-
-    this.bind()
-  }
-
   createVideo () {
-    this.instance.video = this.videoContainer
-      .asVideo({
-        type: this.sourse,
-        url: this.href,
-        controls: true,
-        onPlay: () => {
-          this.videoContainer.removeClass(this.classes.LOADING)
-          this.videoContainer.addClass(this.classes.PLAY)
-        },
-        onDestroy: () => {
-          console.log('destroy')
-          this.videoContainer.removeClass(this.classes.PLAY)
-          this.instance.video = ''
-        }
-      })
-      .data('video')
+    this.instance.video = Pj.video(this.videoContainer, {
+      type: this.sourse,
+      url: this.href,
+      controls: true,
+      onPlay: () => {
+        removeClass(this.classes.LOADING, this.videoContainer)
+        addClass(this.classes.PLAY, this.videoContainer)
+      },
+      onDestroy: () => {
+        console.log('destroy')
+        removeClass(this.classes.PLAY, this.videoContainer)
+        this.instance.video = ''
+      }
+    })
 
-    this.instance.video.load()
-    // this.instance.video.mute()
+    this.instance.video('load')
+    // this.instance.video('mute')
   }
@@ -98,24 +107,23 @@
     if (!data.hasBind || this.instance.length <= 2) {
-      data.img = `<img class=${this.classes.IMG} />`
-      $(data.img)
-        .on('load', () => {
-          data.loaded = true
-          if (typeof loadCallback === 'function') {
-            if (index !== this.index) {
-              return
-            }
-            loadCallback()
+      data.img = parseHTML(`<img class=${this.classes.IMG} />`)
+      data.img.onload = () => {
+        data.loaded = true
+        if (typeof loadCallback === 'function') {
+          if (index !== this.index) {
+            return
           }
-        })
-        .on('error', () => {
-          console.log('load error')
-          data.loadError = true
-          if (typeof errorCallback === 'function') {
-            if (index !== this.index) {
-              return
-            }
-            errorCallback()
+          loadCallback()
+        }
+      }
+      data.img.onerror = () => {
+        data.loadError = true
+        if (typeof errorCallback === 'function') {
+          if (index !== this.index) {
+            return
           }
-        })
-        .attr('src', this.poster)
+          errorCallback()
+        }
+      }
+
+      data.img.setAttribute('src', this.poster)
       data.hasBind = true
@@ -126,7 +134,10 @@ }
   updateBg () {
-    this.videoContainer.css({
-      'background-image': `url(${this.poster})`,
-      width: '900px',
-      height: '641px'
-    })
+    setStyle(
+      {
+        'background-image': `url(${this.poster})`,
+        width: '900px',
+        height: '641px'
+      },
+      this.videoContainer
+    )
   }
@@ -136,14 +147,14 @@
     if (status === 'error') {
-      this.content.removeClass(this.classes.LOADED)
-      this.loader.html('load ImageError click open video')
-      this.loader.removeClass(this.classes.HIDE)
+      removeClass(this.classes.LOADED, this.content)
+      this.loader.innerHTML = 'load ImageError click open video'
+      removeClass(this.classes.HIDE, this.loader)
       // todo   show  error tip
     } else if (status === 'loading') {
-      this.content.removeClass(this.classes.LOADED)
-      this.loader.html('loading')
-      this.loader.removeClass(this.classes.HIDE)
+      removeClass(this.classes.LOADED, this.content)
+      this.loader.innerHTML = 'loading'
+      removeClass(this.classes.HIDE, this.loader)
       // todo    show loadind  tip
     } else if (status === 'loaded') {
-      this.content.addClass(this.classes.LOADED)
-      this.loader.addClass(this.classes.HIDE)
+      addClass(this.classes.LOADED, this.content)
+      addClass(this.classes.HIDE, this.loader)
     }
@@ -150,0 +161,0 @@ }

src/components/slide/slide.js

@@ -0,1 +1,13 @@
+import { addClass, removeClass, hasClass } from '@pluginjs/dom/classes'
+import { setStyle } from '@pluginjs/dom/styled'
+import { bindEvent, removeEvent } from '@pluginjs/dom/events'
+import {
+  append,
+  prepend,
+  parseHTML,
+  query,
+  queryAll,
+  getObjData,
+  insertBefore
+} from '@pluginjs/dom/html'
 import ITEM from './itemContainer'
@@ -14,11 +26,10 @@ import Hammer from 'hammerjs'
   init () {
-    this.$slide = this.instance.getElement('slide')
+    this.slide = this.instance.getElement('slide')
     this.translate = 0
     this.instance.enter('enable')
 
-    this.appendTo(this.instance.$wrap)
+    prepend(this.slide, this.instance.wrap)
     this.bind()
 
     this.createItem()
-    // this.goTo(this.instance.activeIndex)
   }
@@ -31,3 +42,3 @@
       const item = new ITEM(this.instance)
-      item.appendTo(this.$slide)
+      item.appendTo(this.slide)
       item.left(i - 1)
@@ -40,17 +51,8 @@ this.plugins.push(item)
 
-  show () {
-    this.resetPosition()
-    this.updateItem()
-    this.$slide.show()
-
-    this.fadeIn()
-  }
-
   resetPosition () {
     this.translate = 0
-    // this.$slide.removeClass(this.classes.SLIDETRANSITION)
-    this.$slide.css({ transform: 'translate3d(0px, 0px, 0px)' })
+    setStyle({ transform: 'translate3d(0px, 0px, 0px)' }, this.slide)
 
-    if (!this.$slide.hasClass(this.classes.SLIDETRANSITION)) {
-      this.$slide.addClass(this.classes.SLIDETRANSITION)
+    if (!hasClass(this.classes.SLIDETRANSITION, this.slide)) {
+      addClass(this.classes.SLIDETRANSITION, this.slide)
     }
@@ -135,7 +137,7 @@ }
     }, 400)
-    if (!this.$slide.hasClass(this.classes.SLIDETRANSITION)) {
-      this.$slide.addClass(this.classes.SLIDETRANSITION)
+    if (!hasClass(this.classes.SLIDETRANSITION, this.slide)) {
+      addClass(this.classes.SLIDETRANSITION, this.slide)
     }
     const p = size * -1 * Pj.windowWidth
-    this.$slide.css({ transform: `translate3d(${p}px, 0px, 0px)` })
+    setStyle({ transform: `translate3d(${p}px, 0px, 0px)` }, this.slide)
   }
@@ -145,4 +147,4 @@
     if (this.instance.video) {
-      this.instance.video.destroy()
-      this.instance.video = ''
+      this.instance.video('destroy')
+      this.instance.video = null
     }
@@ -152,16 +154,22 @@ }
   bind () {
-    this.$slide.on('click', event => {
-      if (!this.instance.drap) {
-        const target = $(event.target)
-        if (target.hasClass(this.classes.IMAGE)) {
-          if (this.options.clickImageClose) {
-            this.instance.close()
+    bindEvent(
+      {
+        type: 'click',
+        handler: event => {
+          if (!this.instance.drap) {
+            const target = event.target
+            if (hasClass(this.classes.IMAGE, target)) {
+              if (this.options.clickImageClose) {
+                this.instance.close()
+              }
+            } else if (hasClass(this.classes.ITEMINNER, target)) {
+              if (this.options.clickBgClose) {
+                this.instance.close()
+              }
+            }
           }
-        } else if (target.hasClass(this.classes.ITEMINNER)) {
-          if (this.options.clickBgClose) {
-            this.instance.close()
-          }
         }
-      }
-    })
+      },
+      this.slide
+    )
 
@@ -173,3 +181,3 @@ Pj.emitter.on('resize', this.resizeHandle.bind(this))
 
-    this.hammer = new Hammer(this.$slide[0])
+    this.hammer = new Hammer(this.slide)
     this.hammer.get('pan').set({ direction: Hammer.DIRECTION_HORIZONTAL })
@@ -192,7 +200,7 @@ this.hammer.get('swipe').set({ direction: Hammer.DIRECTION_HORIZONTAL })
       const drapDistance = event.deltaX
-      if (this.$slide.hasClass(this.classes.SLIDETRANSITION)) {
-        this.$slide.removeClass(this.classes.SLIDETRANSITION)
+      if (hasClass(this.classes.SLIDETRANSITION, this.slide)) {
+        removeClass(this.classes.SLIDETRANSITION, this.slide)
       }
       const p = this.translate * -1 * Pj.windowWidth + drapDistance
-      this.$slide.css({ transform: `translate3d(${p}px, 0px, 0px)` })
+      setStyle({ transform: `translate3d(${p}px, 0px, 0px)` }, this.slide)
     })
@@ -202,7 +210,7 @@ this.hammer.on('panend', event => {
       if (Math.abs(drapDistance) < 800) {
-        if (!this.$slide.hasClass(this.classes.SLIDETRANSITION)) {
-          this.$slide.addClass(this.classes.SLIDETRANSITION)
+        if (!hasClass(this.classes.SLIDETRANSITION, this.slide)) {
+          addClass(this.classes.SLIDETRANSITION, this.slide)
         }
         const p = this.translate * -1 * Pj.windowWidth
-        this.$slide.css({ transform: `translate3d(${p}px, 0px, 0px)` })
+        setStyle({ transform: `translate3d(${p}px, 0px, 0px)` }, this.slide)
       } else {
@@ -230,18 +238,17 @@ const direction = drapDistance > 0 ? 'pre' : 'next'
 
-    if (this.$slide.hasClass(this.classes.SLIDETRANSITION)) {
-      this.$slide.removeClass(this.classes.SLIDETRANSITION)
+    if (hasClass(this.classes.SLIDETRANSITION, this.slide)) {
+      removeClass(this.classes.SLIDETRANSITION, this.slide)
     }
     const p = this.translate * -1 * Pj.windowWidth
-    this.$slide.css({ transform: `translate3d(${p}px, 0px, 0px)` })
+    setStyle({ transform: `translate3d(${p}px, 0px, 0px)` }, this.slide)
   }
 
-  appendTo (el) {
-    this.$slide.prependTo(el)
+  getCurrentImage () {
+    return this.plugins[this.activePlugin].getImage()
   }
 
   hide () {
-    this.$slide.hide()
+    this.slide.style.display = 'none'
     this.closeVideo()
     if (this.instance.iframe) {
-      console.log('debug', this.instance.iframe)
       this.instance.iframe.resetSrc()
@@ -251,8 +258,21 @@ }
 
+  show () {
+    this.resetPosition()
+    this.updateItem()
+    this.slide.style.display = ''
+
+    this.fadeIn()
+  }
+
   fadeIn () {
-    this.$slide.addClass(this.classes.READY)
+    this.reflow()
+    addClass(this.classes.READY, this.slide)
   }
 
+  reflow () {
+    return this.slide.offsetHeight
+  }
+
   fadeOut () {
-    this.$slide.removeClass(this.classes.READY)
+    removeClass(this.classes.READY, this.slide)
   }
@@ -259,0 +279,0 @@ }

src/components/topBar.js

@@ -0,1 +1,12 @@
+import { addClass, removeClass, hasClass } from '@pluginjs/dom/classes'
+import { setStyle } from '@pluginjs/dom/styled'
+import { bindEvent, removeEvent } from '@pluginjs/dom/events'
+import {
+  append,
+  parseHTML,
+  query,
+  queryAll,
+  getObjData
+} from '@pluginjs/dom/html'
+
 class TopBar {
@@ -10,6 +21,6 @@ constructor (instance) {
   init () {
-    this.$topBar = this.instance.getElement('topBar')
-    this.$topBar.appendTo(this.instance.$wrap)
+    this.topBar = this.instance.getElement('topBar')
+    append(this.topBar, this.instance.wrap)
 
-    this.$counter = this.$topBar.find(`#${this.classes.COUNTER}`)
+    this.counter = query(`#${this.classes.COUNTER}`, this.topBar)
 
@@ -44,19 +55,24 @@ this.bind()
     const t = `${count} / ${length}`
-    this.$counter.html(t)
+    this.counter.textContent = t
   }
 
   bind () {
-    this.$topBar.on('click', e => {
-      const id = e.target.id
-      const action = id.split('-').pop()
-      const keys = Object.keys(this.actions)
-      if (keys.indexOf(action) !== -1) {
-        this.actions[action].call(this)
-      }
-    })
+    bindEvent(
+      {
+        type: 'click',
+        handler: e => {
+          const id = e.target.id
+          const action = id.split('-').pop()
+          const keys = Object.keys(this.actions)
+          if (keys.indexOf(action) !== -1) {
+            this.actions[action].call(this)
+          }
+        }
+      },
+      this.topBar
+    )
   }
 
   in () {
-    this.$topBar.addClass(this.classes.SLIDETOP)
-
+    addClass(this.classes.SLIDETOP, this.topBar)
     this.updateCount()
@@ -66,10 +82,6 @@ }
   out () {
-    this.$topBar.removeClass(this.classes.SLIDETOP)
+    removeClass(this.classes.SLIDETOP, this.topBar)
   }
-
-  close () {
-    console.log('close')
-  }
 }
 
 export default TopBar

src/constant.js

@@ -82,2 +82,3 @@ export const namespace = 'lightbox'
   clickImageClose: true,
+  effect: 'zoom',
   thumbs: true,
@@ -84,0 +85,0 @@ title: true,

src/main.js

 import Component from '@pluginjs/component'
+import { deepMerge } from '@pluginjs/utils'
 import templateEngine from '@pluginjs/template'
-import $ from 'jquery'
+import { addClass, removeClass } from '@pluginjs/dom/classes'
+import { setStyle } from '@pluginjs/dom/styled'
+import { bindEvent } from '@pluginjs/dom/events'
+import { append, parseHTML, query, queryAll } from '@pluginjs/dom/html'
 import Pj, {
-  deregister,
   eventable,
@@ -13,2 +16,3 @@ register,
 } from '@pluginjs/pluginjs'
+import ZOOM from './zoom'
 import OVERLAY from './components/overlay'
@@ -49,3 +53,3 @@ import UTILS from './utils'
 
-    this.options = $.extend(true, {}, DEFAULTS, options, this.getDataOptions())
+    this.options = deepMerge(DEFAULTS, options, this.getDataOptions())
 
@@ -67,12 +71,30 @@ this.initClasses(CLASSES)
     if (this.options.delegate) {
-      this.elements = this.$element.find(this.options.delegate)
+      this.elements = queryAll(this.options.delegate, this.element)
 
-      this.$element
-        .off(eventName)
-        .on(eventName, this.options.delegate, eventHandler)
+      bindEvent(
+        {
+          type: 'click',
+          identity: {
+            type: 'tagName',
+            value: this.options.delegate
+          },
+          handler: eventHandler
+        },
+        this.element
+      )
     } else {
-      this.elements = this.$element.eq(0)
-      this.$element.off(eventName).on(eventName, eventHandler)
+      this.elements = this.element
+      bindEvent(
+        {
+          type: 'click',
+          handler: eventHandler
+        },
+        this.element
+      )
     }
 
+    if (this.options.effect === 'zoom') {
+      ZOOM.init(this)
+    }
+
     this.enter('initialized')
@@ -104,2 +126,7 @@ this.trigger(EVENTS.READY)
 
+    if (!this.activeIndex) {
+      return
+    }
+    this.openIndex = this.activeIndex
+
     this.open()
@@ -114,4 +141,10 @@ }
 
-    this.parseItems()
-    this.createWrap()
+    this.items = this.parseItems()
+    this.wrap = this.getElement('wrap')
+    this.wrap.setAttribute('tabindex', -1)
+    if (this.options.theme === null || this.options.theme === 'white') {
+      addClass(this.classes.WHITE, this.wrap)
+    } else {
+      addClass(this.classes.BLACK, this.wrap)
+    }
     this.direction = 'next'
@@ -128,2 +161,3 @@ this.overlay = new OVERLAY(this)
 
+    append(this.wrap, document.body)
     this.show()
@@ -134,5 +168,8 @@ this.enter('init')
   show () {
-    this.setStyle()
+    if (this.is('show')) {
+      return
+    }
 
-    this.$wrap.show()
+    this.hideScrollbar()
+    this.wrap.style.display = ''
 
@@ -148,4 +185,32 @@ this.overlay.show()
     this.slide.show()
+
+    this.trigger('show')
+    this.enter('show')
   }
 
+  close () {
+    if (!this.is('show')) {
+      return
+    }
+
+    this.overlay.fadeOut()
+    this.slide.fadeOut()
+    if (this.options.thumbs) {
+      this.footer.out()
+    }
+    this.topBar.out()
+    if (this.length > 1) {
+      this.arrow.out()
+    }
+    setTimeout(() => {
+      this.overlay.hide()
+      this.wrap.style.display = 'none'
+      this.slide.hide()
+      this.reserveScrollbar()
+    }, 300)
+
+    this.trigger('close')
+    this.leave('show')
+  }
+
   next () {
@@ -213,28 +278,16 @@ if (!this.is('enable')) {
 
-  createWrap () {
-    this.$wrap = this.getElement('wrap').attr('tabindex', -1)
-    if (this.options.theme === null || this.options.theme === 'white') {
-      this.$wrap.addClass(this.classes.WHITE)
-    } else {
-      this.$wrap.addClass(this.classes.BLACK)
-    }
-
-    this.$wrap.prependTo($(document.body))
-  }
-
   parseItems () {
-    this.items = {}
+    const items = {}
     let count = 1
-    this.elements.each((index, element) => {
-      const el = $(element)
+    this.elements.forEach((el, index) => {
       const item = {}
-      item.type = el.data('type') || 'image'
-      item.href = el.attr('href')
-      item.poster = el.data('poster')
-      item.sourse = el.data('sourse')
-      item.thumbHref = el.children().attr('src')
+      item.type = el.dataset.type || 'image'
+      item.href = el.getAttribute('href')
+      item.poster = el.dataset.poster
+      item.sourse = el.dataset.sourse
+      item.thumbHref = el.children[0].getAttribute('src')
       item.index = count
       item.element = el
-      item.title = el.attr('title') || ''
-      item.content = el.attr('content') || ''
+      item.title = el.getAttribute('title') || ''
+      item.content = el.getAttribute('content') || ''
       item.loaded = false
@@ -244,10 +297,10 @@ item.loadError = false
 
-      this.items[index + 1] = item
+      items[count] = item
       count++
     })
     this.length = count - 1
-    // console.log('text', this.items, this.length)
+    return items
   }
 
-  setStyle () {
+  hideScrollbar () {
     const windowStyles = {}
@@ -262,23 +315,7 @@
 
-    $('html').css(windowStyles)
-    $('html').addClass(this.classes.OVERFLOWHIDE)
+    setStyle(windowStyles, query('html'))
+    addClass(this.classes.OVERFLOWHIDE, query('html'))
   }
 
-  close () {
-    this.overlay.fadeOut()
-    this.slide.fadeOut()
-    if (this.options.thumbs) {
-      this.footer.out()
-    }
-    this.topBar.out()
-    if (this.length > 1) {
-      this.arrow.out()
-    }
-    setTimeout(() => {
-      this.hide()
-      this.reserveStyle()
-    }, 300)
-  }
-
-  reserveStyle () {
+  reserveScrollbar () {
     const windowStyles = {}
@@ -291,13 +328,6 @@ if (UTILS.hasScrollBar(Pj.windowHeight)) {
     }
-    $('html').css(windowStyles)
-
-    $('html').removeClass(this.classes.OVERFLOWHIDE)
+    setStyle(windowStyles, query('html'))
+    removeClass(this.classes.OVERFLOWHIDE, query('html'))
   }
 
-  hide () {
-    this.overlay.hide()
-    this.$wrap.hide()
-    this.slide.hide()
-  }
-
   getElement (type) {
@@ -307,5 +337,7 @@ const template = this.options.templates[type]
     if (template) {
-      html = templateEngine.render(template.call(this), { classes: this.classes })
+      html = templateEngine.render(template.call(this), {
+        classes: this.classes
+      })
     }
-    return $(html)
+    return parseHTML(html)
   }
@@ -315,3 +347,3 @@
     if (this.is('disabled')) {
-      this.$element.removeClass(this.classes.DISABLED)
+      removeClass(this.classes.DISABLED, this.element)
       this.leave('disabled')
@@ -324,3 +356,3 @@ }
     if (!this.is('disabled')) {
-      this.$element.addClass(this.classes.DISABLED)
+      addClass(this.classes.DISABLED, this.element)
       this.enter('disabled')
@@ -332,3 +364,2 @@ }
 
-  @deregister
   destroy () {
@@ -339,7 +370,6 @@ if (this.is('initialized')) {
       if (this.options.theme) {
-        this.$element.removeClass(this.getThemeClass())
+        removeClass(this.getThemeClass(), this.element)
       }
       this.leave('initialized')
     }
-
     this.trigger(EVENTS.DESTROY)
@@ -346,0 +376,0 @@ super.destroy()

Fixed alerts

Wildcard dependency

Quality

Package has a dependency with a floating version range. This can cause issues if the dependency publishes a new major version.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

491037

increased by2.48%

Lines of code

13473

increased by2.6%

Number of medium quality alerts

1

decreased by-50%

Dependency changes

• + Added@pluginjs/dom@^0.0.2

• + Added@pluginjs/dom@0.0.2(transitive)

• + Added@pluginjs/is@0.8.9(transitive)

• + Added@pluginjs/utils@0.8.10(transitive)

• - Removedjquery@*

• - Removedjquery@3.7.1(transitive)

• Updated@pluginjs/component@^0.2.11

• Updated@pluginjs/pluginjs@^0.2.11

• Updated@pluginjs/template@^0.2.8

• Updated@pluginjs/video@^0.2.7