可重複使用的工具欄與模態共享叉圖示 - 編碼元素

Created: November-22, 2018

到目前為止，我們已經定義了編寫一個自定義元素是多麼容易，該元素隱藏了它背後的混亂 html 併為使用者提供了易於編寫和簡短的標記。

是時候編碼吧！

我們的自定義元素，用於顯示英雄形象下面的欄應該

接受要共享的連結
接受要分叉的回購連結
接受 modalId 以區分其他 Modals。
接受模態的標題

讓我們註冊我們的自定義元素，它接受上面的屬性列表。

<script>
Polymer({
    is:"tool-bar",
    properties:{
        link2Share:{
            type:String,
            value:""
        },
        link2Fork:{
            type:String,
            value:""
        },
        modalId:{
            type:String,
            value:""
        },
       title:{
            type:String,
            value:"myModal"
        }
    }
});
</script>

非常好！接下來，新增我們需要的 Html。

首先，需要新增 Modal / Share / Fork 的圖示。簡單的 ul 會做。我們將使用 Polymer 的鐵圖示來顯示 Modal / Share / Fork 圖示。

注意：聚合物的鐵圖示

在專案的根目錄中安裝這樣的圖示集。

bash $ bower install --save PolymerElements/iron-icon

bash $ bower install --save PolymerElements/iron-icons

接下來，在自定義元素宣告中包含已安裝的 Polymer 元素，如下所示

注意：

出於所有實際目的，我們的自定義元素將被提交到內部

專案根/元件

<link rel="import" href="../bower_components/iron-icon/iron-icon.html">
<link rel="import" href="../bower_components/iron-icons/iron-icons.html">
<link rel="import" href="../bower_components/iron-icons/social-icons.html">

非常好！如果你想知道如何使用鐵圖示，請參閱下面的註釋。

注意：鐵圖示用法和語法

如果我們需要使用 Modal Popup 的資訊圖示，我們會像這樣編寫標記：

<iron-icon icon="icons:info"></iron-icon>

如果我們想要社交網路共享圖示，那麼上面的圖示屬性就變成了

icon =社交：分享

所以語法意思是，我需要來自社交的 iconset，我想要那個集合中的 SHARE 圖示。

你也可以使用 font-awesome，在這種情況下，你可以使用，

選擇你認為最合適的東西。

完成包含後，我們為自定義元素編寫模板。我們將在自定義元素的標記中使用單向繫結器作為資料。我們將使用者傳遞的任何屬性繫結到元素的相應屬性，同時啟動元素的註冊呼叫。

所以我們的自定義元素的 html 藍圖是：

<dom-module id="tool-bar">
 
    <template id="tool-box">
 
        <ul class="flex-wrap toolbar">
            <li>
                <iron-icon icon="icons:info" id="anchor-for-[[modalId]]" onclick="`clickHandler(event)`"></iron-icon>
            </li>
            <li>
                <a href="https://plus.google.com/share?url=[[link2Share]]" target="_blank" ><iron-icon icon="social:share"></iron-icon></a>
            </li>
            <li>
                <a href="[[link2Fork]]" target="_blank"><i class="fa fa-2x fa-code-fork" aria-hidden=true></i></a> 
            </li>
        </ul>
 
    </template>
 
</dom-module>

涼！所以工具欄有它的模板化 ul，它列出了三個連結

資訊圖示 - 模態彈出視窗
分享這個圖示 - 在谷歌上分享
叉這個圖示 - 叉回購

此外，我們已將使用者寫入的屬性繫結到相應的屬性。

注意：使模態 ID 唯一

我們通過指定 id 屬性來解決資訊圖示的唯一性問題
id="anchor-for-[[modalId]]" onclick="`clickHandler(event)`"></iron-icon>
所以每個 Project，都會有一個獨特的錨號。

即

如果使用者將“project-cats”作為 modal-id 傳遞，則在呼叫我們的自定義元素時，錨點 id 將為“anchor-for-project-cats”

如果使用者新增了另一個專案，並將“project-puppy”作為 modal-id 屬性傳遞，則錨點 id 將為 anchor-for-project-puppy

等等。

但是我們如何確保每個資訊圖示都對映到自己的模態？

