auto commit 11/03/2019 Sun

index.html

@@ -80,6 +80,39 @@
             </div>
           </div>
 
+          <div class="mdc-card demo-card demo-basic-with-text-over-media">
+            <div class="mdc-card__primary-action demo-card__primary-action" tabindex="0">
+              <div class="mdc-card__media mdc-card__media--16-9 demo-card__media"
+                style="background-image: url(&quot;https://material-components.github.io/material-components-web-catalog/static/media/photos/3x2/2.jpg&quot;);">
+                <div class="mdc-card__media-content demo-card__media-content">
+                  <div class="demo-card__primary">
+                    <h2 class="demo-card__title mdc-typography mdc-typography--headline6">Our Changing Planet</h2>
+                    <h3 class="demo-card__subtitle mdc-typography mdc-typography--subtitle2">by Kurt Wagner</h3>
+                  </div>
+                </div>
+              </div>
+              <div class="demo-card__secondary mdc-typography mdc-typography--body2">Visit ten places on our planet that
+                are undergoing the biggest changes today.</div>
+            </div>
+            <div class="mdc-card__actions">
+              <div class="mdc-card__action-buttons">
+                <button class="mdc-button mdc-card__action mdc-card__action--button">Read</button>
+                <button class="mdc-button mdc-card__action mdc-card__action--button">Bookmark</button>
+              </div>
+              <div class="mdc-card__action-icons">
+                <button class="mdc-icon-button mdc-card__action mdc-card__action--icon--unbounded" aria-pressed="false"
+                  aria-label="Add to favorites" title="Add to favorites">
+                  <i class="material-icons mdc-icon-button__icon mdc-icon-button__icon--on">favorite</i>
+                  <i class="material-icons mdc-icon-button__icon">favorite_border</i>
+                </button>
+                <button class="mdc-icon-button material-icons mdc-card__action mdc-card__action--icon--unbounded"
+                  title="Share" data-mdc-ripple-is-unbounded="true">share</button>
+                <button class="mdc-icon-button material-icons mdc-card__action mdc-card__action--icon--unbounded"
+                  title="More options" data-mdc-ripple-is-unbounded="true">more_vert</button>
+              </div>
+            </div>
+          </div>
+
           <div class="user-info mdc-text-field mdc-text-field--outlined">
             <input type="text" id="tf-outlined" class="mdc-text-field__input">
             <div class="mdc-notched-outline">

package-lock.json

