const create = function (platform, mask) {
const meta = MetaViewport.tag();
const androidApi = Singleton.api();
const androidEvents = Singleton.api();
const enter = function () {
mask.hide();
Class.add(platform.container, Styles.resolve('fullscreen-maximized'));
Class.add(platform.container, Styles.resolve('android-maximized'));
meta.maximize();
/// TM-48 Prevent browser refresh by swipe/scroll on android devices
Class.add(platform.body, Styles.resolve('android-scroll-reload'));
androidApi.set(
AndroidSetup.setup(platform.win, PlatformEditor.getWin(platform.editor).getOrDie('no'))
);
PlatformEditor.getActiveApi(platform.editor).each(function (editorApi) {
Thor.clobberStyles(platform.container, editorApi.body());
androidEvents.set(
AndroidEvents.initEvents(editorApi, platform.toolstrip, platform.alloy)
);
});
};
const exit = function () {
meta.restore();
mask.show();
Class.remove(platform.container, Styles.resolve('fullscreen-maximized'));
Class.remove(platform.container, Styles.resolve('android-maximized'));
Thor.restoreStyles();
/// TM-48 re-enable swipe/scroll browser refresh on android
Class.remove(platform.body, Styles.resolve('android-scroll-reload'));
androidEvents.clear();
androidApi.clear();
};
return {
enter,
exit
};
};
FieldSchema.state('state', function () {
return {
dialogSwipeState: Singleton.value(),
currentScreen: Cell(0)
};
})
export default function (scrollIntoView: () => void) {
const alloy = OuterContainer({
classes: [ Styles.resolve('android-container') ]
}) as Gui.GuiSystem;
const toolbar = ScrollingToolbar();
const webapp = Singleton.api<MobileWebApp>();
const switchToEdit = CommonRealm.makeEditSwitch(webapp);
const socket = CommonRealm.makeSocket() as ComponentApi.AlloyComponent;
const dropup = Dropup.build(Fun.noop, scrollIntoView);
alloy.add(toolbar.wrapper());
alloy.add(socket);
alloy.add(dropup.component());
const setToolbarGroups = function (rawGroups) {
const groups = toolbar.createGroups(rawGroups);
toolbar.setGroups(groups);
};
const setContextToolbar = function (rawGroups) {
const groups = toolbar.createGroups(rawGroups);
toolbar.setContextToolbar(groups);
};
// You do not always want to do this.
const focusToolbar = function () {
toolbar.focus();
};
const restoreToolbar = function () {
toolbar.restoreToolbar();
};
const init = function (spec) {
webapp.set(
AndroidWebapp.produce(spec)
);
};
const exit = function () {
webapp.run(function (w) {
w.exit();
Replacing.remove(socket, switchToEdit);
});
};
const updateMode = function (readOnly) {
CommonRealm.updateMode(socket, switchToEdit, readOnly, alloy.root());
};
return {
system: Fun.constant(alloy),
element: alloy.element as () => SugarElement,
init,
exit,
setToolbarGroups,
setContextToolbar,
focusToolbar,
restoreToolbar,
updateMode,
socket: Fun.constant(socket),
dropup: Fun.constant(dropup)
} as MobileRealm;
}
const create = function (platform, mask) {
const meta = MetaViewport.tag();
const priorState = Singleton.value();
const scrollEvents = Singleton.value();
const iosApi = Singleton.api();
const iosEvents = Singleton.api();
const enter = function () {
mask.hide();
const doc = Element.fromDom(document);
PlatformEditor.getActiveApi(platform.editor).each(function (editorApi) {
// TODO: Orientation changes.
// orientation = Orientation.onChange();
priorState.set({
socketHeight: Css.getRaw(platform.socket, 'height'),
iframeHeight: Css.getRaw(editorApi.frame(), 'height'),
outerScroll: document.body.scrollTop
});
scrollEvents.set({
// Allow only things that have scrollable class to be scrollable. Without this,
// the toolbar scrolling gets prevented
exclusives: Scrollables.exclusive(doc, '.' + Scrollable.scrollable())
});
Class.add(platform.container, Styles.resolve('fullscreen-maximized'));
Thor.clobberStyles(platform.container, editorApi.body());
meta.maximize();
/* NOTE: Making the toolbar scrollable is now done when the middle group is created */
Css.set(platform.socket, 'overflow', 'scroll');
Css.set(platform.socket, '-webkit-overflow-scrolling', 'touch');
Focus.focus(editorApi.body());
const setupBag = Struct.immutableBag([
'cWin',
'ceBody',
'socket',
'toolstrip',
'toolbar',
'dropup',
'contentElement',
'cursor',
'keyboardType',
'isScrolling',
'outerWindow',
'outerBody'
], []);
iosApi.set(
IosSetup.setup(setupBag({
cWin: editorApi.win(),
ceBody: editorApi.body(),
socket: platform.socket,
toolstrip: platform.toolstrip,
toolbar: platform.toolbar,
dropup: platform.dropup.element(),
contentElement: editorApi.frame(),
cursor: Fun.noop,
outerBody: platform.body,
outerWindow: platform.win,
keyboardType: IosKeyboard.stubborn,
isScrolling () {
return scrollEvents.get().exists(function (s) {
return s.socket.isScrolling();
});
}
}))
);
iosApi.run(function (api) {
api.syncHeight();
});
iosEvents.set(
IosEvents.initEvents(editorApi, iosApi, platform.toolstrip, platform.socket, platform.dropup)
);
});
};
const exit = function () {
meta.restore();
iosEvents.clear();
iosApi.clear();
mask.show();
priorState.on(function (s) {
s.socketHeight.each(function (h) {
Css.set(platform.socket, 'height', h);
});
s.iframeHeight.each(function (h) {
Css.set(platform.editor.getFrame(), 'height', h);
});
document.body.scrollTop = s.scrollTop;
});
priorState.clear();
scrollEvents.on(function (s) {
s.exclusives.unbind();
});
scrollEvents.clear();
Class.remove(platform.container, Styles.resolve('fullscreen-maximized'));
Thor.restoreStyles();
Scrollable.deregister(platform.toolbar);
Css.remove(platform.socket, 'overflow'/*, 'scroll'*/);
Css.remove(platform.socket, '-webkit-overflow-scrolling'/*, 'touch'*/);
// Hide the keyboard and remove the selection so there isn't a blue cursor in the content
// still even once exited.
Focus.blur(platform.editor.getFrame());
PlatformEditor.getActiveApi(platform.editor).each(function (editorApi) {
editorApi.clearSelection();
});
};
// dropup
const refreshStructure = function () {
iosApi.run(function (api) {
api.refreshStructure();
});
};
return {
enter,
refreshStructure,
exit
};
};
export default function (scrollIntoView?) { // unsure if this should be optional?
const alloy = OuterContainer({
classes: [ Styles.resolve('ios-container') ]
});
const toolbar = ScrollingToolbar();
const webapp = Singleton.api();
const switchToEdit = CommonRealm.makeEditSwitch(webapp);
const socket = CommonRealm.makeSocket();
const dropup = Dropup.build(function () {
webapp.run(function (w) {
w.refreshStructure();
});
}, scrollIntoView);
alloy.add(toolbar.wrapper());
alloy.add(socket);
alloy.add(dropup.component());
const setToolbarGroups = function (rawGroups) {
const groups = toolbar.createGroups(rawGroups);
toolbar.setGroups(groups);
};
const setContextToolbar = function (rawGroups) {
const groups = toolbar.createGroups(rawGroups);
toolbar.setContextToolbar(groups);
};
const focusToolbar = function () {
toolbar.focus();
};
const restoreToolbar = function () {
toolbar.restoreToolbar();
};
const init = function (spec) {
webapp.set(
IosWebapp.produce(spec)
);
};
const exit = function () {
webapp.run(function (w) {
Replacing.remove(socket, switchToEdit);
w.exit();
});
};
const updateMode = function (readOnly) {
CommonRealm.updateMode(socket, switchToEdit, readOnly, alloy.root());
};
return {
system: Fun.constant(alloy),
element: alloy.element,
init,
exit,
setToolbarGroups,
setContextToolbar,
focusToolbar,
restoreToolbar,
updateMode,
socket: Fun.constant(socket),
dropup: Fun.constant(dropup)
};
}