1
0
mirror of https://github.com/bigchaindb/site.git synced 2024-11-22 01:36:55 +01:00

switch to select2, select.js is abandoned

This commit is contained in:
Matthias Kretschmann 2017-04-13 18:39:26 +02:00
parent 793d86b5e8
commit 1e5c4fb14d
Signed by: m
GPG Key ID: BD3C1F3EDD7831FC
9 changed files with 399 additions and 8 deletions

View File

@ -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

View File

@ -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);

View File

@ -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/tether-select/dist/js/select.js
//=include ../../../../node_modules/select2/dist/js/select2.js
var Forms = (function(w, d, $) {
@ -48,9 +47,10 @@ var Forms = (function(w, d, $) {
}
},
initSelect: function(el) {
Select.init({
className: 'select-theme-bigchaindb'
})
_config.form.find('select').select2({
minimumResultsForSearch: 15,
theme: 'bigchaindb'
});
}
}

View File

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

View File

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

View File

@ -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;
}
}

View File

@ -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 {
}
}
}

View File

@ -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;
}
}

View File

@ -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"