Julienh / Sharrre

Make your sharing widget! Sharrre is a jQuery plugin that allows you to create nice widgets sharing for Facebook, Twitter, Google Plus (with PHP script) and more.

Home Page:sharrre.com

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

For some unknown reason to me, the latest version of the plugin does not work with Drupal

opened this issue · comments

Hello smeeckaert,

First at all I want to thank you for this wonderful plugin.

I also want to tell you that some time ago I implemented the Drupal module (https://www.drupal.org/project/sticky_sharrre_bar) that uses this plugin.
This worked fine as long as I used '1.3.5' version, but today I was trying to update a source code of my module to use '2.0.1' version and as the result I see: "TypeError: Cannot read property 'googlePlus' of undefined".
I'm not very good at JS. If you have a time, can you do code review?
Probably it is just my typo.
The link to JS code http://cgit.drupalcode.org/sticky_sharrre_bar/tree/js/sticky_sharrre_bar.js?h=8.x-1.x
Drupal 8 uses jQuery v2.1.4, but don't think that a drupal issue.

The html code generated by drupal:

<div class="sticky_sharrre_bar stickable">

      <h2 class="title">In consectetuer turpis ut</h2>

  <ul class="share_list">
          <li>
        <div class="share_on googlePlus" id="googlePlus" data-title="In consectetuer turpis ut" data-url="http://easydrupal.dev/en/article/consectetuer-turpis-ut"></div>
      </li>
          <li>
        <div class="share_on facebook" id="facebook" data-title="In consectetuer turpis ut" data-url="http://easydrupal.dev/en/article/consectetuer-turpis-ut"></div>
      </li>
          <li>
        <div class="share_on twitter" id="twitter" data-title="In consectetuer turpis ut" data-url="http://easydrupal.dev/en/article/consectetuer-turpis-ut"></div>
      </li>
          <li>
        <div class="share_on linkedin" id="linkedin" data-title="In consectetuer turpis ut" data-url="http://easydrupal.dev/en/article/consectetuer-turpis-ut"></div>
      </li>
          <li>
        <div class="share_on digg" id="digg" data-title="In consectetuer turpis ut" data-url="http://easydrupal.dev/en/article/consectetuer-turpis-ut"></div>
      </li>
          <li>
        <div class="share_on delicious" id="delicious" data-title="In consectetuer turpis ut" data-url="http://easydrupal.dev/en/article/consectetuer-turpis-ut"></div>
      </li>
          <li>
        <div class="share_on stumbleupon" id="stumbleupon" data-title="In consectetuer turpis ut" data-url="http://easydrupal.dev/en/article/consectetuer-turpis-ut"></div>
      </li>
          <li>
        <div class="share_on pinterest" id="pinterest" data-title="In consectetuer turpis ut" data-url="http://easydrupal.dev/en/article/consectetuer-turpis-ut"></div>
      </li>
          <li>
        <div class="share_on tumblr" id="tumblr" data-title="In consectetuer turpis ut" data-url="http://easydrupal.dev/en/article/consectetuer-turpis-ut"></div>
      </li>
      </ul>
</div>

Also, you can ping in Skype (mamont77) in any time.

Thank you in advance.

The same for '2.0.0' version. I think I found it.
Drupal v8 uses jQuery in a no-conflict mode.

For example, my module has following code:

(function ($, Drupal, drupalSettings) {
  "use strict";

  Drupal.behaviors.stickySharrreBarRender = {
    attach: function (context) {
        $('#twitter', context).sharrre({
          share: {
            twitter: true
          },
          template: '<a class="box" href="#"><div class="count" href="#">{total}</div><div class="share"><span></span>Tweet</div></a>',
          enableHover: false,
          enableTracking: true,
          buttons: { twitter: {via: '_JulienH'}},
          click: function(api, options){
            api.simulateClick();
            api.openPopup('twitter');
          }
        });
    }
  };
})(jQuery, Drupal, drupalSettings);

in my code $ is available,
in jquery.sharrre.js $ is available,
but in platform.js and twitter.js unavailable!

And I don't know how to fix it using my code only. But it works good, if I am adding wrapper via:

(function ($, window, document, undefined) {
//...
})(window.jQuery || window.Zepto, window, document);

Can anybody help me?
Thank in advance,