FINAL suepr merge step : added all modules to this super repos
This commit is contained in:
Bachir Soussi Chiadmi
Binary file not shown.
|
After Width: | Height: | Size: 646 B |
Binary file not shown.
|
After Width: | Height: | Size: 872 B |
@@ -0,0 +1,435 @@
|
||||
/*!
|
||||
Chosen, a Select Box Enhancer for jQuery and Prototype
|
||||
by Patrick Filler for Harvest, http://getharvest.com
|
||||
|
||||
Version 1.1.0
|
||||
Full source at https://github.com/harvesthq/chosen
|
||||
Copyright (c) 2011 Harvest http://getharvest.com
|
||||
|
||||
MIT License, https://github.com/harvesthq/chosen/blob/master/LICENSE.md
|
||||
This file is generated by `grunt build`, do not edit it by hand.
|
||||
*/
|
||||
|
||||
/* @group Base */
|
||||
.chosen-container {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
font-size: 13px;
|
||||
zoom: 1;
|
||||
*display: inline;
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
user-select: none;
|
||||
}
|
||||
.chosen-container .chosen-drop {
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
left: -9999px;
|
||||
z-index: 1010;
|
||||
-webkit-box-sizing: border-box;
|
||||
-moz-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
border: 1px solid #aaa;
|
||||
border-top: 0;
|
||||
background: #fff;
|
||||
box-shadow: 0 4px 5px rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
.chosen-container.chosen-with-drop .chosen-drop {
|
||||
left: 0;
|
||||
}
|
||||
.chosen-container a {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/* @end */
|
||||
/* @group Single Chosen */
|
||||
.chosen-container-single .chosen-single {
|
||||
position: relative;
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
padding: 0 0 0 8px;
|
||||
height: 23px;
|
||||
border: 1px solid #aaa;
|
||||
border-radius: 5px;
|
||||
background-color: #fff;
|
||||
background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(20%, #ffffff), color-stop(50%, #f6f6f6), color-stop(52%, #eeeeee), color-stop(100%, #f4f4f4));
|
||||
background: -webkit-linear-gradient(top, #ffffff 20%, #f6f6f6 50%, #eeeeee 52%, #f4f4f4 100%);
|
||||
background: -moz-linear-gradient(top, #ffffff 20%, #f6f6f6 50%, #eeeeee 52%, #f4f4f4 100%);
|
||||
background: -o-linear-gradient(top, #ffffff 20%, #f6f6f6 50%, #eeeeee 52%, #f4f4f4 100%);
|
||||
background: linear-gradient(top, #ffffff 20%, #f6f6f6 50%, #eeeeee 52%, #f4f4f4 100%);
|
||||
background-clip: padding-box;
|
||||
box-shadow: 0 0 3px white inset, 0 1px 1px rgba(0, 0, 0, 0.1);
|
||||
color: #444;
|
||||
text-decoration: none;
|
||||
white-space: nowrap;
|
||||
line-height: 24px;
|
||||
}
|
||||
.chosen-container-single .chosen-default {
|
||||
color: #999;
|
||||
}
|
||||
.chosen-container-single .chosen-single span {
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
margin-right: 26px;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.chosen-container-single .chosen-single-with-deselect span {
|
||||
margin-right: 38px;
|
||||
}
|
||||
.chosen-container-single .chosen-single abbr {
|
||||
position: absolute;
|
||||
top: 6px;
|
||||
right: 26px;
|
||||
display: block;
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
background: url('chosen-sprite.png') -42px 1px no-repeat;
|
||||
font-size: 1px;
|
||||
}
|
||||
.chosen-container-single .chosen-single abbr:hover {
|
||||
background-position: -42px -10px;
|
||||
}
|
||||
.chosen-container-single.chosen-disabled .chosen-single abbr:hover {
|
||||
background-position: -42px -10px;
|
||||
}
|
||||
.chosen-container-single .chosen-single div {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
display: block;
|
||||
width: 18px;
|
||||
height: 100%;
|
||||
}
|
||||
.chosen-container-single .chosen-single div b {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: url('chosen-sprite.png') no-repeat 0px 2px;
|
||||
}
|
||||
.chosen-container-single .chosen-search {
|
||||
position: relative;
|
||||
z-index: 1010;
|
||||
margin: 0;
|
||||
padding: 3px 4px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.chosen-container-single .chosen-search input[type="text"] {
|
||||
-webkit-box-sizing: border-box;
|
||||
-moz-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
margin: 1px 0;
|
||||
padding: 4px 20px 4px 5px;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
outline: 0;
|
||||
border: 1px solid #aaa;
|
||||
background: white url('chosen-sprite.png') no-repeat 100% -20px;
|
||||
background: url('chosen-sprite.png') no-repeat 100% -20px;
|
||||
font-size: 1em;
|
||||
font-family: sans-serif;
|
||||
line-height: normal;
|
||||
border-radius: 0;
|
||||
}
|
||||
.chosen-container-single .chosen-drop {
|
||||
margin-top: -1px;
|
||||
border-radius: 0 0 4px 4px;
|
||||
background-clip: padding-box;
|
||||
}
|
||||
.chosen-container-single.chosen-container-single-nosearch .chosen-search {
|
||||
position: absolute;
|
||||
left: -9999px;
|
||||
}
|
||||
|
||||
/* @end */
|
||||
/* @group Results */
|
||||
.chosen-container .chosen-results {
|
||||
position: relative;
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
margin: 0 4px 4px 0;
|
||||
padding: 0 0 0 4px;
|
||||
max-height: 240px;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
}
|
||||
.chosen-container .chosen-results li {
|
||||
display: none;
|
||||
margin: 0;
|
||||
padding: 5px 6px;
|
||||
list-style: none;
|
||||
line-height: 15px;
|
||||
-webkit-touch-callout: none;
|
||||
}
|
||||
.chosen-container .chosen-results li.active-result {
|
||||
display: list-item;
|
||||
cursor: pointer;
|
||||
}
|
||||
.chosen-container .chosen-results li.disabled-result {
|
||||
display: list-item;
|
||||
color: #ccc;
|
||||
cursor: default;
|
||||
}
|
||||
.chosen-container .chosen-results li.highlighted {
|
||||
background-color: #3875d7;
|
||||
background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(20%, #3875d7), color-stop(90%, #2a62bc));
|
||||
background-image: -webkit-linear-gradient(#3875d7 20%, #2a62bc 90%);
|
||||
background-image: -moz-linear-gradient(#3875d7 20%, #2a62bc 90%);
|
||||
background-image: -o-linear-gradient(#3875d7 20%, #2a62bc 90%);
|
||||
background-image: linear-gradient(#3875d7 20%, #2a62bc 90%);
|
||||
color: #fff;
|
||||
}
|
||||
.chosen-container .chosen-results li.no-results {
|
||||
display: list-item;
|
||||
background: #f4f4f4;
|
||||
}
|
||||
.chosen-container .chosen-results li.group-result {
|
||||
display: list-item;
|
||||
font-weight: bold;
|
||||
cursor: default;
|
||||
}
|
||||
.chosen-container .chosen-results li.group-option {
|
||||
padding-left: 15px;
|
||||
}
|
||||
.chosen-container .chosen-results li em {
|
||||
font-style: normal;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
/* @end */
|
||||
/* @group Multi Chosen */
|
||||
.chosen-container-multi .chosen-choices {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
-webkit-box-sizing: border-box;
|
||||
-moz-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
width: 100%;
|
||||
height: auto !important;
|
||||
height: 1%;
|
||||
border: 1px solid #aaa;
|
||||
background-color: #fff;
|
||||
background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(1%, #eeeeee), color-stop(15%, #ffffff));
|
||||
background-image: -webkit-linear-gradient(#eeeeee 1%, #ffffff 15%);
|
||||
background-image: -moz-linear-gradient(#eeeeee 1%, #ffffff 15%);
|
||||
background-image: -o-linear-gradient(#eeeeee 1%, #ffffff 15%);
|
||||
background-image: linear-gradient(#eeeeee 1%, #ffffff 15%);
|
||||
cursor: text;
|
||||
}
|
||||
.chosen-container-multi .chosen-choices li {
|
||||
float: left;
|
||||
list-style: none;
|
||||
}
|
||||
.chosen-container-multi .chosen-choices li.search-field {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.chosen-container-multi .chosen-choices li.search-field input[type="text"] {
|
||||
margin: 1px 0;
|
||||
padding: 5px;
|
||||
height: 15px;
|
||||
outline: 0;
|
||||
border: 0 !important;
|
||||
background: transparent !important;
|
||||
box-shadow: none;
|
||||
color: #666;
|
||||
font-size: 100%;
|
||||
font-family: sans-serif;
|
||||
line-height: normal;
|
||||
border-radius: 0;
|
||||
}
|
||||
.chosen-container-multi .chosen-choices li.search-field .default {
|
||||
color: #999;
|
||||
}
|
||||
.chosen-container-multi .chosen-choices li.search-choice {
|
||||
position: relative;
|
||||
margin: 3px 0 3px 5px;
|
||||
padding: 3px 20px 3px 5px;
|
||||
border: 1px solid #aaa;
|
||||
border-radius: 3px;
|
||||
background-color: #e4e4e4;
|
||||
background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(20%, #f4f4f4), color-stop(50%, #f0f0f0), color-stop(52%, #e8e8e8), color-stop(100%, #eeeeee));
|
||||
background-image: -webkit-linear-gradient(#f4f4f4 20%, #f0f0f0 50%, #e8e8e8 52%, #eeeeee 100%);
|
||||
background-image: -moz-linear-gradient(#f4f4f4 20%, #f0f0f0 50%, #e8e8e8 52%, #eeeeee 100%);
|
||||
background-image: -o-linear-gradient(#f4f4f4 20%, #f0f0f0 50%, #e8e8e8 52%, #eeeeee 100%);
|
||||
background-image: linear-gradient(#f4f4f4 20%, #f0f0f0 50%, #e8e8e8 52%, #eeeeee 100%);
|
||||
background-clip: padding-box;
|
||||
box-shadow: 0 0 2px white inset, 0 1px 0 rgba(0, 0, 0, 0.05);
|
||||
color: #333;
|
||||
line-height: 13px;
|
||||
cursor: default;
|
||||
}
|
||||
.chosen-container-multi .chosen-choices li.search-choice .search-choice-close {
|
||||
position: absolute;
|
||||
top: 4px;
|
||||
right: 3px;
|
||||
display: block;
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
background: url('chosen-sprite.png') -42px 1px no-repeat;
|
||||
font-size: 1px;
|
||||
}
|
||||
.chosen-container-multi .chosen-choices li.search-choice .search-choice-close:hover {
|
||||
background-position: -42px -10px;
|
||||
}
|
||||
.chosen-container-multi .chosen-choices li.search-choice-disabled {
|
||||
padding-right: 5px;
|
||||
border: 1px solid #ccc;
|
||||
background-color: #e4e4e4;
|
||||
background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(20%, #f4f4f4), color-stop(50%, #f0f0f0), color-stop(52%, #e8e8e8), color-stop(100%, #eeeeee));
|
||||
background-image: -webkit-linear-gradient(top, #f4f4f4 20%, #f0f0f0 50%, #e8e8e8 52%, #eeeeee 100%);
|
||||
background-image: -moz-linear-gradient(top, #f4f4f4 20%, #f0f0f0 50%, #e8e8e8 52%, #eeeeee 100%);
|
||||
background-image: -o-linear-gradient(top, #f4f4f4 20%, #f0f0f0 50%, #e8e8e8 52%, #eeeeee 100%);
|
||||
background-image: linear-gradient(top, #f4f4f4 20%, #f0f0f0 50%, #e8e8e8 52%, #eeeeee 100%);
|
||||
color: #666;
|
||||
}
|
||||
.chosen-container-multi .chosen-choices li.search-choice-focus {
|
||||
background: #d4d4d4;
|
||||
}
|
||||
.chosen-container-multi .chosen-choices li.search-choice-focus .search-choice-close {
|
||||
background-position: -42px -10px;
|
||||
}
|
||||
.chosen-container-multi .chosen-results {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
.chosen-container-multi .chosen-drop .result-selected {
|
||||
display: list-item;
|
||||
color: #ccc;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
/* @end */
|
||||
/* @group Active */
|
||||
.chosen-container-active .chosen-single {
|
||||
border: 1px solid #5897fb;
|
||||
box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
.chosen-container-active.chosen-with-drop .chosen-single {
|
||||
border: 1px solid #aaa;
|
||||
-moz-border-radius-bottomright: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
-moz-border-radius-bottomleft: 0;
|
||||
border-bottom-left-radius: 0;
|
||||
background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(20%, #eeeeee), color-stop(80%, #ffffff));
|
||||
background-image: -webkit-linear-gradient(#eeeeee 20%, #ffffff 80%);
|
||||
background-image: -moz-linear-gradient(#eeeeee 20%, #ffffff 80%);
|
||||
background-image: -o-linear-gradient(#eeeeee 20%, #ffffff 80%);
|
||||
background-image: linear-gradient(#eeeeee 20%, #ffffff 80%);
|
||||
box-shadow: 0 1px 0 #fff inset;
|
||||
}
|
||||
.chosen-container-active.chosen-with-drop .chosen-single div {
|
||||
border-left: none;
|
||||
background: transparent;
|
||||
}
|
||||
.chosen-container-active.chosen-with-drop .chosen-single div b {
|
||||
background-position: -18px 2px;
|
||||
}
|
||||
.chosen-container-active .chosen-choices {
|
||||
border: 1px solid #5897fb;
|
||||
box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
.chosen-container-active .chosen-choices li.search-field input[type="text"] {
|
||||
color: #111 !important;
|
||||
}
|
||||
|
||||
/* @end */
|
||||
/* @group Disabled Support */
|
||||
.chosen-disabled {
|
||||
opacity: 0.5 !important;
|
||||
cursor: default;
|
||||
}
|
||||
.chosen-disabled .chosen-single {
|
||||
cursor: default;
|
||||
}
|
||||
.chosen-disabled .chosen-choices .search-choice .search-choice-close {
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
/* @end */
|
||||
/* @group Right to Left */
|
||||
.chosen-rtl {
|
||||
text-align: right;
|
||||
}
|
||||
.chosen-rtl .chosen-single {
|
||||
overflow: visible;
|
||||
padding: 0 8px 0 0;
|
||||
}
|
||||
.chosen-rtl .chosen-single span {
|
||||
margin-right: 0;
|
||||
margin-left: 26px;
|
||||
direction: rtl;
|
||||
}
|
||||
.chosen-rtl .chosen-single-with-deselect span {
|
||||
margin-left: 38px;
|
||||
}
|
||||
.chosen-rtl .chosen-single div {
|
||||
right: auto;
|
||||
left: 3px;
|
||||
}
|
||||
.chosen-rtl .chosen-single abbr {
|
||||
right: auto;
|
||||
left: 26px;
|
||||
}
|
||||
.chosen-rtl .chosen-choices li {
|
||||
float: right;
|
||||
}
|
||||
.chosen-rtl .chosen-choices li.search-field input[type="text"] {
|
||||
direction: rtl;
|
||||
}
|
||||
.chosen-rtl .chosen-choices li.search-choice {
|
||||
margin: 3px 5px 3px 0;
|
||||
padding: 3px 5px 3px 19px;
|
||||
}
|
||||
.chosen-rtl .chosen-choices li.search-choice .search-choice-close {
|
||||
right: auto;
|
||||
left: 4px;
|
||||
}
|
||||
.chosen-rtl.chosen-container-single-nosearch .chosen-search,
|
||||
.chosen-rtl .chosen-drop {
|
||||
left: 9999px;
|
||||
}
|
||||
.chosen-rtl.chosen-container-single .chosen-results {
|
||||
margin: 0 0 4px 4px;
|
||||
padding: 0 4px 0 0;
|
||||
}
|
||||
.chosen-rtl .chosen-results li.group-option {
|
||||
padding-right: 15px;
|
||||
padding-left: 0;
|
||||
}
|
||||
.chosen-rtl.chosen-container-active.chosen-with-drop .chosen-single div {
|
||||
border-right: none;
|
||||
}
|
||||
.chosen-rtl .chosen-search input[type="text"] {
|
||||
padding: 4px 5px 4px 20px;
|
||||
background: white url('chosen-sprite.png') no-repeat -30px -20px;
|
||||
background: url('chosen-sprite.png') no-repeat -30px -20px;
|
||||
direction: rtl;
|
||||
}
|
||||
.chosen-rtl.chosen-container-single .chosen-single div b {
|
||||
background-position: 6px 2px;
|
||||
}
|
||||
.chosen-rtl.chosen-container-single.chosen-with-drop .chosen-single div b {
|
||||
background-position: -12px 2px;
|
||||
}
|
||||
|
||||
/* @end */
|
||||
/* @group Retina compatibility */
|
||||
@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-resolution: 144dpi) {
|
||||
.chosen-rtl .chosen-search input[type="text"],
|
||||
.chosen-container-single .chosen-single abbr,
|
||||
.chosen-container-single .chosen-single div b,
|
||||
.chosen-container-single .chosen-search input[type="text"],
|
||||
.chosen-container-multi .chosen-choices .search-choice .search-choice-close,
|
||||
.chosen-container .chosen-results-scroll-down span,
|
||||
.chosen-container .chosen-results-scroll-up span {
|
||||
background-image: url('chosen-sprite@2x.png') !important;
|
||||
background-size: 52px 37px !important;
|
||||
background-repeat: no-repeat !important;
|
||||
}
|
||||
}
|
||||
/* @end */
|
||||
File diff suppressed because it is too large
Load Diff
2
sites/all/themes/gui/materiobasetheme/js/libs/src/chosen_v1.1.0/chosen.jquery.min.js
vendored
Normal file
2
sites/all/themes/gui/materiobasetheme/js/libs/src/chosen_v1.1.0/chosen.jquery.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
3
sites/all/themes/gui/materiobasetheme/js/libs/src/chosen_v1.1.0/chosen.min.css
vendored
Normal file
3
sites/all/themes/gui/materiobasetheme/js/libs/src/chosen_v1.1.0/chosen.min.css
vendored
Normal file
File diff suppressed because one or more lines are too long
File diff suppressed because it is too large
Load Diff
2
sites/all/themes/gui/materiobasetheme/js/libs/src/chosen_v1.1.0/chosen.proto.min.js
vendored
Normal file
2
sites/all/themes/gui/materiobasetheme/js/libs/src/chosen_v1.1.0/chosen.proto.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
Binary file not shown.
|
After Width: | Height: | Size: 3.4 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 6.6 KiB |
@@ -0,0 +1,108 @@
|
||||
/**
|
||||
* okaidia theme for JavaScript, CSS and HTML
|
||||
* Loosely based on Monokai textmate theme by http://www.monokai.nl/
|
||||
* @author ocodia
|
||||
*/
|
||||
|
||||
code[class*="language-"],
|
||||
pre[class*="language-"] {
|
||||
color: #f8f8f2;
|
||||
text-shadow: 0 1px rgba(0,0,0,0.3);
|
||||
font-family: Consolas, Monaco, 'Andale Mono', monospace;
|
||||
direction: ltr;
|
||||
text-align: left;
|
||||
white-space: pre;
|
||||
word-spacing: normal;
|
||||
|
||||
-moz-tab-size: 4;
|
||||
-o-tab-size: 4;
|
||||
tab-size: 4;
|
||||
|
||||
-webkit-hyphens: none;
|
||||
-moz-hyphens: none;
|
||||
-ms-hyphens: none;
|
||||
hyphens: none;
|
||||
}
|
||||
|
||||
/* Code blocks */
|
||||
pre[class*="language-"] {
|
||||
padding: 1em;
|
||||
margin: .5em 0;
|
||||
overflow: auto;
|
||||
border-radius: 0.3em;
|
||||
}
|
||||
|
||||
:not(pre) > code[class*="language-"],
|
||||
pre[class*="language-"] {
|
||||
background: #272822;
|
||||
}
|
||||
|
||||
/* Inline code */
|
||||
:not(pre) > code[class*="language-"] {
|
||||
padding: .1em;
|
||||
border-radius: .3em;
|
||||
}
|
||||
|
||||
.token.comment,
|
||||
.token.prolog,
|
||||
.token.doctype,
|
||||
.token.cdata {
|
||||
color: slategray;
|
||||
}
|
||||
|
||||
.token.punctuation {
|
||||
color: #f8f8f2;
|
||||
}
|
||||
|
||||
.namespace {
|
||||
opacity: .7;
|
||||
}
|
||||
|
||||
.token.property,
|
||||
.token.tag {
|
||||
color: #f92672;
|
||||
}
|
||||
|
||||
.token.boolean,
|
||||
.token.number{
|
||||
color: #ae81ff;
|
||||
}
|
||||
|
||||
.token.selector,
|
||||
.token.attr-name,
|
||||
.token.string {
|
||||
color: #a6e22e;
|
||||
}
|
||||
|
||||
|
||||
.token.operator,
|
||||
.token.entity,
|
||||
.token.url,
|
||||
.language-css .token.string,
|
||||
.style .token.string {
|
||||
color: #f8f8f2;
|
||||
}
|
||||
|
||||
.token.atrule,
|
||||
.token.attr-value
|
||||
{
|
||||
color: #e6db74;
|
||||
}
|
||||
|
||||
|
||||
.token.keyword{
|
||||
color: #66d9ef;
|
||||
}
|
||||
|
||||
.token.regex,
|
||||
.token.important {
|
||||
color: #fd971f;
|
||||
}
|
||||
|
||||
.token.important {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.token.entity {
|
||||
cursor: help;
|
||||
}
|
||||
@@ -0,0 +1,9 @@
|
||||
/**
|
||||
* Prism: Lightweight, robust, elegant syntax highlighting
|
||||
* MIT license http://www.opensource.org/licenses/mit-license.php/
|
||||
* @author Lea Verou http://lea.verou.me
|
||||
*/(function(){var e=/\blang(?:uage)?-(?!\*)(\w+)\b/i,t=self.Prism={util:{type:function(e){return Object.prototype.toString.call(e).match(/\[object (\w+)\]/)[1]},clone:function(e){var n=t.util.type(e);switch(n){case"Object":var r={};for(var i in e)e.hasOwnProperty(i)&&(r[i]=t.util.clone(e[i]));return r;case"Array":return e.slice()}return e}},languages:{extend:function(e,n){var r=t.util.clone(t.languages[e]);for(var i in n)r[i]=n[i];return r},insertBefore:function(e,n,r,i){i=i||t.languages;var s=i[e],o={};for(var u in s)if(s.hasOwnProperty(u)){if(u==n)for(var a in r)r.hasOwnProperty(a)&&(o[a]=r[a]);o[u]=s[u]}return i[e]=o},DFS:function(e,n){for(var r in e){n.call(e,r,e[r]);t.util.type(e)==="Object"&&t.languages.DFS(e[r],n)}}},highlightAll:function(e,n){var r=document.querySelectorAll('code[class*="language-"], [class*="language-"] code, code[class*="lang-"], [class*="lang-"] code');for(var i=0,s;s=r[i++];)t.highlightElement(s,e===!0,n)},highlightElement:function(r,i,s){var o,u,a=r;while(a&&!e.test(a.className))a=a.parentNode;if(a){o=(a.className.match(e)||[,""])[1];u=t.languages[o]}if(!u)return;r.className=r.className.replace(e,"").replace(/\s+/g," ")+" language-"+o;a=r.parentNode;/pre/i.test(a.nodeName)&&(a.className=a.className.replace(e,"").replace(/\s+/g," ")+" language-"+o);var f=r.textContent;if(!f)return;f=f.replace(/&/g,"&").replace(/</g,"<").replace(/\u00a0/g," ");var l={element:r,language:o,grammar:u,code:f};t.hooks.run("before-highlight",l);if(i&&self.Worker){var c=new Worker(t.filename);c.onmessage=function(e){l.highlightedCode=n.stringify(JSON.parse(e.data),o);t.hooks.run("before-insert",l);l.element.innerHTML=l.highlightedCode;s&&s.call(l.element);t.hooks.run("after-highlight",l)};c.postMessage(JSON.stringify({language:l.language,code:l.code}))}else{l.highlightedCode=t.highlight(l.code,l.grammar,l.language);t.hooks.run("before-insert",l);l.element.innerHTML=l.highlightedCode;s&&s.call(r);t.hooks.run("after-highlight",l)}},highlight:function(e,r,i){return n.stringify(t.tokenize(e,r),i)},tokenize:function(e,n,r){var i=t.Token,s=[e],o=n.rest;if(o){for(var u in o)n[u]=o[u];delete n.rest}e:for(var u in n){if(!n.hasOwnProperty(u)||!n[u])continue;var a=n[u],f=a.inside,l=!!a.lookbehind,c=0;a=a.pattern||a;for(var h=0;h<s.length;h++){var p=s[h];if(s.length>e.length)break e;if(p instanceof i)continue;a.lastIndex=0;var d=a.exec(p);if(d){l&&(c=d[1].length);var v=d.index-1+c,d=d[0].slice(c),m=d.length,g=v+m,y=p.slice(0,v+1),b=p.slice(g+1),w=[h,1];y&&w.push(y);var E=new i(u,f?t.tokenize(d,f):d);w.push(E);b&&w.push(b);Array.prototype.splice.apply(s,w)}}}return s},hooks:{all:{},add:function(e,n){var r=t.hooks.all;r[e]=r[e]||[];r[e].push(n)},run:function(e,n){var r=t.hooks.all[e];if(!r||!r.length)return;for(var i=0,s;s=r[i++];)s(n)}}},n=t.Token=function(e,t){this.type=e;this.content=t};n.stringify=function(e,r,i){if(typeof e=="string")return e;if(Object.prototype.toString.call(e)=="[object Array]")return e.map(function(t){return n.stringify(t,r,e)}).join("");var s={type:e.type,content:n.stringify(e.content,r,i),tag:"span",classes:["token",e.type],attributes:{},language:r,parent:i};s.type=="comment"&&(s.attributes.spellcheck="true");t.hooks.run("wrap",s);var o="";for(var u in s.attributes)o+=u+'="'+(s.attributes[u]||"")+'"';return"<"+s.tag+' class="'+s.classes.join(" ")+'" '+o+">"+s.content+"</"+s.tag+">"};if(!self.document){self.addEventListener("message",function(e){var n=JSON.parse(e.data),r=n.language,i=n.code;self.postMessage(JSON.stringify(t.tokenize(i,t.languages[r])));self.close()},!1);return}var r=document.getElementsByTagName("script");r=r[r.length-1];if(r){t.filename=r.src;document.addEventListener&&!r.hasAttribute("data-manual")&&document.addEventListener("DOMContentLoaded",t.highlightAll)}})();;
|
||||
Prism.languages.markup={comment:/<!--[\w\W]*?-->/g,prolog:/<\?.+?\?>/,doctype:/<!DOCTYPE.+?>/,cdata:/<!\[CDATA\[[\w\W]*?]]>/i,tag:{pattern:/<\/?[\w:-]+\s*(?:\s+[\w:-]+(?:=(?:("|')(\\?[\w\W])*?\1|\w+))?\s*)*\/?>/gi,inside:{tag:{pattern:/^<\/?[\w:-]+/i,inside:{punctuation:/^<\/?/,namespace:/^[\w-]+?:/}},"attr-value":{pattern:/=(?:('|")[\w\W]*?(\1)|[^\s>]+)/gi,inside:{punctuation:/=|>|"/g}},punctuation:/\/?>/g,"attr-name":{pattern:/[\w:-]+/g,inside:{namespace:/^[\w-]+?:/}}}},entity:/&#?[\da-z]{1,8};/gi};Prism.hooks.add("wrap",function(e){e.type==="entity"&&(e.attributes.title=e.content.replace(/&/,"&"))});;
|
||||
Prism.languages.css={comment:/\/\*[\w\W]*?\*\//g,atrule:{pattern:/@[\w-]+?.*?(;|(?=\s*{))/gi,inside:{punctuation:/[;:]/g}},url:/url\((["']?).*?\1\)/gi,selector:/[^\{\}\s][^\{\};]*(?=\s*\{)/g,property:/(\b|\B)[\w-]+(?=\s*:)/ig,string:/("|')(\\?.)*?\1/g,important:/\B!important\b/gi,ignore:/&(lt|gt|amp);/gi,punctuation:/[\{\};:]/g};Prism.languages.markup&&Prism.languages.insertBefore("markup","tag",{style:{pattern:/(<|<)style[\w\W]*?(>|>)[\w\W]*?(<|<)\/style(>|>)/ig,inside:{tag:{pattern:/(<|<)style[\w\W]*?(>|>)|(<|<)\/style(>|>)/ig,inside:Prism.languages.markup.tag.inside},rest:Prism.languages.css}}});;
|
||||
Prism.languages.clike={comment:{pattern:/(^|[^\\])(\/\*[\w\W]*?\*\/|(^|[^:])\/\/.*?(\r?\n|$))/g,lookbehind:!0},string:/("|')(\\?.)*?\1/g,"class-name":{pattern:/((?:(?:class|interface|extends|implements|trait|instanceof|new)\s+)|(?:catch\s+\())[a-z0-9_\.\\]+/ig,lookbehind:!0,inside:{punctuation:/(\.|\\)/}},keyword:/\b(if|else|while|do|for|return|in|instanceof|function|new|try|catch|finally|null|break|continue)\b/g,"boolean":/\b(true|false)\b/g,"function":{pattern:/[a-z0-9_]+\(/ig,inside:{punctuation:/\(/}}, number:/\b-?(0x[\dA-Fa-f]+|\d*\.?\d+([Ee]-?\d+)?)\b/g,operator:/[-+]{1,2}|!|<=?|>=?|={1,3}|(&){1,2}|\|?\||\?|\*|\/|\~|\^|\%/g,ignore:/&(lt|gt|amp);/gi,punctuation:/[{}[\];(),.:]/g};;
|
||||
Prism.languages.javascript=Prism.languages.extend("clike",{keyword:/\b(var|let|if|else|while|do|for|return|in|instanceof|function|new|with|typeof|try|catch|finally|null|break|continue)\b/g,number:/\b-?(0x[\dA-Fa-f]+|\d*\.?\d+([Ee]-?\d+)?|NaN|-?Infinity)\b/g});Prism.languages.insertBefore("javascript","keyword",{regex:{pattern:/(^|[^/])\/(?!\/)(\[.+?]|\\.|[^/\r\n])+\/[gim]{0,3}(?=\s*($|[\r\n,.;})]))/g,lookbehind:!0}});Prism.languages.markup&&Prism.languages.insertBefore("markup","tag",{script:{pattern:/(<|<)script[\w\W]*?(>|>)[\w\W]*?(<|<)\/script(>|>)/ig,inside:{tag:{pattern:/(<|<)script[\w\W]*?(>|>)|(<|<)\/script(>|>)/ig,inside:Prism.languages.markup.tag.inside},rest:Prism.languages.javascript}}});;
|
||||
@@ -0,0 +1,203 @@
|
||||
/* Reset */
|
||||
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; }
|
||||
|
||||
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }
|
||||
|
||||
blockquote, q { quotes: none; }
|
||||
blockquote:before, blockquote:after, q:before, q:after { content: ""; content: none; }
|
||||
ins { background-color: #ff9; color: #000; text-decoration: none; }
|
||||
mark { background-color: #ff9; color: #000; font-style: italic; font-weight: bold; }
|
||||
del { text-decoration: line-through; }
|
||||
abbr[title], dfn[title] { border-bottom: 1px dotted; cursor: help; }
|
||||
table { border-collapse: collapse; border-spacing: 0; }
|
||||
hr { display: block; height: 1px; border: 0; border-top: 1px solid #ccc; margin: 1em 0; padding: 0; }
|
||||
input, select { vertical-align: middle; }
|
||||
|
||||
body { font:13px/1.231 sans-serif; *font-size:small; } /* Hack retained to preserve specificity */
|
||||
select, input, textarea, button { font:99% sans-serif; }
|
||||
pre, code, kbd, samp { font-family: monospace, sans-serif; }
|
||||
|
||||
|
||||
body { background: #EEE; color: #444; line-height: 1.4em; }
|
||||
|
||||
header h1 { color: black; font-size: 2em; line-height: 1.1em; display: inline-block; height: 27px; margin: 20px 0 25px; }
|
||||
header h1 small { font-size: 0.6em; }
|
||||
|
||||
div#content { background: white; border: 1px solid #ccc; border-width: 0 1px 1px; margin: 0 auto; padding: 40px 50px 40px; width: 738px; }
|
||||
|
||||
footer { color: #999; padding-top: 40px; font-size: 0.8em; text-align: center; }
|
||||
|
||||
body { font-family: sans-serif; font-size: 1em; }
|
||||
|
||||
p { margin: 0 0 .7em; max-width: 700px; }
|
||||
|
||||
h2 { border-bottom: 1px solid #ccc; font-size: 1.2em; margin: 3em 0 1em 0; font-weight: bold;}
|
||||
h3 { font-weight: bold; }
|
||||
|
||||
h2.intro { border-bottom: none; font-size: 1em; font-weight: normal; margin-top:0; }
|
||||
|
||||
ul li { list-style: disc; margin-left: 1em; margin-bottom: 1.25em; }
|
||||
ol li { margin-left: 1.25em; }
|
||||
ol ul, ul ul { margin: .25em 0 0; }
|
||||
ol ul li, ul ul li { list-style-type: circle; margin: 0 0 .25em 1em; }
|
||||
|
||||
li > p { margin-top: .25em; }
|
||||
|
||||
div.side-by-side { width: 100%; margin-bottom: 1em; }
|
||||
div.side-by-side > div { float: left; width: 49%; }
|
||||
div.side-by-side > div > em { margin-bottom: 10px; display: block; }
|
||||
|
||||
.faqs em { display: block; }
|
||||
|
||||
.clearfix:after {
|
||||
content: "\0020";
|
||||
display: block;
|
||||
height: 0;
|
||||
clear: both;
|
||||
overflow: hidden;
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
a { color: #F36C00; outline: none; text-decoration: none; }
|
||||
a:hover { text-decoration: underline; }
|
||||
|
||||
ul.credits li { margin-bottom: .25em; }
|
||||
|
||||
strong { font-weight: bold; }
|
||||
i { font-style: italic; }
|
||||
|
||||
.button {
|
||||
background: #fafafa;
|
||||
background: -webkit-linear-gradient(top, #ffffff, #eeeeee);
|
||||
background: -moz-linear-gradient(top, #ffffff, #eeeeee);
|
||||
background: -o-linear-gradient(top, #ffffff, #eeeeee);
|
||||
background: linear-gradient(to bottom, #ffffff, #eeeeee);
|
||||
border: 1px solid #bbbbbb;
|
||||
border-radius: 4px;
|
||||
box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.2);
|
||||
color: #555555;
|
||||
cursor: pointer;
|
||||
display: inline-block;
|
||||
font-family: "Helvetica Neue", Arial, Verdana, "Nimbus Sans L", sans-serif;
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
height: 31px;
|
||||
line-height: 28px;
|
||||
outline: none;
|
||||
padding: 0 13px;
|
||||
text-shadow: 0 1px 0 white;
|
||||
text-decoration: none;
|
||||
vertical-align: middle;
|
||||
white-space: nowrap;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-webkit-box-sizing: border-box;
|
||||
-moz-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.button-blue {
|
||||
background: #1385e5;
|
||||
background: -webkit-linear-gradient(top, #53b2fc, #1385e5);
|
||||
background: -moz-linear-gradient(top, #53b2fc, #1385e5);
|
||||
background: -o-linear-gradient(top, #53b2fc, #1385e5);
|
||||
background: linear-gradient(to bottom, #53b2fc, #1385e5);
|
||||
border-color: #075fa9;
|
||||
color: white;
|
||||
font-weight: bold;
|
||||
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.4);
|
||||
}
|
||||
|
||||
|
||||
/* Tweak navbar brand link to be super sleek
|
||||
-------------------------------------------------- */
|
||||
.oss-bar {
|
||||
top: 0;
|
||||
right: 20px;
|
||||
position: fixed;
|
||||
z-index: 1030;
|
||||
}
|
||||
.oss-bar ul {
|
||||
float: right;
|
||||
margin: 0;
|
||||
list-style: none;
|
||||
}
|
||||
.oss-bar ul li {
|
||||
list-style: none;
|
||||
float: left;
|
||||
line-height: 0;
|
||||
margin: 0;
|
||||
}
|
||||
.oss-bar ul li a {
|
||||
-moz-box-sizing: border-box;
|
||||
-webkit-box-sizing: border-box;
|
||||
-ms-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
border: 0;
|
||||
margin-top: -10px;
|
||||
display: block;
|
||||
height: 58px;
|
||||
background: #F36C00 url(oss-credit.png) no-repeat 20px 22px;
|
||||
padding: 22px 20px 12px 20px;
|
||||
text-indent: 120%; /* stupid padding */
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
-webkit-transition: all 0.10s ease-in-out;
|
||||
-moz-transition: all 0.10s ease-in-out;
|
||||
transition: all 0.15s ease-in-out;
|
||||
}
|
||||
.oss-bar ul li a:hover {
|
||||
margin-top: 0px;
|
||||
}
|
||||
.oss-bar a.harvest {
|
||||
width: 196px;
|
||||
background-color: #F36C00;
|
||||
background-position: -142px 22px;
|
||||
padding-right: 22px; /* optical illusion */
|
||||
}
|
||||
.oss-bar a.fork {
|
||||
width: 162px;
|
||||
background-color: #333333;
|
||||
}
|
||||
|
||||
.docs-table th, .docs-table td {
|
||||
border: 1px solid #000;
|
||||
padding: 4px 6px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.docs-table td:last-child {
|
||||
white-space: normal;
|
||||
}
|
||||
|
||||
.docs-table th {
|
||||
font-weight: bold;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
#content pre[class*=language-] {
|
||||
font-size: 14px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
#content pre[class*=language-] code {
|
||||
font-size: 14px;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
#content code[class*=language-] {
|
||||
font-size: 12px;
|
||||
padding: 2px 4px;
|
||||
}
|
||||
|
||||
.anchor {
|
||||
color: inherit;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.anchor:hover {
|
||||
background: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSI3Ij48ZyBmaWxsPSIjNDE0MDQyIj48cGF0aCBkPSJNOS44IDdoLS45bC0uOS0uMWMtLjctLjMtMS40LS43LTEuOC0xLjMtLjItLjEtLjMtLjMtLjMtLjVsLS4zLS40Yy0uMS0uNC0uMi0uOC0uMi0xLjIgMC0uNC4xLS44LjItMS4yaDEuN2MtLjMuNC0uNC44LS40IDEuMiAwIC40LjEuOC4zIDEuMS4xLjIuMi4zLjQuNC4xLjEuMi4yLjQuMy4zLjIuNy4zIDEgLjNoMy40YzEuMiAwIDIuMi0uOSAyLjItMi4xcy0xLTIuMS0yLjItMi4xaC0xLjRjLS4zLS42LS43LTEtMS4yLTEuNGgyLjZjMiAwIDMuNiAxLjYgMy42IDMuNXMtMS42IDMuNS0zLjYgMy41aC0yLjZ6TTguNCAyYy0uMS0uMS0uMi0uMy0uNC0uMy0uMy0uMi0uNy0uMy0xLS4zaC0zLjRjLTEuMiAwLTIuMi45LTIuMiAyLjEgMCAxLjIgMSAyLjEgMi4yIDIuMWgxLjRjLjMuNS43IDEgMS4yIDEuNGgtMi42Yy0yIDAtMy42LTEuNi0zLjYtMy41czEuNi0zLjUgMy42LTMuNWgzLjUwMDAwMDAwMDAwMDAwMDRsLjkuMWMuNy4yIDEuNC43IDEuOCAxLjMuMS4xLjIuMy4zLjUuMS4xLjIuMy4yLjUuMS40LjIuOC4yIDEuMiAwIC40LS4xLjgtLjIgMS4yaC0xLjZjLjMtLjUuNC0uOS40LTEuM3MtLjEtLjgtLjMtMS4xYy0uMS0uMi0uMi0uMy0uNC0uNHoiLz48L2c+PC9zdmc+) 0 50% no-repeat;
|
||||
background-size: 21px 9px;
|
||||
margin-left: -27px;
|
||||
padding-left: 27px;
|
||||
text-decoration: none;
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,269 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Chosen: A jQuery Plugin by Harvest to Tame Unwieldy Select Boxes</title>
|
||||
<link rel="stylesheet" href="docsupport/style.css">
|
||||
<link rel="stylesheet" href="docsupport/prism.css">
|
||||
<link rel="stylesheet" href="chosen.css">
|
||||
<style type="text/css" media="all">
|
||||
/* fix rtl for demo */
|
||||
.chosen-rtl .chosen-drop { left: -9000px; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="container">
|
||||
<div id="content">
|
||||
<header>
|
||||
<h1>Chosen <small>(<span id="latest-version">v1.1.0</span>)</small></h1>
|
||||
</header>
|
||||
<p>Chosen has a number of options and attributes that allow you to have full control of your select boxes.</p>
|
||||
|
||||
<h2><a name="options" class="anchor" href="#options">Options</a></h2>
|
||||
<p>The following options are available to pass into Chosen on instantiation.</p>
|
||||
|
||||
<h3>Example:</h3>
|
||||
<pre>
|
||||
<code class="language-javascript">$(".my_select_box").chosen({
|
||||
disable_search_threshold: 10,
|
||||
no_results_text: "Oops, nothing found!",
|
||||
width: "95%"
|
||||
});</code>
|
||||
</pre>
|
||||
|
||||
<table class="docs-table">
|
||||
<tr>
|
||||
<th>Option</th><th>Default</th><th>Description</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>allow_single_deselect</td>
|
||||
<td>false</td>
|
||||
<td>When set to <code class="language-javascript">true</code> on a single select, Chosen adds a UI element which selects the first elment (if it is blank).</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>disable_search</td>
|
||||
<td>false</td>
|
||||
<td>When set to <code class="language-javascript">true</code>, Chosen will not display the search field (single selects only).</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>disable_search_threshold</td>
|
||||
<td>0</td>
|
||||
<td>Hide the search input on single selects if there are fewer than (n) options.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>enable_split_word_search</td>
|
||||
<td>true</td>
|
||||
<td>By default, searching will match on any word within an option tag. Set this option to <code class="language-javascript">false</code> if you want to only match on the entire text of an option tag.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>inherit_select_classes</td>
|
||||
<td>false</td>
|
||||
<td>When set to <code class="language-javascript">true</code>, Chosen will grab any classes on the original select field and add them to Chosen’s container div.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>max_selected_options</td>
|
||||
<td>Infinity</td>
|
||||
<td>Limits how many options the user can select. When the limit is reached, the <code class="language-javascript">chosen:maxselected</code> event is triggered.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>no_results_text</td>
|
||||
<td>"No results match"</td>
|
||||
<td>The text to be displayed when no matching results are found. The current search is shown at the end of the text (<i>e.g.</i>,
|
||||
No results match "Bad Search").</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>placeholder_text_multiple</td>
|
||||
<td>"Select Some Options"</td>
|
||||
<td>The text to be displayed as a placeholder when no options are selected for a multiple select.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>placeholder_text_single</td>
|
||||
<td>"Select an Option"</td>
|
||||
<td>The text to be displayed as a placeholder when no options are selected for a single select.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>search_contains</td>
|
||||
<td>false</td>
|
||||
<td>By default, Chosen’s search matches starting at the beginning of a word. Setting this option to <code class="language-javascript">true</code> allows matches starting from anywhere within a word. This is especially useful for options that include a lot of special characters or phrases in ()s and []s.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>single_backstroke_delete</td>
|
||||
<td>true</td>
|
||||
<td>By default, pressing delete/backspace on multiple selects will remove a selected choice. When <code class="language-javascript">false</code>, pressing delete/backspace will highlight the last choice, and a second press deselects it.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>width</td>
|
||||
<td>Original select width.</td>
|
||||
<td>The width of the Chosen select box. By default, Chosen attempts to match the width of the select box you are replacing. If your select is hidden when Chosen is instantiated, you must specify a width or the select will show up with a width of 0.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>display_disabled_options</td>
|
||||
<td>true</td>
|
||||
<td>By default, Chosen includes disabled options in search results with a special styling. Setting this option to false will hide disabled results and exclude them from searches.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>display_selected_options</td>
|
||||
<td>true</td>
|
||||
<td>
|
||||
<p>By default, Chosen includes selected options in search results with a special styling. Setting this option to false will hide selected results and exclude them from searches.</p>
|
||||
<p><strong>Note:</strong> this is for multiple selects only. In single selects, the selected result will always be displayed.</p>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
<h2><a name="attributes" class="anchor" href="#attributes">Attributes</a></h2>
|
||||
<p>Certain attributes placed on the select tag or its options can be used to configure Chosen.</p>
|
||||
|
||||
<h3>Example:</h3>
|
||||
|
||||
<pre>
|
||||
<code class="language-markup"><select class="my_select_box" data-placeholder="Select Your Options">
|
||||
<option value="1">Option 1</option>
|
||||
<option value="2" selected>Option 2</option>
|
||||
<option value="3" disabled>Option 3</option>
|
||||
</select></code>
|
||||
</pre>
|
||||
|
||||
<table class="docs-table">
|
||||
<tr>
|
||||
<th>Attribute</th><th>Description</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>data-placeholder</td>
|
||||
<td>
|
||||
<p>The text to be displayed as a placeholder when no options are selected for a select. Defaults to "Select an Option" for single selects or "Select Some Options" for multiple selects.</p>
|
||||
<p><strong>Note:</strong>This attribute overrides anything set in the <code class="language-javascript">placeholder_text_multiple</code> or <code class="language-javascript">placeholder_text_single</code> options.</p>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>multiple</td>
|
||||
<td>The attribute <code class="language-html">multiple</code> on your select box dictates whether Chosen will render a multiple or single select.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>selected, disabled</td>
|
||||
<td>Chosen automatically highlights selected options and disables disabled options.</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
<h2><a name="classes" class="anchor" href="#classes">Classes</a></h2>
|
||||
<p>Classes placed on the select tag can be used to configure Chosen.</p>
|
||||
|
||||
<h3>Example:</h3>
|
||||
|
||||
<pre>
|
||||
<code class="language-markup"><select class="my_select_box chosen-rtl">
|
||||
<option value="1">Option 1</option>
|
||||
<option value="2">Option 2</option>
|
||||
<option value="3">Option 3</option>
|
||||
</select></code>
|
||||
</pre>
|
||||
|
||||
<table class="docs-table">
|
||||
<tr>
|
||||
<th>Classname</th>
|
||||
<th>Description</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>chosen-rtl</td>
|
||||
<td>
|
||||
<p>Chosen supports right-to-left text in select boxes. Add the class <code class="language-html">chosen-rtl</code> to your select tag to support right-to-left text options.</p>
|
||||
<p><strong>Note:</strong> The <code class="language-html">chosen-rtl</code> class will pass through to the Chosen select even when the <code class="language-javascript">inherit_select_classes</code> option is set to <code class="language-javascript">false</code>.</p>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
<h2><a name="triggered-events" class="anchor" href="#triggered-events">Triggered Events</a></h2>
|
||||
<p>Chosen triggers a number of standard and custom events on the original select field.</p>
|
||||
|
||||
<h3>Example:</h3>
|
||||
|
||||
<pre>
|
||||
<code class="language-javascript">$('.my_select_box').on('change', function(evt, params) {
|
||||
do_something(evt, params);
|
||||
});</code>
|
||||
</pre>
|
||||
|
||||
<table class="docs-table">
|
||||
<tr>
|
||||
<th>Event</th><th>Description</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>change</td>
|
||||
<td>
|
||||
<p>Chosen triggers the standard DOM event whenever a selection is made (it also sends a <code class="language-javascript">selected</code> or <code class="language-javascript">deselected</code> parameter that tells you which option was changed).</p>
|
||||
<p><strong>Note:</strong> in order to use change in the Prototype version, you have to include the <a href="https://github.com/kangax/protolicious/blob/5b56fdafcd7d7662c9d648534225039b2e78e371/event.simulate.js">Event.simulate</a> class. The selected and deselected parameters are not available for Prototype.</p>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>chosen:ready</td>
|
||||
<td>Triggered after Chosen has been fully instantiated.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>chosen:maxselected</td>
|
||||
<td>Triggered if <code class="language-javascript">max_selected_options</code> is set and that total is broken.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>chosen:showing_dropdown</td>
|
||||
<td>Triggered when Chosen’s dropdown is opened.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>chosen:hiding_dropdown</td>
|
||||
<td>Triggered when Chosen’s dropdown is closed.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>chosen:no_results</td>
|
||||
<td>Triggered when a search returns no matching results.</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
<p style="margin-top: 1em;">
|
||||
<strong>Note:</strong> all custom Chosen events (those that being with <code class="language-javascript">chosen:</code>) also include the <code class="language-javascript">chosen</code> object as a parameter.
|
||||
</p>
|
||||
|
||||
<h2><a name="triggerable-events" class="anchor" href="#triggerable-events">Triggerable Events</a></h2>
|
||||
<p>You can trigger several events on the original select field to invoke a behavior in Chosen.</p>
|
||||
|
||||
<h3>Example:</h3>
|
||||
|
||||
<pre>
|
||||
<code class="language-javascript">// tell Chosen that a select has changed
|
||||
$('.my_select_box').trigger('chosen:updated');</code>
|
||||
</pre>
|
||||
|
||||
<table class="docs-table">
|
||||
<tr>
|
||||
<th>Event</th><th>Description</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>chosen:updated</td>
|
||||
<td>This event should be triggered whenever Chosen’s underlying select element changes (such as a change in selected options).</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>chosen:activate</td>
|
||||
<td>This is the equivalant of focusing a standard HTML select field. When activated, Chosen will capure keypress events as if you had clicked the field directly.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>chosen:open</td>
|
||||
<td>This event activates Chosen and also displays the search results.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>chosen:close</td>
|
||||
<td>This event deactivates Chosen and hides the search results.</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
<footer>
|
||||
© 2011–2013 <a href="http://www.getharvest.com/">Harvest</a>. Chosen is licensed under the <a href="https://github.com/harvesthq/chosen/blob/master/LICENSE.md">MIT license</a>.
|
||||
</footer>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="oss-bar">
|
||||
<ul>
|
||||
<li><a class="fork" href="https://github.com/harvesthq/chosen">Fork on Github</a></li>
|
||||
<li><a class="harvest" href="http://www.getharvest.com/">Built by Harvest</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<script src="docsupport/prism.js" type="text/javascript" charset="utf-8"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,86 @@
|
||||
/*
|
||||
minimalect
|
||||
http://github.com/groenroos/minimalect
|
||||
|
||||
Copyright (c) 2013-2014 Oskari Groenroos and contributors
|
||||
Licensed under the MIT license.
|
||||
*/
|
||||
|
||||
// jshint globalstrict:true, node:true
|
||||
|
||||
"use strict";
|
||||
|
||||
module.exports = function (grunt) {
|
||||
|
||||
grunt.initConfig({
|
||||
|
||||
pkg: grunt.file.readJSON("package.json"),
|
||||
|
||||
banner:'/*********************************** \n'+
|
||||
'<%= pkg.name %> \n'+
|
||||
'<%= pkg.description %> \n\n' +
|
||||
'jQuery 1.7+ required. \n' +
|
||||
'Developed by @groenroos \n' +
|
||||
'http://www.groenroos.fi \n\n' +
|
||||
'Github: <%= pkg.repository.url %> w \n\n' +
|
||||
'Licensed under the <%= pkg.license %> license.\n\n' +
|
||||
'************************************/\n',
|
||||
|
||||
clean: {
|
||||
options: {
|
||||
force: true
|
||||
},
|
||||
"default": [
|
||||
"*.min.*",
|
||||
'*.css'
|
||||
]
|
||||
},
|
||||
uglify: {
|
||||
options: {
|
||||
banner:'<%= banner %>',
|
||||
mangle: true,
|
||||
compress: true,
|
||||
preserveComments: "some"
|
||||
},
|
||||
"default": {
|
||||
files: {
|
||||
"jquery.minimalect.min.js": ["jquery.minimalect.js"]
|
||||
}
|
||||
}
|
||||
},
|
||||
sass: { // Task
|
||||
dist: {
|
||||
options:{
|
||||
style:"compressed"
|
||||
},
|
||||
files: { // Dictionary of files
|
||||
'jquery.minimalect.min.css': 'jquery.minimalect.scss' // 'destination': 'source'
|
||||
}
|
||||
},
|
||||
dev:{
|
||||
files: { // Dictionary of files
|
||||
'jquery.minimalect.css': 'jquery.minimalect.scss' // 'destination': 'source'
|
||||
}
|
||||
}
|
||||
},
|
||||
usebanner: {
|
||||
taskName: {
|
||||
options: {
|
||||
position: 'top',
|
||||
banner:'<%= banner %>'
|
||||
},
|
||||
files: {
|
||||
src: [ '*.css' ]
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
grunt.loadNpmTasks("grunt-contrib-clean");
|
||||
grunt.loadNpmTasks("grunt-contrib-uglify");
|
||||
grunt.loadNpmTasks("grunt-contrib-jasmine");
|
||||
grunt.loadNpmTasks('grunt-contrib-sass');
|
||||
grunt.loadNpmTasks('grunt-banner');
|
||||
|
||||
grunt.registerTask("default", ["clean", "uglify", "sass", 'usebanner' ]);
|
||||
};
|
||||
@@ -0,0 +1,117 @@
|
||||
minimalect
|
||||
----------
|
||||
|
||||
Minimal select replacement for jQuery by [@groenroos](http://twitter.com/groenroos). For usage examples, visit [groenroos.github.io/minimalect](http://groenroos.github.io/minimalect/)
|
||||
|
||||
* Replace select elements with a nicer styled control
|
||||
* Support for optgroups
|
||||
* Filtering choices by typing
|
||||
* Keyboard navigation
|
||||
* Support for themes
|
||||
|
||||
**New in 0.9.0 (28th May 2014)**
|
||||
|
||||
* AJAX search support
|
||||
* Multiselect support
|
||||
* Detects dynamic changes to original element automatically
|
||||
* Disabled element support
|
||||
* Public methods
|
||||
* Optional reset functionality
|
||||
* Combobox functionality now optional
|
||||
* Less conflict with existing form styles
|
||||
* Various bugfixes
|
||||
|
||||
### Usage
|
||||
|
||||
Include `jquery.minimalect.min.js` after you load jQuery (1.7 or newer). Then simply do;
|
||||
|
||||
$("select").minimalect();
|
||||
|
||||
Remember to also include the stylesheet (SCSS and minified CSS available);
|
||||
|
||||
<link rel="stylesheet" type="text/css" href="minimalect.min.css" media="screen" />
|
||||
|
||||
The default style is very understated, so it's easy to modify to better suit your needs. By default, no graphics are used; the arrow symbols are Unicode characters. Please be advised that not all typefaces on all devices support this, and depending on your target device, you may want to replace it with pre-rendered graphics.
|
||||
|
||||
|
||||
#### AJAX functionality
|
||||
|
||||
You can also use Minimalect as a way to display search results from an AJAX call. For this, pass the `ajax` setting with the URL to the backend. Minimalect will send a POST request with the key `q` containing the value of the user's search. Minimalect will expect a JSON response with an array of objects, each having two keys: `name` and `value`.
|
||||
|
||||
Note, that the response received from the AJAX service will also modify choices available in the original `select` element, so that the selected choice may be appropriately sent with the rest of the form. The original contents of the `select` element are not restored if the user doesn't pick anything.
|
||||
|
||||
|
||||
#### Programmatically changing the selected choice
|
||||
|
||||
If you wish to change the current value of the select, you can simply make your changes to the original element like you would normally with `.val()`. Minimalect will take it from there, providing that the `live` setting is set to `true`, like it is by default.
|
||||
|
||||
|
||||
#### Programmatically changing the available choices
|
||||
|
||||
Since version 0.9.0, Minimalect will automatically recognize if the original options are changed dynamically, and the changes are reflected in the user-facing element. For this, Minimalect uses the MutationObserver, which has [spotty cross-browser support](http://caniuse.com/#feat=mutationobserver). For support in IE10 and earlier, Firefox 13 and earlier, Chrome 26 and earlier and Safari 5.1 and earlier, either use a [polyfill](https://github.com/Polymer/MutationObservers), or call the `update` method manually.
|
||||
|
||||
|
||||
#### Available methods
|
||||
|
||||
You can call various Minimalect methods to control it programmatically. You can call methods by passing the method name as a string in a second call, e.g. `.minimalect("method")`
|
||||
|
||||
* `destroy` — remove all the features of Minimalect and restore the original select. *Warning:* this will unhook any `change`, `focus` or `blur` events you may have connected to the `select` via `.on()`
|
||||
* `update` — refresh Minimalect's displayed choices from the original `select`. Minimalect will do this automatically in modern browsers. See above for details.
|
||||
|
||||
|
||||
#### Available options
|
||||
|
||||
You can pass an object as a parameter for the `.minimalect()` call, to override the default settings.
|
||||
|
||||
You may edit all the CSS classnames that Minimalect uses so that they don't collide with ones you already use, as well as the user-facing messages for customization or internationalization.
|
||||
|
||||
##### Settings
|
||||
|
||||
* `theme` — the currently used theme. Applied as a class to the main div element. Default: *(empty)*
|
||||
* `transition` — which effect should be used for showing and hiding the dropdown. Default: *fade*
|
||||
* `transition_time` — how long the effect for showing and hiding the dropdown should take, in milliseconds. Default: *150*
|
||||
* `remove_empty_option` — whether options with empty values should be removed. Default: `true`
|
||||
* `show_reset` — whether to show a reset button to deselect a selected choice. Default: `false`
|
||||
* `searchable` — whether the combobox functionality is enabled or not. Default: `true`
|
||||
* `ajax` — URL of an AJAX resource for external search results. See above for details. Will not have an effect if `searchable` is `false`. Default: `null`
|
||||
* `live` — whether Minimalect should automatically detect value changes to the original `select`. Creates an interval that runs indefinitely every 100 ms; may interfere with the DOM inspector. Default: `true`
|
||||
* `debug` — whether Minimalect should explain in the console what it's doing. Useful for debugging. Default: `false`
|
||||
|
||||
##### Messages
|
||||
|
||||
* `placeholder` — the default text displayed whenever no choice has been selected. Set to `null` to inherit the placeholder from the value of the first option. Default: *Select a choice*
|
||||
* `empty` — message displayed to the user when no choice matched his filter search term. Default: *No results matched your keyword.*
|
||||
* `error` — message displayed to the user when an AJAX request fails for any reason. Default: *There was a problem with the request.*
|
||||
|
||||
##### Classes
|
||||
|
||||
* `class_container` — classname for the main div element. Default: *minict_wrapper*
|
||||
* `class_group` — classname for a list item that represents an optgroup label. Default: *minict_group*
|
||||
* `class_empty` — classname for the "No results" message when filtering produces no results. Default: *minict_empty*
|
||||
* `class_active` — classname that is applied to the main div element whenever the dropdown is visible. Default: *active*
|
||||
* `class_disabled` — classname that is applied to list items or the whole select, if they are disabled. Default: *disabled*
|
||||
* `class_selected` — classname applied to the list item in the dropdown that is currently selected. Default: *selected*
|
||||
* `class_hidden` — classname applied to list items in the dropdown that do not match the filter. Default: *hidden*
|
||||
* `class_highlighted` — classname applied to the list item that is currently highlighted when the user uses keyboard navigation. Default: *highlighted*
|
||||
* `class_first` — classname that corresponds to the first visible list item in the dropdown, including optgroup labels and the "No results" message. Helpful when rounding corners in CSS. Default: *minict_first*
|
||||
* `class_last` — classname that corresponds to the last visible list item in the dropdown, including optgroup labels and the "No results" message. Helpful when rounding corners in CSS. Default: *minict_last*
|
||||
* `class_reset` — classname applied to the optional reset element. Default: *minict_reset*
|
||||
|
||||
##### Callbacks
|
||||
|
||||
* `beforeinit` — Called immediately when the plugin is called, before any initialization work begins.
|
||||
* `afterinit` — Called after Minimalect has been fully initialized.
|
||||
* `onchange` — Called whenever the user selects an option in the list.
|
||||
* `value`; the value of the choice selected.
|
||||
* `text`; the user-facing text of the choice selected.
|
||||
* `onopen` — Called when the dropdown list is displayed.
|
||||
* `onclose` — Called when the dropdown list is closed (either by clicking away, or by selecting an option).
|
||||
* `onfilter` — Called every time the list is filtered (basically every time the user types a letter into the filter box).
|
||||
* `match`; a boolean parameter, `true` if there was matches, `false` if no matches are found.
|
||||
|
||||
|
||||
### Bugs & Support
|
||||
|
||||
Developed by [@groenroos](http://twitter.com/groenroos). Please list all bugs and feature requests in the [Github issue tracker](https://github.com/groenroos/minimalect/issues).
|
||||
|
||||
Licensed under the MIT license.
|
||||
@@ -0,0 +1,9 @@
|
||||
{
|
||||
"name": "minimalect",
|
||||
"version": "0.9.0",
|
||||
"main": "jquery.minimalect.js",
|
||||
"ignore": [
|
||||
"Gruntfile.js",
|
||||
"*.md"
|
||||
]
|
||||
}
|
||||
@@ -0,0 +1,222 @@
|
||||
/************************************
|
||||
MINIMALECT 0.9
|
||||
A minimalistic select replacement
|
||||
|
||||
jQuery 1.7+ required.
|
||||
Developed by @groenroos
|
||||
http://www.groenroos.fi
|
||||
|
||||
Github: http://git.io/Xedg9w
|
||||
|
||||
Licensed under the MIT license.
|
||||
|
||||
************************************/
|
||||
.minict_wrapper {
|
||||
font-family: "Segoe UI", Segoe, "Lucida Grande", "Lucida Sans Unicode", Arial, Helvetica, sans-serif;
|
||||
color: #333;
|
||||
background: #fff;
|
||||
position: relative;
|
||||
width: 300px;
|
||||
height: 35px;
|
||||
height: 2.2rem;
|
||||
border: 1px solid #e5e5e5;
|
||||
border-radius: 3px;
|
||||
-webkit-box-sizing: border-box;
|
||||
-moz-box-sizing: border-box;
|
||||
box-sizing: border-box; }
|
||||
.minict_wrapper * {
|
||||
-webkit-box-sizing: border-box;
|
||||
-moz-box-sizing: border-box;
|
||||
box-sizing: border-box; }
|
||||
.minict_wrapper.disabled {
|
||||
background: #f5f5f5;
|
||||
text-shadow: 0 1px 0 #fff; }
|
||||
.minict_wrapper.disabled span {
|
||||
color: #bbb !important; }
|
||||
.minict_wrapper:after {
|
||||
content: "\25BC";
|
||||
display: block;
|
||||
position: absolute;
|
||||
height: 33px;
|
||||
width: 33px;
|
||||
height: 2.1rem;
|
||||
width: 2.1rem;
|
||||
top: 0;
|
||||
right: 0;
|
||||
font-size: 10px;
|
||||
font-size: 0.6rem;
|
||||
line-height: 32px;
|
||||
line-height: 1.9rem;
|
||||
text-align: center;
|
||||
color: #555; }
|
||||
.minict_wrapper.active:after {
|
||||
content: "\25B2"; }
|
||||
.minict_wrapper.disabled:after {
|
||||
color: #bbb; }
|
||||
.minict_wrapper span {
|
||||
display: block;
|
||||
border: 0;
|
||||
outline: none;
|
||||
background: none;
|
||||
font-family: "Segoe UI", Segoe, "Lucida Grande", "Lucida Sans Unicode", Arial, Helvetica, sans-serif;
|
||||
color: #333;
|
||||
font-size: 16px;
|
||||
font-size: 1rem;
|
||||
height: 32px;
|
||||
height: 2.0rem;
|
||||
line-height: 23px;
|
||||
line-height: 1.5rem;
|
||||
padding: 4px 53px 0 6px;
|
||||
padding: 4px 3.4rem 0 0.4rem;
|
||||
cursor: default;
|
||||
width: 100%;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis; }
|
||||
.minict_wrapper span:empty:before {
|
||||
content: attr(data-placeholder);
|
||||
color: #ccc;
|
||||
line-height: 23px;
|
||||
line-height: 1.5rem; }
|
||||
.minict_wrapper ul {
|
||||
display: none;
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 0 -1px;
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
width: -webkit-calc(100% + 2px);
|
||||
width: -moz-calc(100% + 2px);
|
||||
width: calc(100% + 2px);
|
||||
border: 1px solid #e5e5e5;
|
||||
border-top: 1px solid #f9f9f9;
|
||||
border-bottom-left-radius: 3px;
|
||||
border-bottom-right-radius: 3px;
|
||||
top: 33px;
|
||||
top: 2.0rem;
|
||||
left: 0;
|
||||
max-height: 350px;
|
||||
max-height: 22rem;
|
||||
overflow-y: auto;
|
||||
z-index: 999999; }
|
||||
.minict_wrapper ul li {
|
||||
list-style: none;
|
||||
font-size: 1rem;
|
||||
padding: 0 10px;
|
||||
padding: 0 0.7rem;
|
||||
cursor: pointer;
|
||||
background: #fff;
|
||||
height: 35px;
|
||||
height: 2.2rem;
|
||||
line-height: 32px;
|
||||
line-height: 2rem; }
|
||||
.minict_wrapper ul li:hover {
|
||||
background: #fcfcfc;
|
||||
color: #111; }
|
||||
.minict_wrapper ul li.minict_group {
|
||||
color: #444;
|
||||
background: #f6f6f6;
|
||||
font-weight: bold;
|
||||
cursor: default; }
|
||||
.minict_wrapper ul li.minict_empty {
|
||||
display: none;
|
||||
background: #fff !important;
|
||||
color: #bbb;
|
||||
text-align: center;
|
||||
font-size: 14px;
|
||||
font-size: 0.9rem;
|
||||
height: 55px;
|
||||
height: 3.5rem;
|
||||
line-height: 50px;
|
||||
line-height: 3.3rem; }
|
||||
.minict_wrapper ul li.disabled {
|
||||
cursor: default;
|
||||
background: #fff !important;
|
||||
color: #bbb; }
|
||||
.minict_wrapper ul li.selected {
|
||||
color: #819a9a;
|
||||
background: #f8f9f9; }
|
||||
.minict_wrapper ul li.highlighted {
|
||||
color: #fff;
|
||||
background: #819a9a; }
|
||||
.minict_wrapper ul li.hidden {
|
||||
display: none; }
|
||||
.minict_wrapper .minict_reset {
|
||||
color: #A9A9A9;
|
||||
bottom: 0;
|
||||
display: none;
|
||||
font-size: 18px;
|
||||
font-size: 1.1rem;
|
||||
line-height: 30px;
|
||||
line-height: 1.9rem;
|
||||
position: absolute;
|
||||
right: 35px;
|
||||
right: 2.2rem;
|
||||
text-align: center;
|
||||
top: 0;
|
||||
text-decoration: none;
|
||||
width: 20px;
|
||||
width: 1.2rem;
|
||||
-webkit-transition: all 0.35s ease-in-out;
|
||||
transition: all 0.35s ease-in-out; }
|
||||
.minict_wrapper .minict_reset:hover {
|
||||
color: #e0e0e0;
|
||||
-webkit-transition: all 0.15s ease-in-out;
|
||||
transition: all 0.15s ease-in-out; }
|
||||
.minict_wrapper .minict_reset:active {
|
||||
color: #636363; }
|
||||
.minict_wrapper.disabled .minict_reset {
|
||||
display: none; }
|
||||
|
||||
.minict_wrapper.bubble {
|
||||
-webkit-box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.05);
|
||||
box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.05);
|
||||
background: -moz-linear-gradient(top, white 0%, #f9f9f9 100%);
|
||||
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, white), color-stop(100%, #f9f9f9));
|
||||
background: -webkit-linear-gradient(top, white 0%, #f9f9f9 100%);
|
||||
background: -o-linear-gradient(top, white 0%, #f9f9f9 100%);
|
||||
background: -ms-linear-gradient(top, white 0%, #f9f9f9 100%);
|
||||
background: linear-gradient(to bottom, white 0%, #f9f9f9 100%); }
|
||||
.minict_wrapper.bubble:hover {
|
||||
border-color: #dcdcdc; }
|
||||
.minict_wrapper.bubble:after {
|
||||
border-left: 1px solid #e5e5e5;
|
||||
-webkit-box-shadow: inset 1px 0px 0px 0px #fff;
|
||||
box-shadow: inset 1px 0px 0px 0px #fff;
|
||||
height: 2.05rem; }
|
||||
.minict_wrapper.bubble ul {
|
||||
top: 2.7rem;
|
||||
-webkit-box-shadow: 0px 5px 25px 0px rgba(0, 0, 0, 0.25);
|
||||
box-shadow: 0px 5px 25px 0px rgba(0, 0, 0, 0.25);
|
||||
border-radius: 6px;
|
||||
overflow: visible; }
|
||||
.minict_wrapper.bubble ul:before {
|
||||
position: absolute;
|
||||
top: -11px;
|
||||
left: 19px;
|
||||
content: ".";
|
||||
color: transparent;
|
||||
width: 0px;
|
||||
height: 0px;
|
||||
border-style: solid;
|
||||
border-width: 0 11px 11px 11px;
|
||||
border-color: transparent transparent #e5e5e5 transparent; }
|
||||
.minict_wrapper.bubble ul:after {
|
||||
position: absolute;
|
||||
top: -10px;
|
||||
left: 20px;
|
||||
content: ".";
|
||||
color: transparent;
|
||||
width: 0px;
|
||||
height: 0px;
|
||||
border-style: solid;
|
||||
border-width: 0 10px 10px 10px;
|
||||
border-color: transparent transparent #ffffff transparent; }
|
||||
.minict_wrapper.bubble ul li.minict_first {
|
||||
border-top-left-radius: 6px;
|
||||
border-top-right-radius: 6px; }
|
||||
.minict_wrapper.bubble ul li.minict_last {
|
||||
border-bottom-left-radius: 6px;
|
||||
border-bottom-right-radius: 6px; }
|
||||
.minict_wrapper.bubble .minict_reset {
|
||||
width: 30px; }
|
||||
@@ -0,0 +1,647 @@
|
||||
/************************************
|
||||
MINIMALECT 0.9
|
||||
A minimalistic select replacement
|
||||
|
||||
jQuery 1.7+ required.
|
||||
Developed by @groenroos
|
||||
http://www.groenroos.fi
|
||||
|
||||
Github: http://git.io/Xedg9w
|
||||
|
||||
Licensed under the MIT license.
|
||||
|
||||
************************************/
|
||||
|
||||
;(function ( $, window, document, undefined ) {
|
||||
|
||||
var pluginName = "minimalect",
|
||||
defaults = {
|
||||
// settings
|
||||
theme: "", // name of the theme used
|
||||
reset: false,
|
||||
transition: "fade",
|
||||
transition_time: 150,
|
||||
remove_empty_option: true,
|
||||
searchable: true, // whether or not the combobox functionality is enabled
|
||||
ajax: null, // URL to an external resource
|
||||
debug: false, // whether to be verbose in the console
|
||||
live: true, // whether to automatically detect changes
|
||||
|
||||
// messages
|
||||
placeholder: "Select a choice", // default placeholder when nothing is selected
|
||||
empty: "No results match your keyword.", // error message when nothing matches the filter search term
|
||||
error_message: "There was a problem with the request.", // error message when the AJAX call fails
|
||||
|
||||
// classes
|
||||
class_container: "minict_wrapper", // wrapper div for the element
|
||||
class_group: "minict_group", // list item for an optgroup
|
||||
class_empty: "minict_empty", // "No results" message
|
||||
class_active: "active", // applied to wrapper when the dropdown is displayed
|
||||
class_disabled: "disabled", // applied to list elements that are disabled
|
||||
class_selected: "selected", // the currently selected item in the dropdown
|
||||
class_hidden: "hidden", // an item that doesn't match the filter search term
|
||||
class_highlighted: "highlighted", // item highlighted by keyboard navigation
|
||||
class_first: "minict_first", // first visible element
|
||||
class_last: "minict_last", // last visible element
|
||||
class_reset: "minict_reset", // reset link
|
||||
|
||||
// callbacks
|
||||
beforeinit: function(){}, // called before Minimalect is initialized
|
||||
afterinit: function(){}, // called right after Minimalect is initialized
|
||||
onchange: function(){}, // called whenever the user changes the selected value
|
||||
onopen: function(){}, // called when the dropdown is displayed
|
||||
onclose: function(){}, // called when the dropdown is hidden
|
||||
onfilter: function(){} // called every time the filter has been activated
|
||||
};
|
||||
|
||||
// The actual plugin constructor
|
||||
function Plugin( element, options ) {
|
||||
this.element = $(element);
|
||||
this.options = $.extend( {}, defaults, options );
|
||||
this._defaults = defaults;
|
||||
this._name = pluginName;
|
||||
this.label = $('[for="'+this.element.attr('id')+'"]').attr('for', 'minict_'+this.element.attr('id'));
|
||||
|
||||
this._init();
|
||||
}
|
||||
|
||||
Plugin.prototype = {
|
||||
|
||||
// INITIALIZATION
|
||||
|
||||
_init: function() {
|
||||
|
||||
// before init callback
|
||||
this.options.beforeinit();
|
||||
|
||||
// PREPWORK
|
||||
|
||||
var op = this.options,
|
||||
m = this;
|
||||
|
||||
// create the wrapper
|
||||
this.wrapper = $('<div class="'+op.class_container+'"></div>');
|
||||
// hide the original select and add the wrapper
|
||||
this.element.hide().after(this.wrapper);
|
||||
// apply the current theme to the wrapper
|
||||
if(op.theme) this.wrapper.addClass(op.theme);
|
||||
// reflect disabled status
|
||||
if(this.element.prop("disabled"))
|
||||
this.wrapper.addClass(op.class_disabled);
|
||||
|
||||
// create and add the input
|
||||
this.input = $(
|
||||
'<span '+
|
||||
(op.searchable ? 'contenteditable="true"' : '') +
|
||||
' data-placeholder="'+(this.element.find("option[selected]").text() || this.element.attr("placeholder") || (op.placeholder != null) ? op.placeholder : this.element.find("option:first").text())+
|
||||
'" '+ (this.element.is('[tabindex]') ? ('tabindex='+this.element.attr('tabindex')) : '') +'>'+
|
||||
(this.element.find("option[selected]").html() || "")+
|
||||
'</span>'
|
||||
).appendTo(this.wrapper);
|
||||
|
||||
// add the reset link, if it's wanted
|
||||
if(op.reset)
|
||||
this.reset = $('<a href="#" class="'+op.class_reset+'">×</a>').appendTo(this.wrapper);
|
||||
|
||||
// parse the select itself, and create the dropdown markup
|
||||
this.ul = $('<ul>'+this._parseSelect()+'<li class="'+op.class_empty+'">'+op.empty+'</li></ul>').appendTo(this.wrapper);
|
||||
this.items = this.wrapper.find('li');
|
||||
// if it's preselected, select the option itself as well
|
||||
if(this.element.find("option[selected]").length) {
|
||||
this._showResetLink();
|
||||
this.items.filter('[data-value="'+this.element.find("option[selected]").val()+'"]').addClass(op.class_selected);
|
||||
}
|
||||
|
||||
// BIND EVENTS
|
||||
// hide dropdown when you click elsewhere
|
||||
$(document).on("click", function(){ m._hideChoices(m.wrapper) });
|
||||
// hide dropdown when moving focus outside it
|
||||
$("*").not(this.wrapper).not(this.wrapper.find('*')).on("focus", function(){ m._hideChoices(m.wrapper) });
|
||||
// toggle dropdown when you click on the dropdown itself
|
||||
this.wrapper.on("click", function(e){
|
||||
e.stopPropagation();
|
||||
// only close the dropdown when it's not disabled and not multiselect
|
||||
if(!m.element.prop("multiple") && !m.element.prop("disabled"))
|
||||
m._toggleChoices()
|
||||
});
|
||||
// toggle dropdown when you click on the associated label, if present
|
||||
this.label.on("click", function(e){ e.stopPropagation(); m.input.trigger('focus') });
|
||||
// select choice when you click on it
|
||||
this.wrapper.on("click", "li:not(."+op.class_group+", ."+op.class_empty+", ."+op.class_disabled+")", function(){ m._selectChoice($(this)) });
|
||||
// stop the dropdown from closing when you click on a group or empty placeholder
|
||||
this.wrapper.on("click", "li."+op.class_group+", li."+op.class_empty+", li."+op.class_disabled, function(e){
|
||||
e.stopPropagation();
|
||||
m.input.focus();
|
||||
});
|
||||
// if the original is focused or blurred manually, mimic it
|
||||
// also handle the custom update event
|
||||
this.element.on("focus", function(){
|
||||
m.element.blur();
|
||||
m._showChoices();
|
||||
})
|
||||
.on("blur", m._hideChoices)
|
||||
.on("update", m.update);
|
||||
|
||||
// bind reset only if it's there
|
||||
if(op.reset){
|
||||
this.wrapper.on("click", "a."+op.class_reset, function(e){
|
||||
e.stopPropagation();
|
||||
m._resetChoice();
|
||||
return false;
|
||||
});
|
||||
}
|
||||
|
||||
// key bindings for the input element
|
||||
this.input.on("focus click", function(e){
|
||||
e.stopPropagation();
|
||||
if(!m.element.prop("disabled")) m._showChoices(); else m.input.blur();
|
||||
}).on("keydown", function(e){
|
||||
// keyboard navigation
|
||||
switch(e.keyCode) {
|
||||
// up
|
||||
case 38:
|
||||
e.preventDefault();
|
||||
m._navigateChoices('up');
|
||||
break;
|
||||
// down
|
||||
case 40:
|
||||
e.preventDefault();
|
||||
m._navigateChoices('down');
|
||||
break;
|
||||
// enter
|
||||
case 13:
|
||||
// tab
|
||||
case 9:
|
||||
// select the highlighted choice
|
||||
if(m.items.filter("."+op.class_highlighted).length)
|
||||
m._selectChoice(m.items.filter("."+op.class_highlighted));
|
||||
// or if there is none, select the first choice after filtering
|
||||
else if(m.input.text())
|
||||
m._selectChoice(m.items.not("."+op.class_group+", ."+op.class_empty).filter(':visible').first());
|
||||
if(e.keyCode===13){
|
||||
e.preventDefault();
|
||||
m._hideChoices(m.wrapper);
|
||||
}
|
||||
break;
|
||||
// escape
|
||||
case 27:
|
||||
e.preventDefault();
|
||||
// close the select and don't change the value
|
||||
m._hideChoices(m.wrapper);
|
||||
break;
|
||||
}
|
||||
}).on("keyup", function(e){
|
||||
// if we're not navigating, filter
|
||||
if($.inArray(e.keyCode, [38, 40, 13, 9, 27]) === -1){
|
||||
m._filterChoices();
|
||||
}
|
||||
});
|
||||
|
||||
// if mutation observing is supported
|
||||
if(window.MutationObserver){
|
||||
// observe the original for DOM changes so they can be reflected
|
||||
this.observer = new MutationObserver(function( mutations ) {
|
||||
// if there were changes...
|
||||
if(mutations.length > 0){
|
||||
// ...reparse the select
|
||||
m.ul.html(m._parseSelect()+'<li class="'+op.class_empty+'">'+op.empty+'</li>');
|
||||
if(m.options.debug) console.log("Minimalect detected a DOM change for ", m.element);
|
||||
}
|
||||
});
|
||||
this.observer.observe(m.element[0], {childList: true});
|
||||
}
|
||||
|
||||
// poll the original for changes
|
||||
if(op.live){
|
||||
// set cache to the original value
|
||||
var prevval = this.element.val();
|
||||
// set a tight interval to check for the original
|
||||
setInterval(function(){
|
||||
// if we're out of date
|
||||
if(prevval != m.element.val() && m.element.val() != null && m.element.val() != "") {
|
||||
// update cache
|
||||
prevval = m.element.val();
|
||||
// update selection
|
||||
if(typeof prevval == "array") {
|
||||
prevval.each(function(k,v){
|
||||
m._selectChoice(m.wrapper.find("li[data-value='"+v+"']"));
|
||||
});
|
||||
} else {
|
||||
m._selectChoice(m.wrapper.find("li[data-value='"+prevval+"']"));
|
||||
}
|
||||
} else if (m.element.val() == null || m.element.val() == "") {
|
||||
// update cache
|
||||
prevval = m.element.val();
|
||||
// if it was empty, let's clear it
|
||||
m.items.removeClass(m.options.class_selected);
|
||||
m.input.text('').attr('data-placeholder', m.options.placeholder);
|
||||
}
|
||||
|
||||
// let's also check for disabled
|
||||
if(m.element.prop("disabled"))
|
||||
m.wrapper.addClass(op.class_disabled);
|
||||
else
|
||||
m.wrapper.removeClass(op.class_disabled);
|
||||
}, 100);
|
||||
}
|
||||
|
||||
|
||||
// after init callback
|
||||
op.afterinit();
|
||||
},
|
||||
|
||||
|
||||
// PRIVATE METHODS
|
||||
|
||||
// navigate with a keyboard
|
||||
// dr - direction we're going, either "up" or "down"
|
||||
_navigateChoices: function(dr) {
|
||||
var m = this,
|
||||
wr = this.wrapper, // jQuery reference for the wrapper
|
||||
op = this.options, // options object
|
||||
items = this.items;
|
||||
// list all the elements that aren't navigatable
|
||||
var ignored = "."+op.class_hidden+", ."+op.class_empty+", ."+op.class_group;
|
||||
|
||||
if(!items.filter("."+op.class_highlighted).length) { // if nothing is selected, select the first or last
|
||||
if(dr === 'up') {
|
||||
items.not(ignored).last().addClass(op.class_highlighted);
|
||||
} else if (dr === 'down') {
|
||||
items.not(ignored).first().addClass(op.class_highlighted);
|
||||
}
|
||||
return false;
|
||||
} else { // if something is selected...
|
||||
// ...remove current selection...
|
||||
cur = items.filter("."+op.class_highlighted);
|
||||
cur.removeClass(op.class_highlighted);
|
||||
// ...and figure out the next one
|
||||
if(dr === 'up') {
|
||||
if(items.not(ignored).first()[0] != cur[0]) { // if we're not at the first
|
||||
cur.prevAll("li").not(ignored).first().addClass(op.class_highlighted); // highlight the prev
|
||||
// make sure it's visible in a scrollable list
|
||||
var offset = items.filter("."+op.class_highlighted).offset().top - this.ul.offset().top + this.ul.scrollTop();
|
||||
if (this.ul.scrollTop() > offset)
|
||||
this.ul.scrollTop(offset);
|
||||
} else { // if we are at the first
|
||||
items.not(ignored).last().addClass(op.class_highlighted); // highlight the last
|
||||
// make sure it's visible in a scrollable list
|
||||
this.ul.scrollTop(this.ul.height());
|
||||
}
|
||||
} else if (dr === 'down') {
|
||||
if(items.not(ignored).last()[0] != cur[0]) { // if we're not at the last
|
||||
cur.nextAll("li").not(ignored).first().addClass(op.class_highlighted); // highlight the next
|
||||
// make sure it's visible in a scrollable list
|
||||
var ddbottom = this.ul.height(),
|
||||
libottom = items.filter("."+op.class_highlighted).offset().top - this.ul.offset().top + items.filter("."+op.class_highlighted).outerHeight();
|
||||
if (ddbottom < libottom)
|
||||
this.ul.scrollTop(this.ul.scrollTop() + libottom - ddbottom);
|
||||
} else { // if we are at the last
|
||||
items.not(ignored).first().addClass(op.class_highlighted); // highlight the first
|
||||
// make sure it's visible in a scrollable list
|
||||
this.ul.scrollTop(0);
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
// parse the entire select based on whether it has optgroups or not, and return the new markup
|
||||
_parseSelect: function() {
|
||||
var m = this, ulcontent = "";
|
||||
if( !this.element.find("optgroup").length ) { // if we don't have groups
|
||||
// just parse the elements regularly
|
||||
ulcontent = this._parseElements( this.element.html() );
|
||||
} else { // if we have groups
|
||||
// parse each group separately
|
||||
this.element.find("optgroup").each(function(){
|
||||
// create a group element
|
||||
ulcontent += '<li class="'+this.options.class_group+'">'+$(this).attr("label")+'</li>';
|
||||
// and add its children
|
||||
ulcontent += this._parseElements( $(this).html() );
|
||||
});
|
||||
}
|
||||
return ulcontent;
|
||||
},
|
||||
|
||||
// turn option elements into li elements
|
||||
// elhtml - HTML containing the options
|
||||
_parseElements: function(elhtml) {
|
||||
var m = this, readyhtml = "";
|
||||
// go through each option
|
||||
$( $.trim(elhtml) ).filter("option").each(function(){
|
||||
var $el = $(this);
|
||||
if ($el.attr('value') === '' && m.options.remove_empty_option) return;
|
||||
// create an li with a data attribute containing its value
|
||||
readyhtml += '<li data-value="'+$el.val().replace(/"/g, """)+'" class="'+($el.attr("class") || "")+($el.prop("disabled") ? " "+m.options.class_disabled : "")+'">'+$el.text()+'</li>';
|
||||
});
|
||||
// spit it out
|
||||
return readyhtml;
|
||||
},
|
||||
|
||||
// toggle the visibility of the dropdown
|
||||
_toggleChoices: function(){
|
||||
(!this.wrapper.hasClass(this.options.class_active)) ? this._showChoices() : this._hideChoices(this.wrapper);
|
||||
},
|
||||
|
||||
// show the dropdown
|
||||
// cb - callback before the animation plays
|
||||
_showChoices: function(cb){
|
||||
var m = this,
|
||||
wr = this.wrapper, // jQuery reference for the wrapper
|
||||
op = this.options; // options object
|
||||
if (!wr.hasClass(op.class_active)){
|
||||
// keep the first and last classes up to date
|
||||
this._updateFirstLast(false);
|
||||
// close all other open minimalects
|
||||
$("."+op.class_container).each(function(){ //todo this doesn't work if the container classes are different
|
||||
if($(this)[0] !== wr[0])
|
||||
m._hideChoices($(this));
|
||||
});
|
||||
// internal callback
|
||||
if(typeof cb === 'function') cb.call();
|
||||
// add the active class
|
||||
wr.addClass(op.class_active);
|
||||
switch(op.transition) {
|
||||
case "fade":
|
||||
this.ul.fadeIn(op.transition_time);
|
||||
break;
|
||||
default:
|
||||
this.ul.show();
|
||||
break;
|
||||
}
|
||||
// make the input editable
|
||||
this.input.text("").focus();
|
||||
// hide the reset link
|
||||
this._hideResetLink();
|
||||
// callback
|
||||
this.options.onopen();
|
||||
} else {
|
||||
// internal callback
|
||||
if(typeof cb === 'function') cb.call();
|
||||
}
|
||||
},
|
||||
|
||||
_resetDropdown: function(cb){
|
||||
var op = this.options; // options object
|
||||
// reset the filtered elements
|
||||
this.items.removeClass(op.class_hidden);
|
||||
// hide the empty error message
|
||||
this.wrapper.find("."+op.class_empty).hide();
|
||||
// reset keyboard navigation
|
||||
this.items.filter("."+op.class_highlighted).removeClass(op.class_highlighted);
|
||||
// internal callback
|
||||
if(typeof cb === 'function') cb.call();
|
||||
},
|
||||
|
||||
// hide the dropdown
|
||||
// wr - jQuery reference for the wrapper
|
||||
// cb - callback for after the animation has played
|
||||
_hideChoices: function(wr, cb){
|
||||
var op = this.options, // options object
|
||||
to = op.transition_time, // timeout for the transition to finish
|
||||
m = this;
|
||||
|
||||
if (wr.hasClass(op.class_active)){
|
||||
// remove the active class and fade out
|
||||
wr.removeClass(op.class_active);
|
||||
|
||||
switch(op.transition) {
|
||||
case "fade":
|
||||
wr.children("ul").fadeOut(op.transition_time);
|
||||
break;
|
||||
default:
|
||||
wr.children("ul").hide();
|
||||
to = 0;
|
||||
break;
|
||||
}
|
||||
|
||||
// set a timeout for clearing the field, so there's no flickering
|
||||
setTimeout(function(){
|
||||
// reset filters
|
||||
m._resetDropdown(cb);
|
||||
|
||||
// blur the input
|
||||
m.input.blur();
|
||||
|
||||
// reset it
|
||||
if(m.input.attr("data-placeholder") != op.placeholder) {
|
||||
// if we have a previously selected value, restore that
|
||||
m.input.text(m.input.attr("data-placeholder"));
|
||||
} else if(!m.items.filter("."+op.class_selected).length) {
|
||||
// if we have no selection, empty it to show placeholder
|
||||
m.input.text("");
|
||||
}
|
||||
}, to);
|
||||
|
||||
// show the reset link
|
||||
m._showResetLink();
|
||||
|
||||
// callback
|
||||
op.onclose();
|
||||
} else {
|
||||
// internal callback
|
||||
if(typeof cb === 'function') cb.call();
|
||||
}
|
||||
},
|
||||
|
||||
// filter choices based on user input
|
||||
_filterChoices: function(){
|
||||
var wr = this.wrapper, // jQuery reference for the wrapper
|
||||
op = this.options, // options object
|
||||
m = this;
|
||||
|
||||
if(op.ajax) {
|
||||
// if we're searching from ajax
|
||||
|
||||
$.post(op.ajax, {"q": this.input.text()})
|
||||
.success(function(data){
|
||||
// we got a response
|
||||
|
||||
if(op.debug) console.log("Minimalect received ", data, " for query '"+m.input.text()+"' in ", m.element);
|
||||
|
||||
if(data.length) {
|
||||
// if we have results
|
||||
var new_html = "";
|
||||
$.each(data, function(k, choice){
|
||||
// parse each data point to an option in the original
|
||||
new_html += '<option value="'+choice.value+'">'+choice.name+'</option>';
|
||||
});
|
||||
// populate original element
|
||||
m.element.html(new_html);
|
||||
// parse and display it
|
||||
m.ul.html(m._parseSelect()+'<li class="'+op.class_empty+'">'+op.empty+'</li>');
|
||||
wr.find("."+op.class_empty).hide();
|
||||
|
||||
// refresh internal cache
|
||||
m.items = wr.find('li');
|
||||
|
||||
// callback, results found
|
||||
m.options.onfilter(true);
|
||||
} else {
|
||||
// show a "no results" placeholder if there's nothing to show
|
||||
m.ul.html('<li class="'+op.class_empty+'">'+op.empty+'</li>');
|
||||
wr.find("."+op.class_empty).show();
|
||||
// tell the console if debug mode is on
|
||||
if(op.debug) console.log("Minimalect didn't find any results for '"+m.input.text()+"' from ", m.element);
|
||||
// callback, no results found
|
||||
m.options.onfilter(false);
|
||||
}
|
||||
})
|
||||
.error(function(data){
|
||||
// show feedback for the user
|
||||
wr.find("."+op.class_empty).text(op.error_message);
|
||||
wr.find("li").not("."+op.class_empty).addClass(op.class_hidden);
|
||||
wr.find("."+op.class_empty).show();
|
||||
// tell the console if debug mode is on
|
||||
if(op.debug) console.error("Minimalect's AJAX query failed for ", m.element, " - came back with ", data);
|
||||
});
|
||||
} else {
|
||||
// traditional filtering
|
||||
|
||||
// get the filter value, escape regex chars (thanks Andrew Clover!)
|
||||
var filter = this.input.text().replace(/[-\/\\^$*+?.()|[\]{}]/g, '\\$&');
|
||||
// reset keyboard navigation
|
||||
this.items.filter("."+op.class_highlighted).removeClass(op.class_highlighted);
|
||||
|
||||
// filter through each option
|
||||
this.items.not(op.class_group).each(function(){
|
||||
// if there's no match (or if it's disabled), hide it. otherwise, unhide it
|
||||
if ($(this).text().search(new RegExp(filter, "i")) < 0 || $(this).hasClass(op.class_disabled))
|
||||
$(this).addClass(op.class_hidden);
|
||||
else
|
||||
$(this).removeClass(op.class_hidden);
|
||||
});
|
||||
|
||||
// make sure optgroups with no choices are hidden
|
||||
// sort of a kludge since we have no hierarchy
|
||||
this.items.filter("."+op.class_group).removeClass(op.class_hidden).each(function(){
|
||||
nextlis = $(this).nextAll("li").not("."+op.class_hidden+", ."+op.class_empty);
|
||||
if(nextlis.first().hasClass(op.class_group) || !nextlis.length) $(this).addClass(op.class_hidden);
|
||||
});
|
||||
|
||||
// show a "no results" placeholder if there's nothing to show
|
||||
wr.find("."+op.class_empty).hide();
|
||||
if(!this.items.not("."+op.class_hidden+", ."+op.class_empty).length) {
|
||||
wr.find("."+op.class_empty).show();
|
||||
// tell the console if debug mode is on
|
||||
if(op.debug) console.log("Minimalect didn't find any results for '"+this.input.text()+"' from ", this.element);
|
||||
// callback, no results found
|
||||
this.options.onfilter(false);
|
||||
} else {
|
||||
// callback, results found
|
||||
this.options.onfilter(true);
|
||||
}
|
||||
|
||||
// keep the first and last classes up to date
|
||||
this._updateFirstLast(true);
|
||||
}
|
||||
},
|
||||
|
||||
// select the choice defined
|
||||
// ch - jQuery reference for the li element the user has chosen
|
||||
_selectChoice: function(ch){
|
||||
var el = this.element, // jQuery reference for the original select element
|
||||
op = this.options, // options object
|
||||
vals = [],
|
||||
names = [];
|
||||
|
||||
// if it's disabled, au revoir
|
||||
if(ch.hasClass(this.options.class_disabled)) return false;
|
||||
|
||||
// apply the selected class
|
||||
if(!this.element.prop("multiple"))
|
||||
this.items.removeClass(op.class_selected);
|
||||
ch.addClass(op.class_selected);
|
||||
|
||||
this.items.filter("."+op.class_selected).each(function(){
|
||||
vals.push($(this).data("value"));
|
||||
names.push($(this).text());
|
||||
});
|
||||
|
||||
// show it up in the input
|
||||
this.input.text(names.join(", ")).attr("data-placeholder", names.join(", "));
|
||||
|
||||
// if the selected choice is different
|
||||
if(el.val() != ch.data("value") || el.val() != vals){
|
||||
// update the original select element
|
||||
el.val(vals);
|
||||
// call original select change event
|
||||
el.trigger("change");
|
||||
}
|
||||
|
||||
this._showResetLink();
|
||||
|
||||
// callback
|
||||
this.options.onchange(ch.data("value"), ch.text());
|
||||
},
|
||||
|
||||
// clear the select
|
||||
_resetChoice: function() {
|
||||
this.element.val('').trigger("change");
|
||||
this._hideResetLink();
|
||||
},
|
||||
|
||||
// show the reset link if options.reset is true
|
||||
_showResetLink: function() {
|
||||
if(this.input.text().length > 0 || this.ul.find("li."+this.options.class_selected).length > 0)
|
||||
this.options.reset && this.reset.show();
|
||||
},
|
||||
|
||||
// hide the reset link if options.reset is true
|
||||
_hideResetLink: function() {
|
||||
this.options.reset && this.reset.hide();
|
||||
},
|
||||
|
||||
// keep the first and last classes up-to-date
|
||||
// vi - whether we want to count visibility or not
|
||||
_updateFirstLast: function(vi){
|
||||
var wr = this.wrapper, // jQuery reference for the wrapper
|
||||
op = this.options; // options object
|
||||
wr.find("."+op.class_first+", ."+op.class_last).removeClass(op.class_first+" "+op.class_last);
|
||||
if(vi) {
|
||||
this.items.filter(":visible").first().addClass(op.class_first);
|
||||
this.items.filter(":visible").last().addClass(op.class_last);
|
||||
} else {
|
||||
this.items.first().addClass(op.class_first);
|
||||
this.items.not("."+op.class_empty).last().addClass(op.class_last);
|
||||
}
|
||||
},
|
||||
|
||||
|
||||
// PUBLIC METHODS
|
||||
|
||||
// uninit Minimalect
|
||||
destroy: function(){
|
||||
// remove (and automatically unbind) all Minimalect stuff
|
||||
this.wrapper.remove();
|
||||
// display and unhook the original
|
||||
this.element.off("change focus blur").show();
|
||||
// stop listening for changes
|
||||
if (window.MutationObserver)
|
||||
this.observer.disconnect();
|
||||
|
||||
// if debug mode is on, let them know upstairs
|
||||
if(this.options.debug) console.log("Minimalect destroyed for ", this.element);
|
||||
},
|
||||
|
||||
// update Minimalect's choice from the original select
|
||||
update: function(){
|
||||
// reparse the select
|
||||
this.ul.html(this._parseSelect()+'<li class="'+this.options.class_empty+'">'+this.options.empty+'</li>');
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
$.fn[pluginName] = function ( options, argument ) {
|
||||
return this.each(function () {
|
||||
if ($.isFunction(Plugin.prototype[options]) && options.charAt(0) != "_") {
|
||||
if(arguments.length == 1)
|
||||
$.data(this, 'plugin_' + pluginName)[options]();
|
||||
else
|
||||
$.data(this, 'plugin_' + pluginName)[options](argument);
|
||||
} else if (!$.data(this, "plugin_" + pluginName)) {
|
||||
$.data(this, "plugin_" + pluginName, new Plugin( this, options ));
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
})( jQuery, window, document );
|
||||
@@ -0,0 +1 @@
|
||||
.minict_wrapper{font-family:"Segoe UI",Segoe,"Lucida Grande","Lucida Sans Unicode",Arial,Helvetica,sans-serif;color:#333;background:#fff;position:relative;width:300px;height:35px;height:2.2rem;border:1px solid #e5e5e5;border-radius:3px;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}.minict_wrapper *{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}.minict_wrapper.disabled{background:#f5f5f5;text-shadow:0 1px 0 #fff}.minict_wrapper.disabled span{color:#bbb !important}.minict_wrapper:after{content:"\25BC";display:block;position:absolute;height:33px;width:33px;height:2.1rem;width:2.1rem;top:0;right:0;font-size:10px;font-size:0.6rem;line-height:32px;line-height:1.9rem;text-align:center;color:#555}.minict_wrapper.active:after{content:"\25B2"}.minict_wrapper.disabled:after{color:#bbb}.minict_wrapper span{display:block;border:0;outline:none;background:none;font-family:"Segoe UI",Segoe,"Lucida Grande","Lucida Sans Unicode",Arial,Helvetica,sans-serif;color:#333;font-size:16px;font-size:1rem;height:32px;height:2.0rem;line-height:23px;line-height:1.5rem;padding:4px 53px 0 6px;padding:4px 3.4rem 0 0.4rem;cursor:default;width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.minict_wrapper span:empty:before{content:attr(data-placeholder);color:#ccc;line-height:23px;line-height:1.5rem}.minict_wrapper ul{display:none;list-style:none;padding:0;margin:0 -1px;position:absolute;width:100%;width:-webkit-calc(100% + 2px);width:-moz-calc(100% + 2px);width:calc(100% + 2px);border:1px solid #e5e5e5;border-top:1px solid #f9f9f9;border-bottom-left-radius:3px;border-bottom-right-radius:3px;top:33px;top:2.0rem;left:0;max-height:350px;max-height:22rem;overflow-y:auto;z-index:999999}.minict_wrapper ul li{list-style:none;font-size:1rem;padding:0 10px;padding:0 0.7rem;cursor:pointer;background:#fff;height:35px;height:2.2rem;line-height:32px;line-height:2rem}.minict_wrapper ul li:hover{background:#fcfcfc;color:#111}.minict_wrapper ul li.minict_group{color:#444;background:#f6f6f6;font-weight:bold;cursor:default}.minict_wrapper ul li.minict_empty{display:none;background:#fff !important;color:#bbb;text-align:center;font-size:14px;font-size:0.9rem;height:55px;height:3.5rem;line-height:50px;line-height:3.3rem}.minict_wrapper ul li.disabled{cursor:default;background:#fff !important;color:#bbb}.minict_wrapper ul li.selected{color:#819a9a;background:#f8f9f9}.minict_wrapper ul li.highlighted{color:#fff;background:#819a9a}.minict_wrapper ul li.hidden{display:none}.minict_wrapper .minict_reset{color:#A9A9A9;bottom:0;display:none;font-size:18px;font-size:1.1rem;line-height:30px;line-height:1.9rem;position:absolute;right:35px;right:2.2rem;text-align:center;top:0;text-decoration:none;width:20px;width:1.2rem;-webkit-transition:all 0.35s ease-in-out;transition:all 0.35s ease-in-out}.minict_wrapper .minict_reset:hover{color:#e0e0e0;-webkit-transition:all 0.15s ease-in-out;transition:all 0.15s ease-in-out}.minict_wrapper .minict_reset:active{color:#636363}.minict_wrapper.disabled .minict_reset{display:none}.minict_wrapper.bubble{-webkit-box-shadow:0px 1px 3px 0px rgba(0,0,0,0.05);box-shadow:0px 1px 3px 0px rgba(0,0,0,0.05);background:-moz-linear-gradient(top, #fff 0%, #f9f9f9 100%);background:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #fff), color-stop(100%, #f9f9f9));background:-webkit-linear-gradient(top, #fff 0%, #f9f9f9 100%);background:-o-linear-gradient(top, #fff 0%, #f9f9f9 100%);background:-ms-linear-gradient(top, #fff 0%, #f9f9f9 100%);background:linear-gradient(to bottom, #fff 0%, #f9f9f9 100%)}.minict_wrapper.bubble:hover{border-color:#dcdcdc}.minict_wrapper.bubble:after{border-left:1px solid #e5e5e5;-webkit-box-shadow:inset 1px 0px 0px 0px #fff;box-shadow:inset 1px 0px 0px 0px #fff;height:2.05rem}.minict_wrapper.bubble ul{top:2.7rem;-webkit-box-shadow:0px 5px 25px 0px rgba(0,0,0,0.25);box-shadow:0px 5px 25px 0px rgba(0,0,0,0.25);border-radius:6px;overflow:visible}.minict_wrapper.bubble ul:before{position:absolute;top:-11px;left:19px;content:".";color:transparent;width:0px;height:0px;border-style:solid;border-width:0 11px 11px 11px;border-color:transparent transparent #e5e5e5 transparent}.minict_wrapper.bubble ul:after{position:absolute;top:-10px;left:20px;content:".";color:transparent;width:0px;height:0px;border-style:solid;border-width:0 10px 10px 10px;border-color:transparent transparent #ffffff transparent}.minict_wrapper.bubble ul li.minict_first{border-top-left-radius:6px;border-top-right-radius:6px}.minict_wrapper.bubble ul li.minict_last{border-bottom-left-radius:6px;border-bottom-right-radius:6px}.minict_wrapper.bubble .minict_reset{width:30px}
|
||||
6
sites/all/themes/gui/materiobasetheme/js/libs/src/minimalect-master/jquery.minimalect.min.js
vendored
Normal file
6
sites/all/themes/gui/materiobasetheme/js/libs/src/minimalect-master/jquery.minimalect.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
@@ -0,0 +1,292 @@
|
||||
/************************************
|
||||
MINIMALECT 0.9
|
||||
A minimalistic select replacement
|
||||
|
||||
jQuery 1.7+ required.
|
||||
Developed by @groenroos
|
||||
http://www.groenroos.fi
|
||||
|
||||
Github: http://git.io/Xedg9w
|
||||
|
||||
Licensed under the MIT license.
|
||||
|
||||
************************************/
|
||||
|
||||
$font: "Segoe UI", Segoe, "Lucida Grande", "Lucida Sans Unicode", Arial, Helvetica, sans-serif;
|
||||
$color: #819a9a;
|
||||
|
||||
|
||||
|
||||
.minict_wrapper {
|
||||
font-family: $font;
|
||||
color: #333;
|
||||
background: #fff;
|
||||
|
||||
position: relative;
|
||||
width: 300px;
|
||||
height: 35px;
|
||||
height: 2.2rem;
|
||||
|
||||
border: 1px solid #e5e5e5;
|
||||
border-radius: 3px;
|
||||
-webkit-box-sizing: border-box;
|
||||
-moz-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
|
||||
* {
|
||||
-webkit-box-sizing: border-box;
|
||||
-moz-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
&.disabled {
|
||||
background: #f5f5f5;
|
||||
text-shadow: 0 1px 0 #fff;
|
||||
|
||||
span {
|
||||
color: #bbb !important;
|
||||
}
|
||||
}
|
||||
|
||||
&:after {
|
||||
content: "\25BC";
|
||||
display: block;
|
||||
position: absolute;
|
||||
height: 33px;
|
||||
width: 33px;
|
||||
height: 2.1rem;
|
||||
width: 2.1rem;
|
||||
top: 0;
|
||||
right: 0;
|
||||
font-size: 10px;
|
||||
font-size: 0.6rem;
|
||||
line-height: 32px;
|
||||
line-height: 1.9rem;
|
||||
text-align: center;
|
||||
color: #555;
|
||||
}
|
||||
|
||||
&.active:after {
|
||||
content: "\25B2";
|
||||
}
|
||||
|
||||
&.disabled:after {
|
||||
color: #bbb;
|
||||
}
|
||||
|
||||
span {
|
||||
display: block;
|
||||
border: 0;
|
||||
outline: none;
|
||||
background: none;
|
||||
font-family: $font;
|
||||
color: #333;
|
||||
font-size: 16px;
|
||||
font-size: 1rem;
|
||||
height: 32px;
|
||||
height: 2.0rem;
|
||||
line-height: 23px;
|
||||
line-height: 1.5rem;
|
||||
padding: 4px 53px 0 6px;
|
||||
padding: 4px 3.4rem 0 0.4rem;
|
||||
cursor: default;
|
||||
width: 100%;
|
||||
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
|
||||
&:empty:before {
|
||||
content: attr(data-placeholder);
|
||||
color: #ccc;
|
||||
line-height: 23px;
|
||||
line-height: 1.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
ul {
|
||||
display: none;
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 0 -1px;
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
width: -webkit-calc(100% + 2px);
|
||||
width: -moz-calc(100% + 2px);
|
||||
width: calc(100% + 2px);
|
||||
border: 1px solid #e5e5e5;
|
||||
border-top: 1px solid #f9f9f9;
|
||||
border-bottom-left-radius: 3px;
|
||||
border-bottom-right-radius: 3px;
|
||||
top: 33px;
|
||||
top: 2.0rem;
|
||||
left: 0;
|
||||
max-height: 350px;
|
||||
max-height: 22rem;
|
||||
overflow-y: auto;
|
||||
z-index: 999999;
|
||||
|
||||
li {
|
||||
list-style: none;
|
||||
font-size: 1rem;
|
||||
padding: 0 10px;
|
||||
padding: 0 0.7rem;
|
||||
cursor: pointer;
|
||||
background: #fff;
|
||||
height: 35px;
|
||||
height: 2.2rem;
|
||||
line-height: 32px;
|
||||
line-height: 2rem;
|
||||
|
||||
&:hover {
|
||||
background: #fcfcfc;
|
||||
color: #111;
|
||||
}
|
||||
|
||||
&.minict_group {
|
||||
color: #444;
|
||||
background: #f6f6f6;
|
||||
font-weight: bold;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
&.minict_empty {
|
||||
display: none;
|
||||
background: #fff !important;
|
||||
color: #bbb;
|
||||
text-align: center;
|
||||
font-size: 14px;
|
||||
font-size: 0.9rem;
|
||||
height: 55px;
|
||||
height: 3.5rem;
|
||||
line-height: 50px;
|
||||
line-height: 3.3rem;
|
||||
}
|
||||
|
||||
&.disabled {
|
||||
cursor: default;
|
||||
background: #fff !important;
|
||||
color: #bbb;
|
||||
}
|
||||
|
||||
&.selected {
|
||||
color: $color;
|
||||
background: lighten($color, 42%);
|
||||
}
|
||||
|
||||
&.highlighted {
|
||||
color: #fff;
|
||||
background: $color;
|
||||
}
|
||||
|
||||
&.hidden {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.minict_reset {
|
||||
color: #A9A9A9;
|
||||
bottom: 0;
|
||||
display: none;
|
||||
font-size: 18px;
|
||||
font-size: 1.1rem;
|
||||
line-height: 30px;
|
||||
line-height: 1.9rem;
|
||||
position: absolute;
|
||||
right: 35px;
|
||||
right: 2.2rem;
|
||||
text-align: center;
|
||||
top: 0;
|
||||
text-decoration: none;
|
||||
width: 20px;
|
||||
width: 1.2rem;
|
||||
-webkit-transition: all 0.35s ease-in-out;
|
||||
transition: all 0.35s ease-in-out;
|
||||
|
||||
&:hover {
|
||||
color: #A9A9A9 + 55;
|
||||
-webkit-transition: all 0.15s ease-in-out;
|
||||
transition: all 0.15s ease-in-out;
|
||||
}
|
||||
|
||||
&:active {
|
||||
color: #A9A9A9 - 70;
|
||||
}
|
||||
}
|
||||
|
||||
&.disabled .minict_reset {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
.minict_wrapper.bubble {
|
||||
-webkit-box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, .05);
|
||||
box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, .05);
|
||||
background: -moz-linear-gradient(top, #ffffff 0%, #f9f9f9 100%);
|
||||
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#f9f9f9));
|
||||
background: -webkit-linear-gradient(top, #ffffff 0%,#f9f9f9 100%);
|
||||
background: -o-linear-gradient(top, #ffffff 0%,#f9f9f9 100%);
|
||||
background: -ms-linear-gradient(top, #ffffff 0%,#f9f9f9 100%);
|
||||
background: linear-gradient(to bottom, #ffffff 0%,#f9f9f9 100%);
|
||||
|
||||
&:hover {
|
||||
border-color: #dcdcdc;
|
||||
}
|
||||
|
||||
&:after {
|
||||
border-left: 1px solid #e5e5e5;
|
||||
-webkit-box-shadow: inset 1px 0px 0px 0px #fff;
|
||||
box-shadow: inset 1px 0px 0px 0px #fff;
|
||||
height: 2.05rem;
|
||||
}
|
||||
|
||||
ul {
|
||||
top: 2.7rem;
|
||||
-webkit-box-shadow: 0px 5px 25px 0px rgba(0, 0, 0, .25);
|
||||
box-shadow: 0px 5px 25px 0px rgba(0, 0, 0, .25);
|
||||
border-radius: 6px;
|
||||
overflow: visible;
|
||||
|
||||
&:before {
|
||||
position: absolute;
|
||||
top: -11px;
|
||||
left: 19px;
|
||||
content: ".";
|
||||
color: transparent;
|
||||
width: 0px;
|
||||
height: 0px;
|
||||
border-style: solid;
|
||||
border-width: 0 11px 11px 11px;
|
||||
border-color: transparent transparent #e5e5e5 transparent;
|
||||
}
|
||||
|
||||
&:after {
|
||||
position: absolute;
|
||||
top: -10px;
|
||||
left: 20px;
|
||||
content: ".";
|
||||
color: transparent;
|
||||
width: 0px;
|
||||
height: 0px;
|
||||
border-style: solid;
|
||||
border-width: 0 10px 10px 10px;
|
||||
border-color: transparent transparent #ffffff transparent;
|
||||
}
|
||||
|
||||
li.minict_first {
|
||||
border-top-left-radius: 6px;
|
||||
border-top-right-radius: 6px;
|
||||
}
|
||||
li.minict_last {
|
||||
border-bottom-left-radius: 6px;
|
||||
border-bottom-right-radius: 6px;
|
||||
}
|
||||
}
|
||||
|
||||
.minict_reset {
|
||||
width: 30px;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,30 @@
|
||||
{
|
||||
"name": "minimalect",
|
||||
"version": "0.8.0",
|
||||
"description": "Minimal select replacement for jQuery",
|
||||
"main": "jquery.minimalect.js",
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "git://github.com/groenroos/minimalect.git"
|
||||
},
|
||||
"keywords": [
|
||||
"jquery",
|
||||
"minimalect"
|
||||
],
|
||||
"author": "Oskari Groenroos",
|
||||
"license": "MIT",
|
||||
"readmeFilename": "README.md",
|
||||
"bugs": {
|
||||
"url": "https://github.com/groenroos/minimalect/issues"
|
||||
},
|
||||
"devDependencies": {
|
||||
"grunt-contrib-clean": "~0.4.1",
|
||||
"grunt-contrib-concat": "~0.3.0",
|
||||
"grunt-contrib-uglify": "~0.2.2",
|
||||
"grunt-cli": "~0.1.9",
|
||||
"grunt": "~0.4.1",
|
||||
"grunt-contrib-jasmine": "~0.5.1",
|
||||
"grunt-contrib-sass": "~0.3.0",
|
||||
"grunt-banner": "~0.1.4"
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user