搞笑电影几个男人抓一个婴儿_婴儿的第一个Web组件

搞笑电影几个男人抓一个婴儿

It’s me. I’m baby.

是我。 我是宝贝

A few months into the pandemic, our Interactive Design team created the Coronavirus Construction Limits State by State Tracker: a dashboard that would track how states with a stay-at-home mandate classified Construction and Building Material Suppliers. The page displaying this dashboard did not use any of our standard page templates from our content management system. It, therefore, required a custom share bar, rather than the Gigya powered share bar used on our article pages.

大流行发生后的几个月，我们的互动设计团队通过州跟踪器创建了冠状病毒施工限制状态 ：这是一个仪表板，可以跟踪具有全职任务的州如何将建筑和建筑材料供应商分类。 显示此仪表板的页面未使用内容管理系统中的任何标准页面模板。 因此，它需要一个自定义共享栏，而不是我们文章页面上使用的Gigya支持的共享栏。

State by State Tracker on Builderonline.com

在 Builderonline.com上由State Tracker进行状态 说明

创建即兴社交共享栏 (Creating an Impromptu Social Share Bar)

Our Interactive Designer needed some HTML code that she could slap on the page without us having to do a code deployment. Creating a share bar from scratch is super easy.

我们的Interactive Designer需要一些HTML代码，她可以在页面上添加这些代码，而无需我们进行代码部署。 从头开始创建共享栏非常容易。

Tools needed:

所需工具：

• Social Icons — we already use Font Awesome on our sites, so it was just a matter of applying the correct CSS classes to the anchor tags (i.e. fa fa-facebook)

  社交图标-我们已经在我们的网站上使用了Font Awesome ，因此只需将正确CSS类应用于锚标签即可(例如fa fa-facebook )

• Social Link Generator — I directed our Interactive Designer to check out https://www.websiteplanet.com/webtools/sharelink/ to generate the appropriate social share links.

  社交链接生成器—我指示交互式设计师检查https://www.websiteplanet.com/webtools/sharelink/以生成适当的社交共享链接。

The result would be something like:

结果将是这样的：

<a href="https://www.facebook.com/sharer/sharer.php?u=https://www.builderonline.com/coronavirus-construction-limits-state-by-state-tracker_s"><i class="fa fa-facebook">&nbsp;</i></a>

Bada bing, bada boom!

八大兵，八达繁荣！

将共享栏创建为Web组件 (Creating the Share Bar as a Web Component)

So we had a dilemma with the above approach: this page was a single content item in the content management system that displayed on multiple sites. How could we get the share bar to use the appropriate share link based on the site in which it was currently being viewed?

因此，我们在使用上述方法时遇到了一个难题：该页面是内容管理系统中的单个内容项，显示在多个站点上 。 我们如何才能使共享栏基于当前正在查看的站点使用适当的共享链接？

Solving this problem seemed like the perfect opportunity to create a web component.

解决此问题似乎是创建Web组件的绝佳机会。

Web Components is a suite of different technologies allowing you to create reusable custom elements — with their functionality encapsulated away from the rest of your code — and utilize them in your web apps.- developer.mozilla.org

Web组件是一套不同的技术套件，可让您创建可重用的自定义元素(其功能与其他代码封装在一起)，并在您的Web应用程序中使用它们。- developer.mozilla.org

为什么？ (Why?)

• Reusability — using a web component would allow us only to have to create it once and use it everywhere.

  可重用性 -使用Web组件将使我们只需要创建一次并在任何地方使用它。

• Encapsulation — the shadow DOM allows us to manipulate the markup, styles, and behaviors of the web component without it affecting the main code on the page.

  封装 -影子DOM使我们能够操纵Web组件的标记，样式和行为，而不会影响页面上的主要代码。

• Opportunity to Learn — I took this as an opportunity to learn how to create a web component since this would be a simple use case for it.

  学习的机会 -我以此为契机学习如何创建Web组件，因为这将是一个简单的用例。

怎么样？ (How?)

I first needed to define my element and have it extend the generic HTMLElement class:

我首先需要定义我的元素，并使它扩展通用HTMLElement类：

