Merge pull request #621 from cyclestreets/151_social_media

151 social media

.gitignore

@@ -18,3 +18,4 @@ routes.txt
 public/system
 .DS_Store
 resque_web.url
+node_modules/

Gemfile

@@ -17,10 +17,9 @@ gem 'rgeo-geojson'
 gem 'kaminari'
 gem 'kaminari-i18n'
 gem 'rails_autolink'
-gem 'tweet-button'
 gem 'chartkick'
-gem 'leaflet-rails'
 gem 'jqcloud-rails', github: 'GovSciences/jqcloud-rails'
+gem 'browserify-rails'
 # gem 'jquery-turbolinks'
 
 # Back-end gems

Gemfile.lock

@@ -75,6 +75,9 @@ GEM
       ice_nine (~> 0.11.0)
       thread_safe (~> 0.3, >= 0.3.1)
     bcrypt (3.1.11)
+    browserify-rails (3.1.0)
+      railties (>= 4.0.0, < 5.1)
+      sprockets (>= 3.5.2)
     builder (3.2.2)
     bullet (5.2.0)
       activesupport (>= 3.0.0)
@@ -221,7 +224,6 @@ GEM
       rails
     launchy (2.4.3)
       addressable (~> 2.3)
-    leaflet-rails (0.7.7)
     letter_opener (1.4.1)
       launchy (~> 2.2)
     loofah (2.0.3)
@@ -429,7 +431,6 @@ GEM
     thumbs_up (0.4.6)
       activerecord
     tilt (2.0.5)
-    tweet-button (0.1.0)
     tzinfo (1.2.2)
       thread_safe (~> 0.1)
     uglifier (3.0.1)
@@ -465,6 +466,7 @@ DEPENDENCIES
   activerecord-postgis-adapter
   annotate (>= 2.5.0)
   attribute_normalizer
+  browserify-rails
   bullet
   capybara
   chartkick
@@ -496,7 +498,6 @@ DEPENDENCIES
   kaminari
   kaminari-i18n
   launchy
-  leaflet-rails
   letter_opener
   map_layers
   mustache
@@ -537,7 +538,6 @@ DEPENDENCIES
   test_after_commit
   thin
   thumbs_up (~> 0.4.6)
-  tweet-button
   uglifier (>= 1.3.0)
   webmock
   whenever

app/assets/javascripts/application.js

@@ -6,7 +6,6 @@
 //
 //= require jquery
 //= require jquery_ujs
-//= require jquery.autosize
 //= require jquery.cookie
 //= require jquery.selectboxes
 //= require jquery-ui/autocomplete
@@ -15,20 +14,15 @@
 //= require jquery-ui/dialog
 //= require jquery-ui/slider
 //= require autocomplete-rails
-//= require knockout
 //= require superbly-tagfield.min
 //= require map_display
 //= require ui
 //= require tags
 //= require library_message
 //= require thread_scroller
-//= require leaflet
-//= require slick.min
 //= require jquery.tagsinput
 //= require jquery-ui-sliderAccess
 //= require jquery-ui-timepicker-addon.min
-//= require geojson-bbox.js
-//= require leaflet-search.src.js
-//= require leaflet.draw-src.js
 //= require leaflet-layerjson.src.js
 //= require jqcloud
+//= require social

app/assets/javascripts/library_message.js.coffee

@@ -1,3 +1,6 @@
+ko = require('knockout')
+slick = require('slick-carousel-browserify')
+
 class LibraryMessageView
   constructor: (@panel) ->
     # Items loaded at the start
@@ -30,7 +33,7 @@ class LibraryMessageView
     @results(data)
     $("#library-recent").hide()
     $("#library-results").show()
-    $('.scrollable').slick('setPosition')
+    slick($('.scrollable'), 'setPosition')
 
   show_error: (xhr, status, error) =>
     console.log xhr, status, error
@@ -47,23 +50,23 @@ class LibraryMessageView
 
 jQuery ->
   scroller = $('.scrollable')
