可重复使用的工具栏与模态共享叉图标 - 编码元素
到目前为止,我们已经定义了编写一个自定义元素是多么容易,该元素隐藏了它背后的混乱 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>
的编码。