Selectmenu: Code review #492

Closed
wants to merge 292 commits into
from
Commits
+1,800 −1
Split
View
@@ -24,6 +24,7 @@ var versions = {
"Progressbar": "progressbar/progressbar.html",
"Resizable": "resizable/resizable.html",
"Selectable": "selectable/selectable.html",
+ "Selectmenu": "selectmenu/selectmenu.html",
"Slider": "slider/slider.html",
"Sortable": "sortable/sortable.html",
"Spinner": "spinner/spinner.html",
@@ -50,7 +51,8 @@ function submit( commit, tests, configFile, version, done ) {
}, {
authUsername: config.authUsername,
authToken: config.authToken,
- jobName: 'jQuery UI ' + version + '#<a href="https://github.com/jquery/jquery-ui/commit/' + commit + '">' + commit.substr( 0, 10 ) + '</a>',
+ // TODO don't merge this to master, or undo it
+ jobName: 'jQuery UI / Selectmenu ' + version + '#<a href="https://github.com/jquery/jquery-ui/commit/' + commit + '">' + commit.substr( 0, 10 ) + '</a>',
runMax: config.runMax,
"runNames[]": Object.keys( tests ),
"runUrls[]": testUrls,
View
@@ -24,6 +24,7 @@
<li><a href="removeClass/">removeClass</a></li>
<li><a href="resizable/">resizable</a></li>
<li><a href="selectable/">selectable</a></li>
+ <li><a href="selectmenu/">selectmenu</a></li>
<li><a href="show/">show</a></li>
<li><a href="slider/">slider</a></li>
<li><a href="sortable/">sortable</a></li>
@@ -0,0 +1,119 @@
+<!doctype html>
+<html lang="en">
+<head>
+ <meta charset="utf-8">
+ <title>jQuery UI Selectmenu - Default functionality</title>
+ <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
+ <script src="../../jquery-1.8.3.js"></script>
+ <script src="../../ui/jquery.ui.core.js"></script>
+ <script src="../../ui/jquery.ui.widget.js"></script>
+ <script src="../../ui/jquery.ui.position.js"></script>
+ <script src="../../ui/jquery.ui.menu.js"></script>
+ <script src="../../ui/jquery.ui.selectmenu.js"></script>
+ <link rel="stylesheet" href="../demos.css">
+ <script>
+ $(function() {
+
+ $.widget( "custom.iconselectmenu", $.ui.selectmenu, {
+ _renderItem: function( ul, item ) {
+ var li = $( "<li />" ).data( "ui-selectmenu-item", item );
@scottgonzalez

scottgonzalez Dec 18, 2012

Owner

no XML; use "<li>"

@fnagel

fnagel Dec 18, 2012

Member

Fixed.

+ if ( item.disabled ) {
+ li.addClass( 'ui-state-disabled' ).text( item.label );
+ } else {
+ el = item.element;
@scottgonzalez

scottgonzalez Dec 18, 2012

Owner

Never use el, use element. This is also never declared.

@fnagel

fnagel Dec 18, 2012

Member

Fixed.

+ $( "<a />", {
+ html: icon = '<span style="' + el.attr("style") + '" class="ui-icon ' + el.attr("class") + '"></span>' + item.label,
@scottgonzalez

scottgonzalez Dec 18, 2012

Owner

Strings always use double quotes.

@scottgonzalez

scottgonzalez Dec 18, 2012

Owner

Don't assign inside an assignment like this. Don't build HTML strings from HTML.

@fnagel

fnagel Dec 18, 2012

Member

Fixed. I've tried to get rid of all CGL issues in this file.

+ href: '#'
@scottgonzalez

scottgonzalez Dec 18, 2012

Owner

double quotes

@fnagel

fnagel Dec 18, 2012

Member

Fixed.

+ }).appendTo( li );
+ }
+
+ return li.appendTo( ul );
+ }
+ });
+
+ var files = $('select#files').iconselectmenu({
+ dropdown: false
+ });
+ files.iconselectmenu("menuWidget").addClass("ui-menu-icons");
+
+ var filesB = $('select#filesB').iconselectmenu({
+ dropdown: false
+ });
+ filesB.iconselectmenu("menuWidget").addClass("ui-menu-icons customicons");
+
+ var peopleA = $('select#peopleA').iconselectmenu();
+ peopleA.iconselectmenu("menuWidget").addClass("ui-menu-icons avatar");
+ });
+ </script>
+ <style>
+ form { margin: 100px 0 0 0 }
+ h2 { margin: 30px 0 0 0 }
+ fieldset { border: 0; }
+ label { display: block; }
+ select { width: 200px; }
+
+ .ui-selectmenu-menu .ui-menu .ui-icon { top: 0.4em; }
+ .ui-selectmenu-menu .ui-menu .ui-menu-item a { padding-left: 2em; }
+
+ /* select with custom icons */
+ .ui-selectmenu-menu .ui-menu.customicons .ui-menu-item a { padding: 0.5em 0 0.5em 3em; }
+ .ui-selectmenu-menu .ui-menu.customicons .ui-menu-item a .ui-icon { height: 24px; width: 24px; top: 0.2em;}
+ .ui-icon.video { background: url(images/24-video-square.png) 0 0 no-repeat; }
+ .ui-icon.podcast { background: url(images/24-podcast-square.png) 0 0 no-repeat; }
+ .ui-icon.rss { background: url(images/24-rss-square.png) 0 0 no-repeat; }
+
+ /* select with CSS avatar icons */
+ option.avatar { background-repeat: no-repeat !important; padding-left: 20px; }
+ .avatar .ui-icon { background-position: left top; }
+ </style>
+</head>
+<body>
+
+<div class="demo">
+
+<form action="#">
+
+ <h2>"popup" style with framework icons</h2>
+ <fieldset>
+ <label for="files">Select a File:</label>
+ <select name="files" id="files">
+ <option value="jquery" class="ui-icon-script">jQuery.js</option>
+ <option value="jquerylogo" class="ui-icon-image">jQuery Logo</option>
+ <option value="jqueryui" class="ui-icon-script">ui.jQuery.js</option>
+ <option value="jqueryuilogo" selected="selected" class="ui-icon-image">jQuery UI Logo</option>
+ <option value="somefile">Some unknown file</option>
+ </select>
+ </fieldset>
+
+ <h2>"popup" style with custom icon images</h2>
+ <fieldset>
+ <label for="filesB">Select a File:</label>
+ <select name="filesB" id="filesB">
+ <option value="mypodcast" class="podcast">John Resig Podcast</option>
+ <option value="myvideo" class="video">Scott Gonzales Video</option>
+ <option value="myrss" class="rss">jQuery RSS XML</option>
+ </select>
+ </fieldset>
+
+ <h2>"dropdown" style with custom avatar 16x16 images as CSS background</h2>
+ <fieldset>
+ <label for="peopleA">Select a Person:</label>
+ <select name="peopleA" id="peopleA">
+ <option value="1" class="avatar" style="background-image: url(http://www.gravatar.com/avatar/b3e04a46e85ad3e165d66f5d927eb609?d=monsterid&amp;r=g&amp;s=16);">John Resig</option>
+ <option value="2" class="avatar" style="background-image: url(http://www.gravatar.com/avatar/e42b1e5c7cfd2be0933e696e292a4d5f?d=monsterid&amp;r=g&amp;s=16);">Tauren Mills</option>
+ <option value="3" class="avatar" style="background-image: url(http://www.gravatar.com/avatar/bdeaec11dd663f26fa58ced0eb7facc8?d=monsterid&amp;r=g&amp;s=16);">Jane Doe</option>
+ </select>
+ </fieldset>
+
+</form>
+
+</div><!-- End demo -->
+
+
+
+<div class="demo-description">
+<p>The whole rendering process is extendable to make custom styling as easy as possible.</p>
+</div><!-- End demo-description -->
+
+</body>
+</html>
@@ -0,0 +1,100 @@
+<!doctype html>
+<html lang="en">
+<head>
+ <meta charset="utf-8">
+ <title>jQuery UI Selectmenu - Default functionality</title>
+ <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
+ <script src="../../jquery-1.8.3.js"></script>
+ <script src="../../ui/jquery.ui.core.js"></script>
+ <script src="../../ui/jquery.ui.widget.js"></script>
+ <script src="../../ui/jquery.ui.position.js"></script>
+ <script src="../../ui/jquery.ui.menu.js"></script>
+ <script src="../../ui/jquery.ui.selectmenu.js"></script>
+ <link rel="stylesheet" href="../demos.css">
+ <script>
+ $(function() {
+ $('#speed').selectmenu();
+
+ $('#files').selectmenu();
+
+ var withOverflow = $('#number').selectmenu({
+ dropdown: false
+ });
+ withOverflow.selectmenu("menuWidget").addClass("overflow");
+ });
+ </script>
+ <style>
+ form { margin: 50px 0 0 0 }
+ fieldset { border: 0; }
+ label { display: block; }
+ select { width: 200px; }
+ .overflow { height: 200px; }
+ </style>
+</head>
+<body>
+
+<div class="demo">
+
+<form action="#">
+ <fieldset>
+ <label for="speed">Select a speed</label>
+ <select name="speed" id="speed">
+ <option value="Slower">Slower</option>
+ <option value="Slow">Slow</option>
+ <option value="Medium" selected="selected">Medium</option>
+ <option value="Fast">Fast</option>
+ <option value="Faster">Faster</option>
+ </select>
+ <br />
+ <br />
+ <br />
+ <label for="files">Select a file</label>
+ <select name="files" id="files">
+ <optgroup label="Scripts">
+ <option value="jquery">jQuery.js</option>
+ <option value="jqueryui">ui.jQuery.js</option>
+ </optgroup>
+ <optgroup label="Other files">
+ <option value="somefile">Some unknown file</option>
+ <option value="someotherfile">Some other file</option>
+ </optgroup>
+ </select>
+ <br />
+ <br />
+ <br />
+ <label for="number">Select a number</label>
+ <select name="number" id="number">
+ <option value="1">1</option>
+ <option value="2" selected="selected">2</option>
+ <option value="3">3</option>
+ <option value="4">4</option>
+ <option value="5">5</option>
+ <option value="6">6</option>
+ <option value="7">7</option>
+ <option value="8">8</option>
+ <option value="9">9</option>
+ <option value="10">10</option>
+ <option value="11">11</option>
+ <option value="12">12</option>
+ <option value="13">13</option>
+ <option value="14">14</option>
+ <option value="15">15</option>
+ <option value="16">16</option>
+ <option value="17">17</option>
+ <option value="18">18</option>
+ <option value="19">19</option>
+ </select>
+ </fieldset>
+</form>
+
+</div><!-- End demo -->
+
+
+
+<div class="demo-description">
+<p>The Selectmenu widgets provides a styleable select element replacement. It will act as a proxy back to the original select element, controlling its state for form submission or serialization </p>
+<p>The datasource is a native select element. Supports optgroups.</p>
+</div><!-- End demo-description -->
+
+</body>
+</html>
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
@@ -0,0 +1,15 @@
+<!doctype html>
+<html lang="en">
+<head>
+ <meta charset="utf-8">
+ <title>jQuery UI Selectmenu Demos</title>
+</head>
+<body>
+
+<ul>
+ <li><a href="default.html">Default functionality</a></li>
+ <li><a href="custom_render.html">Custom item rendering functionality</a></li>
+</ul>
+
+</body>
+</html>
View
@@ -35,6 +35,7 @@ var
"progressbar",
"resizable",
"selectable",
+ "selectmenu",
"slider",
"spinner",
"tabs",
@@ -0,0 +1,30 @@
+<!doctype html>
+<html lang="en">
+<head>
+ <meta charset="utf-8">
+ <title>jQuery UI Selectmenu Test Suite</title>
+
+ <script src="../../../jquery-1.8.3.js"></script>
+
+ <link rel="stylesheet" href="../../../external/qunit.css">
+ <link rel="stylesheet" href="../subsuiteRunner.css">
+ <script src="../../../external/qunit.js"></script>
+ <script src="../subsuiteRunner.js"></script>
+ <script src="../subsuite.js"></script>
+
+ <script>
+ testAllVersions( "selectmenu" );
+ </script>
+</head>
+<body>
+
+<h1 id="qunit-header">jQuery UI Selectmenu Test Suite</h1>
+<h2 id="qunit-banner"></h2>
+<div id="qunit-testrunner-toolbar"></div>
+<h2 id="qunit-userAgent"></h2>
+<ol id="qunit-tests"></ol>
+<div id="qunit-fixture">
+
+</div>
+</body>
+</html>
@@ -0,0 +1,91 @@
+<!doctype html>
+<html lang="en">
+<head>
+ <meta charset="utf-8">
+ <title>jQuery UI Selectmenu Test Suite</title>
+
+ <script src="../../jquery.js"></script>
+ <link rel="stylesheet" href="../../../external/qunit.css">
+ <script src="../../../external/qunit.js"></script>
+ <script src="../../jquery.simulate.js"></script>
+ <script src="../testsuite.js"></script>
+ <script>
+ TestHelpers.loadResources({
+ css: [ "ui.core", "ui.menu" , "ui.selectmenu" ],
+ js: [
+ "ui/jquery.ui.core.js",
+ "ui/jquery.ui.widget.js",
+ "ui/jquery.ui.position.js",
+ "ui/jquery.ui.menu.js",
+ "ui/jquery.ui.selectmenu.js"
+ ]
+ });
+ </script>
+
+ <script src="selectmenu_common.js"></script>
+ <script src="selectmenu_core.js"></script>
+ <script src="selectmenu_events.js"></script>
+ <script src="selectmenu_methods.js"></script>
+ <script src="selectmenu_options.js"></script>
+
+ <script src="../swarminject.js"></script>
+</head>
+<body>
+
+<h1 id="qunit-header">jQuery UI Selectmenu Test Suite</h1>
+<h2 id="qunit-banner"></h2>
+<div id="qunit-testrunner-toolbar"></div>
+<h2 id="qunit-userAgent"></h2>
+<ol id="qunit-tests"></ol>
+<div id="qunit-fixture">
+ <div id="sm-wrap1" class="sm-wrap"></div>
+
+ <div id="sm-wrap2" class="sm-wrap">
+ <label for="speed">Select a speed:</label>
+ <select name="speed" id="speed">
+ <option value="Slower">Slower</option>
+ <option value="Slow">Slow</option>
+ <option value="Medium" selected="selected">Medium</option>
+ <option value="Fast">Fast</option>
+ <option value="Faster">Faster</option>
+ </select>
+ </div>
+
+ <label for="number">Select a number:</label>
+ <select name="number" id="number">
+ <option value="1">1</option>
+ <option value="2" selected="selected">2</option>
+ <option value="3">3</option>
+ <option value="4">4</option>
+ <option value="5">5</option>
+ <option value="6">6</option>
+ <option value="7">7</option>
+ <option value="8">8</option>
+ <option value="9">9</option>
+ <option value="10">10</option>
+ <option value="11">11</option>
+ <option value="12">12</option>
+ <option value="13">13</option>
+ <option value="14">14</option>
+ <option value="15">15</option>
+ <option value="16">16</option>
+ <option value="17">17</option>
+ <option value="18">18</option>
+ <option value="19">19</option>
+ </select>
+
+ <label for="files">Select a file:</label>
+ <select name="files" id="files">
+ <optgroup label="Scripts">
+ <option value="jquery">jQuery.js</option>
+ <option value="jqueryui">ui.jQuery.js</option>
+ </optgroup>
+ <optgroup label="Other files">
+ <option value="somefile">Some unknown file</option>
+ <option value="someotherfile">Some other file</option>
+ </optgroup>
+ </select>
+
+</div>
+</body>
+</html>
Oops, something went wrong.