switch to select2, select.js is abandoned

_ci/setup.sh

@@ -7,7 +7,7 @@ echo "         Installing dependencies "
 echo "============================================="
 echo "$(tput sgr0)" # reset
 
-npm install gulpjs/gulp.git#4.0 bower -g
+npm install gulpjs/gulp.git#4.0 -g
 npm install
 
 # Travis does that automatically after selecting ruby

_src/_assets/javascripts/bigchain/form-enterprise.js

@@ -0,0 +1,66 @@
+
+var FormEnterprise = (function(w, d, $) {
+
+    'use strict';
+
+    var app, _private, _config;
+
+    _config = {
+        form:       $('#form-enterprise'),
+        formBtn:    $('#form-enterprise').find('.btn'),
+        formURL:    $('#form-enterprise').attr('action'),
+        formMethod: $('#form-enterprise').attr('method')
+    };
+
+    _private = {
+        formSubmit: function() {
+            _config.form.submit(function(e) {
+                e.preventDefault();
+
+                if ( $(this).parsley().isValid() ) {
+                    $.ajax({
+                        url: _config.formURL,
+                        method: _config.formMethod,
+                        data: $(this).serialize(),
+                        dataType: 'json',
+                        beforeSend: function() {
+                            _config.formBtn
+                                .addClass('disabled')
+                                .attr('value', 'Sending...');
+                        },
+                        success: function(data) {
+                            _config.form.find('.form-group').addClass('hide');
+                            _config.form.find('.alert-success').removeClass('hide');
+                            _config.formBtn.removeClass('disabled');
+
+                            // send GA event
+                            if (!_dntEnabled()) {
+                                //GoogleAnalytics.gaEventContactSuccess();
+                            }
+                        },
+                        error: function(err) {
+                            _config.form.find('.alert-danger').removeClass('hide');
+                            _config.formBtn
+                                .removeClass('disabled')
+                                .attr('value', 'Send');
+
+                            // send GA event
+                            if (!_dntEnabled()) {
+                                //GoogleAnalytics.gaEventContactError();
+                            }
+                        }
+                    });
+                }
+            });
+        }
+    };
+
+    app = {
+        init: function() {
+            _private.formSubmit();
+        }
+    };
+
+    return app;
+
+})(window, document, jQuery);

_src/_assets/javascripts/bigchain/forms.js

@@ -1,8 +1,7 @@
 
 //=include parsleyjs/dist/parsley.js
 //=include ../../../../node_modules/textarea-autogrow/textarea-autogrow.js
