From 829d10c74ba09752cfa5e035a40a3c3a52385d6d Mon Sep 17 00:00:00 2001
From: Jake Humphrey <jake@codelation.com>
Date: Fri, 5 Feb 2016 11:31:58 -0600
Subject: [PATCH 1/4] Adding custom select box to assets

---
 README.md                                     |  46 ++++++++
 .../codelation/components/selectbox.js        |  58 ++++++++++
 app/assets/stylesheets/codelation.scss        |   1 +
 .../codelation/components/selectbox.scss      | 100 ++++++++++++++++++
 4 files changed, 205 insertions(+)
 create mode 100644 app/assets/javascripts/codelation/components/selectbox.js
 create mode 100644 app/assets/stylesheets/codelation/components/selectbox.scss

diff --git a/README.md b/README.md
index 258a4d5..8ffc292 100644
--- a/README.md
+++ b/README.md
@@ -298,6 +298,52 @@ Example:
 }
 ```
 
+#### Components
+
+##### Selectbox
+
+Creates a styled jQuery selectbox.  This will create a div to hold the selected value and
+a ul list of options to select from.  User the following to style:
+
+***HTML***
+
+```html
+<select class="custom">
+  <option value="example">Example</option>
+  <option selected="selected" value="selected-example">Selected</option>
+</select>
+```
+
+***SCSS***
+
+```scss
+//override these variable to change its basic style
+$select-background-color: $color;
+$select-border: 1px solid $color;
+$select-arrow-color: $color;
+$select-border-radius: $radius;
+$select-height: $height;
+$select-width: $width;
+
+//To add more styles
+.select {
+  //style the selectbox container
+}
+
+.select-styled {
+  //style the selectbox selected value
+}
+
+.select-options {
+  //style the selectbox options container
+
+  li {
+    //style the selectbox options
+  }
+}
+
+```
+
 ## Contributing
 
 1. Fork it
diff --git a/app/assets/javascripts/codelation/components/selectbox.js b/app/assets/javascripts/codelation/components/selectbox.js
new file mode 100644
index 0000000..1c82fe9
--- /dev/null
+++ b/app/assets/javascripts/codelation/components/selectbox.js
@@ -0,0 +1,58 @@
+(function() {
+  "use strict";
+
+  App.register('component').enter(function() {
+    $('select.custom').each(function(){
+     var $this = $(this), numberOfOptions = $(this).children('option').length;
+
+     $this.addClass('select-hidden');
+     $this.wrap('<div class="select"></div>');
+     $this.after('<div class="select-styled"></div>');
+
+     //Set the selected item
+     var $styledSelect = $this.next('div.select-styled');
+     var selectedValue = $this.children('option').eq(0).text();
+     $this.children('option').each(function () {
+       if ($(this).attr("selected")) {
+           selectedValue = $(this).text();
+       }
+     });
+     $styledSelect.text(selectedValue);
+
+
+     var $list = $('<ul />', {
+         'class': 'select-options'
+     }).insertAfter($styledSelect);
+
+     for (var i = 0; i < numberOfOptions; i++) {
+         $('<li />', {
+             text: $this.children('option').eq(i).text(),
+             rel: $this.children('option').eq(i).val()
+         }).appendTo($list);
+     }
+
+     var $listItems = $list.children('li');
+
+     //Toggle Select box
+     $styledSelect.click(function(e) {
+         e.stopPropagation();
+         $(this).toggleClass('active').next('ul.select-options').toggle();
+     });
+
+     //Select option
+     $listItems.click(function(e) {
+         e.stopPropagation();
+         $styledSelect.text($(this).text()).removeClass('active');
+         $this.val($(this).attr('rel'));
+         $list.hide();
+     });
+
+     //Close if clicked outside
+     $(document).click(function() {
+         $styledSelect.removeClass('active');
+         $list.hide();
+     });
+
+    });
+  });
+})();
diff --git a/app/assets/stylesheets/codelation.scss b/app/assets/stylesheets/codelation.scss
index 7264b76..a97fc97 100644
--- a/app/assets/stylesheets/codelation.scss
+++ b/app/assets/stylesheets/codelation.scss
@@ -5,6 +5,7 @@ $mobile-breakpoint: 767px !default;
 @import "bourbon/bourbon";
 @import "codelation/functions/**/*";
 @import "codelation/mixins/**/*";
+@import "codelation/components/**/*";
 @import "normalize";
 
 // Border Box by default for all elements
diff --git a/app/assets/stylesheets/codelation/components/selectbox.scss b/app/assets/stylesheets/codelation/components/selectbox.scss
new file mode 100644
index 0000000..d0ab14f
--- /dev/null
+++ b/app/assets/stylesheets/codelation/components/selectbox.scss
@@ -0,0 +1,100 @@
+$select-background-color: #fff !default;
+$select-border: 1px solid color($grey, 400) !default;
+$select-arrow-color: $grey !default;
+$select-border-radius: 3px !default;
+$select-height: 40px !default;
+$select-width: 120px !default;
+
+select.custom {
+  display: none;
+  padding-right: 10px;
+  visibility: hidden;
+}
+
+.select {
+  background-color: $select-background-color;
+  cursor: pointer;
+  display: inline-block;
+  font-size: 16px;
+  height: $select-height;
+  padding: 0 10px;
+  position: relative;
+  vertical-align: middle;
+  width: $select-width;
+}
+
+.select-styled {
+  @include transition(all 0.2s ease-in);
+
+  border: $select-border;
+  border-radius: $select-border-radius;
+  bottom: 0;
+  left: 0;
+  padding: 8px 15px;
+  position: absolute;
+  right: 0;
+  top: 0;
+
+  &:after {
+    border: 7px solid transparent;
+    border-color: $select-arrow-color transparent transparent;
+    content: "";
+    height: 0;
+    position: absolute;
+    right: 10px;
+    top: 16px;
+    width: 0;
+  }
+
+  &:hover {
+    background-color: darken($select-background-color, 2);
+  }
+
+  &:active,
+  &.active {
+    background-color: darken($select-background-color, 5);
+
+    &:after {
+      border-color: transparent transparent $select-arrow-color;
+      top: 9px;
+    }
+  }
+}
+
+.select-options {
+  background-color: $select-background-color;
+  border: $select-border;
+  border-radius: $select-border-radius;
+  box-shadow: 2px 2px 2px color($grey, 600);
+  display: none;
+  left: 0;
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  position: absolute;
+  right: 0;
+  top: 100%;
+  width: $select-width + 20px;
+  z-index: 999;
+
+  li {
+    @include transition(all 0.15s ease-in);
+
+    border-top: 1px solid color($grey, 300);
+    margin: 0;
+    padding: 12px 0;
+    text-indent: 15px;
+
+    &:hover {
+      background: darken($select-background-color, 10);
+    }
+
+    &[rel="hide"] {
+      display: none;
+    }
+
+    &:first-child {
+      border: 0;
+    }
+  }
+}

From b9a10e4b4e9f331585336975cfbf9664382c9e3b Mon Sep 17 00:00:00 2001
From: Jake Humphrey <jake@codelation.com>
Date: Fri, 5 Feb 2016 12:19:51 -0600
Subject: [PATCH 2/4] changing selectbox to select mixin

---
 README.md                                     |  36 ++-----
 .../codelation/components/selectbox.scss      | 100 ------------------
 .../codelation/mixins/selectbox.scss          |  95 +++++++++++++++++
 3 files changed, 103 insertions(+), 128 deletions(-)
 delete mode 100644 app/assets/stylesheets/codelation/components/selectbox.scss
 create mode 100644 app/assets/stylesheets/codelation/mixins/selectbox.scss

diff --git a/README.md b/README.md
index 8ffc292..a0205dc 100644
--- a/README.md
+++ b/README.md
@@ -308,40 +308,20 @@ a ul list of options to select from.  User the following to style:
 ***HTML***
 
 ```html
