diff --git a/app/assets/javascripts/application.js b/app/assets/javascripts/application.js index ee803ef..4eec5ed 100644 --- a/app/assets/javascripts/application.js +++ b/app/assets/javascripts/application.js @@ -17,6 +17,7 @@ //= require highlight.pack //= require pickadate/picker //= require pickadate/picker.date +//= require inline-disqussions //= require mixpanel //= require pages //= require mobile-menu diff --git a/app/assets/stylesheets/modules/inline-disqussions.scss b/app/assets/stylesheets/modules/inline-disqussions.scss new file mode 100755 index 0000000..f4832da --- /dev/null +++ b/app/assets/stylesheets/modules/inline-disqussions.scss @@ -0,0 +1,108 @@ +.disqussion { + font-family: sans-serif; + font-size: 13px; + font-weight: bold; + left: 0; + line-height: 16px; + padding: 5px 10px 10px; + position: absolute; + text-align: center; + top: 0; + z-index: 7; + + &:hover a, &.hovered a { + background: #999999; + opacity: 1; + } + + &:hover a:after, &.hovered a:after { + border-top-color: #999999; + } + + a { + -moz-border-radius: 2px; + -moz-transition: all 0.5s; + -ms-border-radius: 2px; + -o-border-radius: 2px; + -o-transition: all 0.5s; + -webkit-border-radius: 2px; + -webkit-transition: all 0.5s; + background: #bbbbbb; + border-radius: 2px; + color: white; + cursor: pointer; + display: block; + height: 17px; + opacity: 0; + overflow: hidden; + text-decoration: none; + transition: all 0.5s; + width: 20px; + + &.has-comments { opacity: .8; } + + &:after { + -moz-transition: all 0.5s; + -o-transition: all 0.5s; + -webkit-transition: all 0.5s; + border-left: 7px solid transparent; + border-top: 7px solid #bbbbbb; + content: " "; + display: block; + height: 0; + left: 19px; + position: absolute; + top: 22px; + transition: all 0.5s; + width: 0; + } + } +} + +.disqussion-contain:hover .disqussion a { + opacity: 1; +} + +#disqussions_wrapper { + left: 0; + position: absolute; + top: 0; +} + +#disqus_thread.positioned { + -moz-box-sizing: border-box; + -webkit-box-sizing: border-box; + box-sizing: border-box; + left: 0; + padding: 5px 15px 0 15px; + position: absolute; + top: 0; +} + +.disqussion-highlight #disqus_thread.positioned { + background: #fff; + z-index: 9; +} + +#disqussions_overlay { + background: rgba(0, 0, 0, 0.5); + bottom: 0; + display: none; + left: 0; + position: fixed; + right: 0; + top: 0; + z-index: 8; +} + +.disqussion-highlighted { + background: #fff; + position: relative; + z-index: 9; +} + +.main-disqussion-link-wrp { + font-family: "Helvetica Neue", arial, sans-serif; + text-align: center; + a { color: $darkgray; } +} diff --git a/app/views/crowdblog/posts/_disqus.html.slim b/app/views/crowdblog/posts/_disqus.html.slim new file mode 100644 index 0000000..4c597c8 --- /dev/null +++ b/app/views/crowdblog/posts/_disqus.html.slim @@ -0,0 +1,20 @@ +#disqus_thread + +javascript: + var tabletSize = 1024; + var disqus_shortname = "#{ ENV['DISQUS_SHORTNAME'] }"; + var dsq = document.createElement('script'); + dsq.type = 'text/javascript'; + dsq.async = true; + dsq.src = 'http://' + disqus_shortname + '.disqus.com/embed.js'; + (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq); + + if ($(document).width() > tabletSize) { + $(document).ready(function() { + $('.body p').inlineDisqussions({ highlighted: true }); + }); + } + +a href="http://disqus.com" class="dsq-brlink" + | blog comments powered by + span class="logo-disqus" Disqus diff --git a/app/views/crowdblog/posts/show.html.slim b/app/views/crowdblog/posts/show.html.slim index 5b51ddd..90c3350 100644 --- a/app/views/crowdblog/posts/show.html.slim +++ b/app/views/crowdblog/posts/show.html.slim @@ -18,19 +18,4 @@ = previous_link_mobile(@post) .posts = render :partial => 'crowdblog/posts/post', :object => @post, :locals => { index_view: false } - #disqus_thread - - - if Rails.env.production? - coffee: - disqus_shortname = 'crowdinttech' - - dsq = document.createElement('script') - dsq.type = 'text/javascript' - dsq.async = true - dsq.src = 'http://' + disqus_shortname + '.disqus.com/embed.js' - (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq) - - - a href="http://disqus.com" class="dsq-brlink" - | blog comments powered by - span class="logo-disqus" Disqus + = render 'disqus' diff --git a/config/application.yml.example b/config/application.yml.example index 71675e9..092abc2 100644 --- a/config/application.yml.example +++ b/config/application.yml.example @@ -3,9 +3,11 @@ defaults: &defaults GOOGLE_APP_ID: 'your_google_app_id' GOOGLE_SECRET_KEY: 'your_google_secret_key' + DISQUS_SHORTNAME: 'your_disqus_shortname' development: <<: *defaults production: <<: *defaults + DISQUS_SHORTNAME: 'your_disqus_shortname' diff --git a/vendor/assets/javascripts/inline-disqussions.js b/vendor/assets/javascripts/inline-disqussions.js new file mode 100644 index 0000000..9de370e --- /dev/null +++ b/vendor/assets/javascripts/inline-disqussions.js @@ -0,0 +1,291 @@ +/* + * inlineDisqussions + * By Tsachi Shlidor ( @shlidor ) + * Inspired by http://mystrd.at/articles/multiple-disqus-threads-on-one-page/ + * + * USAGE: + * + * disqus_shortname = 'your_disqus_shortname'; + * $(document).ready(function() { + * $("p").inlineDisqussions(options); + * }); + * + * See https://github.com/tsi/inlineDisqussions for more info. + */ + +// Disqus global vars. +var disqus_shortname; +var disqus_identifier; +var disqus_url; + +(function($) { + + var settings = {}; + + $.fn.extend({ + inlineDisqussions: function(options) { + + // Set up defaults + var defaults = { + identifier: 'disqussion', + displayCount: true, + highlighted: false, + position: 'right', + background: 'white', + maxWidth: 9999 + }; + + // Overwrite default options with user provided ones. + settings = $.extend({}, defaults, options); + + // Append #disqus_thread to body if it doesn't exist yet. + if ($('#disqussions_wrapper').length === 0) { + $('
').appendTo($('body')); + } + if ($('#disqus_thread').length === 0) { + $('').appendTo('#disqussions_wrapper'); + } + else { + mainThreadHandler(); + } + if (settings.highlighted) { + $('').appendTo($('body')); + } + + // Attach a discussion to each paragraph. + $(this).each(function(i) { + disqussionNotesHandler(i, $(this)); + }); + + // Display comments count. + if (settings.displayCount) { + loadDisqusCounter(); + } + + // Hide the discussion. + $('html').click(function(event) { + if($(event.target).parents('#disqussions_wrapper, .main-disqussion-link-wrp').length === 0) { + hideDisqussion(); + } + }); + + } + }); + + var disqussionNotesHandler = function(i, node) { + + var identifier; + // You can force a specific identifier by adding an attribute to the paragraph. + if (node.attr('data-disqus-identifier')) { + identifier = node.attr('data-disqus-identifier'); + } + else { + while ($('[data-disqus-identifier="' + window.location.pathname + settings.identifier + '-' + i + '"]').length > 0) { + i++; + } + identifier = window.location.pathname + settings.identifier + '-' + i; + } + + // Create the discussion note. + var cls = settings.highlighted ? 'disqussion-link disqussion-highlight' : 'disqussion-link'; + var a = $('') + .attr('href', window.location.pathname + settings.identifier + '-' + i + '#disqus_thread') + .attr('data-disqus-identifier', identifier) + .attr('data-disqus-url', window.location.href + settings.identifier + '-' + i) + .attr('data-disqus-position', settings.position) + .text('+') + .wrap('') + .parent() + .appendTo('#disqussions_wrapper'); + a.css({ + 'top': node.offset().top, + 'left': settings.position == 'right' ? node.offset().left + node.outerWidth() : node.offset().left - a.outerWidth() + }); + + node.attr('data-disqus-identifier', identifier).mouseover(function() { + a.addClass("hovered"); + }).mouseout(function() { + a.removeClass("hovered"); + }); + + // Load the relative discussion. + a.delegate('a.disqussion-link', "click", function(e) { + e.preventDefault(); + + if ($(this).is('.active')) { + e.stopPropagation(); + hideDisqussion(); + } + else { + loadDisqus($(this), function(source) { + relocateDisqussion(source); + }); + } + + }); + + }; + + var mainThreadHandler = function() { + + // Create the discussion note. + if ($('a.main-disqussion-link').length === 0) { + + var a = $('') + .attr('href', window.location.pathname + '#disqus_thread') + .text('Comments') + .wrap('') + .parent() + .insertBefore('#disqus_thread'); + + // Load the relative discussion. + a.delegate('a.main-disqussion-link', "click", function(e) { + e.preventDefault(); + + if ($(this).is('.active')) { + e.stopPropagation(); + } + else { + loadDisqus($(this), function(source) { + relocateDisqussion(source, true); + }); + } + + }); + + } + + }; + + var loadDisqus = function(source, callback) { + + disqus_identifier = source.attr('data-disqus-identifier'); + disqus_url = source.attr('data-disqus-url'); + + if (window.DISQUS) { + // If Disqus exists, call it's reset method with new parameters. + DISQUS.reset({ + reload: true, + config: function () { + this.page.identifier = disqus_identifier; + this.page.url = disqus_url; + } + }); + + } else { + + // Append the Disqus embed script to . + var s = document.createElement('script'); + s.type = 'text/javascript'; + s.async = true; + s.src = '//' + disqus_shortname + '.disqus.com/embed.js'; + $('head').append(s); + + } + + // Add 'active' class. + $('a.disqussion-link, a.main-disqussion-link').removeClass('active').filter(source).addClass('active'); + + // Highlight + if (source.is('.disqussion-highlight')) { + highlightDisqussion(disqus_identifier); + } + + callback(source); + + }; + + var loadDisqusCounter = function() { + + // Append the Disqus count script to . + if (!$('script[src*="disqus.com/count.js"]').length) { + var s = document.createElement('script'); + s.type = 'text/javascript'; + s.async = true; + s.src = '//' + disqus_shortname + '.disqus.com/count.js'; + + $('head').append(s); + + var limit = 0; + var timer = setInterval(function() { + limit++; + // After script is loaded, show bubles with numbers. + if (typeof(DISQUSWIDGETS) === 'object') { + $('.disqussion-link').filter(function() { + return $(this).text().match(/[1-9]/g); + }).addClass("has-comments"); + clearInterval(timer); + } + // Don't run forever. + if (limit > 10) { + clearInterval(timer); + } + }, 1000) + + } + + }; + + var relocateDisqussion = function(el, main) { + + // Move the discussion to the right position. + var css = {}; + if (main === true) { + $('#disqus_thread').removeClass("positioned"); + css = { + 'position': 'static', + 'width': 'auto' + }; + } + else { + $('#disqus_thread').addClass("positioned"); + css = { + 'position': 'absolute' + }; + } + css.backgroundColor = settings.background; + + var animate = {}; + if (el.attr('data-disqus-position') == 'right') { + animate = { + 'top': el.offset().top - 100, + "left": el.offset().left + el.outerWidth(), + "width": Math.min(parseInt($(window).width() - (el.offset().left + el.outerWidth()), 10), settings.maxWidth) + }; + } + else if (el.attr('data-disqus-position') == 'left') { + animate = { + 'top': el.offset().top - 100, + "left": el.offset().left - Math.min(parseInt(el.offset().left, 10), settings.maxWidth), + "width": Math.min(parseInt(el.offset().left, 10), settings.maxWidth) + }; + } + + $('#disqus_thread').stop().fadeIn('fast').animate(animate, "fast").css(css); + + }; + + var hideDisqussion = function() { + + $('#disqus_thread').stop().fadeOut('fast'); + $('a.disqussion-link').removeClass('active'); + + // settings.highlighted + $('#disqussions_overlay').fadeOut('fast'); + $('body').removeClass('disqussion-highlight'); + $('[data-disqus-identifier]').removeClass('disqussion-highlighted'); + + }; + + var highlightDisqussion = function(identifier) { + + $('body').addClass('disqussion-highlight'); + $('#disqussions_overlay').fadeIn('fast'); + $('[data-disqus-identifier]') + .removeClass('disqussion-highlighted') + .filter('[data-disqus-identifier="' + identifier + '"]:not(".disqussion-link")') + .addClass('disqussion-highlighted'); + + }; + +})(jQuery);