Permalink
Browse files

Textinput: Implement classes option

Fixes gh-7730
  • Loading branch information...
gabrielschulhof authored and arschmitz committed Feb 17, 2015
1 parent 0ea0ef0 commit 8e1c765a40c7af02aad5b20e9d96786f4cfbffd7
Showing with 460 additions and 662 deletions.
  1. +6 −0 build/tasks/options/jscs.js
  2. +1 −1 css/structure/jquery.mobile.filterable.css
  3. +1 −1 css/structure/jquery.mobile.forms.textinput.autogrow.css
  4. +33 −33 css/structure/jquery.mobile.forms.textinput.css
  5. +2 −4 css/themes/default/jquery.mobile.icons.css
  6. +1 −2 css/themes/default/jquery.mobile.icons.external-png.css
  7. +1 −2 css/themes/default/jquery.mobile.icons.inline-png.css
  8. +1 −2 css/themes/default/jquery.mobile.icons.inline-svg.css
  9. +2 −2 css/themes/default/jquery.mobile.theme.css
  10. +2 −2 demos/_assets/css/jqm-demos.css
  11. +1 −1 demos/filterable/index.php
  12. +1 −1 demos/selectmenu-custom-filter/index.php
  13. +6 −5 demos/textinput/index.php
  14. +4 −4 demos/theme-classic/theme-classic.css
  15. +15 −15 demos/toolbar-fixed-forms/index.php
  16. +1 −1 js/index.php
  17. +1 −1 js/jquery.mobile.js
  18. +0 −231 js/widgets/filterable.backcompat.js
  19. +138 −133 js/widgets/forms/autogrow.js
  20. +54 −53 js/widgets/forms/clearButton.js
  21. +48 −0 js/widgets/forms/textinput.backcompat.js
  22. +55 −71 js/widgets/forms/textinput.js
  23. +1 −1 tests/functional/swipe.html
  24. +0 −31 tests/integration/filterable/filterable_core.js
  25. +1 −2 tests/integration/filterable/index.html
  26. +0 −23 tests/unit/filterable/filterable_core.js
  27. +0 −1 tests/unit/filterable/index.html
  28. +1 −0 tests/unit/individual-modules/textinput-tests.html
  29. +9 −5 tests/unit/individual-modules/textinput_core.js
  30. +4 −0 tests/unit/slider/index.html
  31. +5 −3 tests/unit/slider/slider_core.js
  32. +3 −1 tests/unit/textinput/index.html
  33. +62 −30 tests/unit/textinput/textinput_core.js