-  scroller.slick(
+  slick(scroller, {
     dots: false
     arrows: false
     adaptiveHeight: true
     draggable: false
-  )
+  })
 
   if $("#from-library").length > 0
     library_message_view = new LibraryMessageView($("#from-library"))
 
     # Select button
     $("#from-library").on "click", "a.select", (e) ->
-      scroller.slick('slickNext')
+      slick(scroller, 'slickNext')
       false
 
     $("#add-library-item > a.prev").click ->
-      scroller.slick('slickPrev')
+      slick(scroller, 'slickPrev')
 
     $('a[href="#from-library"]').click ->
-      scroller.slick('setPosition')
+      slick(scroller, 'setPosition')

app/assets/javascripts/map_display.js.coffee.erb

@@ -1,3 +1,9 @@
+L = require('leaflet')
+require('leaflet-search/dist/leaflet-search.src.js')
+require('leaflet-draw')
+
+L.Icon.Default.imagePath = "<%= image_path('map-icons/m-misc.png') %>"
+
 jQuery ->
   class LeafletMap
     @OpenCycle: 'https://{s}.tile.cyclestreets.net/opencyclemap/{z}/{x}/{y}@2x.png'

app/assets/javascripts/social.js

@@ -0,0 +1,23 @@
+window.twttr = (function(d, s, id) {
+  var js, fjs = d.getElementsByTagName(s)[0],
+    t = window.twttr || {};
+    if (d.getElementById(id)) return t;
+      js = d.createElement(s);
+      js.id = id;
+      js.src = "https://platform.twitter.com/widgets.js";
+      fjs.parentNode.insertBefore(js, fjs);
+
+      t._e = [];
+      t.ready = function(f) {
+        t._e.push(f);
+      };
+      return t;
+  }(document, "script", "twitter-wjs"));
+
+(function(d, s, id) {
+  var js, fjs = d.getElementsByTagName(s)[0];
+  if (d.getElementById(id)) return;
+  js = d.createElement(s); js.id = id;
+  js.src = "//connect.facebook.net/en_GB/all.js#xfbml=1";
+  fjs.parentNode.insertBefore(js, fjs);
+}(document, 'script', 'facebook-jssdk'));

app/assets/javascripts/ui.js.coffee

@@ -1,3 +1,5 @@
+require('autosize/build/jquery.autosize.js')
+
 jQuery ->
   # Tabs
   $(".tabs").parent().tabs()

app/assets/stylesheets/content.scss

@@ -905,3 +905,8 @@ div.tagsinput{
   @extend .tag-item;
   font-size: 14px;
 }
+
+section.social {
+  line-height: 10px;
+  min-height: 10px;
+}

app/assets/stylesheets/maps.scss

@@ -1,4 +1,3 @@
-
 // Maps
 
 #map {

app/helpers/application_helper.rb

@@ -1,7 +1,14 @@
 module ApplicationHelper
-  include TweetButton
+  def tweet_button(text:, link:, size: nil, via: 'cyclescape')
+    link_to "Tweet", "https://twitter.com/intent/tweet",
+      class: "twitter-share-button",
+      data: { text: text, link: link, size: size, via: via}
+  end
 
-  TweetButton.default_tweet_button_options = { via: 'cyclescape', count: 'horizontal' }
+  def facebook_like(link, layout: 'button')
+    tag(:div, class: "fb-share-button",
+                data: { href: link, layout: layout} )
+  end
 
   def cancel_link(url = { action: :index })
     content_tag('li', class: 'action link_action cancel') do

app/views/issues/show.html.haml

@@ -59,6 +59,10 @@
 %aside#sidebar.wide
   - if permitted_to? :create, :issue_message_threads
     = link_to t(".new_thread", count: @issue.threads.count), new_issue_thread_path(@issue), class: "btn-green", rel: "#overlay"
+  %section.social
+    = tweet_button text: @issue.title, link: issue_url(@issue)
+    = facebook_like issue_url(@issue)
+
   %section.threads
     %header
       %h2= t ".threads"
