Social Buttons and Modals

I’ve been busy refactoring the header bar so that it uses semantic HTML. I’ve made some decent changes since I last blogged. Firstly, I changed the sign-in, sign-out and user-profile web components into one singular “menuitem” web component. I can still wrap that with whatever I need. Secondly, I’ve been working on research into modals and looking at social buttons.

Today, I am going to wire up a modal dialog to the sign-in button. If I click on the sign-in button, the application should show a modal dialog with a whole bunch of social buttons in it. To do this, I’ve come across two libraries that are just perfect for the job.

  1. Bootstrap-Social provides buttons for social logins and works with Bootstrap
  2. SimpleModal is a simple jQuery enabled modal dialog library

The idea is to have a dialog DIV that includes the social buttons. That is activated through an onClick() handler within my Javascript code. Let’s take a look at the dialog HTML first:

    @if (User.Identity.IsAuthenticated) {

    } else {
        <div id="signInModal">
            <h3>Choose Your Social Network</h3>
            <div class="row">
                <div class="socialNetwork">
                    <social-button id="facebook" network="facebook"></social-button>
                <div class="socialNetwork">
                    <social-button id="facebook" network="microsoft"></social-button>
                <div class="socialNetwork">
                    <social-button id="facebook" network="twitter"></social-button>
                <div class="socialNetwork">
                    <social-button id="facebook" network="google"></social-button>

This is located in the Layout.cshtml file. I’ve defined a new social-button web component for handling the layout. This makes the HTML code a lot cleaner semantically. Let’s do a little work on the CSS in main.less:

#signInModal {
    display: none;
    height: 180px;

    h3 {
        color: @color-2;
        text-align: center;
        font-family: @header-font;

    .socialNetwork {
        width: 280px;
        float: left;
        padding: 10px;
        box-sizing: border-box;

#simplemodal-overlay {
    background: black;

#simplemodal-container {
    width: 600px;
    color: #bbb;
    background-color: #333;
    border: 4px solid #444;
    padding: 12px;

    a.modalCloseImg {
        display: inline-block;
        z-index: 3200;
        background: data-uri("../images/icons/close.png") no-repeat;
        width: 25px;
        height: 29px;
        position: absolute;
        top: -15px;
        right: -16px;
        cursor: pointer;

The simple modal stuff is a direct copy of the code from the example modal – I will probably change this as I go. It doesn’t look quite right just yet. In addition to this, I need to wire up an event handler such that when I click on Sign In, it activates the modal. I can do this directly in Layout.cshtml for now:

        $("s-menuicon[icon=sign-in]").on("click", function () {

I’ve also added the simplemodal library (which I added into jspm_packages) into the polyfills.js builder in Gulpfile.js. Running the project at this stage works. I get the modal appearing when I click on the Sign-In button. I still don’t get the social buttons, but that is because I don’t have the social-button web component yet.

Social Buttons

That means the social button is my next stop. As with all social buttons, I’ve created a folder src/elements/social-button and create three files. First up is the social-button.html file:

<dom-module id="social-button">
    <link rel="stylesheet" href="social-button.css">
    <link href="../jspm_packages/npm/font-awesome@4.3.0/css/font-awesome.min.css" rel="stylesheet">
        <span id="content">
            <span id="icon" class="fa"></span>
            <span id="msg"><content></content></span>
<script src="social-button.js"></script>

If you think this looks remarkably like the s-menuicon template, you would be right. It’s pretty much the same. I’ve even included the content, although I don’t really need it. The social-button.less file is similarly small:

/* Bootstrap Library */
@import (reference) "../../../node_modules/bootstrap-less/bootstrap/index.less";
@import (less) "../../../wwwroot/jspm_packages/github/lipis/bootstrap-social@4.8.0/bootstrap-social.less";

::host {
    display: block;

#content {
    width: inherit;

Most of the work here is in the libraries that I bring in – I have to bring in both bootstrap and bootstrap-social to make this work.

Finally, there is a lot of work happening in the Javascript social-button.js file. My element definition includes a network (something like twitter), so I need to define that:

/* eslint-disable no-console */
/* eslint-env browser, es6 */

Polymer({ // eslint-disable-line new-cap, no-irregular-whitespace
    is: "social-button",

    properties: {
        network: {
            type: String,
            value: "bug",
            observer: "networkChanged"

The next three methods are hasClass(), addClass() and removeClass() – all of which have been covered elsewhere – you could use jQuery for those. There are some special cases to account for differences between the font awesome icons and the names I want to provide. To fix these differences, I’ve defined a “special casing” for the button name and the icon name:

    iconName: function (network) {
        "use strict";

        switch (network) {
            case "microsoft":
                return "fa-windows";
                return "fa-" + network;

    btnName: function (network) {
        "use strict";

        switch (network) {
            case "google":
                return "btn-google-plus";
                return "btn-" + network;

Finally, I’ve defined an observer for the network property called “networkChanged” – this does the work of swapping in the CSS classes as necessary:

     * The ready method is part of an elements lifecycle and is automatically
     * called when the template has been stamped and all elements in the local
     * DOM have been configured.
    networkChanged: function (newValue, oldValue) {
        "use strict";

        var oldIcon = this.iconName(oldValue),
            newIcon = this.iconName(newValue),
            oldBtn = this.btnName(oldValue),
            newBtn = this.btnName(newValue),
            iconEl = this.$.icon;

        var networkMsg = newValue.charAt(0).toUpperCase() + newValue.slice(1);

        this.removeClass(iconEl, oldIcon);
        this.addClass(iconEl, newIcon);
        this.$.msg.innerText = "Sign in with " + networkMsg;
        this.removeClass(this.$.content, oldBtn);
        this.addClass(this.$.content, newBtn);

This is actually an awful lot of work for some pretty basic CSS manipulation. Most of this is because I need to bring in libraries to do the manipulation. I’m sure that a quick look at the bootstrap-social less classes would lead me to select a different mechanism.

I’m about ready to merge this project back into my main CharacterSheet project now. You can find this code in tag testweb-4.