@@ -9,6 +9,10 @@ module.exports = {
src: [
// Source
"js/widgets/forms/autogrow.js",
"js/widgets/forms/clearButton.js",
"js/widgets/forms/textinput.backcompat.js",
"js/widgets/forms/textinput.js",
"js/widgets/accordion.js",
"js/widgets/widget.backcompat.js",
"js/widgets/widget.theme.js",
@@ -24,6 +28,8 @@ module.exports = {
"js/degradeInputs.js",
// Tests
"tests/unit/textinput/settings.js",
"tests/unit/textinput/textinput_core.js",
"tests/unit/degrade-inputs/degradeInputs.js",
"tests/unit/enhancer/enhancer.js"
]
@@ -5,7 +5,7 @@ html .ui-filterable.ui-listview {
.ui-collapsible-content > form.ui-filterable {
margin-top: -.5em;
}
.ui-collapsible-content > .ui-input-search.ui-filterable {
.ui-collapsible-content > .ui-textinput-search.ui-filterable {
margin-top: 0;
}
.ui-collapsible-content > .ui-filterable + .ui-listview:not(.ui-listview-inset) > li.ui-first-child,
@@ -1,4 +1,4 @@
textarea.ui-input-text.ui-textinput-autogrow {
textarea.ui-textinput-text.ui-textinput-autogrow {
overflow: hidden;
}
@@ -1,11 +1,11 @@
.ui-input-text,
.ui-input-search {
.ui-textinput-text,
.ui-textinput-search {
margin: .5em 0;
border-width: 1px;
border-style: solid;
}
.ui-input-text input,
.ui-input-search input,
.ui-textinput-text input,
.ui-textinput-search input,
textarea.ui-input-text {
padding: .4em;
line-height: 1.4em;
@@ -16,8 +16,8 @@ textarea.ui-input-text {
box-sizing: border-box;
outline: 0;
}
.ui-input-text input,
.ui-input-search input {
.ui-textinput-text input,
.ui-textinput-search input {
margin: 0;
min-height: 2.2em;
text-align: left; /* Opera aligns type="date" right by default */
@@ -27,35 +27,35 @@ textarea.ui-input-text {
-webkit-border-radius: inherit;
border-radius: inherit;
}
textarea.ui-input-text {
textarea.ui-textinput-text {
overflow: auto;
resize: vertical;
}
.ui-mini .ui-input-text input,
.ui-mini .ui-input-search input,
.ui-input-text.ui-mini input,
.ui-input-search.ui-mini input,
.ui-mini textarea.ui-input-text,
.ui-mini .ui-textinput-text input,
.ui-mini .ui-textinput-search input,
.ui-textinput-text.ui-mini input,
.ui-textinput-search.ui-mini input,
.ui-mini textarea.ui-textinput-text,
textarea.ui-mini {
font-size: 14px;
}
/* Same margin for mini textareas as other mini sized widgets (12.5/14 * 0.5em) */
.ui-mini textarea.ui-input-text,
.ui-mini textarea.ui-textinput-text,
textarea.ui-mini {
margin: .446em 0;
}
.ui-input-has-clear,
.ui-input-search {
.ui-textinput-has-clear-button,
.ui-textinput-search {
position: relative;
}
/* Padding on the div instead of input because of browser spinners etc. */
.ui-input-has-clear {
.ui-textinput-has-clear-button {
padding-right: 2.375em;
}
.ui-mini.ui-input-has-clear {
.ui-mini.ui-textinput-has-clear-button {
padding-right: 2.923em;
}
.ui-input-has-clear input {
.ui-textinput-has-clear-button input {
padding-right: 0;
/* Autofill on Chrome has bg color so we unset corners right as well. */
-webkit-border-top-right-radius: 0;
@@ -64,10 +64,10 @@ textarea.ui-mini {
border-bottom-right-radius: 0;
}
/* Search icon */
.ui-input-search input {
.ui-textinput-search input {
padding-left: 1.75em;
}
.ui-input-search .ui-icon {
.ui-textinput-search .ui-textinput-search-icon {
position: absolute;
left: .3125em;
top: 50%;
@@ -79,35 +79,35 @@ textarea.ui-mini {
filter: Alpha(Opacity=50);
opacity: .5;
}
.ui-input-search.ui-input-has-clear .ui-button.ui-input-clear,
.ui-input-text.ui-input-has-clear .ui-button.ui-input-clear {
.ui-textinput-search.ui-textinput-has-clear-button .ui-button.ui-textinput-clear-button,
.ui-textinput-text.ui-textinput-has-clear-button .ui-button.ui-textinput-clear-button {
position: absolute;
right: 0;
top: 50%;
margin: -14px .3125em 0;
border: 0;
background-color: transparent;
}
.ui-input-search .ui-input-clear-hidden,
.ui-input-text .ui-input-clear-hidden {
.ui-textinput-search .ui-textinput-clear-button-hidden,
.ui-textinput-text .ui-textinput-clear-button-hidden {
display: none;
}
/* Resolves issue #5166: Added to support issue introduced in Firefox 15. We can likely remove this in the future. */
.ui-input-text input::-moz-placeholder,
.ui-input-search input::-moz-placeholder,
textarea.ui-input-text::-moz-placeholder {
.ui-textinput-text input::-moz-placeholder,
.ui-textinput-search input::-moz-placeholder,
textarea.ui-textinput-text::-moz-placeholder {
color: #aaa;
}
/* Same for IE10 */
.ui-input-text input:-ms-input-placeholder,
.ui-input-search input:-ms-input-placeholder,
textarea.ui-input-text:-ms-input-placeholder {
.ui-textinput-text input:-ms-input-placeholder,
.ui-textinput-search input:-ms-input-placeholder,
textarea.ui-textinput-text:-ms-input-placeholder {
color: #aaa;
}
/* Resolves issue #5131: Width of textinput depends on its type,
for Android 4.1 */
.ui-input-text input[type=number]::-webkit-outer-spin-button {
.ui-textinput-text input[type=number]::-webkit-outer-spin-button {
margin: 0;
}
/* Resolves issue #8001: Default clear button in date input type*/
@@ -118,8 +118,8 @@ for Android 4.1 */
.ui-textinput-hide-clear::-webkit-clear-button{
display: none;
}
.ui-input-text input:focus,
.ui-input-search input:focus {
.ui-textinput-text input:focus,
.ui-textinput-search input:focus {
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;

Some generated files are not rendered by default. Learn more.

Oops, something went wrong.
@@ -333,8 +333,7 @@
background-image: url("images/icons-png/refresh-black.png");
}
.ui-alt-icon.ui-icon-search,
.ui-alt-icon .ui-icon-search,
.ui-input-search {
.ui-alt-icon .ui-icon-search {
background-image: url("images/icons-png/search-black.png");
}
.ui-alt-icon.ui-icon-shop,
@@ -333,8 +333,7 @@
background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAOCAYAAAAfSC3RAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAMlJREFUOMtjYEAF0kDcCcRXgPgnEP8A4ktA3ArEEkjq6pE1xQLxFyD+jwN/AuJIIG4G4j8wTTFA/A+qYBUQWwExGxRbA/FaNEPAGiWB+DNUII8BN9iPrrEdylmDR1MzNhuvQDmWODQ1YvEvWOMPKIeNgURAtsbLUI3WpGpsg2pcS4RaXyBmhnEkoZEL0lyCR1MVVM1BZMEIpASwAYjtgZgbih2BeAtU7i8QB6GbGAbEH/AkOZBcMC7niAFxExCfh6bbL1B2I1QODgBeWE0SXtioYgAAAABJRU5ErkJggg==");
}
.ui-alt-icon.ui-icon-search,
.ui-alt-icon .ui-icon-search,
.ui-input-search {
.ui-alt-icon .ui-icon-search {
background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAOCAYAAAAfSC3RAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAOZJREFUOMuV0U8rxFEUxvFPSjMUG/oRio2ivAZLG3ulZGsjzevwBpTZzAuYlD3Zi2JhZKEs7Aclf/Jvc3D7dX8TT906Pc/5nu49l1/VsYUjXOME25jUQ9O4xGfmPGA5B9XRiaYOVjCLReyF/4SFMriZQMOZwc3I98vBQQSrFc8YxRte4nY/ugpwvscObqJn5tvoQzfqiQqohiLqbgoeRt2oADcwgFPcp8E47uIqLYwl227gNbK13NQlPEbDO27xXPrPM4zk4Dm0E+ADx1jHRXjnseWs+jGFocQr/grnlMI7/qkCuxj8AkXLP4FD310vAAAAAElFTkSuQmCC");
}
.ui-alt-icon.ui-icon-shop,

Some generated files are not rendered by default. Learn more.

Oops, something went wrong.
@@ -17,8 +17,8 @@ button,
font-family: sans-serif /*{global-font-family}*/;
}
legend,
.ui-input-text input,
.ui-input-search input {
.ui-textinput-text input,
.ui-textinput-search input {
color: inherit;
text-shadow: inherit;
}
@@ -249,10 +249,10 @@
.jqm-search-panel .ui-panel-inner {
padding-top: 0;
}
.jqm-search-panel .ui-input-search {
.jqm-search-panel .ui-textinput-search {
margin: 1em 0;
}
.jqm-search-panel .ui-input-search.ui-focus {
.jqm-search-panel .ui-textinput-search.ui-focus {
-webkit-box-shadow: inset 0 1px 3px rgba(0,0,0,.2);
-moz-box-shadow: inset 0 1px 3px rgba(0,0,0,.2);
box-shadow: inset 0 1px 3px rgba(0,0,0,.2);
@@ -285,7 +285,7 @@
<p>The filterable widget is able to use the search input whether or not the search input is itself pre-rendered. In the example below, both the search input and the filterable are pre-rendered.</p>
<div data-demo-html="true">
<form>
<div class="ui-input-search ui-body-inherit ui-corner-all ui-shadow-inset ui-input-has-clear">
<div class="ui-textinput-search ui-body-inherit ui-corner-all ui-shadow-inset ui-textinput-has-clear-button">
<input data-type="search" data-enhanced="true" data-inset="false" id="pre-rendered-example-input" placeholder="Filter items..." value="au">
</div>
<div data-role="controlgroup" data-enhanced="true" data-filter="true" data-filter-reveal="true" data-input="#pre-rendered-example-input" class="ui-controlgroup ui-controlgroup-vertical ui-corner-all">
@@ -111,7 +111,7 @@ function pageIsSelectmenuDialog( page ) {
})( jQuery );
</script>
<style>
.ui-selectmenu.ui-popup .ui-input-search {
.ui-selectmenu.ui-popup .ui-textinput-search {
margin-left: .5em;
margin-right: .5em;
}
View
@@ -314,19 +314,20 @@
<div data-demo-html="true">
<form>
<label for="text-enhanced">Text input:</label>
<div class="ui-input-text ui-body-inherit ui-corner-all ui-shadow-inset ui-input-has-clear">
<div class="ui-textinput-text ui-body-inherit ui-corner-all ui-shadow-inset ui-textinput-has-clear-button">
<input type="text" data-enhanced="true" data-clear-btn="true" name="text-enhanced" id="text-enhanced" value="">
<a href="#" class="ui-input-clear ui-button ui-button-icon-only ui-corner-all ui-input-clear-hidden" title="Clear text">Clear text<span class="ui-icon ui-icon-delete"></span></a>
<a href="#" class="ui-textinput-clear-button ui-button ui-button-icon-only ui-corner-all ui-textinput-clear-button-hidden" title="Clear text">Clear text<span class="ui-icon ui-icon-delete"></span></a>
</div>
<label for="search-enhanced">Search:</label>
<div class="ui-input-search ui-body-inherit ui-corner-all ui-shadow-inset ui-input-has-clear">
<div class="ui-textinput-search ui-body-inherit ui-corner-all ui-shadow-inset ui-textinput-has-clear-button">
<span class="ui-textinput-search-icon ui-alt-icon ui-icon-search"></span>
<input type="text" data-type="search" data-enhanced="true" name="search-enhanced" id="search-enhanced" value="">
<a href="#" class="ui-input-clear ui-button ui-button-icon-only ui-corner-all ui-input-clear-hidden" title="Clear text">Clear text<span class="ui-icon ui-icon-delete"></span></a>
<a href="#" class="ui-textinput-clear-button ui-button ui-button-icon-only ui-corner-all ui-textinput-clear-button-hidden" title="Clear text">Clear text<span class="ui-icon ui-icon-delete"></span></a>
</div>
<label for="textarea-enhanced">Textarea:</label>
<textarea name="textarea-enhanced" id="textarea-enhanced" data-enhanced="true" class="ui-input-text ui-shadow-inset ui-body-inherit ui-corner-all"></textarea>
<textarea name="textarea-enhanced" id="textarea-enhanced" data-enhanced="true" class="ui-textinput-text ui-shadow-inset ui-body-inherit ui-corner-all"></textarea>
</form>
</div><!-- /demo-html -->
@@ -21,8 +21,8 @@ button,
font-family: sans-serif /*{global-font-family}*/;
}
legend,
.ui-input-text input,
.ui-input-search input {
.ui-textinput-text input,
.ui-textinput-search input {
color: inherit;
text-shadow: inherit;
}
@@ -1307,8 +1307,8 @@ html head + body .ui-body-e.ui-focus {
/* Unset background gradient */
.ui-li-static,
.ui-collapsible-content,
.ui-input-text,
.ui-input-search,
.ui-textinput-text,
.ui-textinput-search,
.ui-flipswitch,
.ui-slider-track,
input.ui-slider-input {
@@ -12,21 +12,21 @@
<script src="../_assets/js/"></script>
<script src="../../js/"></script>
<style>
.left {
float: left;
width: 78%;
margin-right: 2%;
}
.right {
float: right;
width: 20%;
}
.ui-input-search {
margin: 0;
}
button.ui-button {
margin: 0;
}
.left {
float: left;
width: 78%;
margin-right: 2%;
}
.right {
float: right;
width: 20%;
}
.ui-textinput-search {
margin: 0;
}
button.ui-button {
margin: 0;
}
</style>
</head>
<body>
View
@@ -74,12 +74,12 @@
'widgets/forms/slider.tooltip.js',
'widgets/forms/rangeslider.js',
'widgets/forms/textinput.js',
'widgets/forms/textinput.backcompat.js',
'widgets/forms/clearButton.js',
'widgets/forms/autogrow.js',
'widgets/forms/select.js',
'widgets/forms/select.custom.js',
'widgets/filterable.js',
'widgets/filterable.backcompat.js',
'../external/jquery-ui/controlgroup.js',
'widgets/controlgroup.js',
'widgets/controlgroup.backcompat.js',
View
@@ -44,6 +44,7 @@
"./widgets/forms/flipswitch",
"./widgets/forms/rangeslider",
"./widgets/forms/textinput",
"./widgets/forms/textinput.backcompat",
"./widgets/forms/clearButton",
"./widgets/forms/autogrow",
"./widgets/forms/select.custom",
@@ -60,7 +61,6 @@
"./widgets/table.columntoggle",
"./widgets/table.reflow",
"./widgets/filterable",
"./widgets/filterable.backcompat",
"./jquery-ui/tabs",
"./widgets/tabs.ajax",
"./zoom",
Oops, something went wrong.

0 comments on commit 8e1c765

Please sign in to comment.