@@ -73,8 +77,6 @@
     %section.photos
       = link_to issue_photo_path(@issue), rel: "#overlay" do
         = @issue.standard_photo_image
-  %section.social
-    = tweet_button( text: @issue.title )
 
 :javascript
   $( document ).ready(function() {

app/views/layouts/application.html.haml

@@ -14,7 +14,13 @@
       %meta{property: "og:image", content: page_image}
     - if page_description
       %meta{name: "description", content: page_description}
+      %meta{property: "og:description", content: page_description}
+    - if page_title
+      %meta{property: "og:title", content: page_title.gsub(" - #{t('application_name')}", "")}
+    %meta{property: "og:site_name", content: t('application_name')}
+
   %body{class: [Rails.env, controller_path.tr("/_", "-")].join(" ")}
+    #fb-root
     %header#site-header(role="banner")
       .wrapper
         - if current_group

app/views/message_threads/show.html.haml

@@ -55,6 +55,9 @@
         .map-data{"data-center" => location_to_geojson(@issue.location),
           "data-opts" => { domid: map_id, hidelayers: true, feature: item_to_geojson(@issue), hidezoom: true }.to_json}
       = link_to t(".issues-nearby"), '/issues#map-pane', class: "btn-green"
+  %section.social
+    = tweet_button text: @thread.title, link: thread_url(@issue)
+    = facebook_like thread_url(@issue)
   = render "priority_panel"
   = render "subscribers_panel", group: @thread.group, subscribers: @subscribers
   = render "library_panel", items: @library_items, thread_tags: @thread.tags

config/application.rb

@@ -47,6 +47,7 @@ class Application < Rails::Application
 
     # Version of your assets, change this if you want to expire all your assets
     config.assets.version = '1.0'
+    config.assets.paths << "node_modules"
 
     # Set cache storage
     config.cache_store = :redis_store
@@ -70,5 +71,40 @@ class Application < Rails::Application
 
     # Active Job
     config.active_job.queue_adapter = :resque
+
+    # Specify the file paths that should be browserified. We browserify everything that
+    # matches (===) one of the paths. So you will most likely put lambdas
+    # regexes in here.
+    #
+    # By default only files in /app and /node_modules are browserified,
+    # vendor stuff is normally not made for browserification and may stop
+    # working.
+    config.browserify_rails.paths << /vendor\/assets\/javascripts\/module\.js/
+
+    # Environments in which to generate source maps
+    #
+    # The default is none
+    config.browserify_rails.source_map_environments << "development"
+
+    # Should the node_modules directory be evaluated for changes on page load
+    #
+    # The default is `false`
+    # config.browserify_rails.evaluate_node_modules = true
+
+    # Force browserify on every found JavaScript asset if true.
+    # Can be a proc.
+    #
+    # The default is `false`
+    # config.browserify_rails.force = ->(file) { File.extname(file) == ".ts" }
+
+    # Command line options used when running browserify
+    #
+    # can be provided as a string:
+    config.browserify_rails.commandline_options = "-t coffeeify --extension=\".js.coffee\""
+
+    # Define NODE_ENV to be used with envify
+    #
+    # defaults to Rails.env
+    # config.browserify_rails.node_env = "production"
   end
 end

package.json

@@ -0,0 +1,23 @@
+{
+  "name": "cyclescape",
+  "dependencies": {
+    "autosize": "^1.18.13",
+    "browserify": "~10.2.4",
+    "browserify-incremental": "^3.0.1",
+    "coffeeify": "~0.6",
+    "jquery-ui-timepicker-addon": "1.5.5",
+    "knockout": "3.4.0",
+    "leaflet": "0.7.7",
+    "leaflet-draw": "0.2.4",
+    "leaflet-search": "1.9.8",
+    "slick-carousel-browserify": "1.6.12"
+  },
+  "license": "MIT",
+  "engines": {
+    "node": ">= 0.10"
+  },
+  "repository": {
+    "type" : "git",
+    "url" : "https://github.com/cyclestreets/cyclescape"
+  }
+}