<script type="text/javascript">
    class ShareElement extends HTMLElement {
      constructor() {
        super();
      }
}
</script>

I then defined the connectedCallbackMethod(), which fires each time the component is added to the page.

然后，我定义了connectedCallbackMethod() ，每次将组件添加到页面时都会触发。

connectedCallback() {        
  // init the component        
  let shadowDom = this.attachShadow({ mode: "open" });
  ...
}

The following was implemented in this method:

此方法实现了以下内容：

Adding Font Awesome to the shadow DOM

将Awesome字体添加到阴影DOM

Immediately I noticed that the Font Awesome CSS didn’t carry into the shadow DOM. I was working fast to get this done, so the quick and dirty approach was to retrieve the Font Awesome link element from the main DOM and insert it into the shadow DOM.

立刻我注意到Font Awesome CSS并没有带入影子DOM。 我正在快速地完成这项工作，因此快速而肮脏的方法是从主DOM中检索Font Awesome link元素，并将其插入到影子DOM中。

const fontawesome = document.querySelector(‘link[href*=”fontawesome”]’); shadowDom.appendChild(fontawesome.cloneNode())

Styling the anchor tag colors

设置锚标记颜色

I just need a few styles for the link pseudo selectors :visited and :hover, and the remaining styles I lazily did inline.

对于链接伪选择器:visited和:hover ，我只需要一些样式，而我懒惰地内联了其余样式。

let style = document.createElement('style');
style.textContent = ‘a,a:visited{color:#00aced}a:active,a:hover{color:#000}’;
shadowDom.appendChild(style);

Generating the social links

产生社交联系

Remember, the big issue is that we wanted the share link to use the URL of the page the share bar was currently on. To generate a dynamic share link, I first obtained the current URL,

请记住，最大的问题是我们希望共享链接使用共享栏当前所在页面的URL。 为了生成动态共享链接，我首先获得了当前URL，

const url = window.location.href;

const url = window.location.href;

And then added it to the social share link in the appropriate query parameter.

然后在适当的查询参数中将其添加到社交共享链接。

Facebook: “https://www.facebook.com/share.php?u=' + urlTwitter: “https://twitter.com/intent/tweet?url='+ url

Facebook： “https://www.facebook.com/share.php?u=' + url Twitter： “https://twitter.com/intent/tweet?url='+ url

Appropriately sizing the popup window.

适当调整弹出窗口的大小。

I decided this would be an excellent opportunity to use a reasonably sized popup window, so I decided to make the size 500x500 and center it on the screen when it appears:

我认为这将是使用合理大小的弹出窗口的绝佳机会，因此我决定将大小设为500x500，并在出现时将其居中显示在屏幕上：

shareLinks[i].addEventListener('click', function(e) {                  e.preventDefault();                
const left = (screen.width/2)-250;                
const top = (screen.height/2)-250;                
window.open(
this.href, 
'socialShareWin',                        
'left=' + left + ',top=' + top + ',
width=500,
height=500,
toolbar=1,
resizable=0');                
return false;              
});

Finally, the component is initialized using

最后，使用

customElements.define("hw-share", ShareElement);

and thus, I was able to add my custom element to the page using <hw-share />.

因此，我可以使用<hw-share />将自定义元素添加到页面。

Complete code below:

完整的代码如下：

结论 (Conclusion)

I did this in about an hour because the Interactive Team needed it ASAP, so there are some improvements to be made. There’s so much more to learn, such as templates and slots and the remaining callbacks, but I’m glad I was able to learn something new in such a short amount of time to solve a problem.

我在大约一个小时内完成了此操作，因为交互式团队需要尽快进行此操作，因此需要进行一些改进。 还有很多东西要学习，例如模板和插槽以及剩余的回调 ，但是我很高兴能够在这么短的时间内学习到一些新知识来解决问题。

What was your first experience with web components?

您最初使用Web组件的经历是什么？

更多阅读 (More Reading)

• Using Custom Elements | MDN

  使用自定义元素| MDN

• What Are Web Components? | Coherent Labs (tutorial)

  什么是Web组件？ | 相干实验室(教程)

翻译自: https://levelup.gitconnected.com/babys-first-web-component-776067955342

搞笑电影几个男人抓一个婴儿