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.
sharrre.com
MIT License
1.04k stars 413 forks source link

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

Open ghost opened 8 years ago

ghost commented 8 years ago

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.

ghost commented 8 years ago

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,