2 * loader.js : Loader for web-ui-fw
3 * Refactored from bootstrap.js
5 * By Youmin Ha <youmin.ha@samsung.com>
9 ( function ($, Globalize, window, undefined) {
12 libFileName : "tizen-web-ui-fw(.min)?.js",
15 rootDir: '/usr/lib/tizen-web-ui-fw',
22 loadScriptSync : function ( scriptPath, successCB, errorCB ) {
28 error: function ( jqXHR, textStatus, errorThrown ) {
30 errorCB( jqXHR, textStatus, errorThrown );
32 var ignoreStatusList = [ 404 ]; // 404: not found
33 if ( -1 == $.inArray( jqXHR.status, ignoreStatusList ) ) {
34 window.alert( 'Error while loading ' + scriptPath + '\n' + jqXHR.status + ':' + jqXHR.statusText );
36 console.log( 'Error while loading ' + scriptPath + '\n' + jqXHR.status + ':' + jqXHR.statusText );
42 getScaleFactor: function ( ) {
43 var factor = window.scale,
48 width = screen.width < screen.height ? screen.width : screen.height;
49 factor = width / defaultWidth;
51 // NOTE: some targets(e.g iPad) need to set scale equal or less than 1.0
55 console.log( "ScaleFactor: " + factor );
58 isMobileBrowser: function ( ) {
59 var mobileIdx = window.navigator.appVersion.indexOf("Mobile"),
60 isMobile = -1 < mobileIdx;
66 cacheBust: ( document.location.href.match( /debug=true/ ) ) ?
67 '?cacheBust=' + ( new Date( ) ).getTime( ) :
69 addElementToHead : function ( elem ) {
70 var head = document.getElementsByTagName( 'head' )[0];
71 head.appendChild( elem );
73 load: function ( path ) {
74 this.addElementToHead( this.makeLink( path + this.cacheBust ) );
76 makeLink : function ( href ) {
77 var customstylesheetLink = document.createElement( 'link' );
78 customstylesheetLink.setAttribute( 'rel', 'stylesheet' );
79 customstylesheetLink.setAttribute( 'href', href );
80 return customstylesheetLink;
84 getParams: function ( ) {
85 /* Get data-* params from <script> tag, and set S.frameworkData.* values
86 * Returns true if proper <script> tag is found, or false if not.
88 // Find current <script> tag element
89 var scriptElems = document.getElementsByTagName( 'script' ),
91 foundScriptTag = false,
97 for ( idx in scriptElems ) {
98 elem = scriptElems[idx];
99 src = elem.src ? elem.getAttribute( 'src' ) : undefined;
100 if (src && src.match( this.libFileName )) {
101 // Set framework data, only when they are given.
102 tokens = src.split(/[\/\\]/);
104 this.frameworkData.rootDir = elem.getAttribute( 'data-framework-root' )
105 || tokens.slice( 0, tokens.length + version_idx ).join( '/' )
106 || this.frameworkData.rootDir;
107 this.frameworkData.version = elem.getAttribute( 'data-framework-version' )
108 || tokens[ tokens.length + version_idx ]
109 || this.frameworkData.version;
110 this.frameworkData.theme = elem.getAttribute( 'data-framework-theme' )
111 || this.frameworkData.theme;
112 this.frameworkData.viewportScale = "true" === elem.getAttribute( 'data-framework-viewport-scale' ) ? true : this.frameworkData.viewportScale;
113 foundScriptTag = true;
117 return foundScriptTag;
120 loadTheme: function ( ) {
122 this.frameworkData.rootDir,
123 this.frameworkData.version,
125 this.frameworkData.theme
127 cssPath = [themePath, 'tizen-web-ui-fw-theme.css'].join( '/' ),
128 jsPath = [themePath, 'theme.js'].join( '/' );
130 this.css.load( cssPath );
131 this.util.loadScriptSync( jsPath );
134 /** Load Globalize culture file, and set default culture.
135 * @param[in] language Language code. ex) en-US, en, ko-KR, ko
136 * If language is not given, read language from html 'lang' attribute, or from system setting.
138 loadGlobalizeCulture: function ( language ) {
139 function getGlobalizeCultureFile( lang ) {
140 return ['globalize.culture.', lang, '.js'].join( '' );
142 function getGlobalizeCulturePath( self, file ) {
144 self.frameworkData.rootDir,
145 self.frameworkData.version,
152 // Get lang, and change country code to uppercase chars.
155 || $( 'html' ).attr( 'lang' )
156 || window.navigator.language.split( '.' )[0] /* Webkit, Safari + workaround for Tizen */
157 || window.navigator.userLanguage /* IE */
160 countryCodeIdx = lang.lastIndexOf('-'),
161 ignoreCodes = ['Cyrl', 'Latn', 'Mong'], // Not country code!
162 globalizeCultureFile,
163 globalizeCulturePath,
166 if ( countryCodeIdx != -1 ) { // Found country code!
167 countryCode = lang.substr( countryCodeIdx + 1 );
168 if ( ignoreCodes.join( '-' ).indexOf( countryCode ) < 0 ) { // countryCode is not found from ignoreCodes
169 // Make countryCode to uppercase
170 lang = [ lang.substr( 0, countryCodeIdx ), countryCode.toUpperCase( ) ].join( '-' );
174 globalizeCultureFile = getGlobalizeCultureFile( lang );
175 globalizeCulturePath = getGlobalizeCulturePath( self, globalizeCultureFile );
176 neutralLangIndex = lang.lastIndexOf( '-' );
178 // Run culture script
179 console.log( 'Run globalize culture: ' + globalizeCulturePath );
180 this.util.loadScriptSync(
181 globalizeCulturePath,
183 function ( jqXHR, textStatus, errorThrown ) { // Failed to load!
184 if ( jqXHR.status == 404 ) {
185 // If culture file is not found, run neutral language culture.
186 // (e.g. en-US --> en)
187 if ( neutralLangIndex != -1 ) {
188 var neutralLang = lang.substr( 0, neutralLangIndex ),
189 neutralCultureFile = getGlobalizeCultureFile( neutralLang ),
190 neutralCulturePath = getGlobalizeCulturePath( self, neutralCultureFile );
191 console.log( 'Run globalize culture of neutral lang: ' + neutralCulturePath );
192 self.util.loadScriptSync( neutralCulturePath );
195 window.alert( 'Error while loading ' + globalizeCulturePath + '\n' + jqXHR.status + ':' + jqXHR.statusText );
201 setGlobalize: function ( ) {
202 var lang = this.loadGlobalizeCulture( );
205 // NOTE: It is not needed to set with neutral lang.
206 // Globalize automatically deals with it.
207 Globalize.culture( lang );
210 /** Set viewport meta tag for mobile devices.
212 * @param[in] viewportWidth Viewport width. 'device-dpi' is also allowed.
213 * @param[in] useAutoScale If true, calculate & use scale factor. otherwise, scale factor is 1.
214 * @param[in] useDeviceDpi If true, add 'target-densityDpi=device-dpi' to viewport meta content.
216 setViewport: function ( viewportWidth, useAutoScale, useDeviceDpi ) {
220 // Do nothing if viewport setting code is already in the code.
221 $( "meta" ).each( function ( ) {
222 if ( $( this ).attr( "name" ) === "viewport" ) {
223 console.log( "User set viewport... framework viewport will not be applied." );
230 meta = document.createElement( "meta" );
232 scale = useAutoScale ? this.util.getScaleFactor( ) : scale;
233 meta.name = "viewport";
234 meta.content = "width=" + viewportWidth + ", initial-scale=" + scale + ", maximum-scale=" + scale + ", user-scalable=0";
235 if ( useDeviceDpi ) {
236 meta.content += ", target-densityDpi=device-dpi";
238 console.log( meta.content );
239 head = document.getElementsByTagName( 'head' ).item( 0 );
240 head.insertBefore( meta, head.firstChild );
244 /** Read body's font-size, scale it, and reset it.
245 * param[in] desired font-size / base font-size.
247 scaleBaseFontSize: function ( themeDefaultFontSize, ratio ) {
248 var scaledFontSize = Math.round( themeDefaultFontSize * ratio );
249 $( '.ui-mobile' ).css( { 'font-size': scaledFontSize + "px" } );
250 $( '.ui-mobile').children( 'body' ).css( { 'font-size': scaledFontSize + "px" } );
253 setScaling: function ( ) {
254 var baseWidth = 720, // NOTE: need to be changed to get the value from theme.
256 themeDefaultFontSize = parseInt( $( 'body' ).css( 'font-size' ), 10 );
257 $( 'body' ).attr( 'data-tizen-theme-default-font-size', themeDefaultFontSize );
259 if ( this.frameworkData.viewportScale ) {
260 // Use viewport scaling with base font-size
261 // NOTE: No font-size setting is needed.
262 this.setViewport( baseWidth, true, true );
264 // Fixed viewport scale(=1.0) with scaled font size
265 this.setViewport( "device-dpi", false, undefined );
266 this.scaleBaseFontSize( themeDefaultFontSize, parseFloat( standardWidth / baseWidth ) );
270 } ( jQuery, window.Globalize, window ) );
274 ( function ( S, $, undefined ) {
279 // Turn off JQM's auto initialization option.
280 // NOTE: This job must be done before domready.
281 $.mobile.autoInitializePage = false;
283 $(document).ready( function ( ) {
285 $.mobile.initializePage( );
287 } ( window.S, jQuery ) );