Merge pull request #14 from victorvoid/dev

remove loader container support

Author: rv-vmartins

README.md

@@ -56,7 +56,7 @@ Placeload
 
 import Placeload from 'placeload.js'
 
-const userContainer = Placeload
+const userLoader = Placeload
     .$('.user-placeload')
     .config({speed: '2s'})
     .line((element) => element.width(300).height(200))
@@ -68,10 +68,16 @@ const userContainer = Placeload
     .line((element) => element.width(250).height(20))
 
 
-userContainer.fold(
+userLoader.fold(
   (err) => console.log('error: ', err),
   (allElements) => console.log('allElements: ', allElements)
 )
+
+API.getUsers()
+  .then(users => {
+      userLoader.remove()
+    }
+  )
 ```
 
 ![](https://github.com/victorvoid/placeload.js/blob/master/docs/imgs/placeload_example.gif)

dist/placeload.js

@@ -62,7 +62,7 @@ <h2 class="user__name"><a href="#">Sr. João</a></h2>
 
         <script src="../dist/placeload.js"></script>
         <script>
-            Placeload
+            const user = Placeload
               .$('.user-placeload')
               .config({speed: '2s'})
               .line((element) => element.width(300).height(200))
@@ -74,6 +74,10 @@ <h2 class="user__name"><a href="#">Sr. João</a></h2>
                 (err) => console.log('error: ', err),
                 (allElements) => console.log('allElements: ', allElements)
               )
+            // simulation API
+            setTimeout(() => {
+                user.remove()
+            }, 2000)
         </script>
     </body>
 </html>

dist/placeload.js.map

@@ -6,28 +6,48 @@ const Right = Either.Right
 const Left = Either.Left
 
 const Placeload = {
-  $: (x) => place(IO(() => {
-    const container = document.querySelector(x)
-    if (container) {
+  $: (x) => utils(getHoldersElements(x), selector(x))
+}
+
+// selector :: String -> Either
+const selector = (x) => {
+  const element = document.querySelector(x)
+  if(element)
+    return Right(element)
+  return Left(`Don\' found ${x} element`)
+}
+
+// getHoldersElements :: String -> Either
+const getHoldersElements = (x) => {
+  return IO(() => {
+    return selector(x).chain((container) => {
       const elementPlaceload = styl(document.createElement('div')).addClass('placeload-background').toDOM()
       container.appendChild(elementPlaceload)
       return Right({
         container: container,
         placeload: elementPlaceload,
         elems: []
       })
-    }
-    return Left(`Don\' found ${x} element`)
-  }))
+    })
+  })
 }
 
 // place  :: IO -> Object
-const place = (_IO) => {
+const utils = (_IO, container) => {
   return ({
-    config: (configs) => place(configIO(_IO, configs)),
-    line: f => place(drawIO(f, _IO)),
-    spaceBetween: size => place(drawIO({spaceBetween: size}, _IO)),
-    fold: (err, succ) => _IO.runIO().either(err, succ),
+    config: (configs) => utils(configIO(_IO, configs), container),
+    line: f => utils(drawIO(f, _IO), container),
+    spaceBetween: size => utils(drawIO({spaceBetween: size}, _IO), container),
+    fold: (err, succ) => {
+      _IO.runIO().either(err, succ)
+      return {
+        remove: () => {
+          container.map(element => {
+            element.parentNode.removeChild(element);
+          })
+        }
+      }
+    },
     inspect: () => console.log('IO: ', _IO.toString())
   })
 }
@@ -58,10 +78,10 @@ const configIO = (_IO, config) => {
       const placeloadHeight = elem.placeload.style.height || 0
       const newHeightToPlaceload = parseInt(placeloadHeight) + parseInt(stylWithDefault.spaceBetween)
       const newElement = styl(document.createElement('div'))
-            .width('100%')
-            .height(stylWithDefault.spaceBetween)
-            .marginTop(placeloadHeight)
-            .addClass('placeload-masker').toDOM()
+        .width('100%')
+        .height(stylWithDefault.spaceBetween)
+        .marginTop(placeloadHeight)
+        .addClass('placeload-masker').toDOM()
 
       if (stylWithDefault.right) {
         runDrawRightLine(elem, stylWithDefault).runIO()
@@ -80,11 +100,11 @@ const runDrawRightLine = (elem, stylWithDefault) => {
     const lastChild = elem.elems[elem.elems.length - 2]
     const itemToRight = elem.elems[elem.elems.length - 1]
     const elementRow = styl(document.createElement('div'))
-          .addClass('placeload-masker')
-          .width('100%')
-          .height('10px')
-          .marginTop('20px')
-          .marginLeft(lastChild.style.marginLeft).toDOM()
+      .addClass('placeload-masker')
+      .width('100%')
+      .height('10px')
+      .marginTop('20px')
+      .marginLeft(lastChild.style.marginLeft).toDOM()
 
     styl(lastChild).hide()
     styl(itemToRight)
@@ -103,13 +123,13 @@ const createElemFolk = (elements, newElement, prop, value) => {
   return elements.map(elem => {
     const height = elem.placeload.style.height || 0
     switch (prop) {
-      case 'width':
-        styl(newElement).width(`100%`).marginLeft(`${value}%`).marginTop(height)
-        break
-      case 'height':
-        styl(newElement).height(`${value}px`)
-        styl(elem.placeload).height(`${parseInt(height) + value}px`)
-        break
+    case 'width':
+      styl(newElement).width(`100%`).marginLeft(`${value}%`).marginTop(height)
+      break
+    case 'height':
+      styl(newElement).height(`${value}px`)
+      styl(elem.placeload).height(`${parseInt(height) + value}px`)
+      break
     }
     elem.placeload.appendChild(newElement)
     return elem