@@ -889,12 +889,22 @@
       }
     },
     "@material/auto-init": {
-      "version": "3.1.0",
+      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/@material/auto-init/-/auto-init-3.1.0.tgz",
+      "resolved": "https://registry.npm.taobao.org/@material/auto-init/download/@material/auto-init-4.0.0.tgz",
-      "integrity": "sha512-Q0fuycL7JUyody+V9h8Y3mXlchNECOwCWOWwjJutcxeIqmhVJxf5qiJJnXZYrwQMMtUuO2A2DTHdrxCITL2COA==",
+      "integrity": "sha1-TDUFFUYQUllg5GuB4+0LO82q/YE=",
       "requires": {
-        "@material/base": "^3.1.0",
+        "@material/base": "^4.0.0",
         "tslib": "^1.9.3"
+      },
+      "dependencies": {
+        "@material/base": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npm.taobao.org/@material/base/download/@material/base-4.0.0.tgz",
+          "integrity": "sha1-U1V00LY8GIks+3Doiye8j4CQZ3o=",
+          "requires": {
+            "tslib": "^1.9.3"
+          }
+        }
       }
     },
     "@material/base": {
@@ -5109,6 +5119,17 @@
         "@material/theme": "^3.1.0",
         "@material/top-app-bar": "^3.2.0",
         "@material/typography": "^3.1.0"
+      },
+      "dependencies": {
+        "@material/auto-init": {
+          "version": "3.1.0",
+          "resolved": "https://registry.npm.taobao.org/@material/auto-init/download/@material/auto-init-3.1.0.tgz",
+          "integrity": "sha1-vysdzBLZwJsfYYLwrA26fAmGiDw=",
+          "requires": {
+            "@material/base": "^3.1.0",
+            "tslib": "^1.9.3"
+          }
+        }
       }
     },
     "md5.js": {

package.json

@@ -5,6 +5,7 @@
   "main": "index.js",
   "dependencies": {
     "@material/animation": "^3.1.0",
+    "@material/auto-init": "^4.0.0",
     "@material/button": "^3.2.0",
     "@material/card": "^3.2.0",
     "@material/layout-grid": "^3.1.0",

src/scss/layouts/header.scss

@@ -1,9 +1,9 @@
 /**
+ * Copyright 2019 Mashiro
  * @description header
  * @author Mashiro
- * @since 19/11/1
+ * @license MIT
  */
-
 @import "@material/top-app-bar/mdc-top-app-bar";
 @import "@material/icon-button/mdc-icon-button";
 

src/scss/layouts/pageContent.scss

@@ -1,7 +1,8 @@
 /**
+ * Copyright 2019 Mashiro
  * @description site content
  * @author Mashiro
- * @since 19/11/1
+ * @license MIT
  */
 
 .page-content {

src/ts/components/MDCHandler.ts

@@ -1,22 +1,33 @@
 /**
+ * Copyright 2019 Mashiro
  * @description material-components initial
  * @author Mashiro
- * @since 19/11/1
+ * @license MIT
  */
+
 import { MDCRipple } from '@material/ripple'
 import { MDCTextField } from '@material/textfield'
 import { MDCTopAppBar } from '@material/top-app-bar'
 
 export default function () {
-    // const textField = new MDCTextField(document.querySelector('.mdc-text-field'))
+    /* See https://git.io/JegHJ */
-    
+    /* use once (single <HTMLElement>) */
-    //const ripple = new MDCRipple(document.querySelector('.mdc-button'))
+    // MDCRipple.attachTo(document.querySelector('.mdc-button'))
-    MDCRipple.attachTo(document.querySelector('.demo-card__primary-action'))
+    // const buttonRipple = new MDCRipple(document.querySelector('.mdc-button'))
-    MDCRipple.attachTo(document.querySelector('.mdc-button'))
 
-    // const topAppBar = new MDCTopAppBar(document.querySelector('.mdc-top-app-bar'))
+    /* use to all (map <NodeList>) */
+    // for several classes
+    const rippleList = []
+    rippleList.push('.mdc-button','.demo-card__primary-action', ".something")
+    const mdcRipple = [].map.call(document.querySelectorAll(rippleList.join(',')), function (e: any) {
+        return new MDCRipple(e)
+    })
 
-    const textField = [].map.call(document.querySelectorAll('.mdc-text-field'), function (el) {
+    // for specified class
-        return new MDCTextField(el)
+    const topAppBar = [].map.call(document.querySelectorAll('.mdc-top-app-bar'), function (e: any) {
+        return new MDCTopAppBar(e)
+    })
+    const textField = [].map.call(document.querySelectorAll('.mdc-text-field'), function (e: any) {
+        return new MDCTextField(e)
     })
 }

src/ts/index.ts

@@ -1,7 +1,8 @@
 /**
- * @description Index
+ * Copyright 2019 Mashiro
+ * @description Main
  * @author Mashiro
- * @since 19/10/31
+ * @license MIT
  */
 
 import coverImgIni from "./modules/coverImgIni"
@@ -15,4 +16,5 @@ window.onscroll = function () {
 window.onload = function () {
   coverImgIni()
   MDCHandler()
+
 }

src/ts/modules/coverImgIni.ts

@@ -1,7 +1,7 @@
 /**
+ * Copyright 2019 Mashiro
  * @description Sakura theme module
  * @author Mashiro
- * @since 19/10/31
  * @license MIT
  */