Added chat

DevProcfile

@@ -0,0 +1 @@
+web: bundle exec puma -C config/puma-dev.rb

Gemfile

@@ -1,5 +1,6 @@
 source "http://rubygems.org"
 
+gem "foreman"
 gem "puma"
 gem "sinatra"
 gem "json"

Gemfile.lock

@@ -3,6 +3,8 @@ GEM
   specs:
     emk-sinatra-url-for (0.2.1)
       sinatra (>= 0.9.1.1)
+    foreman (0.78.0)
+      thor (~> 0.19.1)
     haml (4.0.5)
       tilt
     hashie (3.2.0)
@@ -16,13 +18,15 @@ GEM
       rack (~> 1.4)
       rack-protection (~> 1.4)
       tilt (~> 1.3, >= 1.3.4)
+    thor (0.19.1)
     tilt (1.4.1)
 
 PLATFORMS
   ruby
 
 DEPENDENCIES
   emk-sinatra-url-for
+  foreman
   haml
   hashie
   json

Procfile

@@ -0,0 +1 @@
+web: bundle exec puma -C config/puma.rb

config/puma-dev.rb

@@ -0,0 +1,10 @@
+workers 5
+threads 1, 1
+#
+# ssl_bind '127.0.0.1', '9190', { key: "config/ssl/localhost.key", cert: "config/ssl/localhost.crt" }
+
+preload_app!
+
+rackup      DefaultRackup
+port        9190
+environment ENV['RACK_ENV'] || 'development'

config/puma.rb

@@ -0,0 +1,8 @@
+workers Integer(ENV['PUMA_WORKERS'] || 5)
+threads_count = Integer(ENV['MAX_THREADS'] || 1)
+threads threads_count, threads_count
+preload_app!
+
+rackup      DefaultRackup
+port        ENV['PORT']     || 9190
+environment ENV['RACK_ENV'] || 'development'

me.rb

@@ -4,15 +4,31 @@
 class CiberchApp < Sinatra::Base
   helpers Sinatra::UrlForHelper
 
+  before do
+    @chat_url = ENV['CHAT_URL'] || "http://jeff-test.crushpath.us/spots/2756/chat"
+    @chat_base_url = ENV['CHAT_BASE_URL'] || "localhost:5001"
+    @appid = ENV['facebook_app_id']
+    @host = ENV['HOST'] || 'localhost:9292'
+  end
+
   get "/" do
+
     @me = YAML.load_file("poco.yml")
     @me = Hashie::Mash.new(@me)
     @full_url = url_for("/", :full)
     @description = "Who is #{@me.preferred_username || @me.display_name} ?"
     @image = url_for(@me.photos.first.value, :full)
     @title = @me.display_name
-    @appid = ENV['facebook_app_id']
+
     haml :index
   end
+
+  get "/chat" do
+    haml :chat
+  end
+
+  get "/microsite" do
+    haml :microsite
+  end
 end
 

public/stylesheets/alt_snippetchat.css

