diff --git a/bootstrap_subtheme/less/overrides.less b/bootstrap_subtheme/less/overrides.less index a516d6d..bc2fcc5 100644 --- a/bootstrap_subtheme/less/overrides.less +++ b/bootstrap_subtheme/less/overrides.less @@ -31,11 +31,7 @@ html { } // Throbbers. input.form-autocomplete { - background-position: 100% 8px; /* LTR */ - background-repeat: no-repeat; - } - input.throbbing { - background-position: 100% -13px; /* LTR */ + background-image: none; } } } @@ -305,3 +301,73 @@ div.password-suggestions ul { top: 1px; } } + +// Autocomplete and throbber +.form-autocomplete { + .glyphicon { + font-size: 120%; + margin: -.25em 0; + height: 1.15em; + top: 2px; + &.glyphicon-spin { + color: @gray-light; + } + } +} + +#autocomplete li.selected { + color: @dropdown-link-hover-color; + background: @dropdown-link-hover-bg; +} + +.glyphicon-spin { + display: inline-block; + -moz-animation: spin 1s infinite linear; + -o-animation: spin 1s infinite linear; + -webkit-animation: spin 1s infinite linear; + animation: spin 1s infinite linear; +} +a .glyphicon-spin { + display: inline-block; + text-decoration: none; +} +@-moz-keyframes spin { + 0% { + -moz-transform: rotate(0deg); + } + 100% { + -moz-transform: rotate(359deg); + } +} +@-webkit-keyframes spin { + 0% { + -webkit-transform: rotate(0deg); + } + 100% { + -webkit-transform: rotate(359deg); + } +} +@-o-keyframes spin { + 0% { + -o-transform: rotate(0deg); + } + 100% { + -o-transform: rotate(359deg); + } +} +@-ms-keyframes spin { + 0% { + -ms-transform: rotate(0deg); + } + 100% { + -ms-transform: rotate(359deg); + } +} +@keyframes spin { + 0% { + transform: rotate(0deg); + } + 100% { + transform: rotate(359deg); + } +} diff --git a/css/overrides.css b/css/overrides.css index 6e0cb49..9293939 100644 --- a/css/overrides.css +++ b/css/overrides.css @@ -1 +1 @@ -html.overlay-open .navbar-fixed-top{z-index:400}html.js fieldset.collapsed{height:auto}html.js input.form-autocomplete{background-position:100% 8px;background-repeat:no-repeat}html.js input.throbbing{background-position:100% -13px}@media(max-width:767px){body{position:relative}}@media(min-width:980px) and (max-width:1199px),(min-width:1200px){body{padding-top:60px}}body.toolbar .navbar-fixed-top{top:30px}body.toolbar-drawer .navbar-fixed-top{top:65px}body.admin-expanded.admin-vertical.admin-nw .navbar,body.admin-expanded.admin-vertical.admin-sw .navbar{margin-left:260px}body div#admin-toolbar{z-index:500}@media(min-width:980px) and (max-width:1199px),(min-width:1200px){body.toolbar{padding-top:94px!important}body.toolbar-drawer{padding-top:129px!important}}body #admin-menu{-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none;margin:0;padding:0;position:fixed;z-index:1100}body #admin-menu .dropdown li{line-height:normal}html body.admin-menu{margin-top:28px!important}body.admin-menu .navbar-fixed-top{top:28px}.footer{margin-top:45px;padding:35px 0 36px;border-top:1px solid #e5e5e5}.element-invisible{margin:0;padding:0;width:1px}.navbar .logo{margin-top:5px;margin-right:10px}#site-name{line-height:1;margin:0}.page-header{margin-top:0}.block h2.block-title{margin-top:0}form#search-block-form{margin:0}.navbar #block-search-form{float:right;margin:5px 0 5px 5px}@media(max-width:767px),(min-width:768px) and (max-width:979px){.navbar #block-search-form{float:none}}fieldset.search-advanced{padding-bottom:1.5em;margin-top:1em}.navbar-search .control-group{margin-bottom:0}ul.action-links{margin-bottom:2em}ul.action-links li{display:inline;padding-right:1.5em}ul.action-links [class^="icon-"],ul.action-links [class*=" icon-"]{padding-right:.5em}input,textarea,select,.uneditable-input{max-width:100%;width:auto}input.error{color:#b94a48;border-color:#eed3d7}.form-actions{clear:both}.resizable-textarea textarea{-webkit-border-radius:4px 4px 0 0;-moz-border-radius:4px 4px 0 0;border-radius:4px 4px 0 0}.help-block,.control-group .help-inline{color:#999;font-size:12px;margin:5px 0 10px;padding:0}.panel-heading{display:block}a.tabledrag-handle .handle{height:auto;width:auto}.error{color:#b94a48}div.error,table tr.error{background-color:#f2dede;color:#b94a48}.control-group.error{background:0}.control-group.error label,.control-group.error .control-label{color:#b94a48;font-weight:600}.control-group.error input,.control-group.error textarea,.control-group.error select,.control-group.error .uneditable-input{color:#555;border:1px solid #ccc}.control-group.error .help-block,.control-group.error .help-inline{color:#333}ul li.collapsed,ul li.expanded,ul li.leaf{list-style:none;list-style-image:none}.vertical-tabs .form-type-textfield input{width:auto}.vertical-tabs .form-item{margin:1em 0}.submitted{margin-bottom:1em;font-style:italic;font-weight:normal;color:#777}.password-strength{width:17em;float:right;margin-top:1.4em}.password-strength-title{display:inline}.password-strength-text{float:right;font-weight:bold}.password-indicator{background-color:#949494;height:.3em;width:100%}.password-indicator div{height:100%;width:0;background-color:#999}input.password-confirm,input.password-field{width:16em;margin-bottom:.4em}div.password-confirm{float:right;margin-top:1.5em;visibility:hidden;width:17em}div.form-item div.password-suggestions{padding:.2em .5em;margin:.7em 0;width:38.5em;border:1px solid #b4b4b4}div.password-suggestions ul{margin-bottom:0}.confirm-parent,.password-parent{clear:left;margin:0;width:36.3em}.progress-wrapper .progress{margin-bottom:10px}.progress-wrapper .progress .bar{border:0 none;margin:0}.pagination ul>li>a.progress-disabled{float:left}.pagination ul>li>a .throbber{margin:0 -0.25em 0 .5em;position:relative;top:1px} \ No newline at end of file +html.overlay-open .navbar-fixed-top{z-index:400}html.js fieldset.collapsed{height:auto}html.js input.form-autocomplete{background-image:none}@media(max-width:767px){body{position:relative}}@media(min-width:980px) and (max-width:1199px),(min-width:1200px){body{padding-top:60px}}body.toolbar .navbar-fixed-top{top:30px}body.toolbar-drawer .navbar-fixed-top{top:65px}body.admin-expanded.admin-vertical.admin-nw .navbar,body.admin-expanded.admin-vertical.admin-sw .navbar{margin-left:260px}body div#admin-toolbar{z-index:500}@media(min-width:980px) and (max-width:1199px),(min-width:1200px){body.toolbar{padding-top:94px!important}body.toolbar-drawer{padding-top:129px!important}}body #admin-menu{-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none;margin:0;padding:0;position:fixed;z-index:1100}body #admin-menu .dropdown li{line-height:normal}html body.admin-menu{margin-top:28px!important}body.admin-menu .navbar-fixed-top{top:28px}.footer{margin-top:45px;padding:35px 0 36px;border-top:1px solid #e5e5e5}.element-invisible{margin:0;padding:0;width:1px}.navbar .logo{margin-top:5px;margin-right:10px}#site-name{line-height:1;margin:0}.page-header{margin-top:0}.block h2.block-title{margin-top:0}form#search-block-form{margin:0}.navbar #block-search-form{float:right;margin:5px 0 5px 5px}@media(max-width:767px),(min-width:768px) and (max-width:979px){.navbar #block-search-form{float:none}}fieldset.search-advanced{padding-bottom:1.5em;margin-top:1em}.navbar-search .control-group{margin-bottom:0}ul.action-links{margin-bottom:2em}ul.action-links li{display:inline;padding-right:1.5em}ul.action-links [class^="icon-"],ul.action-links [class*=" icon-"]{padding-right:.5em}input,textarea,select,.uneditable-input{max-width:100%;width:auto}input.error{color:#b94a48;border-color:#eed3d7}.form-actions{clear:both}.resizable-textarea textarea{-webkit-border-radius:4px 4px 0 0;-moz-border-radius:4px 4px 0 0;border-radius:4px 4px 0 0}.help-block,.control-group .help-inline{color:#999;font-size:12px;margin:5px 0 10px;padding:0}.panel-heading{display:block}a.tabledrag-handle .handle{height:auto;width:auto}.error{color:#b94a48}div.error,table tr.error{background-color:#f2dede;color:#b94a48}.control-group.error{background:0}.control-group.error label,.control-group.error .control-label{color:#b94a48;font-weight:600}.control-group.error input,.control-group.error textarea,.control-group.error select,.control-group.error .uneditable-input{color:#555;border:1px solid #ccc}.control-group.error .help-block,.control-group.error .help-inline{color:#333}ul li.collapsed,ul li.expanded,ul li.leaf{list-style:none;list-style-image:none}.vertical-tabs .form-type-textfield input{width:auto}.vertical-tabs .form-item{margin:1em 0}.submitted{margin-bottom:1em;font-style:italic;font-weight:normal;color:#777}.password-strength{width:17em;float:right;margin-top:1.4em}.password-strength-title{display:inline}.password-strength-text{float:right;font-weight:bold}.password-indicator{background-color:#949494;height:.3em;width:100%}.password-indicator div{height:100%;width:0;background-color:#999}input.password-confirm,input.password-field{width:16em;margin-bottom:.4em}div.password-confirm{float:right;margin-top:1.5em;visibility:hidden;width:17em}div.form-item div.password-suggestions{padding:.2em .5em;margin:.7em 0;width:38.5em;border:1px solid #b4b4b4}div.password-suggestions ul{margin-bottom:0}.confirm-parent,.password-parent{clear:left;margin:0;width:36.3em}.progress-wrapper .progress{margin-bottom:10px}.progress-wrapper .progress .bar{border:0 none;margin:0}.pagination ul>li>a.progress-disabled{float:left}.pagination ul>li>a .throbber{margin:0 -0.25em 0 .5em;position:relative;top:1px}.form-autocomplete .glyphicon{font-size:120%;margin:-0.25em 0;height:1.15em;top:2px}.form-autocomplete .glyphicon.glyphicon-spin{color:#999}#autocomplete li.selected{color:#fff;background:#428bca}.glyphicon-spin{display:inline-block;-moz-animation:spin 1s infinite linear;-o-animation:spin 1s infinite linear;-webkit-animation:spin 1s infinite linear;animation:spin 1s infinite linear}a .glyphicon-spin{display:inline-block;text-decoration:none}@-moz-keyframes spin{0%{-moz-transform:rotate(0deg)}100%{-moz-transform:rotate(359deg)}}@-webkit-keyframes spin{0%{-webkit-transform:rotate(0deg)}100%{-webkit-transform:rotate(359deg)}}@-o-keyframes spin{0%{-o-transform:rotate(0deg)}100%{-o-transform:rotate(359deg)}}@-ms-keyframes spin{0%{-ms-transform:rotate(0deg)}100%{-ms-transform:rotate(359deg)}}@keyframes spin{0%{transform:rotate(0deg)}100%{transform:rotate(359deg)}} \ No newline at end of file diff --git a/includes/form.inc b/includes/form.inc index 7392bde..b2dc57f 100644 --- a/includes/form.inc +++ b/includes/form.inc @@ -100,6 +100,9 @@ function bootstrap_form_element(&$variables) { if (!empty($element['#attributes']['disabled'])) { $attributes['class'][] = 'form-disabled'; } + if (!empty($element['#autocomplete_path']) && drupal_valid_path($element['#autocomplete_path'])) { + $attributes['class'][] = 'form-autocomplete'; + } $attributes['class'][] = 'form-item'; // See http://getbootstrap.com/css/#forms-controls. @@ -342,6 +345,36 @@ function bootstrap_preprocess_button(&$vars) { } /** + * Returns HTML for a textfield form element. + */ +function bootstrap_textfield($variables) { + $element = $variables['element']; + $element['#attributes']['type'] = 'text'; + element_set_attributes($element, array('id', 'name', 'value', 'size', 'maxlength')); + _form_set_class($element, array('form-text')); + + $output = ''; + + $extra = ''; + if ($element['#autocomplete_path'] && drupal_valid_path($element['#autocomplete_path'])) { + drupal_add_library('system', 'drupal.autocomplete'); + drupal_add_js(drupal_get_path('theme', 'bootstrap') . '/js/bootstrap_autocomplete.js'); + $element['#attributes']['class'][] = 'form-autocomplete'; + + $attributes = array(); + $attributes['type'] = 'hidden'; + $attributes['id'] = $element['#attributes']['id'] . '-autocomplete'; + $attributes['value'] = url($element['#autocomplete_path'], array('absolute' => TRUE)); + $attributes['disabled'] = 'disabled'; + $attributes['class'][] = 'autocomplete'; + $output = '
' . $output . '
'; + $extra = ''; + } + + return $output . $extra; +} + +/** * Returns HTML for a button form element. */ function bootstrap_button($variables) { diff --git a/js/bootstrap_autocomplete.js b/js/bootstrap_autocomplete.js new file mode 100644 index 0000000..6e1b552 --- /dev/null +++ b/js/bootstrap_autocomplete.js @@ -0,0 +1,44 @@ +(function ($) { + +/** + * Attaches the autocomplete behavior to all required fields. + */ +Drupal.behaviors.autocomplete = { + attach: function (context, settings) { + var acdb = []; + $('input.autocomplete', context).once('autocomplete', function () { + var uri = this.value; + if (!acdb[uri]) { + acdb[uri] = new Drupal.ACDB(uri); + } + var $input = $('#' + this.id.substr(0, this.id.length - 13)) + .attr('autocomplete', 'OFF') + .attr('aria-autocomplete', 'list'); + $($input[0].form).submit(Drupal.autocompleteSubmit); + $input + .after($('') + .attr('id', $input.attr('id') + '-autocomplete-aria-live') + ); + $input.parent().parent().attr('role', 'application'); + new Drupal.jsAC($input, acdb[uri]); + }); + } +}; + +Drupal.jsAC.prototype.setStatus = function (status) { + var $throbber = $('.glyphicon-refresh', $('#' + this.input.id).parent()); + + switch (status) { + case 'begin': + $throbber.addClass('glyphicon-spin'); + $(this.ariaLive).html(Drupal.t('Searching for matches...')); + break; + case 'cancel': + case 'error': + case 'found': + $throbber.removeClass('glyphicon-spin'); + break; + } +}; + +})(jQuery);