Correct duplicate id, add BEM Class, correct title attribute to data-title

js/sharer-opener.js

@@ -7,7 +7,7 @@
 (function ($) {
   Drupal.behaviors.sharerOpener = {
     attach: function (context, settings) {
-      $('#sharer-toolbar a', context).click(function () {
+      $('#sharer-toolbar-list', context).find('.shareLink__link').click(function () {
 
         // Parse URL to get protocol
         var parser = document.createElement('a');
@@ -15,7 +15,7 @@
 
         // Open popup if protocol is different from «mailto»
         if (parser.protocol !== 'mailto:') {
-          window.open($(this).attr('href'), $(this).attr('title'), "width=640, height=480");
+          window.open($(this).attr('href'), $(this).data('title'), "width=640, height=480");
           return false;
         }
       });

sharer-toolbar.tpl.php

@@ -6,12 +6,12 @@
  */
 
 ?>
-<div id="sharer-toolbar-container">
-  <div id="sharer-toolbar"><?php print t($title); ?></div>
-  <ul id="sharer-toolbar">
+<div id="sharer-toolbar-container" class="shareLink">
+  <button id="sharer-toolbar-btn" class="shareLink__trigger"><?php print t($title); ?></button>
+  <ul id="sharer-toolbar-list"  class="shareLink__list">
     <?php foreach ($sharers as $sid => $sharer) : ?>
-      <li class="shareLink__<?php print $sid; ?>">
-        <a href="<?php print $sharer['url']; ?>" title="<?php print t($sharer['label']); ?>">
+      <li class="shareLink__item shareLink__item--<?php print $sid; ?>">
+        <a class="shareLink__link shareLink__link--<?php print $sid; ?>" href="<?php print $sharer['url']; ?>" data-title="<?php print t($sharer['label']); ?>">
           <i class="<?php print $sharer['icon_class']; ?>"></i><?php print t($sharer['label']); ?>
         </a>
       </li>