auto commit 11/03/2019 Sun

5 years ago · a11067364d
parent 6dc4eccd56
commit a11067364d
8 changed files with 89 additions and 20 deletions
--- a/index.html
+++ b/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">
--- a/package-lock.json
+++ b/package-lock.json
@ -889,12 +889,22 @@
      }
    },
    "@material/auto-init": {
-      "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/@material/auto-init/-/auto-init-3.1.0.tgz",
-      "integrity": "sha512-Q0fuycL7JUyody+V9h8Y3mXlchNECOwCWOWwjJutcxeIqmhVJxf5qiJJnXZYrwQMMtUuO2A2DTHdrxCITL2COA==",
+      "version": "4.0.0",
+      "resolved": "https://registry.npm.taobao.org/@material/auto-init/download/@material/auto-init-4.0.0.tgz",
+      "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": {
--- a/package.json
+++ b/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",
--- a/src/scss/layouts/header.scss
+++ b/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";

--- a/src/scss/layouts/pageContent.scss
+++ b/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 {
--- a/src/ts/components/MDCHandler.ts
+++ b/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'))
-    
-    //const ripple = new MDCRipple(document.querySelector('.mdc-button'))
-    MDCRipple.attachTo(document.querySelector('.demo-card__primary-action'))
-    MDCRipple.attachTo(document.querySelector('.mdc-button'))
-    
-    // const topAppBar = new MDCTopAppBar(document.querySelector('.mdc-top-app-bar'))
+    /* See https://git.io/JegHJ */
+    /* use once (single <HTMLElement>) */
+    // MDCRipple.attachTo(document.querySelector('.mdc-button'))
+    // const buttonRipple = new MDCRipple(document.querySelector('.mdc-button'))
+
+    /* 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) {
-        return new MDCTextField(el)
+    // for specified class
+    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)
    })
 }
--- a/src/ts/index.ts
+++ b/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()
+
 }
--- a/src/ts/modules/coverImgIni.ts
+++ b/src/ts/modules/coverImgIni.ts
@ -1,7 +1,7 @@
 /**
+ * Copyright 2019 Mashiro
 * @description Sakura theme module
 * @author Mashiro
- * @since 19/10/31
 * @license MIT
 */