-<select class="custom">
-  <option value="example">Example</option>
-  <option selected="selected" value="selected-example">Selected</option>
-</select>
+<div class="selector">
+  <select class="custom">
+    <option value="example">Example</option>
+    <option selected="selected" value="selected-example">Selected</option>
+  </select>
+</div>
 ```
 
 ***SCSS***
 
 ```scss
-//override these variable to change its basic style
-$select-background-color: $color;
-$select-border: 1px solid $color;
-$select-arrow-color: $color;
-$select-border-radius: $radius;
-$select-height: $height;
-$select-width: $width;
-
-//To add more styles
-.select {
-  //style the selectbox container
-}
-
-.select-styled {
-  //style the selectbox selected value
-}
-
-.select-options {
-  //style the selectbox options container
-
-  li {
-    //style the selectbox options
-  }
+.selector {
+  @include select($height, $width, $background-color, $color, $border, $border-radius, $arrow-color, $options-width)
 }
-
 ```
 
 ## Contributing
diff --git a/app/assets/stylesheets/codelation/components/selectbox.scss b/app/assets/stylesheets/codelation/components/selectbox.scss
deleted file mode 100644
index d0ab14f..0000000
--- a/app/assets/stylesheets/codelation/components/selectbox.scss
+++ /dev/null
@@ -1,100 +0,0 @@
-$select-background-color: #fff !default;
-$select-border: 1px solid color($grey, 400) !default;
-$select-arrow-color: $grey !default;
-$select-border-radius: 3px !default;
-$select-height: 40px !default;
-$select-width: 120px !default;
-
-select.custom {
-  display: none;
-  padding-right: 10px;
-  visibility: hidden;
-}
-
-.select {
-  background-color: $select-background-color;
-  cursor: pointer;
-  display: inline-block;
-  font-size: 16px;
-  height: $select-height;
-  padding: 0 10px;
-  position: relative;
-  vertical-align: middle;
-  width: $select-width;
-}
-
-.select-styled {
-  @include transition(all 0.2s ease-in);
-
-  border: $select-border;
-  border-radius: $select-border-radius;
-  bottom: 0;
-  left: 0;
-  padding: 8px 15px;
-  position: absolute;
-  right: 0;
-  top: 0;
-
-  &:after {
-    border: 7px solid transparent;
-    border-color: $select-arrow-color transparent transparent;
-    content: "";
-    height: 0;
-    position: absolute;
-    right: 10px;
-    top: 16px;
-    width: 0;
-  }
-
-  &:hover {
-    background-color: darken($select-background-color, 2);
-  }
-
-  &:active,
-  &.active {
-    background-color: darken($select-background-color, 5);
-
-    &:after {
-      border-color: transparent transparent $select-arrow-color;
-      top: 9px;
-    }
-  }
-}
-
-.select-options {
-  background-color: $select-background-color;
-  border: $select-border;
-  border-radius: $select-border-radius;
-  box-shadow: 2px 2px 2px color($grey, 600);
-  display: none;
-  left: 0;
-  list-style: none;
-  margin: 0;
-  padding: 0;
-  position: absolute;
-  right: 0;
-  top: 100%;
-  width: $select-width + 20px;
-  z-index: 999;
-
-  li {
-    @include transition(all 0.15s ease-in);
-
-    border-top: 1px solid color($grey, 300);
-    margin: 0;
-    padding: 12px 0;
-    text-indent: 15px;
-
-    &:hover {
-      background: darken($select-background-color, 10);
-    }
-
-    &[rel="hide"] {
-      display: none;
-    }
-
-    &:first-child {
-      border: 0;
-    }
-  }
-}
diff --git a/app/assets/stylesheets/codelation/mixins/selectbox.scss b/app/assets/stylesheets/codelation/mixins/selectbox.scss
new file mode 100644
index 0000000..429fa90
--- /dev/null
+++ b/app/assets/stylesheets/codelation/mixins/selectbox.scss
@@ -0,0 +1,95 @@
+@mixin select($height: 40px, $width: 120px, $background-color: #fff, $color: #000, $border: 1px solid color($grey, 300), $border-radius: 3px, $arrow-color: $grey, $options-width: 140px) {
+  select.custom {
+    display: none;
+    padding-right: 10px;
+    visibility: hidden;
+  }
+
+  .select {
+    background-color: $background-color;
+    cursor: pointer;
+    display: inline-block;
+    font-size: 16px;
+    height: $height;
+    padding: 0 10px;
+    position: relative;
+    vertical-align: middle;
+    width: $width;
+  }
+
+  .select-styled {
+    @include transition(all 0.2s ease-in);
+
+    border: $border;
+    border-radius: $border-radius;
+    bottom: 0;
+    left: 0;
+    padding: 8px 15px;
+    position: absolute;
+    right: 0;
+    top: 0;
+
+    &:after {
+      border: 7px solid transparent;
+      border-color: $arrow-color transparent transparent;
+      content: "";
+      height: 0;
+      position: absolute;
+      right: 10px;
+      top: 16px;
+      width: 0;
+    }
+
+    &:hover {
+      background-color: darken($background-color, 2);
+    }
+
+    &:active,
+    &.active {
+      background-color: darken($background-color, 5);
+
+      &:after {
+        border-color: transparent transparent $arrow-color;
+        top: 9px;
+      }
+    }
+  }
+
+  .select-options {
+    background-color: $background-color;
+    border: $border;
+    border-radius: $border-radius;
+    box-shadow: 2px 2px 2px color($grey, 600);
+    display: none;
+    left: 0;
+    list-style: none;
+    margin: 0;
+    padding: 0;
+    position: absolute;
+    right: 0;
+    top: 100%;
+    width: $options-width;
+    z-index: 999;
+
+    li {
+      @include transition(all 0.15s ease-in);
+
+      border-top: $border;
+      margin: 0;
+      padding: 12px 0;
+      text-indent: 15px;
+
+      &:hover {
+        background: darken($background-color, 10);
+      }
+
+      &[rel="hide"] {
+        display: none;
+      }
+
+      &:first-child {
+        border: 0;
+      }
+    }
+  }
+}

From 78bd4d1f801b5deb5ac54165125eb540d108ab88 Mon Sep 17 00:00:00 2001
From: Jake Humphrey <jake@codelation.com>
Date: Mon, 15 Feb 2016 14:09:46 -0600
Subject: [PATCH 3/4] Polishing SelectBox addition

---
 README.md                                     | 15 +++++-
 .../codelation/components/selectbox.js        | 41 +++++++++-----
 .../codelation/mixins/selectbox.scss          | 54 +++++++++++--------
 3 files changed, 71 insertions(+), 39 deletions(-)

diff --git a/README.md b/README.md
index a0205dc..b14986b 100644
--- a/README.md
+++ b/README.md
@@ -309,18 +309,29 @@ a ul list of options to select from.  User the following to style:
 
 ```html
 <div class="selector">
-  <select class="custom">
+  <select>
     <option value="example">Example</option>
     <option selected="selected" value="selected-example">Selected</option>
   </select>
 </div>
 ```
 
+***JAVASCRIPT***
+```javascript
+sbox = SelectBox.new({
+  container: $(".selector"),
+  scrollBreak: 2 // not required but can change how big the options menu is relative to the screen size
+})
+```
+
 ***SCSS***
 
 ```scss
 .selector {
-  @include select($height, $width, $background-color, $color, $border, $border-radius, $arrow-color, $options-width)
+  // If any of these default variables are set, then it will adopt those values
+  // $base-body-color, $base-font-color, $base-border-color, $base-border-radius
+
+  @include select($height, $padding, $background-color, $color, $border, $border-radius, $arrow-color)
 }
 ```
 
diff --git a/app/assets/javascripts/codelation/components/selectbox.js b/app/assets/javascripts/codelation/components/selectbox.js
index 1c82fe9..7e61f5a 100644
--- a/app/assets/javascripts/codelation/components/selectbox.js
+++ b/app/assets/javascripts/codelation/components/selectbox.js
@@ -1,16 +1,21 @@
-(function() {
-  "use strict";
+/*
+Required Args: container (a reference to a node)
+Optional Args:
+  - scrollBreak: (int) Determines how big the options menu is compaired to the screen size
+*/
 
-  App.register('component').enter(function() {
-    $('select.custom').each(function(){
+var SelectBox = function(args) {
+  if ($(args.container).has("select")){
+    var selectboxObj = $(args.container).find("select");
+
+    $(selectboxObj).each(function(){
      var $this = $(this), numberOfOptions = $(this).children('option').length;
 
-     $this.addClass('select-hidden');
-     $this.wrap('<div class="select"></div>');
-     $this.after('<div class="select-styled"></div>');
+     $this.wrap('<div class="ca-selectbox"></div>');
+     $this.after('<div class="ca-selectbox-styled"></div>');
 
      //Set the selected item
-     var $styledSelect = $this.next('div.select-styled');
+     var $styledSelect = $this.next('div.ca-selectbox-styled');
      var selectedValue = $this.children('option').eq(0).text();
      $this.children('option').each(function () {
        if ($(this).attr("selected")) {
@@ -21,9 +26,17 @@
 
 
      var $list = $('<ul />', {
-         'class': 'select-options'
+         'class': 'ca-selectbox-options'
      }).insertAfter($styledSelect);
 
+     args.scrollBreak =  (args.scrollBreak == null) ? 2 : args.scrollBreak;
+     //sets height of options
+     var optionListHeight = $(window).height() / args.scrollBreak;
+     if (optionListHeight < 230){
+       optionListHeight = 230;
+     }
+     $list.css({maxHeight: optionListHeight + 'px'});
+
      for (var i = 0; i < numberOfOptions; i++) {
          $('<li />', {
              text: $this.children('option').eq(i).text(),
@@ -36,23 +49,23 @@
      //Toggle Select box
      $styledSelect.click(function(e) {
          e.stopPropagation();
-         $(this).toggleClass('active').next('ul.select-options').toggle();
+         $(this).toggleClass('ca-selectbox-option-active').next('ul.ca-selectbox-options').toggle();
      });
 
      //Select option
      $listItems.click(function(e) {
          e.stopPropagation();
-         $styledSelect.text($(this).text()).removeClass('active');
+         $styledSelect.text($(this).text()).removeClass('ca-selectbox-option-active');
          $this.val($(this).attr('rel'));
          $list.hide();
      });
 
      //Close if clicked outside
      $(document).click(function() {
-         $styledSelect.removeClass('active');
+         $styledSelect.removeClass('ca-selectbox-option-active');
          $list.hide();
      });
 
     });
-  });
-})();
+  }
+};
diff --git a/app/assets/stylesheets/codelation/mixins/selectbox.scss b/app/assets/stylesheets/codelation/mixins/selectbox.scss
index 429fa90..b9c1bfb 100644
--- a/app/assets/stylesheets/codelation/mixins/selectbox.scss
+++ b/app/assets/stylesheets/codelation/mixins/selectbox.scss
@@ -1,30 +1,34 @@
-@mixin select($height: 40px, $width: 120px, $background-color: #fff, $color: #000, $border: 1px solid color($grey, 300), $border-radius: 3px, $arrow-color: $grey, $options-width: 140px) {
-  select.custom {
+$base-body-color: #fff !default;
+$base-font-color: #000 !default;
+$base-border-color: color($grey, 300) !default;
+$base-border-radius: 3px !default;
+
+@mixin selectbox($height: 40px, $padding: 0 5px, $bg-color: $base-body-color, $color: $base-font-color, $border: 1px solid $base-border-color, $border-radius: $base-border-radius, $arrow-color: transparentize($base-font-color, 0.5)) {
+  select {
     display: none;
-    padding-right: 10px;
     visibility: hidden;
   }
 
-  .select {
-    background-color: $background-color;
+  .ca-selectbox {
+    background-color: $bg-color;
     cursor: pointer;
-    display: inline-block;
-    font-size: 16px;
+    font-size: 1em;
     height: $height;
     padding: 0 10px;
     position: relative;
     vertical-align: middle;
-    width: $width;
   }
 
-  .select-styled {
+  .ca-selectbox-styled {
     @include transition(all 0.2s ease-in);
 
+    align-items: center;
     border: $border;
     border-radius: $border-radius;
     bottom: 0;
+    display: flex;
     left: 0;
-    padding: 8px 15px;
+    padding: $padding;
     position: absolute;
     right: 0;
     top: 0;
@@ -32,31 +36,33 @@
     &:after {
       border: 7px solid transparent;
       border-color: $arrow-color transparent transparent;
+      bottom: 0;
       content: "";
       height: 0;
+      margin: auto 6px;
       position: absolute;
-      right: 10px;
-      top: 16px;
+      right: 0;
+      top: 4px;
       width: 0;
     }
 
     &:hover {
-      background-color: darken($background-color, 2);
+      background-color: darken($bg-color, 2);
     }
 
     &:active,
-    &.active {
-      background-color: darken($background-color, 5);
+    &.ca-selectbox-option-active {
+      background-color: darken($bg-color, 5);
 
       &:after {
         border-color: transparent transparent $arrow-color;
-        top: 9px;
+        top: -4px;
       }
     }
   }
 
-  .select-options {
-    background-color: $background-color;
+  .ca-selectbox-options {
+    background-color: $base-body-color;
     border: $border;
     border-radius: $border-radius;
     box-shadow: 2px 2px 2px color($grey, 600);
@@ -64,23 +70,25 @@
     left: 0;
     list-style: none;
     margin: 0;
+    overflow: auto;
     padding: 0;
     position: absolute;
     right: 0;
     top: 100%;
-    width: $options-width;
     z-index: 999;
 
     li {
       @include transition(all 0.15s ease-in);
-
+      align-items: center;
       border-top: $border;
+      display: flex;
+      height: $height;
       margin: 0;
-      padding: 12px 0;
-      text-indent: 15px;
+      padding: $padding;
+
 
       &:hover {
-        background: darken($background-color, 10);
+        background: darken($bg-color, 10);
       }
 
       &[rel="hide"] {

From a3a36c327f0e4b4cd5788b859c81f8903a68baa3 Mon Sep 17 00:00:00 2001
From: Jake Humphrey <jake@codelation.com>
Date: Mon, 15 Feb 2016 14:14:10 -0600
Subject: [PATCH 4/4] Removing extra import

---
 app/assets/stylesheets/codelation.scss | 1 -
 1 file changed, 1 deletion(-)

diff --git a/app/assets/stylesheets/codelation.scss b/app/assets/stylesheets/codelation.scss
index a97fc97..7264b76 100644
--- a/app/assets/stylesheets/codelation.scss
+++ b/app/assets/stylesheets/codelation.scss
@@ -5,7 +5,6 @@ $mobile-breakpoint: 767px !default;
 @import "bourbon/bourbon";
 @import "codelation/functions/**/*";
 @import "codelation/mixins/**/*";
-@import "codelation/components/**/*";
 @import "normalize";
 
 // Border Box by default for all elements