@@ -0,0 +1,153 @@
+.hidden {
+    display: none;
+}
+
+.cp-chat-button {
+    display:none;
+    /*color: #fff;*/
+    /*cursor: pointer;*/
+    /*background-color: #F26C33;*/
+    /*border-top-right-radius: 5px;*/
+    /*border-top-left-radius: 5px;*/
+    /*margin: 2px 0px 0 0;*/
+    /*padding: 6px 40px 6px 12px;*/
+    /*text-decoration: none;*/
+    /*display: block;*/
+}
+
+.cp-chat-button:hover {
+    text-decoration: none;
+    color: #fff;
+}
+
+.cp-chat-button:link {
+    text-decoration: none;
+    color: #fff;
+}
+
+.cp-chat-button:visited {
+    text-decoration: none;
+    color: #fff;
+}
+
+.cp-chat-button:active {
+    text-decoration: none;
+    color: #fff;
+}
+
+.cp-chat-button:focus {
+    text-decoration: none;
+    color: #fff;
+}
+
+.cp-icon-angle {
+    font-family: monospace;
+    position: absolute;
+    right: 8px;
+    font-size: 25px;
+    padding-top: 0px;
+}
+
+.cp-icon-angle-down {
+    margin-top: -11px;
+    -ms-transform: rotate(180deg);
+    -webkit-transform: rotate(180deg);
+    transform: rotate(180deg);
+}
+
+.cp-chat-wrapper {
+    width: 300px;
+    height: 400px;
+    border-top: 1px solid #e7e7e7;
+    border-left: 1px solid #e7e7e7;
+    border-right: 1px solid #e7e7e7;
+    border-top-left-radius: 6px;
+    border-top-right-radius: 6px;
+    background-color: #f7f8fa;
+}
+
+.cp-chat-iframe {
+    height: 400px;
+}
+
+.cp-app {
+    position: fixed;
+    bottom: 0;
+    right: 30px;
+    font-size: 14px;
+    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+}
+
+@-webkit-keyframes bouncedelay {
+    0% {
+        -webkit-transform: scale(0.0);
+    }
+    40% {
+        -webkit-transform: scale(1.0);
+    }
+    80% {
+        -webkit-transform: scale(0.0);
+    }
+    100% {
+        -webkit-transform: scale(0.0);
+    }
+}
+
+@keyframes bouncedelay {
+    0% {
+        transform: scale(0.0);
+        -webkit-transform: scale(0.0);
+    }
+    40% {
+        transform: scale(1.0);
+        -webkit-transform: scale(1.0);
+    }
+    80% {
+        transform: scale(1.0);
+        -webkit-transform: scale(1.0);
+    }
+    100% {
+        transform: scale(1.0);
+        -webkit-transform: scale(1.0);
+    }
+}
+
+.ui-loading {
+    padding-top: 180px;
+    text-align: center;
+}
+
+.ui-loading-text {
+    display: inline-block;
+    padding: 20px 0;
+    color: #626367;
+}
+
+
+.spinner {
+    margin: 0 auto 0;
+    width: 70px;
+    text-align: center;
+}
+
+.spinner > div {
+    width: 18px;
+    height: 18px;
+    background-color: #CDCED0;
+    border-radius: 100%;
+    display: inline-block;
+    -webkit-animation: bouncedelay 1.4s infinite ease-in-out;
+    animation: bouncedelay 1.4s infinite ease-in-out;
+    -webkit-animation-fill-mode: both;
+    animation-fill-mode: both;
+}
+
+.spinner .bounce1 {
+    -webkit-animation-delay: -0.32s;
+    animation-delay: -0.32s;
+}
+
+.spinner .bounce2 {
+    -webkit-animation-delay: -0.16s;
+    animation-delay: -0.16s;
+}

views/chat.haml

@@ -0,0 +1,10 @@
+.row
+  .span6
+    %h1 User ChatTest
+%br/
+%br/
+
+.row
+  .span6
+    %iframe{:src => "https://#{@chat_base_url}/users/~/chat?skipRedirect=1", :height => "454px", :width => "277px"}
+

views/index.haml

@@ -1,3 +1,14 @@
+%a{:href=>"https://github.com/ciberch/sinatra-cloudfoundry-basic-website"}
+  %img{:style=>"position: absolute; top: 0; right: 0; border: 0;",  :src=>"https://a248.e.akamai.net/assets.github.com/img/e6bef7a091f5f3138b8cd40bc3e114258dd68ddf/687474703a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f7265645f6161303030302e706e67", :alt=>"Fork you on GitHub"}
+  .row
+    .hero-unit.blue.first-hero
+      .row
+        .span1
+          %img.small.avatar{:src => @image}
+        .span7
+          %h2="#{@title} - @#{@me.preferred_username}"
+          %p=@me.tagline
+  .clear
 .row
   .span12
     %p=@me.about

views/layout.haml

@@ -10,27 +10,20 @@
     %meta{:prefix=>"fb:http://ogp.me/ns/fb#", :property => "fb:app_id", :content=> @appid}
     %link{:rel=>'stylesheet', :href=>'/stylesheets/bootstrap.min.css', :type => "text/css"}
     %link{:rel=>'stylesheet', :href=>'/stylesheets/style.css', :type => "text/css"}
+    %style
+      a.cp-chat-button { display: 'none'}
   %body