應該為 info 的鐵圖示 分配一個“ 資料對話方塊 ”屬性，該屬性也需要是唯一的。 **** ******

data-dialog 屬性類似於 bootstrap 模式中的 data-target 屬性。對於每個新 Project，它都必須是唯一的。

我們將它留給使用者，以保持獨特性。因此，對於不同的 <tool-bar> 呼叫，使用者不能具有相同的 modal-id 屬性。

因此，正如上面的註釋所述，我們需要將每個 Project 的資訊圖示對映到資料對話方塊。

讓我們新增該功能。

我們使用 ready 方法。它與 Jquery 非常相似

$.ready();

。當自定義元素完成載入時，它被呼叫。

在屬性物件之後，在 Polymer 呼叫中新增此函式以進行註冊。

ready: `function()` {
    document.querySelector("#anchor-for-" + this.modalId).setAttribute('data-dialog', this.modalId);
}

很酷！所以現在我們有了

註冊為 Polymer 元素的自定義元素
莫代爾| 分享| 叉圖示新增到自定義元素

一個模態附加到資訊鐵圖示，id 為“anchor-for- [Whatever 以 modal-id 傳遞]”。這是我們元素的現成方法的禮貌。

所以，到目前為止，寫作

<tool-bar
link2-share="http://www.myportfolio.com/project-neighbourhood-map"
link2-fork="https://github.com/me/project-neighbourhood-map"
modal-id="project-neighbourhood-map">
</tool-bar>

產生這個：

http://i.stack.imgur.com/y8sJp.jpg

但是當使用者點選該資訊圖示時，會發生類似這樣的事情

http://i.stack.imgur.com/2osBg.jpg

我們的目標是在使用者頁面的 <tool-bar> 標籤內包含專案的完整描述。

還記得 Shadow DOM 嗎？我們需要在自定義元素中有一個容器，它為我們的 Modal 內容提供了影子 DOM。內容本身包含在自定義元素的 shadowDOM 內的 <content> 標記內。

對於承載專案描述的容器，我們使用paper-dialogPolymer 元素。Paper-dialog 被指定為 id，無論在使用者頁面的宣告中作為 modal-id 傳遞。

因此，在工具欄自定義元素的 DOM 中的 ul 之後新增此標記

<paper-dialog id="[[modalId]]" modal>

        <iron-icon icon="icons:power-settings-new" dialog-dismiss></iron-icon>

    <h2 class="text-center text-capitalize">[[title]]</h2>
    <paper-dialog-scrollable>

                <content></content>

    </paper-dialog-scrollable>
</paper-dialog>

注意：紙張對話方塊可滾動

我們使用 Paper-dialog-scrollable 來包裝我們的 Project 的描述，這樣，任何冗長的描述都不會溢位。

最後一點是，在點選資訊圖示時新增模式開啟時的 onclick 功能。

當發生點選時，正常情況下會觸發一個事件，我們會將其傳遞給 clickHandler 函式，如下所示：

<iron-icon icon="icons:info" id="anchor-for-[[modalId]]" onclick="`clickHandler(event)`"></iron-icon>

所以一旦 clickHandler 函式將事件傳遞給它，

它需要收集，哪個元素觸發了點選，
它需要收集該元素的 data-dialog 屬性，以確定要開啟哪個模式（還記得每個專案都有自己的模態 ID 嗎？）
然後它需要呼叫 open 方法，完全是那個模態

所以，功能是這樣的：

在元素的註冊呼叫之前新增它。這不是元素的一部分，但是在元素內限定範圍。

function `clickHandler(e)` {
    var button = e.target;
    while (!button.hasAttribute('data-dialog') && button !== document.body) {
        button = button.parentElement;
    }
 
    if (!button.hasAttribute('data-dialog')) {
        return;
    }
 
    var id = button.getAttribute('data-dialog');
    var dialog = document.getElementById(id);
    if (dialog) {
        dialog.open();
    }
}

因此，我們已經完成了對自定義元素 <tool-bar> 的編碼。

使用 Modal |註冊工具欄自定義元素分享| 叉圖示

注意：聚合物的鐵圖示

注意：鐵圖示用法和語法

注意：使模態 ID 唯一

注意：紙張對話方塊可滾動