-//=include ../../../../node_modules/tether/dist/js/tether.js
+//=include ../../../../node_modules/select2/dist/js/select2.js
-//=include ../../../../node_modules/tether-select/dist/js/select.js
 
 var Forms = (function(w, d, $) {
 
@@ -48,9 +47,10 @@ var Forms = (function(w, d, $) {
             }
         },
         initSelect: function(el) {
-            Select.init({
+            _config.form.find('select').select2({
-                className: 'select-theme-bigchaindb'
+                minimumResultsForSearch: 15,
-            })
+                theme: 'bigchaindb'
+            });
         }
     }
 

_src/_assets/javascripts/page-enterprise.js

@@ -1,5 +1,7 @@
 //=include bigchain/smoothscroll.js
+//=include bigchain/form-enterprise.js
 
 jQuery(function($) {
 
+    FormEnterprise.init();
 });

_src/_assets/styles/bigchain/_forms.scss

@@ -60,7 +60,7 @@
     &:required,
     &[required] {
         + .form-label,
-        + .select-target + .form-label {
+        + .select2-container--bigchaindb + .form-label {
             &:after {
                 content: "*";
                 @extend .required;

_src/_assets/styles/bigchain/_select2-bigchaindb/_multiple.scss

@@ -0,0 +1,99 @@
+.select2-selection--multiple {
+    @extend .form-control;
+    height: auto;
+    cursor: text;
+
+    .select2-selection__rendered {
+        box-sizing: border-box;
+        list-style: none;
+        margin: 0;
+        padding: 0 5px;
+        width: 100%;
+
+        li {
+            list-style: none;
+        }
+    }
+
+    .select2-selection__placeholder {
+        color: #999;
+
+        margin-top: 5px;
+
+        float: left;
+    }
+
+    .select2-selection__clear {
+        cursor: pointer;
+        float: right;
+        font-weight: bold;
+        margin-top: 5px;
+        margin-right: 10px;
+    }
+
+    .select2-selection__choice {
+        background-color: #e4e4e4;
+
+        border: 1px solid #aaa;
+        border-radius: 4px;
+        cursor: default;
+
+        float: left;
+
+        margin-right: 5px;
+        margin-top: 5px;
+        padding: 0 5px;
+    }
+
+    .select2-selection__choice__remove {
+        color: #999;
+        cursor: pointer;
+
+        display: inline-block;
+        font-weight: bold;
+
+        margin-right: 2px;
+
+        &:hover {
+            color: #333;
+        }
+    }
+}
+
+&[dir="rtl"] {
+    .select2-selection--multiple {
+        .select2-search--inline,
+        .select2-selection__choice,
+        .select2-selection__placeholder {
+            float: right;
+        }
+
+        .select2-selection__choice {
+            margin-left: 5px;
+            margin-right: auto;
+        }
+
+        .select2-selection__choice__remove {
+            margin-left: 2px;
+            margin-right: auto;
+        }
+    }
+}
+
+&.select2-container--focus {
+    .select2-selection--multiple {
+        border: solid black 1px;
+        outline: 0;
+    }
+}
+
+&.select2-container--disabled {
+    .select2-selection--multiple {
+        background-color: #eee;
+        cursor: default;
+    }
+
+    .select2-selection__choice__remove {
+        display: none;
+    }
+}

_src/_assets/styles/bigchain/_select2-bigchaindb/_single.scss

@@ -0,0 +1,89 @@
+.select2-selection--single {
+    @extend .form-control;
+    height: auto;
+
+    .select2-selection__rendered {
+        color: $input-color;
+        padding-left: 0;
+    }
+
+    .select2-selection__clear {
+        cursor: pointer;
+        float: right;
+        font-weight: bold;
+    }
+
+    .select2-selection__placeholder {
+        color: $input-color-placeholder;
+    }
+
+    // dropdown indicator
+    .select2-selection__arrow {
+        position: absolute;
+        right: .15em;
+        top: 0;
+        bottom: 0;
+        margin: auto;
+        height: 1.25rem;
+        width: 2em;
+        color: $gray-light;
+
+        &:before,
+        &:after {
+            content: "";
+            display: block;
+            position: absolute;
+            margin: auto;
+            right: 0;
+            height: 0;
+            width: 0;
+            border: 0.263em solid transparent;
+        }
+
+        &:before {
+            top: 0;
+            border-bottom-color: inherit;
+        }
+
+        &:after {
+            bottom: 0;
+            border-top-color: inherit;
+        }
+
+        b {
+            display: none;
+        }
+    }
+}
+
+&[dir="rtl"] {
+    .select2-selection--single {
+        .select2-selection__clear {
+            float: left;
+        }
+
+        .select2-selection__arrow {
+            left: 1px;
+            right: auto;
+        }
+    }
+}
+
+&.select2-container--disabled {
+    .select2-selection--single {
+        background-color: #eee;
+        cursor: default;
+
+        .select2-selection__clear {
+            display: none;
+        }
+    }
+}
+
+&.select2-container--open {
+    .select2-selection--single {
+        .select2-selection__arrow {
+
+        }
+    }
+}

_src/_assets/styles/bigchain/_select2-bigchaindb/layout.scss

@@ -0,0 +1,135 @@
+@import '../../../../../node_modules/select2/src/scss/core.scss';
+
+.select2-container--bigchaindb {
+    @import 'single';
+    @import 'multiple';
+
+    .select2-dropdown {
+        border-radius: $border-radius;
+        box-shadow: 0 3px 10px rgba(0, 0, 0, .3);
+        background: $gray-dark;
+        color: $input-color;
+        font-family: inherit;
+
+        // resets
+        border: none;
+    }
+
+    + .form-label {
+        pointer-events: none;
+    }
+
+    &.select2-container--open.select2-container--above {
+        .select2-selection--multiple,
+        .select2-selection--single {
+            border-top-left-radius: 0;
+            border-top-right-radius: 0;
+        }
+    }
+
+    &.select2-container--open.select2-container--below {
+        .select2-selection--multiple,
+        .select2-selection--single {
+            border-bottom-left-radius: 0;
+            border-bottom-right-radius: 0;
+        }
+    }
+
+    .select2-search--dropdown {
+        .select2-search__field {
+            @extend .form-control;
+            border-bottom: 1px solid $input-border-color !important;
+        }
+    }
+
+    .select2-search--inline {
+        .select2-search__field {
+            background: transparent;
+            border: none;
+            outline: 0;
+            box-shadow: none;
+            -webkit-appearance: textfield;
+        }
+    }
+
+    .select2-results > .select2-results__options {
+        max-height: 20rem;
+        overflow-y: auto;
+        -webkit-overflow-scrolling: touch;
+
+        @media (max-width: 27rem), (max-height: 27rem) {
+            max-height: 11.25rem;
+        }
+    }
+
+    .select2-results__option {
+        line-height: 1;
+        padding: $input-padding-x 1em $input-padding-x 1em;
+        display: block;
+        cursor: pointer;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+
+        // assume first item is always the empty placeholder
+        &:first-child {
+            display: none;
+        }
+
+        &[role=group] {
+            padding: 0;
+        }
+
+        &[aria-disabled=true] {
+            color: #999;
+        }
+
+        &[aria-selected=true] {
+            background-color: transparent;
+        }
+
+        .select2-results__option {
+            padding-left: 1em;
+
+            .select2-results__group {
+                padding-left: 0;
+            }
+
+            .select2-results__option {
+                margin-left: -1em;
+                padding-left: 2em;
+
+                .select2-results__option {
+                    margin-left: -2em;
+                    padding-left: 3em;
+
+                    .select2-results__option {
+                        margin-left: -3em;
+                        padding-left: 4em;
+
+                        .select2-results__option {
+                            margin-left: -4em;
+                            padding-left: 5em;
+
+                            .select2-results__option {
+                                margin-left: -5em;
+                                padding-left: 6em;
+                            }
+                        }
+                    }
+                }
+            }
+        }
+    }
+
+    .select2-results__option--highlighted[aria-selected] {
+        background-color: $component-active-bg;
+        color: $component-active-color;
+    }
+
+    .select2-results__group {
+        cursor: default;
+        display: block;
+        padding: 6px;
+    }
+}

package.json

@@ -29,8 +29,8 @@
     "normalize-css": ">=2.3.1",
     "normalize-opentype.css": ">=0.2.4",
     "parsleyjs": "^2.0.7",
+    "select2": "^4.0.3",
     "svg4everybody": "^2.0.0",
-    "tether-select": "^1.1.0",
     "textarea-autogrow": "^1.0.0",
     "vivus": "^0.4.0",
     "whatwg-fetch": "^2.0.3"