312 lines
9.8 KiB
JavaScript
312 lines
9.8 KiB
JavaScript
// Turn off Ajax for local file browsing
|
|
if ( location.protocol.substr(0,4) === 'file' ||
|
|
location.protocol.substr(0,11) === '*-extension' ||
|
|
location.protocol.substr(0,6) === 'widget' ) {
|
|
|
|
// Start with links with only the trailing slash and that aren't external links
|
|
var fixLinks = function() {
|
|
$( "a[href$='/'], a[href='.'], a[href='..']" ).not( "[rel='external']" ).each( function() {
|
|
if( !$( this ).attr( "href" ).match("http") ){
|
|
this.href = $( this ).attr( "href" ).replace( /\/$/, "" ) + "/index.html";
|
|
}
|
|
});
|
|
};
|
|
|
|
// Fix the links for the initial page
|
|
$( fixLinks );
|
|
|
|
// Fix the links for subsequent ajax page loads
|
|
$( document ).on( "pagecreate", fixLinks );
|
|
|
|
// Check to see if ajax can be used. This does a quick ajax request and blocks the page until its done
|
|
$.ajax({
|
|
url: '.',
|
|
async: false,
|
|
isLocal: true
|
|
}).error(function() {
|
|
// Ajax doesn't work so turn it off
|
|
$( document ).on( "mobileinit", function() {
|
|
$.mobile.ajaxEnabled = false;
|
|
|
|
var message = $( '<div>' , {
|
|
'class': "jqm-content",
|
|
style: "border:none; padding: 10px 15px; overflow: auto;",
|
|
'data-ajax-warning': true
|
|
});
|
|
|
|
message
|
|
.append( "<h3>Note: Navigation may not work if viewed locally</h3>" )
|
|
.append( "<p>The Ajax-based navigation used throughout the jQuery Mobile docs may need to be viewed on a web server to work in certain browsers. If you see an error message when you click a link, please try a different browser.</p>" );
|
|
|
|
$( document ).on( "pagecreate", function( event ) {
|
|
$( event.target ).append( message );
|
|
});
|
|
});
|
|
});
|
|
}
|
|
|
|
$( document ).on( "pagecreate", ".jqm-demos", function( event ) {
|
|
var search,
|
|
page = $( this ),
|
|
that = this,
|
|
searchUrl = ( $( this ).hasClass( "jqm-home" ) ) ? "_search/" : "../_search/",
|
|
searchContents = $( ".jqm-search ul.jqm-list" ).find( "li:not(.ui-collapsible)" ),
|
|
version = $.mobile.version || "dev",
|
|
words = version.split( "-" ),
|
|
ver = words[0],
|
|
str = words[1] || "",
|
|
text = ver;
|
|
|
|
// Insert jqm version in header
|
|
if ( str.indexOf( "rc" ) == -1 ) {
|
|
str = str.charAt( 0 ).toUpperCase() + str.slice( 1 );
|
|
} else {
|
|
str = str.toUpperCase().replace( ".", "" );
|
|
}
|
|
|
|
if ( $.mobile.version && str ) {
|
|
text += " " + str;
|
|
}
|
|
|
|
$( ".jqm-version" ).html( text );
|
|
|
|
// Global navmenu panel
|
|
$( ".jqm-navmenu-panel ul" ).listview();
|
|
|
|
$( document ).on( "panelopen", ".jqm-search-panel", function() {
|
|
$( this ).find( "input" ).focus();
|
|
})
|
|
|
|
$( ".jqm-navmenu-link" ).on( "click", function() {
|
|
page.find( ".jqm-navmenu-panel:not(.jqm-panel-page-nav)" ).panel( "open" );
|
|
});
|
|
|
|
// Turn off autocomplete / correct for demos search
|
|
$( this ).find( ".jqm-search input" ).attr( "autocomplete", "off" ).attr( "autocorrect", "off" );
|
|
|
|
// Global search
|
|
$( ".jqm-search-link" ).on( "click", function() {
|
|
page.find( ".jqm-search-panel" ).panel( "open" );
|
|
});
|
|
|
|
// Initalize search panel list and filter also remove collapsibles
|
|
$( this ).find( ".jqm-search ul.jqm-list" ).html( searchContents ).listview({
|
|
inset: false,
|
|
theme: null,
|
|
dividerTheme: null,
|
|
icon: false,
|
|
autodividers: true,
|
|
autodividersSelector: function ( li ) {
|
|
return "";
|
|
},
|
|
arrowKeyNav: true,
|
|
enterToNav: true,
|
|
highlight: true,
|
|
submitTo: searchUrl
|
|
}).filterable();
|
|
|
|
// Initalize search page list and remove collapsibles
|
|
$( this ).find( ".jqm-search-results-wrap ul.jqm-list" ).html( searchContents ).listview({
|
|
inset: true,
|
|
theme: null,
|
|
dividerTheme: null,
|
|
icon: false,
|
|
arrowKeyNav: true,
|
|
enterToNav: true,
|
|
highlight: true
|
|
}).filterable();
|
|
|
|
// Fix links on homepage to point to sub directories
|
|
if ( $( event.target ).hasClass( "jqm-home") ) {
|
|
$( this ).find( "a" ).each( function() {
|
|
$( this ).attr( "href", $( this ).attr( "href" ).replace( "../", "" ) );
|
|
});
|
|
}
|
|
|
|
// Search results page get search query string and enter it into filter then trigger keyup to filter
|
|
if ( $( event.target ).hasClass( "jqm-demos-search-results") ) {
|
|
search = $.mobile.path.parseUrl( window.location.href ).search.split( "=" )[ 1 ];
|
|
setTimeout(function() {
|
|
e = $.Event( "keyup" );
|
|
e.which = 65;
|
|
$( that ).find( ".jqm-content .jqm-search-results-wrap input" ).val( search ).trigger(e).trigger( "change" );
|
|
}, 0 );
|
|
}
|
|
});
|
|
|
|
// Append keywords list to each list item
|
|
$( document ).one( "pagecreate", ".jqm-demos", function( event ) {
|
|
$( this ).find( ".jqm-search-results-list li, .jqm-search li" ).each(function() {
|
|
var text = $( this ).attr( "data-filtertext" );
|
|
|
|
$( this )
|
|
.find( "a" )
|
|
.append( "<span class='jqm-search-results-keywords ui-li-desc'>" + text + "</span>" );
|
|
});
|
|
});
|
|
|
|
// Functions for highlighting text used for keywords highlight in search
|
|
jQuery.fn.highlight = function( pat ) {
|
|
function innerHighlight( node, pat ) {
|
|
var skip = 0;
|
|
if ( node.nodeType == 3 ) {
|
|
var pos = node.data.toUpperCase().indexOf( pat );
|
|
if ( pos >= 0 ) {
|
|
var spannode = document.createElement( "span" );
|
|
spannode.className = "jqm-search-results-highlight";
|
|
var middlebit = node.splitText( pos );
|
|
var endbit = middlebit.splitText( pat.length );
|
|
var middleclone = middlebit.cloneNode( true );
|
|
spannode.appendChild( middleclone );
|
|
middlebit.parentNode.replaceChild( spannode, middlebit );
|
|
skip = 1;
|
|
}
|
|
} else if ( node.nodeType == 1 && node.childNodes && !/(script|style)/i.test( node.tagName ) ) {
|
|
for ( var i = 0; i < node.childNodes.length; ++i ) {
|
|
i += innerHighlight( node.childNodes[i], pat );
|
|
}
|
|
}
|
|
return skip;
|
|
}
|
|
return this.length && pat && pat.length ? this.each(function() {
|
|
innerHighlight( this, pat.toUpperCase() );
|
|
}) : this;
|
|
};
|
|
|
|
// Function to remove highlights in text
|
|
jQuery.fn.removeHighlight = function() {
|
|
return this.find( "span.jqm-search-results-highlight" ).each(function() {
|
|
this.parentNode.firstChild.nodeName;
|
|
with ( this.parentNode ) {
|
|
replaceChild( this.firstChild, this );
|
|
normalize();
|
|
}
|
|
}).end();
|
|
};
|
|
|
|
// Extension to listview to add keyboard navigation
|
|
$( document ).on( "mobileinit", function() {
|
|
(function( $, undefined ) {
|
|
|
|
$.widget( "mobile.listview", $.mobile.listview, {
|
|
options: {
|
|
arrowKeyNav: false,
|
|
enterToNav: false,
|
|
highlight: false,
|
|
submitTo: false
|
|
},
|
|
_create: function() {
|
|
this._super();
|
|
|
|
if ( this.options.arrowKeyNav ) {
|
|
this._on( document, { "pageshow": "arrowKeyNav" });
|
|
}
|
|
|
|
if ( this.options.enterToNav ) {
|
|
this._on( document, { "pageshow": "enterToNav" });
|
|
}
|
|
|
|
},
|
|
submitTo: function() {
|
|
var url,
|
|
form = this.element.parent().find( "form" );
|
|
|
|
form.attr( "method", "get" )
|
|
.attr( "action", this.options.submitTo );
|
|
|
|
url = this.options.submitTo + "?search=" + this.element.parent().find( "input" ).val();
|
|
|
|
window.location = url;
|
|
},
|
|
enterToNav: function() {
|
|
var form = this.element.parent().find( "form" );
|
|
|
|
form.append( "<button type='submit' data-icon='carat-r' data-inline='true' class='ui-hidden-accessible' data-iconpos='notext'>Submit</button>" )
|
|
.parent()
|
|
.trigger( "create" );
|
|
|
|
this.element.parent().find( "form" ).children( ".ui-btn" ).addClass( "ui-hidden-accessible" );
|
|
|
|
this._on( form, {
|
|
"submit": "submitHandler"
|
|
});
|
|
},
|
|
enhanced: false,
|
|
arrowKeyNav: function() {
|
|
var input = this.element.prev("form").find( "input" );
|
|
|
|
if ( !this.enhanced ) {
|
|
this._on( input, {
|
|
"keyup": "handleKeyUp"
|
|
});
|
|
|
|
this.enhanced = true;
|
|
}
|
|
},
|
|
handleKeyUp: function( e ) {
|
|
var search,
|
|
input = this.element.prev("form").find( "input" );
|
|
|
|
if ( e.which === $.ui.keyCode.DOWN ) {
|
|
if ( this.element.find( "li.ui-btn-active" ).length === 0 ) {
|
|
this.element.find( "li:first" ).toggleClass( "ui-btn-active" ).find("a").toggleClass( "ui-btn-active" );
|
|
} else {
|
|
this.element.find( "li.ui-btn-active a" ).toggleClass( "ui-btn-active");
|
|
this.element.find( "li.ui-btn-active" ).toggleClass( "ui-btn-active" ).next().toggleClass( "ui-btn-active" ).find("a").toggleClass( "ui-btn-active" );
|
|
}
|
|
|
|
this.highlightDown();
|
|
} else if ( e.which === $.ui.keyCode.UP ) {
|
|
if ( this.element.find( "li.ui-btn-active" ).length !== 0 ) {
|
|
this.element.find( "li.ui-btn-active a" ).toggleClass( "ui-btn-active");
|
|
this.element.find( "li.ui-btn-active" ).toggleClass( "ui-btn-active" ).prev().toggleClass( "ui-btn-active" ).find("a").toggleClass( "ui-btn-active" );
|
|
} else {
|
|
this.element.find( "li:last" ).toggleClass( "ui-btn-active" ).find("a").toggleClass( "ui-btn-active" );
|
|
}
|
|
this.highlightUp();
|
|
} else if ( typeof e.which !== "undefined" ) {
|
|
this.element.find( "li.ui-btn-active" ).removeClass( "ui-btn-active" );
|
|
|
|
if ( this.options.highlight ) {
|
|
search = input.val();
|
|
|
|
this.element.find( "li" ).each(function() {
|
|
$( this ).removeHighlight();
|
|
$( this ).highlight( search );
|
|
});
|
|
}
|
|
}
|
|
},
|
|
submitHandler: function() {
|
|
if ( this.element.find( "li.ui-btn-active" ).length !== 0 ) {
|
|
var href = this.element.find( "li.ui-btn-active a" ).attr( "href" );
|
|
|
|
$( ":mobile-pagecontainer" ).pagecontainer( "change", href );
|
|
return false;
|
|
}
|
|
|
|
if ( this.options.submitTo ) {
|
|
this.submitTo();
|
|
}
|
|
},
|
|
highlightDown: function() {
|
|
if ( this.element.find( "li.ui-btn-active" ).hasClass( "ui-screen-hidden" ) ) {
|
|
this.element.find( "li.ui-btn-active" ).find("a").toggleClass( "ui-btn-active" );
|
|
this.element.find( "li.ui-btn-active" ).toggleClass( "ui-btn-active" ).next().toggleClass( "ui-btn-active" ).find("a").toggleClass( "ui-btn-active" );
|
|
this.highlightDown();
|
|
}
|
|
return;
|
|
},
|
|
highlightUp: function() {
|
|
if ( this.element.find( "li.ui-btn-active" ).hasClass( "ui-screen-hidden" ) ) {
|
|
this.element.find( "li.ui-btn-active" ).find("a").toggleClass( "ui-btn-active" );
|
|
this.element.find( "li.ui-btn-active" ).toggleClass( "ui-btn-active" ).prev().toggleClass( "ui-btn-active" ).find("a").toggleClass( "ui-btn-active" );
|
|
this.highlightUp();
|
|
}
|
|
return;
|
|
}
|
|
});
|
|
})( jQuery );
|
|
|
|
});
|