mirror of
https://github.com/jellyfin/jellyfin-web
synced 2025-03-30 19:56:21 +00:00
isolate jqm checkbox
This commit is contained in:
Luke Pulverenti
parent
429f27755b
commit
8199fe27ff
18 changed files with 423 additions and 419 deletions
|
|
@ -4074,6 +4074,7 @@ $.fn.fieldcontain = function(/* options */) {
|
|||
dependencies.push('jqmlistview');
|
||||
dependencies.push('jqmcollapsible');
|
||||
dependencies.push('jqmcontrolgroup');
|
||||
dependencies.push('jqmcheckbox');
|
||||
}
|
||||
|
||||
var currentSelf = this;
|
||||
|
|
@ -5097,358 +5098,6 @@ $.mobile.behaviors.formReset = {
|
|||
|
||||
})( jQuery );
|
||||
|
||||
/*
|
||||
* "checkboxradio" plugin
|
||||
*/
|
||||
|
||||
(function( $, undefined ) {
|
||||
|
||||
var escapeId = $.mobile.path.hashToSelector;
|
||||
|
||||
$.widget( "mobile.checkboxradio", $.extend( {
|
||||
|
||||
initSelector: "input[type='checkbox'],input[type='radio']",
|
||||
|
||||
options: {
|
||||
theme: "inherit",
|
||||
mini: false,
|
||||
wrapperClass: null,
|
||||
enhanced: false,
|
||||
iconpos: "left"
|
||||
|
||||
},
|
||||
_create: function() {
|
||||
var input = this.element,
|
||||
o = this.options,
|
||||
inheritAttr = function( input, dataAttr ) {
|
||||
return input.jqmData( dataAttr ) ||
|
||||
input.closest( "form, fieldset" ).jqmData( dataAttr );
|
||||
},
|
||||
label = this.options.enhanced ?
|
||||
{
|
||||
element: this.element.siblings( "label" ),
|
||||
isParent: false
|
||||
} :
|
||||
this._findLabel(),
|
||||
inputtype = input[0].type,
|
||||
checkedClass = "ui-" + inputtype + "-on",
|
||||
uncheckedClass = "ui-" + inputtype + "-off";
|
||||
|
||||
if ( inputtype !== "checkbox" && inputtype !== "radio" ) {
|
||||
return;
|
||||
}
|
||||
|
||||
if ( this.element[0].disabled ) {
|
||||
this.options.disabled = true;
|
||||
}
|
||||
|
||||
o.iconpos = inheritAttr( input, "iconpos" ) ||
|
||||
label.element.attr( "data-" + $.mobile.ns + "iconpos" ) || o.iconpos,
|
||||
|
||||
// Establish options
|
||||
o.mini = inheritAttr( input, "mini" ) || o.mini;
|
||||
|
||||
// Expose for other methods
|
||||
$.extend( this, {
|
||||
input: input,
|
||||
label: label.element,
|
||||
labelIsParent: label.isParent,
|
||||
inputtype: inputtype,
|
||||
checkedClass: checkedClass,
|
||||
uncheckedClass: uncheckedClass
|
||||
});
|
||||
|
||||
if ( !this.options.enhanced ) {
|
||||
this._enhance();
|
||||
}
|
||||
|
||||
this._on( label.element, {
|
||||
mouseover: "_handleLabelVMouseOver",
|
||||
click: "_handleLabelVClick"
|
||||
});
|
||||
|
||||
this._on( input, {
|
||||
mousedown: "_cacheVals",
|
||||
click: "_handleInputVClick",
|
||||
focus: "_handleInputFocus",
|
||||
blur: "_handleInputBlur"
|
||||
});
|
||||
|
||||
this._handleFormReset();
|
||||
this.refresh();
|
||||
},
|
||||
|
||||
_findLabel: function() {
|
||||
var parentLabel, label, isParent,
|
||||
input = this.element,
|
||||
labelsList = input[ 0 ].labels;
|
||||
|
||||
if( labelsList && labelsList.length > 0 ) {
|
||||
label = $( labelsList[ 0 ] );
|
||||
isParent = $.contains( label[ 0 ], input[ 0 ] );
|
||||
} else {
|
||||
parentLabel = input.closest( "label" );
|
||||
isParent = ( parentLabel.length > 0 );
|
||||
|
||||
// NOTE: Windows Phone could not find the label through a selector
|
||||
// filter works though.
|
||||
label = isParent ? parentLabel :
|
||||
$( this.document[ 0 ].getElementsByTagName( "label" ) )
|
||||
.filter( "[for='" + escapeId( input[ 0 ].id ) + "']" )
|
||||
.first();
|
||||
}
|
||||
|
||||
return {
|
||||
element: label,
|
||||
isParent: isParent
|
||||
};
|
||||
},
|
||||
|
||||
_enhance: function() {
|
||||
this.label.addClass( "ui-btn ui-corner-all");
|
||||
|
||||
if ( this.labelIsParent ) {
|
||||
this.input.add( this.label ).wrapAll( this._wrapper() );
|
||||
} else {
|
||||
//this.element.replaceWith( this.input.add( this.label ).wrapAll( this._wrapper() ) );
|
||||
this.element.wrap( this._wrapper() );
|
||||
this.element.parent().prepend( this.label );
|
||||
}
|
||||
|
||||
// Wrap the input + label in a div
|
||||
|
||||
this._setOptions({
|
||||
"theme": this.options.theme,
|
||||
"iconpos": this.options.iconpos,
|
||||
"mini": this.options.mini
|
||||
});
|
||||
|
||||
},
|
||||
|
||||
_wrapper: function() {
|
||||
return $( "<div class='" +
|
||||
( this.options.wrapperClass ? this.options.wrapperClass : "" ) +
|
||||
" ui-" + this.inputtype +
|
||||
( this.options.disabled ? " ui-state-disabled" : "" ) + "' ></div>" );
|
||||
},
|
||||
|
||||
_handleInputFocus: function() {
|
||||
this.label.addClass( $.mobile.focusClass );
|
||||
},
|
||||
|
||||
_handleInputBlur: function() {
|
||||
this.label.removeClass( $.mobile.focusClass );
|
||||
},
|
||||
|
||||
_handleInputVClick: function() {
|
||||
// Adds checked attribute to checked input when keyboard is used
|
||||
this.element.prop( "checked", this.element.is( ":checked" ) );
|
||||
this._getInputSet().not( this.element ).prop( "checked", false );
|
||||
this._updateAll( true );
|
||||
},
|
||||
|
||||
_handleLabelVMouseOver: function( event ) {
|
||||
if ( this.label.parent().hasClass( "ui-state-disabled" ) ) {
|
||||
event.stopPropagation();
|
||||
}
|
||||
},
|
||||
|
||||
_handleLabelVClick: function( event ) {
|
||||
var input = this.element;
|
||||
|
||||
if ( input.is( ":disabled" ) ) {
|
||||
event.preventDefault();
|
||||
return;
|
||||
}
|
||||
|
||||
this._cacheVals();
|
||||
|
||||
input.prop( "checked", this.inputtype === "radio" && true || !input.prop( "checked" ) );
|
||||
|
||||
// trigger click handler's bound directly to the input as a substitute for
|
||||
// how label clicks behave normally in the browsers
|
||||
// TODO: it would be nice to let the browser's handle the clicks and pass them
|
||||
// through to the associate input. we can swallow that click at the parent
|
||||
// wrapper element level
|
||||
input.triggerHandler( "click" );
|
||||
|
||||
// Input set for common radio buttons will contain all the radio
|
||||
// buttons, but will not for checkboxes. clearing the checked status
|
||||
// of other radios ensures the active button state is applied properly
|
||||
this._getInputSet().not( input ).prop( "checked", false );
|
||||
|
||||
this._updateAll();
|
||||
return false;
|
||||
},
|
||||
|
||||
_cacheVals: function() {
|
||||
this._getInputSet().each( function() {
|
||||
$( this ).attr("data-" + $.mobile.ns + "cacheVal", this.checked );
|
||||
});
|
||||
},
|
||||
|
||||
// Returns those radio buttons that are supposed to be in the same group as
|
||||
// this radio button. In the case of a checkbox or a radio lacking a name
|
||||
// attribute, it returns this.element.
|
||||
_getInputSet: function() {
|
||||
var selector, formId,
|
||||
radio = this.element[ 0 ],
|
||||
name = radio.name,
|
||||
form = radio.form,
|
||||
doc = this.element.parents().last().get( 0 ),
|
||||
|
||||
// A radio is always a member of its own group
|
||||
radios = this.element;
|
||||
|
||||
// Only start running selectors if this is an attached radio button with a name
|
||||
if ( name && this.inputtype === "radio" && doc ) {
|
||||
selector = "input[type='radio'][name='" + escapeId( name ) + "']";
|
||||
|
||||
// If we're inside a form
|
||||
if ( form ) {
|
||||
formId = form.getAttribute( "id" );
|
||||
|
||||
// If the form has an ID, collect radios scattered throught the document which
|
||||
// nevertheless are part of the form by way of the value of their form attribute
|
||||
if ( formId ) {
|
||||
radios = $( selector + "[form='" + escapeId( formId ) + "']", doc );
|
||||
}
|
||||
|
||||
// Also add to those the radios in the form itself
|
||||
radios = $( form ).find( selector ).filter( function() {
|
||||
|
||||
// Some radios inside the form may belong to some other form by virtue of
|
||||
// having a form attribute defined on them, so we must filter them out here
|
||||
return ( this.form === form );
|
||||
}).add( radios );
|
||||
|
||||
// If we're outside a form
|
||||
} else {
|
||||
|
||||
// Collect all those radios which are also outside of a form and match our name
|
||||
radios = $( selector, doc ).filter( function() {
|
||||
return !this.form;
|
||||
});
|
||||
}
|
||||
}
|
||||
return radios;
|
||||
},
|
||||
|
||||
_updateAll: function( changeTriggered ) {
|
||||
var self = this;
|
||||
|
||||
this._getInputSet().each( function() {
|
||||
var $this = $( this );
|
||||
|
||||
if ( ( this.checked || self.inputtype === "checkbox" ) && !changeTriggered ) {
|
||||
$this.trigger( "change" );
|
||||
}
|
||||
})
|
||||
.checkboxradio( "refresh" );
|
||||
},
|
||||
|
||||
_reset: function() {
|
||||
this.refresh();
|
||||
},
|
||||
|
||||
// Is the widget supposed to display an icon?
|
||||
_hasIcon: function() {
|
||||
var controlgroup, controlgroupWidget,
|
||||
controlgroupConstructor = $.mobile.controlgroup;
|
||||
|
||||
// If the controlgroup widget is defined ...
|
||||
if ( controlgroupConstructor ) {
|
||||
controlgroup = this.element.closest(
|
||||
":mobile-controlgroup," +
|
||||
controlgroupConstructor.prototype.initSelector );
|
||||
|
||||
// ... and the checkbox is in a controlgroup ...
|
||||
if ( controlgroup.length > 0 ) {
|
||||
|
||||
// ... look for a controlgroup widget instance, and ...
|
||||
controlgroupWidget = $.data( controlgroup[ 0 ], "mobile-controlgroup" );
|
||||
|
||||
// ... if found, decide based on the option value, ...
|
||||
return ( ( controlgroupWidget ? controlgroupWidget.options.type :
|
||||
|
||||
// ... otherwise decide based on the "type" data attribute.
|
||||
controlgroup.attr( "data-" + $.mobile.ns + "type" ) ) !== "horizontal" );
|
||||
}
|
||||
}
|
||||
|
||||
// Normally, the widget displays an icon.
|
||||
return true;
|
||||
},
|
||||
|
||||
refresh: function() {
|
||||
var isChecked = this.element[ 0 ].checked,
|
||||
active = $.mobile.activeBtnClass,
|
||||
iconposClass = "ui-btn-icon-" + this.options.iconpos,
|
||||
addClasses = [],
|
||||
removeClasses = [];
|
||||
|
||||
if ( this._hasIcon() ) {
|
||||
removeClasses.push( active );
|
||||
addClasses.push( iconposClass );
|
||||
} else {
|
||||
removeClasses.push( iconposClass );
|
||||
( isChecked ? addClasses : removeClasses ).push( active );
|
||||
}
|
||||
|
||||
if ( isChecked ) {
|
||||
addClasses.push( this.checkedClass );
|
||||
removeClasses.push( this.uncheckedClass );
|
||||
} else {
|
||||
addClasses.push( this.uncheckedClass );
|
||||
removeClasses.push( this.checkedClass );
|
||||
}
|
||||
|
||||
this.widget().toggleClass( "ui-state-disabled", this.element.prop( "disabled" ) );
|
||||
|
||||
this.label
|
||||
.addClass( addClasses.join( " " ) )
|
||||
.removeClass( removeClasses.join( " " ) );
|
||||
},
|
||||
|
||||
widget: function() {
|
||||
return this.label.parent();
|
||||
},
|
||||
|
||||
_setOptions: function( options ) {
|
||||
var label = this.label,
|
||||
currentOptions = this.options,
|
||||
outer = this.widget(),
|
||||
hasIcon = this._hasIcon();
|
||||
|
||||
if ( options.disabled !== undefined ) {
|
||||
this.input.prop( "disabled", !!options.disabled );
|
||||
outer.toggleClass( "ui-state-disabled", !!options.disabled );
|
||||
}
|
||||
if ( options.mini !== undefined ) {
|
||||
outer.toggleClass( "ui-mini", !!options.mini );
|
||||
}
|
||||
if ( options.theme !== undefined ) {
|
||||
label
|
||||
.removeClass( "ui-btn-" + currentOptions.theme )
|
||||
.addClass( "ui-btn-" + options.theme );
|
||||
}
|
||||
if ( options.wrapperClass !== undefined ) {
|
||||
outer
|
||||
.removeClass( currentOptions.wrapperClass )
|
||||
.addClass( options.wrapperClass );
|
||||
}
|
||||
if ( options.iconpos !== undefined && hasIcon ) {
|
||||
label.removeClass( "ui-btn-icon-" + currentOptions.iconpos ).addClass( "ui-btn-icon-" + options.iconpos );
|
||||
} else if ( !hasIcon ) {
|
||||
label.removeClass( "ui-btn-icon-" + currentOptions.iconpos );
|
||||
}
|
||||
this._super( options );
|
||||
}
|
||||
|
||||
}, $.mobile.behaviors.formReset ) );
|
||||
|
||||
})( jQuery );
|
||||
|
||||
(function( $, undefined ) {
|
||||
|
||||
$.fn.selectmenu = function() {
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue