color scheme editor

kakawka · Dec 6, 2014 · 2bd7002 · 2bd7002
1 parent e409f9e
commit 2bd7002
Show file tree

Hide file tree

Showing 15 changed files with 1,532 additions and 88 deletions.
diff --git a/app/assets/javascripts/application.js b/app/assets/javascripts/application.js
@@ -14,3 +14,10 @@
 //= require jquery_ujs
 //= require turbolinks
 //= require bootstrap
+//= require tinycolor-0.9.15.min
+//= require pick-a-color
+//= require customizer
+
+$(document).ready(function () {
+  new Customizer();
+});
diff --git a/app/assets/javascripts/customizer.js.coffee b/app/assets/javascripts/customizer.js.coffee
@@ -0,0 +1,29 @@
+#= require eula/eula_styler
+
+class @Customizer
+  constructor: () ->
+    @styler = new EulaStyler()
+
+    $(".pick-a-color").pickAColor()
+
+    me = this
+
+    $('.js-customize-input').change () ->
+      me.styler.setStyles me.getStyleObject()
+      true
+
+    $('.js-customize-input').keyup () ->
+      me.styler.setStyles me.getStyleObject()
+      true
+
+  getStyleObject: () ->
+    result =
+      window_bg: '#' + $('.js-window-bg').val()
+      window_font_size: $('.js-window-font-size').val()
+      buttons_font_size: $('.js-buttons-font-size').val()
+      close_button_color: '#' + $('.js-close-button-color').val()
+      close_button_color_hover: '#' + $('.js-close-button-color-hover').val()
+      accept_button_color: '#' + $('.js-accept-button-color').val()
+      accept_button_color_hover: '#' + $('.js-accept-button-color-hover').val()
+      decline_button_color: '#' + $('.js-decline-button-color').val()
+      decline_button_color_hover: '#' + $('.js-decline-button-color-hover').val()
diff --git a/app/assets/javascripts/eula.js.coffee b/app/assets/javascripts/eula.js.coffee
@@ -1,4 +1,5 @@
 #= require eula/eula_helper
+#= require eula/eula_styler
 #= require eula/eula_window
 
 class @Eula

diff --git a/app/assets/javascripts/eula/eula_styler.js.coffee b/app/assets/javascripts/eula/eula_styler.js.coffee
@@ -0,0 +1,106 @@
+class @EulaStyler
+  constructor: (params) ->
+    @styles =
+      window_bg: '#fff'
+      window_font_size: '14px'
+      buttons_font_size: '14px'
+      close_button_color: '#bbb'
+      close_button_color_hover: '#000'
+      accept_button_color: '#337ab7'
+      accept_button_color_hover: '#286090'
+      decline_button_color: '#d9534f'
+      decline_button_color_hover: '#c9302c'
+    @applyCss()
+
+  setStyles: (newStyles) ->
+    @styles = newStyles
+    @applyCss()
+
+  applyCss: () ->
+    old_style = document.getElementById('eula_css')
+    if old_style
+      old_style.parentNode.removeChild(old_style)
+    style = document.createElement('style')
+    style.type = 'text/css'
+    style.id = "eula_css"
+    style.innerHTML = """
+      .eula-underlay {
+        display: none;
+        position: fixed;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        background: #000;
+        opacity: 0.8;
+      }
+      .eula-window {
+        display: none;
+        position: fixed;
+        width: 500px;
+        height: auto;
+        top: 50%;
+        left: 50%;
+        margin: 0 0 0 -250px;
+        transform: translateY(-50%);
+        background: #{@styles.window_bg};
+      }
+      .eula-window_content {
+        padding: 30px 20px 20px 20px;
+        font-size: #{@styles.window_font_size};
+      }
+      .eula-window_close {
+        text-decoration: none;
+        position: absolute;
+        top: 5px;
+        left: 100%;
+        margin-left: -20px;
+        color: #{@styles.close_button_color};
+        font-size: 20px;
+        font-weight: bold;
+      }
+      .eula-window_close:hover {
+        text-decoration: none;
+        color: #{@styles.close_button_color_hover};
+      }
+      .-eula-visible {
+        display: block;
+      }
+      .eula-window_buttons {
+        padding-bottom: 20px;
+      }
+      .eula-window_button {
+        display: inline-block;
+        padding: 10px 0;
+        width: 39%;
+        margin: 0 5%;
+        color: #fff;
+        border: 1px solid red;
+        font-size: #{@styles.buttons_font_size};
+        text-align: center;
+        white-space: nowrap;
+        vertical-align: middle;
+        cursor: pointer;
+        line-height: 1.42857143;
+      }
+      .eula-window_button.-eula-decline {
+        background-color: #{@styles.decline_button_color};
+        border-color: #d43f3a;
+      }
+      .eula-window_button.-eula-decline:hover {
+        background-color: #{@styles.decline_button_color_hover};
+        border-color: #ac2925;
+      }
+      .eula-window_button.-eula-accept {
+        background-color: #{@styles.accept_button_color};
+        border-color: #2e6da4;
+      }
+      .eula-window_button.-eula-accept:hover {
+        background-color: #{@styles.accept_button_color_hover};
+        border-color: #204d74;
+      }
+      .-eula-visible {
+        display: block;
+      }
+    """
+    document.getElementsByTagName('head')[0].appendChild(style)
diff --git a/app/assets/javascripts/eula/eula_window.js.coffee b/app/assets/javascripts/eula/eula_window.js.coffee
@@ -15,92 +15,7 @@ class @EulaWindow
     EulaHelper.addClass(@window, 'eula-window')
     document.body.appendChild(@underlay)
     document.body.appendChild(@window)
-    style = document.createElement('style')
-    style.type = 'text/css'
-    style.innerHTML = """
-      .eula-underlay {
-        display: none;
-        position: fixed;
-        top: 0;
-        left: 0;
-        width: 100%;
-        height: 100%;
-        background: #000;
-        opacity: 0.8;
-      }
-      .eula-window {
-        display: none;
-        position: fixed;
-        width: 500px;
-        height: auto;
-        top: 50%;
-        left: 50%;
-        margin: 0 0 0 -250px;
-        transform: translateY(-50%);
-        background: #fff;
-      }
-      .eula-window_content {
-        padding: 30px 20px 70px 20px;
-      }
-      .eula-window_close {
-        text-decoration: none;
-        position: absolute;
-        top: 5px;
-        left: 100%;
-        margin-left: -20px;
-        color: #bbb;
-        font-size: 20px;
-        font-weight: bold;
-      }
-      .eula-window_close:hover {
-        color: #000;
-      }
-      .-eula-visible {
-        display: block;
-      }
-      .eula-window_buttons {
-        position: absolute;
-        top: 100%;
-        left: 0;
-        width: 100%;
-        margin-top: -50px;
-      }
-      .eula-window_button {
-        display: inline-block;
-        height: 30px;
-        line-height: 30px;
-        width: 39%;
-        margin: 0 5%;
-        color: #fff;
-        border: 1px solid red;
-        font-size: 15px;
-        text-align: center;
-        white-space: nowrap;
-        vertical-align: middle;
-        cursor: pointer;
-        line-height: 1.42857143;
-      }
-      .eula-window_button.-eula-decline {
-        background-color: #d9534f;
-        border-color: #d43f3a;
-      }
-      .eula-window_button.-eula-decline:hover {
-        background-color: #c9302c;
-        border-color: #ac2925;
-      }
-      .eula-window_button.-eula-accept {
-        background-color: #337ab7;
-        border-color: #2e6da4;
-      }
-      .eula-window_button.-eula-accept:hover {
-        background-color: #286090;
-        border-color: #204d74;
-      }
-      .-eula-visible {
-        display: block;
-      }
-    """
-    document.getElementsByTagName('head')[0].appendChild(style)
+    @styler = new EulaStyler()
 
   decline: () ->
     if @current_callbacks.decline

diff --git a/app/assets/stylesheets/_color_changer.css.scss b/app/assets/stylesheets/_color_changer.css.scss
@@ -0,0 +1,14 @@
+.color-changer-placeholder {
+  background: #333;
+  padding: 40px 0;
+}
+
+.eula-window {
+  width: 400px !important;
+  margin: 0 auto !important;
+  position: relative !important;
+  top: 0 !important;
+  left: 0 !important;
+  display: block !important;
+  transform: none !important;
+}
diff --git a/app/assets/stylesheets/application.css.scss b/app/assets/stylesheets/application.css.scss
@@ -1,6 +1,8 @@
 @import "variables";
 @import "bootstrap-sprockets";
 @import "bootstrap";
+@import "color_changer";
+@import "pick-a-color-1.2.3.min";
 
 .navbar-brand {
   img {
@@ -10,3 +12,7 @@
     top: -2px;
   }
 }
+
+.full-width {
+  width: 100%;
+}
diff --git a/app/controllers/welcome_controller.rb b/app/controllers/welcome_controller.rb
@@ -1,4 +1,10 @@
 class WelcomeController < ApplicationController
   def index
   end
+
+  def docs
+  end
+
+  def color_changer
+  end
 end
diff --git a/app/views/shared/_navigation.html.slim b/app/views/shared/_navigation.html.slim
@@ -14,7 +14,7 @@ nav.navbar.navbar-default role="navigation"
         li.active
           a href="#" FAQ
         li
-          a href="#" Documentation
+          = link_to 'Documentation', documentation_path
       ul.nav.navbar-nav.navbar-right
         - unless user_signed_in?
           li

diff --git a/app/views/welcome/color_changer.html.slim b/app/views/welcome/color_changer.html.slim
@@ -0,0 +1,63 @@
+h1 Customize your EULA windows
+.color-changer-placeholder
+  .eula-window
+    a.eula-window_close href="#" &times;
+    .eula-window_content
+      | Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium quaerat, cupiditate nulla hic non eum autem deserunt blanditiis vero doloribus repellendus. Cupiditate id exercitationem aliquid, quasi quod repellendus repudiandae voluptas.
+    .eula-window_buttons
+      button.eula-window_button.-eula-accept Accept
+      button.eula-window_button.-eula-decline Decline
+
+br
+br
+
+.row
+  .col-md-4.col-xs-12.col-sm-6
+    .form-group
+      label Close button color
+      input.pick-a-color.form-control.js-customize-input.js-close-button-color value="#bbb"
+  .col-md-4.col-xs-12.col-sm-6
+    .form-group
+      label Accept button color
+      input.pick-a-color.form-control.js-customize-input.js-accept-button-color value="#337ab7"
+  .col-md-4.col-xs-12.col-sm-6
+    .form-group
+      label Decline button color
+      input.pick-a-color.form-control.js-customize-input.js-decline-button-color value="#d9534f"
+
+.row
+  .col-md-4.col-xs-12.col-sm-6
+    .form-group
+      label Close button color on hover
+      input.pick-a-color.form-control.js-customize-input.js-close-button-color-hover value="#000"
+  .col-md-4.col-xs-12.col-sm-6
+    .form-group
+      label Accept button color on hover
+      input.pick-a-color.form-control.js-customize-input.js-accept-button-color-hover value="#2e6da4"
+  .col-md-4.col-xs-12.col-sm-6
+    .form-group
+      label Decline button color on hover
+      input.pick-a-color.form-control.js-customize-input.js-decline-button-color-hover value="#c9302c"
+
+.row
+  .col-md-4.col-xs-12.col-sm-6
+    .form-group
+      label Window background
+      input.pick-a-color.form-control.js-customize-input.js-window-bg value="#fff"
+  .col-md-4.col-xs-12.col-sm-6
+    .form-group
+      label Window font-size
+      input.form-control.js-customize-input.js-window-font-size value="14px"
+  .col-md-4.col-xs-12.col-sm-6
+    .form-group
+      label Buttons font-size
+      input.form-control.js-customize-input.js-buttons-font-size value="14px"
+
+.row
+  .col-xs-12
+    a.btn.btn-primary.full-width href="#" Get the code
+
+
+br
+br
+br
diff --git a/app/views/welcome/docs.html.slim b/app/views/welcome/docs.html.slim
@@ -0,0 +1,22 @@
+h1 Create EULA in your account
+
+h1 Install code to your site
+pre
+  = "<script type=\"text/javascript\" src=\"http://..../eula.js\"></script>"
+
+h1 Integrate our code with your site logic
+pre
+  = "$(document).ready(function () {\n\
+      var eula = new Eula('localhost', null);\n\
+      eula.show('test', {\n\
+        accept: function () {\n\
+          alert('accepted!');\n\
+        },\n\
+        decline: function () {\n\
+          alert('declined!');\n\
+        },\n\
+        hide: function () {\n\
+          alert('just close the window');\n\
+        }\n\
+      });\n\
+    });"
diff --git a/config/routes.rb b/config/routes.rb
@@ -1,7 +1,9 @@
 Rails.application.routes.draw do
   devise_for :users, :controllers => { :omniauth_callbacks => "users/omniauth_callbacks" }
-  root 'welcome#index'
   get '/demo' => 'markup#demo'
+  get '/docs' => 'welcome#docs', :as => :documentation
+  get '/color_changer' => 'welcome#color_changer'
+  root 'welcome#index'
   # The priority is based upon order of creation: first created -> highest priority.
   # See how all your routes lay out with "rake routes".