function AppViewModel() { var me = this; me._colorToStr = function(c) { return c ? ['rgba(', c.r, ',', c.g, ',', c.b, ',', c.a, ')'].join('') : ''; }; me._isActiveItem = function(item) { var ai = this.activeItem(); return item && ai && item.name === ai.name; }; me.data = ko.observable({ header: { bgColor: { r: 19, g: 30, b: 41, a: 1 }, textColor: { r: 230, b: 180, g: 145, a: 1 } }, footer: { bgColor: { r: 1, g: 2, b: 3, a: 1 }, items: [] } }); me.activeItem = ko.observable({}); me.setDefaultActiveItem = function() { me.activeItem($.grep(this.data().footer.items, function(e) { return e.active; })[0]); }; me.headerTitle = ko.computed(function() { var activeItem = this.activeItem(); return activeItem ? activeItem.text : ''; }, me); me.headerBgColor = ko.computed(function() { return this._colorToStr(this.data().header.bgColor); }, me); me.headerTextColor = ko.computed(function() { return this._colorToStr(this.data().header.textColor); }, me); me.footerBgColor = ko.computed(function() { return this._colorToStr(this.data().footer.bgColor); }, me); me.footerItems = ko.computed(function() { return this.data().footer.items; }, me); me.footerItemClick = function(item) { me.activeItem(item); // load iframe var mc = $('#app-middle-content').empty(); var ai = me.activeItem(); var url = ai && ai.onTap.startsWith('ph://webview?url=') && decodeURIComponent(ai.onTap.replace('ph://webview?url=', '')); if (url) { mc.append(['
', '', '
'].join('')); } }; me.footerItemBgImage = function(item) { return ['url(', this._isActiveItem(item) ? item.iconActive : item.iconNormal, ')'].join(''); }; me.footerItemTextColor = function(item) { return this._colorToStr(this._isActiveItem(item) ? item.textActiveColor : item.textNormalColor); }; me._middleContentCssMapping = { 'ph://view/workbench': 'middle-content-workbench', 'ph://view/contacts': 'middle-content-contacts', 'ph://view/alert-list': 'middle-content-alert', 'ph://view/me': 'middle-content-me', 'ph://view/room-list': 'middle-content-message' }; me.middleContentCss = function() { var ai = this.activeItem(); return ai && this._middleContentCssMapping[ai.onTap]; }; } var vm = new AppViewModel(); var firstInit = true; addEventHandler(window, 'message', function(e) { vm.data(JSON.parse(e.data)); vm.setDefaultActiveItem(); if (firstInit) { $.hideIndicator(); firstInit = false; ko.applyBindings(vm); } }) $.showIndicator(); function addEventHandler(el, event, handler) { if (el.addEventListener) { el.addEventListener(event, handler, false); } else if (el.attachEvent) { el.attachEvent('on' + event, handler); } }