r2752 - - sompylasar attempt initial import
Author: malk0.phpgtk
Date: Sun Jun 14 16:12:50 2009
New Revision: 2752
Added:
branches/labs/button/previousAttempts/sompylasar/
branches/labs/button/previousAttempts/sompylasar/index.html
branches/labs/button/previousAttempts/sompylasar/ui.button.css
branches/labs/button/previousAttempts/sompylasar/ui.button.js
(contents, props changed)
branches/labs/button/previousAttempts/sompylasar/ui.buttonset.css
branches/labs/button/previousAttempts/sompylasar/ui.buttonset.js
(contents, props changed)
Modified:
branches/labs/button/previousAttempts/malko/demo.html
Log:
- sompylasar attempt initial import
Modified: branches/labs/button/previousAttempts/malko/demo.html
==============================================================================
--- branches/labs/button/previousAttempts/malko/demo.html (original)
+++ branches/labs/button/previousAttempts/malko/demo.html Sun Jun 14
16:12:50 2009
@@ -39,19 +39,17 @@
</style>
-
- <script>
- function show(){if(
typeof(console)!='undefined'){console.debug(arguments);}}
-
+<script>
jQuery().ready(function(){
var icon = "info";
$('[class*=ui-button]').button({checkButtonset:true,toggle:function(event,ui){alert('toggle
button '+(ui.isActive()?'on':'off'))}});
+
$('#settingBar select').change(function(){
if($(this).is('#bodySizeSelector'))
return $('body').css('fontSize',$(this).val());
$('.ui-button:gt(18)').button('option',$(this).attr('name'),$(this).val());
});
- $('select[class*=ui-buttonset]').selectbuttonset();
+
$('select[class*=ui-buttonset]').selectbuttonset().filter(':gt(0)').change();
$('#switcher').themeswitcher();
});
</script>
@@ -85,7 +83,7 @@
Opera fail to keep the full height when displaying only icons with
vertical orientations, but buttons behave like others elements regarding
padding
</li>
- <li>Vertical orientations are buggy with ie6 (not >=7) and render the
full button as a block if original element is not a button.
+ <li>Vertical orientations are buggy with ie6 (not >=7) and render the
full button as a block if original element is not a button.</li>
<li>Destroy isn't functionnal for now (but will be soon)</li>
<li>
Toggle buttons are functionnal and use additional <em>toggle</em> and
<em>active</em> classes for detection and ui-state-highlight for rendering
the toggle state.
@@ -111,6 +109,7 @@
you can see an example with the set icon selector.
</li>
</ul>
+
<h2>Changed</h2>
<ul>
<li>Now orientation are top left right bottom based instead of north
west south est</li>
@@ -122,6 +121,9 @@
<li>add support for auto orientation and size inside class
attribute.</li>
<li>now we can combine class ui-button with
ui-button-size-orientation-iconname and will work (wasn't true before)</li>
<li>now buttonsets are just grouping elements not visual. replaced
ui-state-highlight with ui-state-active for down state of toggle
buttons</li>
+ <li>----</li>
+ <li>bug correction on ie detecting inline class settings</li>
+ <li>better rendering of tiny buttons with no icons when using small font
for body (ex: 10px;)</li>
</ul>
@@ -133,7 +135,7 @@
<label>Set Icon:
<select id="iconSelector" class="ui-buttonset-small" name="icon">
<option value="">no icon</option>
- <option class="ui-icon-info" value="info"
selected="selected">info</option>
+ <option class="ui-icon-info" value="info">info</option>
<option class="ui-icon-wrench" value="wrench">wrench</option>
<option class="ui-icon-lightbulb" value="lightbulb">lightbulb</option>
<option class="ui-icon-image" value="go-home.png">image file</option>
@@ -144,7 +146,7 @@
<label>Play with size:
<select id="sizeSelector" class="ui-buttonset-small" name="size">
<option>tiny</option>
- <option>small</option>
+ <option selected="selected">small</option>
<option>normal</option>
<option>big</option>
<option>huge</option>
@@ -155,7 +157,7 @@
<label>Change icon position
<select id="orientationSelector" name="orientation"
class="ui-buttonset-small">
<option class="ui-icon-arrowthick-1-n" value="t">top</option>
- <option class="ui-icon-arrowthick-1-w" value="l">left</option>
+ <option class="ui-icon-arrowthick-1-w" value="l"
selected="selected">left</option>
<option class="ui-icon-arrowthick-1-s" value="b">bottom</option>
<option class="ui-icon-arrowthick-1-e" value="r">right</option>
</select>
@@ -164,9 +166,9 @@
<br />
<label>change body police size:
<select id="bodySizeSelector" class="ui-buttonset-small" name="size">
- <option value="" selected="selected">no size specified</option>
+ <option value="">no size specified</option>
<option>10px</option>
- <option>12px</option>
+ <option selected="selected">12px</option>
<option>14px</option>
<option>16px</option>
</select>
Added: branches/labs/button/previousAttempts/sompylasar/index.html
==============================================================================
--- (empty file)
+++ branches/labs/button/previousAttempts/sompylasar/index.html Sun Jun 14
16:12:50 2009
@@ -0,0 +1,143 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+<head>
+<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+<title>Buttons</title>
+<style type="text/css">body { margin: 0; padding: 0; font: 12px/*62.5%*/
Verdana, sans-serif; } .section { margin-bottom: 15px; }</style>
+
+<link type="text/css" rel="stylesheet"
href="http://jqueryui.com/themes/base/ui.core.css" />
+<link type="text/css" rel="stylesheet"
href="http://jqueryui.com/themes/base/ui.theme.css" />
+<link type="text/css" href="ui.button.css" rel="stylesheet" />
+<link type="text/css" href="ui.buttonset.css" rel="stylesheet" />
+
+<!--script
src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script-->
+<script type="text/javascript"
src="http://jqueryui.com/js/jquery.js"></script>
+<script
src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7/jquery-ui.min.js"></script>
+<script language="JavaScript" type="text/javascript">
+(function ($) {
+ var $prev_focused = null;
+ var focus_orig = $.fn.focus;
+ $.fn.focus = function () {
+ if (!arguments.length) {
+ if ($prev_focused) $prev_focused.blur();
+ $prev_focused = this;
+ }
+ else {
+ focus_orig.apply(this, function () { $prev_focused = $(this); });
+ }
+ return focus_orig.apply(this, arguments);
+ };
+ $(document).click(function () {
+ if ($prev_focused) $prev_focused.blur();
+ $prev_focused = null;
+ });
+})(jQuery);
+</script>
+
+<script language="JavaScript" type="text/javascript"
src="ui.button.js"></script>
+<script language="JavaScript" type="text/javascript"
src="ui.buttonset.js"></script>
+<script language="JavaScript" type="text/javascript">
+jQuery(function ($) {
+ $('#log').dblclick(function () { $('#log').empty(); });
+
+ $('#anchorButtonDefault, #buttonDefault, #inputButtonDefault,
#elementButtonDefault').button();
+ $('#anchorButtonWithIcon, #buttonWithIcon, #inputButtonWithIcon,
#elementButtonWithIcon').button();
+
+ $('#buttonWithIcon').button('option', 'priority', 'secondary');
+ $('#elementButtonWithIcon').button('option', 'priority', 'primary');
+
+ $('#toggleButtons').children().button({ buttonMode: 'toggle' });
+
+ $('.ui-buttonset')
+ .children().button().end()
+ .buttonset();
+
+ $('.ui-button').bind('buttonclick buttonkeypress buttonaction'
+ +' buttonmouseenter buttonmouseleave'
+ +' buttonpressed buttonreleased'
+ +' buttondragstart buttondragend'
+ +' buttonfocus buttonblur',
+ function (event, info) {
+ $('#log').prepend('' + $(this).button('option','text') + ': ' +
event.type
+ + (info && info.triggeredBy ? ' by '+info.triggeredBy : '') + '<br />');
+ }).each(function () {
+ $(this).button('originalElement').bind('click', function (event) {
+ $('#log').prepend('original ' + $(this).button('option','text') + ': '
+ event.type + '<br />');
+ });
+ });
+});
+</script>
+
+<script type="text/javascript"
src="http://jqueryui.com/themeroller/themeswitchertool/"></script>
+<script type="text/javascript">
+jQuery(function ($) {
+ var $themeswitcher = $('.ui-themeswitcher');
+ if ($themeswitcher.themeswitcher) {
+ $themeswitcher.themeswitcher({
+ }).before('<div class="ui-widget" style="margin-bottom: 0.5em">'
+ +'<div class="ui-state-highlight ui-corner-all"
style="padding:0.3em;">'
+ +'<span class="ui-icon ui-icon-info"
style="float:left;margin-right:0.3em"></span>'
+ +'Select a theme to apply'
+ +'</div>'
+ +'</div>');
+ }
+ else {
+ $themeswitcher.before('<div class="ui-widget" style="margin-bottom:
0.5em">'
+ +'<div class="ui-state-error ui-corner-all"
style="padding:0.3em;">'
+ +'<span class="ui-icon ui-icon-alert"
style="float:left;margin-right:0.3em"></span>'
+ +'Unable to load ThemeSwitcher from jqueryui.com'
+ +'</div>'
+ +'</div>');
+ }
+});
+</script>
+
+</head>
+<body>
+
+<h1>Buttons</h1>
+
+<div><div class="ui-themeswitcher"></div></div>
+
+<h2>Default buttons</h2>
+<div class="section">
+ <a id="anchorButtonDefault">Anchor button</a>
+ <button id="buttonDefault">Button button</button>
+ <input type="button" id="inputButtonDefault" value="Input button" />
+ <span id="elementButtonDefault">Span button</span>
+</div>
+
+<h2>Buttons with icons</h2>
+<div class="section">
+ <a id="anchorButtonWithIcon"><span class="ui-icon
ui-icon-info"></span>Anchor button with icon</a>
+ <button id="buttonWithIcon"><span class="ui-icon
ui-icon-info"></span>Button button with icon</button>
+ <input type="button" id="inputButtonWithIcon" value="Input button with
icon" class="ui-icon-info" />
+ <span id="elementButtonWithIcon"><span class="ui-icon
ui-icon-info"></span>Span button with icon</span>
+</div>
+
+<h2>Toggle buttons</h2>
+<div class="section">
+ <div id="toggleButtons">
+ <a id="" class=""><span class="ui-icon ui-icon-info"></span>Anchor
button with icon</a>
+ <button id="" class=""><span class="ui-icon ui-icon-info"></span>Button
button with icon</button>
+ <input type="button" id="" value="Input button with icon"
class="ui-icon-info" />
+ <span id="" class="ui-button-icon-solo"><span class="ui-icon
ui-icon-info"></span>Span button with icon</span>
+ </div>
+</div>
+
+<h2>Buttonset</h2>
+<div class="section">
+ <div class="ui-buttonset">
+ <a id="" class="ui-button-icon-solo"><span class="ui-icon
ui-icon-info"></span>Anchor button with icon</a>
+ <a id="" class="ui-button-icon-solo"><span class="ui-icon
ui-icon-info"></span>Anchor button with icon 2</a>
+ <button id=""><span class="ui-icon ui-icon-info"></span>Button button
with icon</button>
+ <input type="button" id="" value="Input button with icon"
class="ui-icon-info ui-button-icon-solo ui-button-toggle" />
+ <span id="" class="ui-button-icon-solo ui-button-toggle"><span
class="ui-icon ui-icon-info"></span>Span button with icon</span>
+ </div>
+</div>
+
+<h2>Events log</h2>
+<div id="log"></div>
+
+</body>
+</html>
\ No newline at end of file
Added: branches/labs/button/previousAttempts/sompylasar/ui.button.css
==============================================================================
--- (empty file)
+++ branches/labs/button/previousAttempts/sompylasar/ui.button.css Sun Jun
14 16:12:50 2009
@@ -0,0 +1,114 @@
+/* missing icon position for no icon */
+.ui-icon-none {
+ background-position: 100px 100px;
+}
+
+/* REQUIRED SLIDING-DOORS STYLES: */
+.ui-button {
+ position: relative;
+ /*border: 0; */
+ padding: 0;
+ cursor: pointer;
+ overflow: visible; /* removes extra side padding in IE */
+}
+
+.ui-button::-moz-focus-inner {
+ border: none; /* overrides extra padding in Firefox */
+}
+
+.ui-button .ui-button-door-left {
+ position: relative;
+ display: block;
+ white-space: nowrap;
+}
+
+@media screen and (-webkit-min-device-pixel-ratio:0) {
+ /* Safari and Google Chrome only - fix margins */
+ .ui-button span {
+ margin-top: -1px;
+ }
+}
+
+/* CUSTOM LOOK&FEEL: */
+.ui-button {
+ text-align: left;
+ text-decoration: none;
+ cursor: pointer;
+ display: inline-block !important;
+ vertical-align: middle;
+ white-space: nowrap;
+ overflow: hidden;
+
+ padding: 0.4em 1em 0.4em 1em;
+}
+.ui-button.ui-button-checked.ui-state-focus {
+ opacity: 0.8;
+}
+.ui-button .ui-button-icon {
+ display: block;
+ float: left;
+
+ margin-top: 0em;
+}
+button.ui-button .ui-icon {
+ margin-left: 0px;
+}
+.ui-button .ui-button-label {
+ display: block;
+ float: left;
+ margin-left: 0.2em;
+ vertical-align: middle;
+}
+
+.ui-button.ui-button-icon-left .ui-button-icon {
+ float: left;
+}
+.ui-button.ui-button-icon-right .ui-button-icon {
+ float: right;
+}
+.ui-button.ui-button-icon-solo .ui-button-label {
+ display: none;
+}
+
+.ui-button .ui-icon.ui-icon-none {
+ width: 0px;
+}
+
+/* Safari & Chrome */
+@media screen and (-webkit-min-device-pixel-ratio:0) {
+ .ui-button { /* Safari & Chrome */
+ padding: 0.5em 2.5em 0.5em 1em;
+ }
+ button.ui-button { /* Safari & Chrome */
+ padding: 0.4em 2.5em 0.4em 1em;
+ }
+ body:not(:root:root) .ui-button { /* Safari only */
+ padding: 0.4em 2.5em 0.4em 1em;
+ }
+ .ui-button.ui-button-icon-none { /* Safari & Chrome */
+ padding: 0.5em 1.1em 0.5em 1em;
+ }
+ button.ui-button.ui-button-icon-none { /* Safari & Chrome */
+ padding: 0.4em 1.1em 0.4em 1em;
+ }
+ body:not(:root:root) button.ui-button { /* Safari only */
+ padding: 0.4em 2.5em 0.4em 1em;
+ }
+ body:not(:root:root) .ui-button.ui-button-icon-none { /* Safari only */
+ padding: 0.4em 1em 0.4em 1em;
+ }
+}
+
+/* IE all */
+a.ui-button { line-height: 1.1em\9; }
+button.ui-button { margin-top: -1px\9; }
+button.ui-button { display: inline\9; overflow: hidden !important\9;
height: 2.1em\9; }
+button.ui-button .ui-button-icon { display: block\9; margin-top: -1px\9; }
+button.ui-button .ui-button-label { display: block\9; margin-top:
-1.5em\9; padding-left: 19px\9; }
+span.ui-button { display: block\9; }
+
+/* IE8 */
+a.ui-button .ui-button-icon { display: block\0; }
+button.ui-button { display: inline\0; margin-top: 0\0; }
+button.ui-button .ui-button-icon { display: inline\0; margin-top: 0\0; }
+button.ui-button .ui-button-label { display: inline\0; margin-top: 0\0;
padding-left: 0\0; }
\ No newline at end of file
Added: branches/labs/button/previousAttempts/sompylasar/ui.button.js
==============================================================================
--- (empty file)
+++ branches/labs/button/previousAttempts/sompylasar/ui.button.js Sun Jun
14 16:12:50 2009
@@ -0,0 +1,632 @@
+/*
+ * jQuery UI Button
+ *
+ * Copyright (c) 2009 sompylasar (maninblack.msk@hotmail.com ;
http://maninblack.info/)
+ * Licensed under the MIT (MIT-LICENSE.txt)
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining
+ * a copy of this software and associated documentation files (the
+ * "Software"), to deal in the Software without restriction, including
+ * without limitation the rights to use, copy, modify, merge, publish,
+ * distribute, sublicense, and/or sell copies of the Software, and to
+ * permit persons to whom the Software is furnished to do so, subject to
+ * the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be
+ * included in all copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+ * EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+ * MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
+ * NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
+ * LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
+ * OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
+ * WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ */
+/**
+ * Depends on:
+ * ui.core.js
+ * ui.core.css
+ * ui.theme.css
+ * ui.button.css
+ */
+(function($) {
+
+ var uiButtonClasses = {
+ widgetBase: 'ui-button',
+ widgetSpec: 'ui-widget ui-helper-clearfix ui-corner-all',
+ idle: 'ui-state-default',
+ hover: 'ui-state-hover',
+ down: 'ui-state-down ui-state-active',
+ focus: 'ui-state-focus',
+ disabled: 'ui-state-disabled',
+ checked: 'ui-button-checked ui-state-highlight',
+ label: 'ui-button-label',
+ icon: 'ui-button-icon',
+ iconNone: 'ui-button-icon-none', // to be able to handle the icon's
parents differently if no icon (Safari padding bug)
+ slidingDoorsLeft: 'ui-button-door-left',
+ visualProxy: 'ui-button-proxy',
+ inputProxy: 'ui-button-inputproxy'
+ };
+
+ var uiButtonModes = {
+ normal: '',
+ toggle: 'ui-button-toggle'
+ };
+
+ var uiIconClasses = {
+ widgetBase: 'ui-icon',
+ widgetSpec: '',
+ none: 'ui-icon-none'
+ };
+ var uiButtonIconPlacementClasses = {
+ left: 'ui-button-icon-left',
+ right: 'ui-button-icon-right',
+ solo: 'ui-button-icon-solo'
+ };
+
+ var uiButtonEvents = {
+ widgetEventPrefix: 'button',
+ click: 'click',
+ mouseenter: 'mouseenter',
+ mouseleave: 'mouseleave',
+ dragstart: 'dragstart',
+ dragend: 'dragend',
+ focus: 'focus',
+ blur: 'blur',
+ pressed: 'pressed', // not HTML5 but useful (occurs whenever the button
gets into 'down' state)
+ released: 'released', // not HTML5 but useful (occurs whenever the
button gets back from 'down' to other state)
+ action: 'action' // not HTML5 but useful (occurs when clicked or pressed
with ENTER or SPACE)
+ };
+
+ var createEventArgs = function (widget) {
+ return {
+ options: $.extend(widget.options, {}), // clone the options
+ eventArgs: true
+ };
+ };
+
+ var mouse_captured_by = null, keyboard_captured_by = null;
+ var button_under_cursor = null;
+
+ var handleReleaseOutside = function (event) {
+ if (mouse_captured_by) {
+ // release outside
+ //$('#log').prepend('release outside<br />');
+
+
mouse_captured_by.element.removeClass(uiButtonClasses.down).removeClass(uiButtonClasses.hover);
+ mouse_captured_by._trigger(uiButtonEvents.dragend, event,
createEventArgs(mouse_captured_by));
+ mouse_captured_by.userinput_sink.blur();
+
+ mouse_captured_by._updateCheckedClasses();
+
+ mouse_captured_by = null;
+
+ if (button_under_cursor) {
+ button_under_cursor.element.addClass(uiButtonClasses.hover);
+ button_under_cursor._trigger(uiButtonEvents.mouseenter, event,
createEventArgs(button_under_cursor));
+ }
+ }
+ };
+
+ $(function () {
+ var mouse_tester = $('body')
+ .bind('mouseup.ui-button', function(event) {
+ handleReleaseOutside(event);
+ });
+ $(window).bind('unload', function () {
+ mouse_tester.unbind('.ui-button');
+ mouse_tester = null;
+ });
+ });
+
+ $.widget("ui.button", {
+ _init: function() {
+ var self = this,
+ options = this.options;
+
+ if (this.element.is(':not(input[type=button], input[type=submit],
input[type=reset], a, button, span, div)'))
+ throw 'Element ' + this.element[0].tagName + ' is not supported as a
button';
+
+ var isChecked = false;
+
+ this.element_supports_children = this.element.is(':not(input)');
+ this.element_text_in_value_attr = this.element.is('input');
+ &nbs