mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-08-18 19:21:34 +08:00
150 lines
4.3 KiB
TypeScript
150 lines
4.3 KiB
TypeScript
import {bootstrap, bind} from 'angular2/angular2';
|
|
import {routerBindings, HashLocationStrategy, LocationStrategy} from 'angular2/router';
|
|
|
|
import {IonicApp} from '../components/app/app';
|
|
import {IonicConfig} from './config';
|
|
import {IonicPlatform} from '../platform/platform';
|
|
import {OverlayController} from '../components/overlay/overlay-controller';
|
|
import {ActionSheet} from '../components/action-sheet/action-sheet';
|
|
import {Modal} from '../components/modal/modal';
|
|
import {Popup} from '../components/popup/popup';
|
|
import {Events} from '../util/events';
|
|
import {NavRegistry} from '../components/nav/nav-registry';
|
|
import {Translate} from '../translation/translate';
|
|
import {ClickBlock} from '../util/click-block';
|
|
import {TapClick} from '../components/tap-click/tap-click';
|
|
import * as dom from '../util/dom';
|
|
|
|
|
|
export function ionicBindings(rootCmp, configSettings) {
|
|
let app = new IonicApp();
|
|
let platform = new IonicPlatform();
|
|
let config = new IonicConfig(configSettings);
|
|
let events = new Events();
|
|
let tapClick = new TapClick(app, config, window, document);
|
|
|
|
platform.url(window.location.href);
|
|
platform.userAgent(window.navigator.userAgent);
|
|
platform.navigatorPlatform(window.navigator.platform);
|
|
platform.load();
|
|
config.setPlatform(platform);
|
|
|
|
setupDom(window, document, config, platform);
|
|
bindEvents(window, document, platform, events);
|
|
|
|
// prepare the ready promise to fire....when ready
|
|
platform.prepareReady(config);
|
|
|
|
return [
|
|
bind(IonicApp).toValue(app),
|
|
bind(IonicConfig).toValue(config),
|
|
bind(IonicPlatform).toValue(platform),
|
|
bind(TapClick).toValue(tapClick),
|
|
bind(Events).toValue(events),
|
|
OverlayController,
|
|
ActionSheet,
|
|
Modal,
|
|
Popup,
|
|
Translate,
|
|
NavRegistry,
|
|
routerBindings(rootCmp),
|
|
bind(LocationStrategy).toClass(HashLocationStrategy),
|
|
];
|
|
}
|
|
|
|
|
|
function setupDom(window, document, config, platform) {
|
|
let bodyEle = document.body;
|
|
if (!bodyEle) {
|
|
return dom.ready(function() {
|
|
applyBodyCss(document, config, platform);
|
|
});
|
|
}
|
|
|
|
let versions = platform.versions();
|
|
platform.platforms().forEach(platformName => {
|
|
// platform-ios
|
|
let platformClass = 'platform-' + platformName;
|
|
bodyEle.classList.add(platformClass);
|
|
|
|
let platformVersion = versions[platformName];
|
|
if (platformVersion) {
|
|
// platform-ios9
|
|
platformClass += platformVersion.major;
|
|
bodyEle.classList.add(platformClass);
|
|
|
|
// platform-ios9_3
|
|
bodyEle.classList.add(platformClass + '_' + platformVersion.minor);
|
|
}
|
|
});
|
|
|
|
// set the mode class name
|
|
// ios/md
|
|
bodyEle.classList.add(config.get('mode'));
|
|
|
|
// touch devices should not use :hover CSS pseudo
|
|
// enable :hover CSS when the "hoverCSS" setting is not false
|
|
if (config.get('hoverCSS') !== false) {
|
|
bodyEle.classList.add('enable-hover');
|
|
}
|
|
|
|
if (config.get('keyboardScrollAssist')) {
|
|
// create focus holder
|
|
}
|
|
|
|
/**
|
|
* Hairline Shim
|
|
* Add the "hairline" CSS class name to the body tag
|
|
* if the browser supports subpixels.
|
|
*/
|
|
if (window.devicePixelRatio >= 2) {
|
|
var hairlineEle = document.createElement('div');
|
|
hairlineEle.style.border = '.5px solid transparent';
|
|
bodyEle.appendChild(hairlineEle);
|
|
|
|
if (hairlineEle.offsetHeight === 1) {
|
|
bodyEle.classList.add('hairlines');
|
|
}
|
|
bodyEle.removeChild(hairlineEle);
|
|
}
|
|
|
|
}
|
|
|
|
|
|
/**
|
|
* Bind some global events and publish on the 'app' channel
|
|
*/
|
|
function bindEvents(window, document, platform, events) {
|
|
window.addEventListener('online', (ev) => {
|
|
events.publish('app:online', ev);
|
|
}, false);
|
|
|
|
window.addEventListener('offline', (ev) => {
|
|
events.publish('app:offline', ev);
|
|
}, false);
|
|
|
|
window.addEventListener('orientationchange', (ev) => {
|
|
events.publish('app:rotated', ev);
|
|
});
|
|
|
|
// When that status taps, we respond
|
|
window.addEventListener('statusTap', (ev) => {
|
|
// TODO: Make this more better
|
|
var el = document.elementFromPoint(platform.width() / 2, platform.height() / 2);
|
|
if(!el) { return; }
|
|
|
|
var content = dom.closest(el, 'scroll-content');
|
|
if(content) {
|
|
var scrollTo = new ScrollTo(content);
|
|
scrollTo.start(0, 0, 300, 0);
|
|
}
|
|
});
|
|
|
|
// start listening for resizes XXms after the app starts
|
|
setTimeout(function() {
|
|
window.addEventListener('resize', function() {
|
|
platform.windowResize();
|
|
});
|
|
}, 2000);
|
|
}
|