Styla - Custom Modules Boilerplate

This is a code playground for the Social Sharing Custom Modules created in the official docs

by Antonio Cosentino

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/1.3.0/handlebars.js"></script>
<script id="styla-demo" type="text/x-handlebars-template">
    <div id="styla-demo-wrapper">
        <div class="socialSharing">
           <span>{{ content.headerTitle }}</span>
           {{#each content.icons}}
               {{#if isShown }}
                   <a data-service-name="{{identifier}}" href="#">
                       <img
                           style="padding-left: {{ ../../settings.iconsPadding}}px; padding-right: {{ ../../settings.iconsPadding}}px; width: {{ ../../settings.iconsSize}}px; height: {{ ../../settings.iconsSize}}px;"
                           src="{{ image.url }}"
                           alt="{{ image.alt }}"
                           title="{{ title }}"
                      />
                   </a>
               {{/if }}
           {{/each}}
        </div>
    </div>
</script>

CSS

.socialSharing {
  margin-top: 40px;
  text-align: center;
}


.socialSharing > span {
  display: block;
  font-size: 20px;
  font-weight: bold;
  font-family: 'Helvetica Neue', Arial, sans-serif;
  margin-bottom: 20px;
}

.socialSharing > a {
  text-decoration: none;
}

JavaScript

var source = $("#styla-demo").html();
var template = Handlebars.compile(source);
// the following data is copy/pasted from the "edit as JSON" section 
// in the Styla Editor
var context = {
  "content": {
    "icons": [{
        "image": {
          "id": "7eb5fb5b-0e76-46fd-bd39-30b0dc207258",
          "url": "https://styla-stage-eu.imgix.net/4195631b-9302-40f8-a977-95842159289a/1595435476033_2b58b40b-6887-4226-9115-5bf316893e57",
          "ratio": 0.99375,
          "width": 160,
          "height": 159,
          "cropping": {
            "top": 0,
            "left": 0,
            "right": 160,
            "width": 160,
            "bottom": 159,
            "height": 159
          },
          "mimeType": "image/png",
          "attributes": [],
          "fileExtension": null,
          "categoriesReadable": []
        },
        "title": "Share on Facebook",
        "isShown": true,
        "identifier": "facebook"
      },
      {
        "image": {
          "id": "86bc2a11-43cd-4700-a67e-5da541c87a81",
          "url": "https://styla-stage-eu.imgix.net/4195631b-9302-40f8-a977-95842159289a/1595435480750_e7ae25a2-761f-43b3-a6c2-9825ea63dae2",
          "ratio": 1,
          "width": 159,
          "height": 159,
          "cropping": {
            "top": 0,
            "left": 0,
            "right": 159,
            "width": 159,
            "bottom": 159,
            "height": 159
          },
          "mimeType": "image/png",
          "attributes": [],
          "fileExtension": null,
          "categoriesReadable": []
        },
        "title": "Share on Twitter",
        "isShown": true,
        "identifier": "twitter"
      },
      {
        "image": {
          "id": "bb6f7c5a-e9d9-4d75-bb88-9eeec2efd1f3",
          "url": "https://styla-stage-eu.imgix.net/4195631b-9302-40f8-a977-95842159289a/1595435469816_1ec2a842-3612-4891-8d75-f1c58a99429b",
          "ratio": 1,
          "width": 159,
          "height": 159,
          "cropping": {
   ...