可重複使用的工具欄與模態共享叉圖示 - 編碼元素
到目前為止,我們已經定義了編寫一個自定義元素是多麼容易,該元素隱藏了它背後的混亂 html 併為使用者提供了易於編寫和簡短的標記。
是時候編碼吧!
我們的自定義元素,用於顯示英雄形象下面的欄應該
- 接受要共享的連結
- 接受要分叉的回購連結
- 接受 modalId 以區分其他 Modals。
- 接受模態的標題
使用 Modal |註冊工具欄自定義元素分享| 叉圖示
讓我們註冊我們的自定義元素,它接受上面的屬性列表。
<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>
的編碼。