[PE mobile] added app sources
This commit is contained in:
Maxim Kadushkin
parent
239e2a9e55
commit
9f7a6b9e7c
|
|
@ -1,274 +0,0 @@
|
||||||
<!DOCTYPE html>
|
|
||||||
<html>
|
|
||||||
<head>
|
|
||||||
<meta charset="utf-8">
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, minimal-ui">
|
|
||||||
<meta name="apple-mobile-web-app-capable" content="yes">
|
|
||||||
<meta name="apple-mobile-web-app-status-bar-style" content="black">
|
|
||||||
<meta name="mobile-web-app-capable" content="yes">
|
|
||||||
|
|
||||||
<title>ONLYOFFICE Presentations</title>
|
|
||||||
|
|
||||||
<link href="https://fonts.googleapis.com/css?family=Roboto:400,300,500,700" rel="stylesheet" type="text/css">
|
|
||||||
<!-- App styles -->
|
|
||||||
|
|
||||||
<!-- splash -->
|
|
||||||
|
|
||||||
<style type="text/css">
|
|
||||||
.loadmask {
|
|
||||||
left: 0;
|
|
||||||
top: 0;
|
|
||||||
position: absolute;
|
|
||||||
height: 100%;
|
|
||||||
width: 100%;
|
|
||||||
overflow: hidden;
|
|
||||||
border: none;
|
|
||||||
background-color: #f4f4f4;
|
|
||||||
z-index: 10000;
|
|
||||||
}
|
|
||||||
|
|
||||||
.loadmask > .brendpanel {
|
|
||||||
width: 100%;
|
|
||||||
position: absolute;
|
|
||||||
height: 68px;
|
|
||||||
background-color: #e2e2e2;
|
|
||||||
opacity: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.loadmask > .brendpanel.visible {
|
|
||||||
opacity: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
.loadmask > .brendpanel.android {
|
|
||||||
height: 80px;
|
|
||||||
background: #aa5252;
|
|
||||||
}
|
|
||||||
|
|
||||||
.loadmask > .brendpanel > div {
|
|
||||||
display: flex;
|
|
||||||
align-items: flex-start;
|
|
||||||
height: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.loadmask > .brendpanel .loading-logo {
|
|
||||||
max-width: 200px;
|
|
||||||
height: 20px;
|
|
||||||
margin: 0 auto;
|
|
||||||
margin-top: 12px;
|
|
||||||
line-height: 14px;
|
|
||||||
opacity: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.loadmask > .brendpanel .loading-logo > img {
|
|
||||||
display: inline-block;
|
|
||||||
max-width: 100px;
|
|
||||||
max-height: 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.loadmask > .brendpanel .circle {
|
|
||||||
width: 28px;
|
|
||||||
height: 28px;
|
|
||||||
border-radius: 14px;
|
|
||||||
margin: 0 16px;
|
|
||||||
margin-bottom: 10px;
|
|
||||||
align-self: flex-end;
|
|
||||||
background: rgba(255, 255, 255, 0.3);
|
|
||||||
}
|
|
||||||
|
|
||||||
.loadmask > .brendpanel.android .circle {
|
|
||||||
margin-bottom: 12px;
|
|
||||||
background: rgba(255, 255, 255, 0.2);
|
|
||||||
}
|
|
||||||
|
|
||||||
.loadmask > .placeholder {
|
|
||||||
background: #f5f5f5;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
padding-top: 40px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.loadmask > .placeholder.android {
|
|
||||||
padding-top: 50px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.loadmask > .placeholder .slide-h {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
justify-content: center;
|
|
||||||
flex-grow: 1;
|
|
||||||
width: 90%;
|
|
||||||
height: 100%;
|
|
||||||
margin: 0 auto;
|
|
||||||
}
|
|
||||||
.loadmask > .placeholder .slide-v {
|
|
||||||
display: flex;
|
|
||||||
position: relative;
|
|
||||||
flex-direction: column;
|
|
||||||
padding-bottom: 56.1333%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.loadmask > .placeholder .slide-container {
|
|
||||||
position: absolute;
|
|
||||||
height: 100%;
|
|
||||||
width: 100%;
|
|
||||||
background: #fbfbfb;
|
|
||||||
border: 1px solid #dfdfdf;
|
|
||||||
|
|
||||||
-webkit-animation: flickerAnimation 2s infinite ease-in-out;
|
|
||||||
-moz-animation: flickerAnimation 2s infinite ease-in-out;
|
|
||||||
-o-animation: flickerAnimation 2s infinite ease-in-out;
|
|
||||||
animation: flickerAnimation 2s infinite ease-in-out;
|
|
||||||
}
|
|
||||||
|
|
||||||
.loadmask > .placeholder .slide-container > .line {
|
|
||||||
height: 20%;
|
|
||||||
margin: 0 120px;
|
|
||||||
border-radius: 6px;
|
|
||||||
background: #f5f5f5;
|
|
||||||
}
|
|
||||||
|
|
||||||
.loadmask > .placeholder .slide-container > .line.empty {
|
|
||||||
background: transparent;
|
|
||||||
}
|
|
||||||
|
|
||||||
.loadmask > .placeholder .slide-container > .line:nth-child(1) {
|
|
||||||
height: 30%;
|
|
||||||
margin: 10% 80px 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes flickerAnimation {
|
|
||||||
0% { opacity:1; }
|
|
||||||
50% { opacity:0.3; }
|
|
||||||
100% { opacity:1; }
|
|
||||||
}
|
|
||||||
@-o-keyframes flickerAnimation{
|
|
||||||
0% { opacity:1; }
|
|
||||||
50% { opacity:0.3; }
|
|
||||||
100% { opacity:1; }
|
|
||||||
}
|
|
||||||
@-moz-keyframes flickerAnimation{
|
|
||||||
0% { opacity:1; }
|
|
||||||
50% { opacity:0.3; }
|
|
||||||
100% { opacity:1; }
|
|
||||||
}
|
|
||||||
@-webkit-keyframes flickerAnimation{
|
|
||||||
0% { opacity:1; }
|
|
||||||
50% { opacity:0.3; }
|
|
||||||
100% { opacity:1; }
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
<div id="loading-mask" class="loadmask">
|
|
||||||
<div class="brendpanel">
|
|
||||||
<div>
|
|
||||||
<div class="circle"></div>
|
|
||||||
<div class="loading-logo">
|
|
||||||
</div>
|
|
||||||
<div class="circle"></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="placeholder">
|
|
||||||
<div class="slide-h">
|
|
||||||
<div class="slide-v">
|
|
||||||
<div class="slide-container">
|
|
||||||
<div class="line"></div>
|
|
||||||
<div class="line empty"></div>
|
|
||||||
<div class="line"></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<script type="text/javascript">
|
|
||||||
function getUrlParams() {
|
|
||||||
var e,
|
|
||||||
a = /\+/g, // Regex for replacing addition symbol with a space
|
|
||||||
r = /([^&=]+)=?([^&]*)/g,
|
|
||||||
d = function (s) { return decodeURIComponent(s.replace(a, " ")); },
|
|
||||||
q = window.location.search.substring(1),
|
|
||||||
urlParams = {};
|
|
||||||
|
|
||||||
while (e = r.exec(q))
|
|
||||||
urlParams[d(e[1])] = d(e[2]);
|
|
||||||
|
|
||||||
return urlParams;
|
|
||||||
}
|
|
||||||
|
|
||||||
function encodeUrlParam(str) {
|
|
||||||
return str.replace(/&/g, '&')
|
|
||||||
.replace(/"/g, '"')
|
|
||||||
.replace(/'/g, ''')
|
|
||||||
.replace(/</g, '<')
|
|
||||||
.replace(/>/g, '>');
|
|
||||||
}
|
|
||||||
|
|
||||||
var params = getUrlParams(),
|
|
||||||
lang = (params["lang"] || 'en').split(/[\-\_]/)[0],
|
|
||||||
logo = /*params["headerlogo"] ? encodeUrlParam(params["headerlogo"]) : */null;
|
|
||||||
var logoOO = null;
|
|
||||||
if (!logo) {
|
|
||||||
logoOO = /Android/.test(navigator.userAgent) ? "../../common/mobile/resources/img/header/header-logo-android.png" : "../../common/mobile/resources/img/header/header-logo-ios.png";
|
|
||||||
}
|
|
||||||
|
|
||||||
window.frameEditorId = params["frameEditorId"];
|
|
||||||
window.parentOrigin = params["parentOrigin"];
|
|
||||||
|
|
||||||
var brendpanel = document.getElementsByClassName('brendpanel')[0];
|
|
||||||
if (brendpanel) {
|
|
||||||
if (/Android/.test(navigator.userAgent)) {
|
|
||||||
brendpanel.classList.add('android');
|
|
||||||
}
|
|
||||||
brendpanel.classList.add('visible');
|
|
||||||
var elem = document.querySelector('.loading-logo');
|
|
||||||
if (elem) {
|
|
||||||
logo && (elem.innerHTML = '<img src=' + logo + '>');
|
|
||||||
logoOO && (elem.innerHTML = '<img src=' + logoOO + '>');
|
|
||||||
elem.style.opacity = 1;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
var placeholder = document.getElementsByClassName('placeholder')[0];
|
|
||||||
if (placeholder && /Android/.test(navigator.userAgent)) {
|
|
||||||
placeholder.classList.add('android');
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<script type="text/javascript" src="../../../vendor/jquery/jquery.min.js"></script>
|
|
||||||
<script type="text/javascript" src="../../../vendor/xregexp/xregexp-all-min.js"></script>
|
|
||||||
|
|
||||||
<script type="text/javascript" src="../../../../sdkjs/develop/sdkjs/slide/scripts.js"></script>
|
|
||||||
<script>
|
|
||||||
var ua = navigator.userAgent;
|
|
||||||
|
|
||||||
if (/Sailfish/.test(ua) || /Jolla/.test(ua)) {
|
|
||||||
document.write('<script type="text/javascript" src="../../../vendor/iscroll/iscroll.min.js"><\/script>');
|
|
||||||
|
|
||||||
if (!/Android/.test(ua)) {
|
|
||||||
var ua = navigator.userAgent + ';Android 5.0;';
|
|
||||||
Object.defineProperty(navigator, 'userAgent', {
|
|
||||||
get: function () { return ua; }
|
|
||||||
});
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
window.sdk_scripts.forEach(function(item){
|
|
||||||
document.write('<script type="text/javascript" src="' + item + '"><\/script>');
|
|
||||||
});
|
|
||||||
|
|
||||||
window.requireTimeourError = function(){
|
|
||||||
var reqerr;
|
|
||||||
|
|
||||||
if ( lang == 'de') reqerr = 'Die Verbindung ist zu langsam, einige Komponenten konnten nicht geladen werden. Aktualisieren Sie bitte die Seite.';
|
|
||||||
else if ( lang == 'es') reqerr = 'La conexión es muy lenta, algunos de los componentes no han podido cargar. Por favor recargue la página.';
|
|
||||||
else if ( lang == 'fr') reqerr = 'La connexion est trop lente, certains des composants n\'ons pas pu être chargé. Veuillez recharger la page.';
|
|
||||||
else if ( lang == 'ru') reqerr = 'Слишком медленное соединение, не удается загрузить некоторые компоненты. Пожалуйста, обновите страницу.';
|
|
||||||
else reqerr = 'The connection is too slow, some of the components could not be loaded. Please reload the page.';
|
|
||||||
|
|
||||||
return reqerr;
|
|
||||||
};
|
|
||||||
</script>
|
|
||||||
<!-- application -->
|
|
||||||
<script data-main="app-dev" src="../../../vendor/requirejs/require.js"></script>
|
|
||||||
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
42
apps/presentationeditor/mobile/src/app.js
Normal file
42
apps/presentationeditor/mobile/src/app.js
Normal file
|
|
@ -0,0 +1,42 @@
|
||||||
|
// Import React and ReactDOM
|
||||||
|
import React, { Suspense } from 'react';
|
||||||
|
import ReactDOM from 'react-dom';
|
||||||
|
|
||||||
|
// Import Framework7
|
||||||
|
import Framework7 from 'framework7/framework7-lite.esm.bundle.js';
|
||||||
|
|
||||||
|
// Import Framework7-React Plugin
|
||||||
|
import Framework7React from 'framework7-react';
|
||||||
|
|
||||||
|
import jQuery from 'jquery';
|
||||||
|
window.jQuery = jQuery;
|
||||||
|
window.$ = jQuery;
|
||||||
|
|
||||||
|
// Import Framework7 Styles
|
||||||
|
import 'framework7/css/framework7.bundle.css';
|
||||||
|
|
||||||
|
// Import App Custom Styles
|
||||||
|
import './less/app.less';
|
||||||
|
|
||||||
|
// Import App Component
|
||||||
|
import App from './page/app';
|
||||||
|
import { I18nextProvider } from 'react-i18next';
|
||||||
|
import i18n from './lib/i18n.js';
|
||||||
|
|
||||||
|
import { Provider } from 'mobx-react'
|
||||||
|
import { stores } from './store/mainStore'
|
||||||
|
|
||||||
|
// Init F7 React Plugin
|
||||||
|
Framework7.use(Framework7React)
|
||||||
|
|
||||||
|
// Mount React App
|
||||||
|
ReactDOM.render(
|
||||||
|
<I18nextProvider i18n={i18n}>
|
||||||
|
<Provider {...stores}>
|
||||||
|
<Suspense fallback="loading">
|
||||||
|
<App />
|
||||||
|
</Suspense>
|
||||||
|
</Provider>
|
||||||
|
</I18nextProvider>,
|
||||||
|
document.getElementById('app'),
|
||||||
|
);
|
||||||
205
apps/presentationeditor/mobile/src/controller/Main.jsx
Normal file
205
apps/presentationeditor/mobile/src/controller/Main.jsx
Normal file
|
|
@ -0,0 +1,205 @@
|
||||||
|
|
||||||
|
import React, { Component } from 'react'
|
||||||
|
import { inject } from "mobx-react";
|
||||||
|
import { withTranslation } from 'react-i18next';
|
||||||
|
import CollaborationController from '../../../../common/mobile/lib/controller/Collaboration.jsx'
|
||||||
|
|
||||||
|
class MainController extends Component {
|
||||||
|
constructor(props) {
|
||||||
|
super(props)
|
||||||
|
}
|
||||||
|
|
||||||
|
initSdk() {
|
||||||
|
const script = document.createElement("script");
|
||||||
|
script.src = "../../../../sdkjs/develop/sdkjs/slide/scripts.js";
|
||||||
|
script.async = true;
|
||||||
|
script.onload = () => {
|
||||||
|
let dep_scripts = [
|
||||||
|
'../../../vendor/xregexp/xregexp-all-min.js',
|
||||||
|
'../../../vendor/sockjs/sockjs.min.js'];
|
||||||
|
dep_scripts.push(...sdk_scripts);
|
||||||
|
|
||||||
|
const promise_get_script = (scriptpath) => {
|
||||||
|
return new Promise((resolve, reject) => {
|
||||||
|
const script = document.createElement("script");
|
||||||
|
script.src = scriptpath;
|
||||||
|
script.onload = () => {
|
||||||
|
resolve('ok');
|
||||||
|
};
|
||||||
|
script.onerror = () => {
|
||||||
|
reject('error');
|
||||||
|
};
|
||||||
|
|
||||||
|
document.body.appendChild(script);
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
const loadConfig = data => {
|
||||||
|
let me = this;
|
||||||
|
console.log('load config');
|
||||||
|
|
||||||
|
me.editorConfig = Object.assign({}, this.editorConfig, data.config);
|
||||||
|
me.appOptions.user = Common.Utils.fillUserInfo(me.editorConfig.user, me.editorConfig.lang, "Local.User"/*me.textAnonymous*/);
|
||||||
|
};
|
||||||
|
|
||||||
|
const loadDocument = data => {
|
||||||
|
this.permissions = {};
|
||||||
|
this.document = data.doc;
|
||||||
|
|
||||||
|
let docInfo = {};
|
||||||
|
|
||||||
|
if (data.doc) {
|
||||||
|
this.permissions = Object.assign(this.permissions, data.doc.permissions);
|
||||||
|
|
||||||
|
let _permissions = Object.assign({}, data.doc.permissions),
|
||||||
|
_user = new Asc.asc_CUserInfo();
|
||||||
|
_user.put_Id(this.appOptions.user.id);
|
||||||
|
_user.put_FullName(this.appOptions.user.fullname);
|
||||||
|
|
||||||
|
docInfo = new Asc.asc_CDocInfo();
|
||||||
|
docInfo.put_Id(data.doc.key);
|
||||||
|
docInfo.put_Url(data.doc.url);
|
||||||
|
docInfo.put_Title(data.doc.title);
|
||||||
|
docInfo.put_Format(data.doc.fileType);
|
||||||
|
docInfo.put_VKey(data.doc.vkey);
|
||||||
|
docInfo.put_Options(data.doc.options);
|
||||||
|
docInfo.put_UserInfo(_user);
|
||||||
|
docInfo.put_CallbackUrl(this.editorConfig.callbackUrl);
|
||||||
|
docInfo.put_Token(data.doc.token);
|
||||||
|
docInfo.put_Permissions(_permissions);
|
||||||
|
docInfo.put_EncryptedInfo(this.editorConfig.encryptionKeys);
|
||||||
|
|
||||||
|
// var enable = !this.editorConfig.customization || (this.editorConfig.customization.macros!==false);
|
||||||
|
// docInfo.asc_putIsEnabledMacroses(!!enable);
|
||||||
|
// enable = !this.editorConfig.customization || (this.editorConfig.customization.plugins!==false);
|
||||||
|
// docInfo.asc_putIsEnabledPlugins(!!enable);
|
||||||
|
}
|
||||||
|
|
||||||
|
this.api.asc_registerCallback('asc_onGetEditorPermissions', onEditorPermissions);
|
||||||
|
// this.api.asc_registerCallback('asc_onLicenseChanged', _.bind(this.onLicenseChanged, this));
|
||||||
|
// this.api.asc_registerCallback('asc_onRunAutostartMacroses', _.bind(this.onRunAutostartMacroses, this));
|
||||||
|
this.api.asc_setDocInfo(docInfo);
|
||||||
|
this.api.asc_getEditorPermissions(this.editorConfig.licenseUrl, this.editorConfig.customerId);
|
||||||
|
|
||||||
|
// Common.SharedSettings.set('document', data.doc);
|
||||||
|
|
||||||
|
// if (data.doc) {
|
||||||
|
// DE.getController('Toolbar').setDocumentTitle(data.doc.title);
|
||||||
|
// if (data.doc.info) {
|
||||||
|
// data.doc.info.author && console.log("Obsolete: The 'author' parameter of the document 'info' section is deprecated. Please use 'owner' instead.");
|
||||||
|
// data.doc.info.created && console.log("Obsolete: The 'created' parameter of the document 'info' section is deprecated. Please use 'uploaded' instead.");
|
||||||
|
// }
|
||||||
|
// }
|
||||||
|
};
|
||||||
|
|
||||||
|
const onEditorPermissions = params => {
|
||||||
|
let me = this;
|
||||||
|
const licType = params.asc_getLicenseType();
|
||||||
|
|
||||||
|
me.appOptions.canLicense = (licType === Asc.c_oLicenseResult.Success || licType === Asc.c_oLicenseResult.SuccessLimit);
|
||||||
|
// me.appOptions.canEdit = (me.permissions.edit !== false || me.permissions.review === true) && // can edit or review
|
||||||
|
// (me.editorConfig.canRequestEditRights || me.editorConfig.mode !== 'view') && // if mode=="view" -> canRequestEditRights must be defined
|
||||||
|
// (!me.appOptions.isReviewOnly || me.appOptions.canLicense) && // if isReviewOnly==true -> canLicense must be true
|
||||||
|
// me.isSupportEditFeature();
|
||||||
|
// me.appOptions.isEdit = me.appOptions.canLicense && me.appOptions.canEdit && me.editorConfig.mode !== 'view';
|
||||||
|
|
||||||
|
// me.api.asc_setViewMode(!me.appOptions.isEdit);
|
||||||
|
me.api.asc_setViewMode(false);
|
||||||
|
me.api.asc_LoadDocument();
|
||||||
|
};
|
||||||
|
|
||||||
|
const _process_array = (array, fn) => {
|
||||||
|
let results = [];
|
||||||
|
return array.reduce(function(p, item) {
|
||||||
|
return p.then(function() {
|
||||||
|
return fn(item).then(function(data) {
|
||||||
|
results.push(data);
|
||||||
|
return results;
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}, Promise.resolve());
|
||||||
|
};
|
||||||
|
|
||||||
|
_process_array(dep_scripts, promise_get_script)
|
||||||
|
.then ( result => {
|
||||||
|
const {t} = this.props;
|
||||||
|
this.api = new Asc.asc_docs_api({
|
||||||
|
'id-view': 'editor_sdk',
|
||||||
|
'mobile': true,
|
||||||
|
'translate': t('Controller.Main.SDK', {returnObjects:true})
|
||||||
|
});
|
||||||
|
|
||||||
|
this.appOptions = {};
|
||||||
|
this.bindEvents();
|
||||||
|
|
||||||
|
let value = null /*Common.localStorage.getItem("pe-settings-fontrender")*/;
|
||||||
|
if (value===null) value = window.devicePixelRatio > 1 ? '1' : '3';
|
||||||
|
this.api.SetFontRenderingMode(parseInt(value));
|
||||||
|
this.api.SetDrawingFreeze(true);
|
||||||
|
this.api.SetThemesPath("../../../../sdkjs/slide/themes/");
|
||||||
|
// Common.Utils.Metric.setCurrentMetric(1); //pt
|
||||||
|
|
||||||
|
Common.Gateway.on('init', loadConfig);
|
||||||
|
// Common.Gateway.on('showmessage', _.bind(me.onExternalMessage, me));
|
||||||
|
Common.Gateway.on('opendocument', loadDocument);
|
||||||
|
Common.Gateway.appReady();
|
||||||
|
|
||||||
|
Common.Notifications.trigger('engineCreated', this.api);
|
||||||
|
Common.EditorApi = {get: () => this.api};
|
||||||
|
}, error => {
|
||||||
|
console.log('promise failed ' + error);
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
script.onerror = () => {
|
||||||
|
console.log('error');
|
||||||
|
};
|
||||||
|
|
||||||
|
document.body.appendChild(script);
|
||||||
|
}
|
||||||
|
|
||||||
|
bindEvents() {
|
||||||
|
const me = this;
|
||||||
|
// me.api.asc_registerCallback('asc_onError', _.bind(me.onError, me));
|
||||||
|
me.api.asc_registerCallback('asc_onDocumentContentReady', me._onDocumentContentReady.bind(me));
|
||||||
|
me.api.asc_registerCallback('asc_onOpenDocumentProgress', me._onOpenDocumentProgress.bind(me));
|
||||||
|
// me.api.asc_registerCallback('asc_onDocumentUpdateVersion', _.bind(me.onUpdateVersion, me));
|
||||||
|
// me.api.asc_registerCallback('asc_onServerVersion', _.bind(me.onServerVersion, me));
|
||||||
|
// me.api.asc_registerCallback('asc_onAdvancedOptions', _.bind(me.onAdvancedOptions, me));
|
||||||
|
// me.api.asc_registerCallback('asc_onDocumentName', _.bind(me.onDocumentName, me));
|
||||||
|
// me.api.asc_registerCallback('asc_onPrintUrl', _.bind(me.onPrintUrl, me));
|
||||||
|
// me.api.asc_registerCallback('asc_onThumbnailsShow', _.bind(me.onThumbnailsShow, me));
|
||||||
|
// me.api.asc_registerCallback('asc_onMeta', _.bind(me.onMeta, me));
|
||||||
|
}
|
||||||
|
|
||||||
|
_onDocumentContentReady() {
|
||||||
|
const me = this;
|
||||||
|
me.api.SetDrawingFreeze(false);
|
||||||
|
|
||||||
|
me.api.Resize();
|
||||||
|
me.api.zoomFitToPage();
|
||||||
|
// me.api.asc_GetDefaultTableStyles && _.defer(function () {me.api.asc_GetDefaultTableStyles()});
|
||||||
|
|
||||||
|
Common.Gateway.documentReady();
|
||||||
|
}
|
||||||
|
|
||||||
|
_onOpenDocumentProgress(progress) {
|
||||||
|
// if (this.loadMask) {
|
||||||
|
// var $title = $$(this.loadMask).find('.modal-title'),
|
||||||
|
// const proc = (progress.asc_getCurrentFont() + progress.asc_getCurrentImage())/(progress.asc_getFontsCount() + progress.asc_getImagesCount());
|
||||||
|
|
||||||
|
// $title.text(this.textLoadingDocument + ': ' + Math.min(Math.round(proc * 100), 100) + '%');
|
||||||
|
// }
|
||||||
|
}
|
||||||
|
|
||||||
|
render() {
|
||||||
|
return <CollaborationController />
|
||||||
|
}
|
||||||
|
|
||||||
|
componentDidMount() {
|
||||||
|
this.initSdk();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const translated = withTranslation()(MainController);
|
||||||
|
export {translated as MainController};
|
||||||
95
apps/presentationeditor/mobile/src/index_dev.html
Normal file
95
apps/presentationeditor/mobile/src/index_dev.html
Normal file
|
|
@ -0,0 +1,95 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<!--
|
||||||
|
Customize this policy to fit your own app's needs. For more guidance, see:
|
||||||
|
https://github.com/apache/cordova-plugin-whitelist/blob/master/README.md#content-security-policy
|
||||||
|
Some notes:
|
||||||
|
* https://ssl.gstatic.com is required only on Android and is needed for TalkBack to function properly
|
||||||
|
* Disables use of inline scripts in order to mitigate risk of XSS vulnerabilities. To change this:
|
||||||
|
* Enable inline JS: add 'unsafe-inline' to default-src
|
||||||
|
-->
|
||||||
|
<meta http-equiv="Content-Security-Policy" content="default-src * 'self' 'unsafe-inline' 'unsafe-eval' data: gap: content:">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, minimal-ui, viewport-fit=cover">
|
||||||
|
|
||||||
|
<meta name="theme-color" content="#007aff">
|
||||||
|
<meta name="format-detection" content="telephone=no">
|
||||||
|
<meta name="msapplication-tap-highlight" content="no">
|
||||||
|
<title>Presentation Editor</title>
|
||||||
|
|
||||||
|
<meta name="apple-mobile-web-app-capable" content="yes">
|
||||||
|
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
|
||||||
|
<link rel="apple-touch-icon" href="static/icons/apple-touch-icon.png">
|
||||||
|
<link rel="icon" href="static/icons/favicon.png">
|
||||||
|
|
||||||
|
|
||||||
|
<!-- built styles file will be auto injected -->
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<script>
|
||||||
|
const isAndroid = /Android/.test(navigator.userAgent);
|
||||||
|
if ( isAndroid && navigator.platform == 'Win32' )
|
||||||
|
// Framework7 doesn't set Device.android flag when navigator.platform == 'Win32', change it for debug
|
||||||
|
navigator.__defineGetter__('platform', () => 'Win32Debug');
|
||||||
|
|
||||||
|
const getUrlParams = () => {
|
||||||
|
let e,
|
||||||
|
a = /\+/g, // Regex for replacing addition symbol with a space
|
||||||
|
r = /([^&=]+)=?([^&]*)/g,
|
||||||
|
d = s => decodeURIComponent(s.replace(a, " ")),
|
||||||
|
q = window.location.search.substring(1),
|
||||||
|
urlParams = {};
|
||||||
|
|
||||||
|
while (e = r.exec(q))
|
||||||
|
urlParams[d(e[1])] = d(e[2]);
|
||||||
|
|
||||||
|
return urlParams;
|
||||||
|
}
|
||||||
|
|
||||||
|
const encodeUrlParam = str => str.replace(/&/g, '&')
|
||||||
|
.replace(/"/g, '"')
|
||||||
|
.replace(/'/g, ''')
|
||||||
|
.replace(/</g, '<')
|
||||||
|
.replace(/>/g, '>');
|
||||||
|
|
||||||
|
let params = getUrlParams(),
|
||||||
|
lang = (params["lang"] || 'en').split(/[\-\_]/)[0],
|
||||||
|
logo = /*params["headerlogo"] ? encodeUrlParam(params["headerlogo"]) : */null,
|
||||||
|
logoOO = null;
|
||||||
|
if (!logo) {
|
||||||
|
logoOO = isAndroid ? "../../common/mobile/resources/img/header/header-logo-android.png" : "../../common/mobile/resources/img/header/header-logo-ios.png";
|
||||||
|
}
|
||||||
|
|
||||||
|
window.frameEditorId = params["frameEditorId"];
|
||||||
|
window.parentOrigin = params["parentOrigin"];
|
||||||
|
window.Common = {Locale: {currentLang: lang}};
|
||||||
|
|
||||||
|
let brendpanel = document.getElementsByClassName('brendpanel')[0];
|
||||||
|
if (brendpanel) {
|
||||||
|
if ( isAndroid ) {
|
||||||
|
brendpanel.classList.add('android');
|
||||||
|
}
|
||||||
|
brendpanel.classList.add('visible');
|
||||||
|
|
||||||
|
let elem = document.querySelector('.loading-logo');
|
||||||
|
if (elem) {
|
||||||
|
logo && (elem.innerHTML = '<img src=' + logo + '>');
|
||||||
|
logoOO && (elem.innerHTML = '<img src=' + logoOO + '>');
|
||||||
|
elem.style.opacity = 1;
|
||||||
|
}
|
||||||
|
var placeholder = document.getElementsByClassName('placeholder')[0];
|
||||||
|
if (placeholder && isAndroid) {
|
||||||
|
placeholder.classList.add('android');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<script type="text/javascript" src="../../../vendor/jquery/jquery.min.js"></script>
|
||||||
|
|
||||||
|
<div id="app"></div>
|
||||||
|
|
||||||
|
<!-- built script files will be auto injected -->
|
||||||
|
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
5
apps/presentationeditor/mobile/src/less/app-ios.less
Normal file
5
apps/presentationeditor/mobile/src/less/app-ios.less
Normal file
|
|
@ -0,0 +1,5 @@
|
||||||
|
|
||||||
|
.device-ios {
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
24
apps/presentationeditor/mobile/src/less/app-material.less
Normal file
24
apps/presentationeditor/mobile/src/less/app-material.less
Normal file
|
|
@ -0,0 +1,24 @@
|
||||||
|
|
||||||
|
// Colors
|
||||||
|
@themeColorLight: #a2bdde;
|
||||||
|
@navBarIconColor: #fff;
|
||||||
|
|
||||||
|
|
||||||
|
.device-android {
|
||||||
|
--f7-navbar-bg-color: @themeColor;
|
||||||
|
--f7-navbar-link-color: @navBarIconColor;
|
||||||
|
--f7-navbar-text-color: @navBarIconColor;
|
||||||
|
|
||||||
|
// Main Toolbar
|
||||||
|
#editor-navbar.navbar .right {
|
||||||
|
padding-right: 4px;
|
||||||
|
}
|
||||||
|
#editor-navbar.navbar .right a.link,
|
||||||
|
#editor-navbar.navbar .left a.link {
|
||||||
|
padding: 0 13px;
|
||||||
|
justify-content: space-between;
|
||||||
|
box-sizing: border-box;
|
||||||
|
align-items: center;
|
||||||
|
width: auto;
|
||||||
|
}
|
||||||
|
}
|
||||||
47
apps/presentationeditor/mobile/src/less/app.less
Normal file
47
apps/presentationeditor/mobile/src/less/app.less
Normal file
|
|
@ -0,0 +1,47 @@
|
||||||
|
@themeColor: #446995;
|
||||||
|
|
||||||
|
@import '../../../../common/mobile/resources/less/_mixins.less';
|
||||||
|
@import '../../../../common/mobile/resources/less/collaboration.less';
|
||||||
|
@import '../../../../common/mobile/resources/less/common.less';
|
||||||
|
@import '../../../../common/mobile/resources/less/common-ios.less';
|
||||||
|
@import '../../../../common/mobile/resources/less/common-material.less';
|
||||||
|
@import './app-material.less';
|
||||||
|
@import './app-ios.less';
|
||||||
|
@import './icons-ios.less';
|
||||||
|
@import './icons-material.less';
|
||||||
|
|
||||||
|
/* Left Panel right border when it is visible by breakpoint */
|
||||||
|
.panel-left.panel-in-breakpoint:before {
|
||||||
|
position: absolute;
|
||||||
|
right: 0;
|
||||||
|
top: 0;
|
||||||
|
height: 100%;
|
||||||
|
width: 1px;
|
||||||
|
background: rgba(0,0,0,0.1);
|
||||||
|
content: '';
|
||||||
|
z-index: 6000;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Hide navbar link which opens left panel when it is visible by breakpoint */
|
||||||
|
.panel-left.panel-in-breakpoint ~ .view .navbar .panel-open[data-panel="left"] {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
/*
|
||||||
|
Extra borders for main view and left panel for iOS theme when it behaves as panel (before breakpoint size)
|
||||||
|
*/
|
||||||
|
.ios .panel-left:not(.panel-in-breakpoint).panel-in ~ .view-main:before,
|
||||||
|
.ios .panel-left:not(.panel-in-breakpoint).panel-closing ~ .view-main:before {
|
||||||
|
position: absolute;
|
||||||
|
left: 0;
|
||||||
|
top: 0;
|
||||||
|
height: 100%;
|
||||||
|
width: 1px;
|
||||||
|
background: rgba(0,0,0,0.1);
|
||||||
|
content: '';
|
||||||
|
z-index: 6000;
|
||||||
|
}
|
||||||
|
|
||||||
|
:root {
|
||||||
|
--f7-popover-width: 360px;
|
||||||
|
}
|
||||||
17
apps/presentationeditor/mobile/src/lib/i18n.js
Normal file
17
apps/presentationeditor/mobile/src/lib/i18n.js
Normal file
|
|
@ -0,0 +1,17 @@
|
||||||
|
import i18n from 'i18next'
|
||||||
|
import {initReactI18next} from 'react-i18next'
|
||||||
|
import Fetch from 'i18next-fetch-backend'
|
||||||
|
|
||||||
|
i18n.use(initReactI18next)
|
||||||
|
.use(Fetch)
|
||||||
|
.init({
|
||||||
|
lng: Common.Locale.currentLang,
|
||||||
|
fallbackLng: "en",
|
||||||
|
escapeValue: false,
|
||||||
|
backend: {
|
||||||
|
loadPath: './locale/{{lng}}.json'
|
||||||
|
},
|
||||||
|
interpolation: { escapeValue: false },
|
||||||
|
});
|
||||||
|
|
||||||
|
export default i18n;
|
||||||
44
apps/presentationeditor/mobile/src/page/app.jsx
Normal file
44
apps/presentationeditor/mobile/src/page/app.jsx
Normal file
|
|
@ -0,0 +1,44 @@
|
||||||
|
import React from 'react';
|
||||||
|
|
||||||
|
import {App,Panel,Views,View,Popup,Page,Navbar,Toolbar,NavRight,Link,Block,BlockTitle,List,ListItem,ListInput,ListButton,BlockFooter} from 'framework7-react';
|
||||||
|
|
||||||
|
import routes from '../router/routes.js';
|
||||||
|
|
||||||
|
import '../../../../common/Gateway.js';
|
||||||
|
import '../../../../common/main/lib/util/utils.js';
|
||||||
|
import Notifications from '../../../../common/mobile/utils/notifications.js'
|
||||||
|
import {MainController} from '../controller/Main';
|
||||||
|
|
||||||
|
export default class extends React.Component {
|
||||||
|
constructor() {
|
||||||
|
super();
|
||||||
|
|
||||||
|
this.state = {
|
||||||
|
// Framework7 Parameters
|
||||||
|
f7params: {
|
||||||
|
name: 'Presentation Editor', // App name
|
||||||
|
theme: 'auto', // Automatic theme detection
|
||||||
|
|
||||||
|
// App routes
|
||||||
|
routes: routes,
|
||||||
|
},
|
||||||
|
}
|
||||||
|
|
||||||
|
Common.Notifications = new Notifications();
|
||||||
|
}
|
||||||
|
render() {
|
||||||
|
return (
|
||||||
|
<App params={ this.state.f7params } >
|
||||||
|
{/* Your main view, should have "view-main" class */}
|
||||||
|
<View main className="safe-areas" url="/" />
|
||||||
|
<MainController />
|
||||||
|
</App>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
componentDidMount() {
|
||||||
|
this.$f7ready((f7) => {
|
||||||
|
// Call F7 APIs here
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
80
apps/presentationeditor/mobile/src/page/main.jsx
Normal file
80
apps/presentationeditor/mobile/src/page/main.jsx
Normal file
|
|
@ -0,0 +1,80 @@
|
||||||
|
import React, { Component } from 'react';
|
||||||
|
import { Page, View, Navbar, NavLeft, NavRight, Link, Icon } from 'framework7-react';
|
||||||
|
|
||||||
|
// import EditOptions from '../view/edit/Edit';
|
||||||
|
// import Settings from '../view/settings/Settings';
|
||||||
|
import CollaborationView from '../../../../common/mobile/lib/view/Collaboration.jsx'
|
||||||
|
|
||||||
|
export default class MainPage extends Component {
|
||||||
|
constructor(props) {
|
||||||
|
super(props);
|
||||||
|
this.state = {
|
||||||
|
editOptionsVisible: false,
|
||||||
|
settingsVisible: false,
|
||||||
|
collaborationVisible: false,
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
handleClickToOpenOptions = opts => {
|
||||||
|
this.setState(state => {
|
||||||
|
if ( opts == 'edit' )
|
||||||
|
return {editOptionsVisible: true};
|
||||||
|
else
|
||||||
|
if ( opts == 'settings' )
|
||||||
|
return {settingsVisible: true};
|
||||||
|
else
|
||||||
|
if ( opts == 'coauth' )
|
||||||
|
return {collaborationVisible: true}
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
handleOptionsViewClosed = opts => {
|
||||||
|
(async () => {
|
||||||
|
await 1 && this.setState(state => {
|
||||||
|
if ( opts == 'edit' )
|
||||||
|
return {editOptionsVisible: false};
|
||||||
|
else
|
||||||
|
if ( opts == 'settings' )
|
||||||
|
return {settingsVisible: false};
|
||||||
|
else
|
||||||
|
if ( opts == 'coauth' )
|
||||||
|
return {collaborationVisible: false}
|
||||||
|
})
|
||||||
|
})();
|
||||||
|
};
|
||||||
|
|
||||||
|
render() {
|
||||||
|
console.log(this.$f7router)
|
||||||
|
return (
|
||||||
|
<Page name="home">
|
||||||
|
{/* Top Navbar */}
|
||||||
|
<Navbar id='editor-navbar'>
|
||||||
|
<div slot="before-inner" className="main-logo"><Icon icon="icon-logo"></Icon></div>
|
||||||
|
<NavLeft>
|
||||||
|
<Link icon='icon-undo'></Link>
|
||||||
|
<Link icon='icon-redo'></Link>
|
||||||
|
</NavLeft>
|
||||||
|
<NavRight>
|
||||||
|
<Link id='btn-edit' icon='icon-edit-settings' href={false} onClick={e => this.handleClickToOpenOptions('edit')}></Link>
|
||||||
|
<Link href={false} icon='icon-collaboration' onClick={e => this.handleClickToOpenOptions('coauth')}></Link>
|
||||||
|
<Link id='btn-settings' icon='icon-settings' href={false} onClick={e => this.handleClickToOpenOptions('settings')}></Link>
|
||||||
|
</NavRight>
|
||||||
|
</Navbar>
|
||||||
|
{/* Page content */}
|
||||||
|
<View id="editor_sdk" />
|
||||||
|
{/*{*/}
|
||||||
|
{/*!this.state.editOptionsVisible ? null :*/}
|
||||||
|
{/*<EditOptions onclosed={this.handleOptionsViewClosed.bind(this, 'edit')} />*/}
|
||||||
|
{/*}*/}
|
||||||
|
{/*{*/}
|
||||||
|
{/*!this.state.settingsVisible ? null :*/}
|
||||||
|
{/*<Settings onclosed={this.handleOptionsViewClosed.bind(this, 'settings')} />*/}
|
||||||
|
{/*}*/}
|
||||||
|
{
|
||||||
|
!this.state.collaborationVisible ? null :
|
||||||
|
<CollaborationView onclosed={this.handleOptionsViewClosed.bind(this, 'coauth')} />
|
||||||
|
}
|
||||||
|
</Page>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
};
|
||||||
17
apps/presentationeditor/mobile/src/router/routes.js
Normal file
17
apps/presentationeditor/mobile/src/router/routes.js
Normal file
|
|
@ -0,0 +1,17 @@
|
||||||
|
|
||||||
|
import MainPage from '../page/main';
|
||||||
|
|
||||||
|
import { PageCollaboration, PageUsers } from '../../../../common/mobile/lib/view/Collaboration.jsx';
|
||||||
|
|
||||||
|
var routes = [
|
||||||
|
{
|
||||||
|
path: '/',
|
||||||
|
component: MainPage,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: '/users/',
|
||||||
|
component: PageUsers
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
export default routes;
|
||||||
23
apps/presentationeditor/mobile/src/store/mainStore.js
Normal file
23
apps/presentationeditor/mobile/src/store/mainStore.js
Normal file
|
|
@ -0,0 +1,23 @@
|
||||||
|
|
||||||
|
// import {storeDocumentSettings} from './documentSettings';
|
||||||
|
// import {storeFocusObjects} from "./focusObjects";
|
||||||
|
import {storeUsers} from '../../../../common/mobile/lib/store/users';
|
||||||
|
// import {storeTextSettings} from "./textSettings";
|
||||||
|
// import {storeParagraphSettings} from "./paragraphSettings";
|
||||||
|
// import {storeShapeSettings} from "./shapeSettings";
|
||||||
|
// import {storeImageSettings} from "./imageSettings";
|
||||||
|
// import {storeTableSettings} from "./tableSettings";
|
||||||
|
// import {storeChartSettings} from "./chartSettings";
|
||||||
|
|
||||||
|
export const stores = {
|
||||||
|
// storeFocusObjects: new storeFocusObjects(),
|
||||||
|
// storeDocumentSettings: new storeDocumentSettings(),
|
||||||
|
users: new storeUsers(),
|
||||||
|
// storeTextSettings: new storeTextSettings(),
|
||||||
|
// storeParagraphSettings: new storeParagraphSettings(),
|
||||||
|
// storeShapeSettings: new storeShapeSettings(),
|
||||||
|
// storeChartSettings: new storeChartSettings(),
|
||||||
|
// storeImageSettings: new storeImageSettings(),
|
||||||
|
// storeTableSettings: new storeTableSettings()
|
||||||
|
};
|
||||||
|
|
||||||
Loading…
Reference in a new issue