122 lines
3.5 KiB
JavaScript
122 lines
3.5 KiB
JavaScript
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(['<div class="content-block" ',
|
|
'style="margin: 0; padding: 0; width: 100%; height: 100%">',
|
|
'<iframe src="', url,
|
|
'" width="100%" height="100%" border="0"></iframe>',
|
|
'</div>'].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);
|
|
}
|
|
}
|