-    #fb-root
-    :javascript
-      (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_US/all.js#xfbml=1&appId=#{@appid}";
-       fjs.parentNode.insertBefore(js, fjs);
-       }(document, 'script', 'facebook-jssdk'));
+    - if @do_fb
+      #fb-root
+      :javascript
+        (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_US/all.js#xfbml=1&appId=#{@appid}";
+         fjs.parentNode.insertBefore(js, fjs);
+         }(document, 'script', 'facebook-jssdk'));
     .content.container
-      %a{:href=>"https://github.com/ciberch/sinatra-cloudfoundry-basic-website"}
-        %img{:style=>"position: absolute; top: 0; right: 0; border: 0;",  :src=>"https://a248.e.akamai.net/assets.github.com/img/e6bef7a091f5f3138b8cd40bc3e114258dd68ddf/687474703a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f7265645f6161303030302e706e67", :alt=>"Fork you on GitHub"}
-      .row
-        .hero-unit.blue.first-hero
-          .row
-            .span1
-              %img.small.avatar{:src => @image}
-            .span7
-              %h2="#{@title} - @#{@me.preferred_username}"
-              %p=@me.tagline
-      .clear
       =yield
-      .fb-like{"data-href" =>@full_url, "data-send" => "true", "data-show-faces" => "true", "data-width" => "450"}
+      - if @do_fb
+        .fb-like{"data-href" =>@full_url, "data-send" => "true", "data-show-faces" => "true", "data-width" => "450"}

views/microsite.haml

@@ -0,0 +1,48 @@
+
+- if @chat_url &&  @chat_base_url
+  :javascript
+      var customCSS = "#{@host}/stylesheets/alt_snippetchat.css";
+      var CPChat = CPChat || {spotURL: "#{@chat_url}", bundleURL: "#{@chat_base_url}" + '/javascripts/snippet/bundle.js', styleURL: customCSS};
+      (function() {
+        var cp = document.createElement('script'); cp.type = 'text/javascript'; cp.async = true;
+        cp.src = "//"+CPChat.bundleURL;
+        var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(cp, s);
+      })();
+
+      function openChat(){
+        document.getElementsByClassName("cp-chat-button")[0].click();
+      }
+
+
+.row
+  .span6
+    %h1 Microsite ChatTest
+
+%br/
+%br/
+.row
+  .span6 Element partitioned digital proxy record network boolean, software transistorized supporting recognition controller.
+  %br/
+%br/
+.row
+  .span6 Proxy logarithmic in backbone controller gigabyte. Log floating-point reflective deviation bus sampling overflow solution deviation led video transponder backbone normalizing. Generator development for for bus cable, bypass, reducer feedback phase. Metafile supporting video application procedural development data, reducer prompt, processor infrared, normalizing harmonic metafile. Feedback phase network, disk logistically element bus bypass distributed scan. Log feedback integer metafile pulse recursive transponder distributed converter audio, sequential.
+  %br/
+  %br/
+.row
+  .span6 Computer pulse partitioned, dithering deviation, silicon. Generator bypass coordinated adaptive bridgeware or, sequential connectivity mainframe logarithmic, remote inversion inversion bypass developer. Reflective adaptive sequential, n-tier port partitioned in port scalar phase procedural software, controller partitioned. Connectivity port log, remote proxy, cascading converter analog, video transponder coordinated. Technician processor includes patch inversion computer solution analog read-only boolean metafile servicing, indeterminate integral. Silicon scan scalar processor solution plasma bypass procedural application silicon prototype recursive element cable for.
+  %br/
+  %br/
+
+.row
+  .span6 Procedural hyperlinked patch disk, fragmentation, transponder pulse femtosecond computer scan, transponder. Infrared reflective arrray boolean broadband servicing high resistor. Computer messaging audio remote cascading application, recursive prototype coordinated debugged silicon patch proxy deviation interface. Element device remote scan frequency kilohertz. Adaptive includes broadband computer frequency system developer proxy application system ethernet pc hyperlinked transponder. Log bridgeware pulse sequential converter proxy. Plasma, transistorized echo solution, read-only digital logistically read-only logarithmic bridgeware silicon network element patch boolean. Mainframe port feedback partitioned inversion element plasma broadband led.
+  %br/
+  %br/
+
+  %br/
+
+.row
+  .span2
+    %h3
+      %a{:href=> "javascript: openChat()", :id => "custom_chat_button"} Open Chat
+    %br/
+    %br/