可重复使用的工具栏与模态共享叉图标 - 编码元素

到目前为止,我们已经定义了编写一个自定义元素是多么容易,该元素隐藏了它背后的混乱 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> 的编码。