Merge pull request #16 from drzzle-app/blogDroplets

Blog droplets
drzzle-app · Aug 21, 2020 · a273deb · a273deb
2 parents 9aac262 + e8d12cb
commit a273deb
Show file tree

Hide file tree

Showing 27 changed files with 570 additions and 18 deletions.
diff --git a/src/droplets/blog-list/index.js b/src/droplets/blog-list/index.js
@@ -0,0 +1,14 @@
+import Vue from 'vue';
+
+const template = require('./template.html');
+
+export default Vue.component('blog-list-droplet', {
+  template,
+  name: 'blog-list-droplet',
+  mounted() {
+    const $blogList = $(this.$refs.blogList);
+    $blogList.drzBlogList({
+      visible: 2,
+    });
+  },
+});
diff --git a/src/droplets/blog-list/plugin.js b/src/droplets/blog-list/plugin.js
@@ -0,0 +1,64 @@
+/* global jQuery */
+(($) => {
+  $.fn.drzBlogList = function drzBlogList(opts) {
+    const defaults = {
+      visible: 6,
+    };
+    const options = $.extend({}, defaults, opts);
+    const $blogList = $(this);
+    $blogList.each(function init() {
+      const $el = $(this);
+      const $blogItems = $el.find('.drzBlog-item');
+      const $loadMore = $el.find('.drzBlog-list-more');
+      const $footer = $el.find('.drzBlog-list-footer');
+      const methods = {
+        shown: options.visible,
+        total: $blogItems.length,
+        scanBlogs() {
+          $blogItems.each(function setItem() {
+            const $item = $(this);
+            const $itemNum = $item.index() + 1;
+            if (!$item.hasClass('drzBlog-item-show') && $itemNum <= methods.shown) {
+              $item.addClass('drzBlog-item-show');
+              const $img = $item.find('.drzBlog-item-img');
+              const src = $img.attr('data-src');
+              $img.attr('src', src);
+            }
+          });
+        },
+        loadMore(e) {
+          e.preventDefault();
+          if (methods.shown >= methods.total) {
+            return;
+          }
+          if (methods.shown + options.visible > methods.total) {
+            methods.shown = methods.total;
+            $loadMore.hide();
+            $footer.addClass('drzBlog-list-footerHidden');
+          } else {
+            methods.shown += options.visible;
+            if (methods.shown >= methods.total) {
+              $loadMore.hide();
+              $footer.addClass('drzBlog-list-footerHidden');
+            }
+          }
+          methods.scanBlogs();
+        },
+      };
+      methods.scanBlogs();
+      $loadMore.click(methods.loadMore);
+      $.fn.drzBlogList.destroy = () => {
+        methods.shown = options.visible;
+        $loadMore.off('click', methods.loadMore);
+        $footer.removeClass('drzBlog-list-footerHidden');
+        $blogItems.each(function setItem() {
+          const $item = $(this);
+          $item.removeClass('drzBlog-item-show');
+          const $img = $item.find('.drzBlog-item-img');
+          $img.attr('src', '');
+        });
+      };
+    });
+    return this;
+  };
+})(jQuery);
diff --git a/src/droplets/blog-list/template.html b/src/droplets/blog-list/template.html
@@ -0,0 +1,95 @@
+<div class="drzBlog-list" ref="blogList">
+  <ul class="drzBlog-list-items">
+    <li class="drzBlog-item">
+      <a href="#" class="drzBlog-item-link">
+        <div class="drzBlog-item-imgWrap">
+          <img class="drzBlog-item-img" data-src="https://cdn.drzzle.app/mock-images/default-images/mock-blog.svg" alt="blog image" />
+        </div>
+        <div class="drzBlog-item-data">
+          <div class="drzBlog-item-top">
+            <h4 class="drzBlog-item-header">Blog Header Here</h4>
+            <span class="drzBlog-item-info">Name | 12/12/20</span>
+          </div>
+          <hr class="drzBlog-item-break" />
+          <p class="drzBlog-item-preview">
+            Truffaut thundercats forage actually. Semiotics green juice DIY air plant irony typewriter tousled
+            williamsburg lyft fanny pack tumblr post-ironic stumptown gastropub. Freegan jean shorts shaman forage
+            chillwave, green juice +1 next level authentic tote bag. Echo park viral poutine, hexagon aesthetic
+            umami keffiyeh chartreuse snackwave plaid woke. Cronut food truck cliche tousled, coloring book man
+            bun affogato salvia knausgaard put a bird on it. Gochujang bespoke before they sold out iceland narwhal
+            fashion axe prism woke jean shorts selvage asymmetrical raw denim pok pok poke...
+          </p>
+        </div>
+      </a>
+    </li>
+    <li class="drzBlog-item">
+      <a href="#" class="drzBlog-item-link">
+        <div class="drzBlog-item-imgWrap">
+          <img class="drzBlog-item-img" data-src="https://cdn.drzzle.app/mock-images/default-images/mock-blog.svg" alt="blog image" />
+        </div>
+        <div class="drzBlog-item-data">
+          <div class="drzBlog-item-top">
+            <h4 class="drzBlog-item-header">Blog Header Here</h4>
+            <span class="drzBlog-item-info">Name | 12/12/20</span>
+          </div>
+          <hr class="drzBlog-item-break" />
+          <p class="drzBlog-item-preview">
+            Truffaut thundercats forage actually. Semiotics green juice DIY air plant irony typewriter tousled
+            williamsburg lyft fanny pack tumblr post-ironic stumptown gastropub. Freegan jean shorts shaman forage
+            chillwave, green juice +1 next level authentic tote bag. Echo park viral poutine, hexagon aesthetic
+            umami keffiyeh chartreuse snackwave plaid woke. Cronut food truck cliche tousled, coloring book man
+            bun affogato salvia knausgaard put a bird on it. Gochujang bespoke before they sold out iceland narwhal
+            fashion axe prism woke jean shorts selvage asymmetrical raw denim pok pok poke...
+          </p>
+        </div>
+      </a>
+    </li>
+    <li class="drzBlog-item">
+      <a href="#" class="drzBlog-item-link">
+        <div class="drzBlog-item-imgWrap">
+          <img class="drzBlog-item-img" data-src="https://cdn.drzzle.app/mock-images/default-images/mock-blog.svg" alt="blog image" />
+        </div>
+        <div class="drzBlog-item-data">
+          <div class="drzBlog-item-top">
+            <h4 class="drzBlog-item-header">Blog Header Here</h4>
+            <span class="drzBlog-item-info">Name | 12/12/20</span>
+          </div>
+          <hr class="drzBlog-item-break" />
+          <p class="drzBlog-item-preview">
+            Truffaut thundercats forage actually. Semiotics green juice DIY air plant irony typewriter tousled
+            williamsburg lyft fanny pack tumblr post-ironic stumptown gastropub. Freegan jean shorts shaman forage
+            chillwave, green juice +1 next level authentic tote bag. Echo park viral poutine, hexagon aesthetic
+            umami keffiyeh chartreuse snackwave plaid woke. Cronut food truck cliche tousled, coloring book man
+            bun affogato salvia knausgaard put a bird on it. Gochujang bespoke before they sold out iceland narwhal
+            fashion axe prism woke jean shorts selvage asymmetrical raw denim pok pok poke...
+          </p>
+        </div>
+      </a>
+    </li>
+    <li class="drzBlog-item">
+      <a href="#" class="drzBlog-item-link">
+        <div class="drzBlog-item-imgWrap">
+          <img class="drzBlog-item-img" data-src="https://cdn.drzzle.app/mock-images/default-images/mock-blog.svg" alt="blog image" />
+        </div>
+        <div class="drzBlog-item-data">
+          <div class="drzBlog-item-top">
+            <h4 class="drzBlog-item-header">Blog Header Here</h4>
+            <span class="drzBlog-item-info">Name | 12/12/20</span>
+          </div>
+          <hr class="drzBlog-item-break" />
+          <p class="drzBlog-item-preview">
+            Truffaut thundercats forage actually. Semiotics green juice DIY air plant irony typewriter tousled
+            williamsburg lyft fanny pack tumblr post-ironic stumptown gastropub. Freegan jean shorts shaman forage
+            chillwave, green juice +1 next level authentic tote bag. Echo park viral poutine, hexagon aesthetic
+            umami keffiyeh chartreuse snackwave plaid woke. Cronut food truck cliche tousled, coloring book man
+            bun affogato salvia knausgaard put a bird on it. Gochujang bespoke before they sold out iceland narwhal
+            fashion axe prism woke jean shorts selvage asymmetrical raw denim pok pok poke...
+          </p>
+        </div>
+      </a>
+    </li>
+  </ul>
+  <div class="drzBlog-list-footer">
+    <a href="#" class="drzBlog-list-more">Load More</a>
+  </div>
+</div>
diff --git a/src/droplets/blog-list/themes/default/styles.less b/src/droplets/blog-list/themes/default/styles.less
@@ -0,0 +1,113 @@
+.drzBlog-list {
+  .drzClearFix;
+}
+
+.drzBlog-list-items {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+.drzBlog-item {
+  display: none;
+  margin-bottom: 20px;
+
+  &:last-child {
+    margin-bottom: 0;
+  }
+}
+
+.drzBlog-item-show {
+  display: block;
+}
+
+.drzBlog-item-link {
+  .drzClearFix;
+  display: flex;
+  text-decoration: none;
+
+  @media @mobile {
+    flex-direction: column;
+  }
+}
+
+.drzBlog-item-imgWrap {
+  display: flex;
+  float: left;
+  width: 20%;
+
+  @media @mobile {
+    width: 100%;
+  }
+}
+
+.drzBlog-item-img {
+  width: 100%;
+}
+
+.drzBlog-item-data {
+  color: fade(@black, 65%);
+  float: left;
+  padding-left: 15px;
+  width: 80%;
+
+  @media @mobile {
+    padding-left: 0;
+    padding-top: 10px;
+    width: 100%;
+  }
+}
+
+.drzBlog-item-top {
+  .drzClearFix;
+}
+
+.drzBlog-item-header {
+  float: left;
+  font-size: 18pt;
+  margin: 0 0 3px 0;
+}
+
+.drzBlog-item-info {
+  color: fade(@black, 45%);
+  float: right;
+  font-size: 10pt;
+  position: relative;
+  top: 10px;
+}
+
+.drzBlog-item-preview {
+  font-size: 14pt;
+  font-weight: 300;
+}
+
+.drzBlog-item-break {
+  border: 0;
+  border-top-color: fade(@black, 45%);
+  border-top-style: solid;
+  border-top-width: 2px;
+  clear: both;
+  display: block;
+  float: left;
+  height: 0;
+  position: relative;
+  width: 100%;
+}
+
+.drzBlog-list-footer {
+  margin-top: 35px;
+  text-align: center;
+}
+
+.drzBlog-list-footerHidden {
+  margin-top: 0;
+}
+
+.drzBlog-list-more {
+  color: fade(@black, 65%);
+}
+
+.drzBlog-item-none {
+  display: block;
+  text-align: center;
+}
diff --git a/src/droplets/blog-post/index.js b/src/droplets/blog-post/index.js
@@ -0,0 +1,8 @@
+import Vue from 'vue';
+
+const template = require('./template.html');
+
+export default Vue.component('blog-post-droplet', {
+  template,
+  name: 'blog-post-droplet',
+});
diff --git a/src/droplets/blog-post/template.html b/src/droplets/blog-post/template.html
@@ -0,0 +1,23 @@
+<div class="drzBlog-post">
+ <h2 class="drzBlog-post-header">Blog Title Here</h2>
+ <div class="drzBlog-post-data">
+  Author Name | Published on 12/12/2020
+ </div>
+ <div class="drzBlog-post-text">
+   <p>
+     Truffaut thundercats forage actually. Semiotics green juice DIY air plant irony typewriter tousled
+     williamsburg lyft fanny pack tumblr post-ironic stumptown gastropub. Freegan jean shorts shaman forage
+     chillwave, green juice +1 next level authentic tote bag. Echo park viral poutine, hexagon aesthetic
+     umami keffiyeh chartreuse snackwave plaid woke. Cronut food truck cliche tousled, coloring book man
+     bun affogato salvia knausgaard put a bird on it. Gochujang bespoke before they sold out iceland narwhal
+     fashion axe prism woke jean shorts selvage asymmetrical raw denim pok pok poke. Twee coloring book
+     try-hard palo santo portland austin ethical, intelligentsia tumeric mlkshk man braid yuccie.
+   </p>
+   <p>
+     Chillwave small batch vaporware chartreuse XOXO gastropub hammock. Organic edison bulb meggings authentic
+     chambray skateboard vegan 3 wolf moon pickled bitters farm-to-table ennui hoodie. Fashion axe seitan organic,
+     tousled artisan fanny pack tattooed beard tumeric. Bitters snackwave stumptown, taiyaki godard plaid pok pok.
+     Vinyl thundercats pork belly tote bag master cleanse scenester tofu aesthetic organic.
+   </p>
+ </div>
+</div>
diff --git a/src/droplets/blog-post/themes/default/styles.less b/src/droplets/blog-post/themes/default/styles.less
@@ -0,0 +1,17 @@
+.drzBlog-post {
+  .drzClearFix;
+}
+
+.drzBlog-post-header {
+  font-size: 20pt;
+}
+
+.drzBlog-post-data {
+  color: fade(@black, 50%);
+  font-size: 11pt;
+  margin-bottom: 10px;
+}
+
+.drzBlog-post-text {
+  .drzClearFix;
+}