Lea/web-apps
1
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

[PE mobile] Refactoring Slide Settings, added duplicates and remove slides

Browse source
This commit is contained in:
SergeyEzhin 2021-01-15 19:04:19 +03:00
parent cdfcea183d
commit 26a4e263cb
22 changed files with 667 additions and 767 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

17
apps/common/mobile/resources/less/common-material.less
View file

@ -35,27 +35,32 @@
}
.button {
--f7-button-text-color: @themeColor;
border: 1px solid @themeColor;
color: @themeColor;
text-align: center;
display: block;
border-radius: 2px;
line-height: 36px;
// border-radius: 2px;
line-height: 27px;
border-radius: 5px;
// line-height: 36px;
box-sizing: border-box;
appearance: none;
background: 0 0;
margin: 0;
height: 36px;
// height: 36px;
height: 29px;
white-space: nowrap;
text-overflow: ellipsis;
font-size: 14px;
text-transform: uppercase;
font-family: inherit;
cursor: pointer;
min-width: 64px;
padding: 0 8px;
// min-width: 64px;
// padding: 0 8px;
padding: 0 10px;
position: relative;
overflow: hidden;
outline: 0;
border: none;
-webkit-transition-duration: .3s;
transition-duration: .3s;
-webkit-transform: translate3d(0,0,0);

24
apps/common/mobile/resources/less/common.less
View file

@ -3,6 +3,7 @@
@black: #000000;
@gray: #c4c4c4;
@green: #4cd964;
@brightred: #f00;
@background-normal: @white;
@autoColor: @black;
@ -182,6 +183,12 @@
}
}
.style-effect, .style-type {
.list .item-title {
font-weight: normal;
}
}
.range-slider-delay {
width: 100%;
margin: 4px 0 5px 0;
@ -216,22 +223,31 @@
}
}
.apply-all {
color: @themeColor;
.list {
.apply-all, .duplicate-slide, .delete-slide {
border: 0;
.item-content {
padding-left: 0;
}
.item-inner {
justify-content: center;
padding-right: 0;
}
&__elem {
.item-link .item-inner::before {
display: none;
}
}
.apply-all, .duplicate-slide {
color: @themeColor;
}
.delete-slide {
color: @brightred;
}
}
.item-color-auto {
.color-auto {
width:22px;
width: 22px;
height: 22px;
background-color: @autoColor;
}

5
apps/presentationeditor/mobile/locale/en.json
View file

@ -124,7 +124,10 @@
"textZoomRotate": "Zoom and Rotate",
"textSec": "s",
"textAddCustomColor": "Add Custom Color",
"textFill": "Fill"
"textFill": "Fill",
"textCustomColor": "Custom Color",
"textDuplicateSlide": "Duplicate Slide",
"textDeleteSlide": "Delete Slide"
}
},
"Common": {

20
apps/presentationeditor/mobile/src/controller/Main.jsx
View file

@ -5,7 +5,7 @@ import { f7 } from "framework7-react";
import { withTranslation } from 'react-i18next';
import CollaborationController from '../../../../common/mobile/lib/controller/Collaboration.jsx'
@inject("storeFocusObjects", "storeAppOptions", "storePresentationInfo", "storePresentationSettings", "storeLayout", "storeTheme", "storeTransition")
@inject("storeFocusObjects", "storeAppOptions", "storePresentationInfo", "storePresentationSettings", "storeSlideSettings")
class MainController extends Component {
constructor(props) {
super(props)
@ -193,36 +193,26 @@ class MainController extends Component {
// me.api.asc_registerCallback('asc_onMeta', _.bind(me.onMeta, me));
const storeFocusObjects = this.props.storeFocusObjects;
const storeLayout = this.props.storeLayout;
const storeSlideSettings = this.props.storeSlideSettings;
this.api.asc_registerCallback('asc_onFocusObject', objects => {
// console.log(objects);
storeFocusObjects.resetFocusObjects(objects);
// const settings = storeFocusObjects.settings;
// if(settings[0] === "slide") {
// const slideObject = objects[0].get_ObjectValue();
// storeLayout.changeSlideLayoutIndex(slideObject.get_LayoutIndex());
// storeTransition.initTransition(slideObject.get_transition());
// }
});
const storeTheme = this.props.storeTheme;
this.api.asc_registerCallback('asc_onInitEditorStyles', themes => {
// console.log(themes);
storeTheme.addArrayThemes(themes);
storeSlideSettings.addArrayThemes(themes);
});
this.api.asc_registerCallback('asc_onUpdateThemeIndex', themeId => {
// console.log(themeId);
storeTheme.changeSlideThemeIndex(themeId);
storeSlideSettings.changeSlideThemeIndex(themeId);
});
this.api.asc_registerCallback('asc_onUpdateLayout', layouts => {
// console.log(layouts);
storeLayout.addArrayLayouts(layouts);
storeSlideSettings.addArrayLayouts(layouts);
});
this.api.asc_registerCallback('asc_onSendThemeColors', (colors, standart_colors) => {

147
apps/presentationeditor/mobile/src/controller/edit/EditSlide.jsx
View file

@ -1,17 +1,158 @@
import React, {Component} from 'react';
import { f7 } from 'framework7-react';
import {Device} from '../../../../../common/mobile/utils/device';
import {observer, inject} from "mobx-react";
import { EditSlide } from '../../view/edit/EditSlide';
class EditSlideController extends Component {
constructor (props) {
super(props);
this.onDuplicateSlide = this.onDuplicateSlide.bind(this);
this.onRemoveSlide = this.onRemoveSlide.bind(this);
}
onThemeClick(index) {
const api = Common.EditorApi.get();
api.ChangeTheme(index);
}
onLayoutClick(index) {
const api = Common.EditorApi.get();
api.ChangeLayout(index);
}
onApplyAll() {
const api = Common.EditorApi.get();
api.SlideTransitionApplyToAll();
};
changeDuration(duration) {
const api = Common.EditorApi.get();
let props = new Asc.CAscSlideProps(),
timing = new Asc.CAscSlideTransition(),
_effectDuration = duration * 1000;
timing.put_TransitionDuration(_effectDuration);
props.put_transition(timing);
api.SetSlideProps(props);
};
onStartClick(value) {
const api = Common.EditorApi.get();
let props = new Asc.CAscSlideProps(),
timing = new Asc.CAscSlideTransition();
timing.put_SlideAdvanceOnMouseClick(value);
props.put_transition(timing);
api.SetSlideProps(props);
};
onDelayCheck(value, _effectDelay) {
const api = Common.EditorApi.get();
let props = new Asc.CAscSlideProps(),
timing = new Asc.CAscSlideTransition();
timing.put_SlideAdvanceAfter(value);
timing.put_SlideAdvanceDuration(_effectDelay);
props.put_transition(timing);
api.SetSlideProps(props);
};
onDelay(value) {
const api = Common.EditorApi.get();
let props = new Asc.CAscSlideProps(),
timing = new Asc.CAscSlideTransition(),
_effectDelay = value * 1000;
timing.put_SlideAdvanceDuration(_effectDelay);
props.put_transition(timing);
api.SetSlideProps(props);
};
onEffectClick(value, effectType) {
const api = Common.EditorApi.get();
let props = new Asc.CAscSlideProps(),
timing = new Asc.CAscSlideTransition();
// _effectType = this.fillEffectTypes(value);
timing.put_TransitionType(value);
timing.put_TransitionOption(effectType);
props.put_transition(timing);
api.SetSlideProps(props);
};
onEffectTypeClick(value, effect) {
const api = Common.EditorApi.get();
let props = new Asc.CAscSlideProps(),
timing = new Asc.CAscSlideTransition();
timing.put_TransitionType(effect);
timing.put_TransitionOption(value);
props.put_transition(timing);
api.SetSlideProps(props);
}
onFillColor(color) {
const api = Common.EditorApi.get();
let props = new Asc.CAscSlideProps(),
fill = new Asc.asc_CShapeFill();
if (color == 'transparent') {
fill.put_type(Asc.c_oAscFill.FILL_TYPE_NOFILL);
fill.put_fill(null);
} else {
fill.put_type(Asc.c_oAscFill.FILL_TYPE_SOLID);
fill.put_fill(new Asc.asc_CFillSolid());
fill.get_fill().put_color(Common.Utils.ThemeColor.getRgbColor(color));
}
props.put_background(fill);
api.SetSlideProps(props);
};
closeModal() {
if (Device.phone) {
f7.sheet.close('#edit-sheet', true);
} else {
f7.popover.close('#edit-popover');
}
};
onDuplicateSlide() {
const api = Common.EditorApi.get();
api.DublicateSlide();
this.closeModal();
};
onRemoveSlide() {
const api = Common.EditorApi.get();
api.DeleteSlide();
this.closeModal();
};
render () {
return (
<EditSlide />
<EditSlide
onThemeClick={this.onThemeClick}
onLayoutClick={this.onLayoutClick}
onApplyAll={this.onApplyAll}
changeDuration={this.changeDuration}
onStartClick={this.onStartClick}
onDelayCheck={this.onDelayCheck}
onDelay={this.onDelay}
onEffectClick={this.onEffectClick}
onEffectTypeClick={this.onEffectTypeClick}
onFillColor={this.onFillColor}
onDuplicateSlide={this.onDuplicateSlide}
onRemoveSlide={this.onRemoveSlide}
/>
)
}
}

16
apps/presentationeditor/mobile/src/controller/edit/Effect.jsx
View file

@ -1,16 +0,0 @@
// import React, { Component } from "react";
// import Effect from "../../view/edit/Effect";
// class EffectController extends Component {
// constructor(props) {
// super(props);
// }
// render() {
// return (
// <Effect />
// );
// }
// }
// export default EffectController;

21
apps/presentationeditor/mobile/src/controller/edit/Layout.jsx
View file

@ -1,21 +0,0 @@
import React, { Component } from "react";
import Layout from "../../view/edit/Layout";
class LayoutController extends Component {
constructor(props) {
super(props);
}
onLayoutClick(index) {
const api = Common.EditorApi.get();
api.ChangeLayout(index);
}
render() {
return (
<Layout onLayoutClick={this.onLayoutClick} />
);
}
}
export default LayoutController;

36
apps/presentationeditor/mobile/src/controller/edit/StyleSlideSettings.jsx
View file

@ -1,36 +0,0 @@
import React, { Component } from "react";
import { StyleFillColor } from "../../view/edit/StyleSlideSettings";
class StyleSlideController extends Component {
constructor(props) {
super(props);
}
onFillColor(color) {
const api = Common.EditorApi.get();
let props = new Asc.CAscSlideProps(),
fill = new Asc.asc_CShapeFill();
if (color == 'transparent') {
fill.put_type(Asc.c_oAscFill.FILL_TYPE_NOFILL);
fill.put_fill(null);
} else {
fill.put_type(Asc.c_oAscFill.FILL_TYPE_SOLID);
fill.put_fill(new Asc.asc_CFillSolid());
fill.get_fill().put_color(Common.Utils.ThemeColor.getRgbColor(color));
}
props.put_background(fill);
api.SetSlideProps(props);
};
render() {
return (
<StyleFillColor onFillColor={this.onFillColor} />
);
}
}
export default StyleSlideController;

21
apps/presentationeditor/mobile/src/controller/edit/Theme.jsx
View file

@ -1,21 +0,0 @@
import React, { Component } from "react";
import Theme from "../../view/edit/Theme";
class ThemeController extends Component {
constructor(props) {
super(props);
}
onThemeClick(index) {
const api = Common.EditorApi.get();
api.ChangeTheme(index);
}
render() {
return (
<Theme onThemeClick={this.onThemeClick} />
);
}
}
export default ThemeController;

101
apps/presentationeditor/mobile/src/controller/edit/Transition.jsx
View file

@ -1,101 +0,0 @@
import React, { Component } from "react";
import {Transition} from "../../view/edit/Transition";
class TransitionController extends Component {
constructor(props) {
super(props);
};
onApplyAll() {
const api = Common.EditorApi.get();
api.SlideTransitionApplyToAll();
};
changeDuration(duration) {
const api = Common.EditorApi.get();
let props = new Asc.CAscSlideProps(),
timing = new Asc.CAscSlideTransition(),
_effectDuration = duration * 1000;
timing.put_TransitionDuration(_effectDuration);
props.put_transition(timing);
api.SetSlideProps(props);
};
onStartClick(value) {
const api = Common.EditorApi.get();
let props = new Asc.CAscSlideProps(),
timing = new Asc.CAscSlideTransition();
timing.put_SlideAdvanceOnMouseClick(value);
props.put_transition(timing);
api.SetSlideProps(props);
};
onDelayCheck(value, _effectDelay) {
const api = Common.EditorApi.get();
let props = new Asc.CAscSlideProps(),
timing = new Asc.CAscSlideTransition();
timing.put_SlideAdvanceAfter(value);
timing.put_SlideAdvanceDuration(_effectDelay);
props.put_transition(timing);
api.SetSlideProps(props);
};
onDelay(value) {
const api = Common.EditorApi.get();
let props = new Asc.CAscSlideProps(),
timing = new Asc.CAscSlideTransition(),
_effectDelay = value * 1000;
timing.put_SlideAdvanceDuration(_effectDelay);
props.put_transition(timing);
api.SetSlideProps(props);
};
onEffectClick(value, effectType) {
const api = Common.EditorApi.get();
let props = new Asc.CAscSlideProps(),
timing = new Asc.CAscSlideTransition();
// _effectType = this.fillEffectTypes(value);
timing.put_TransitionType(value);
timing.put_TransitionOption(effectType);
props.put_transition(timing);
api.SetSlideProps(props);
};
onEffectTypeClick(value, effect) {
const api = Common.EditorApi.get();
let props = new Asc.CAscSlideProps(),
timing = new Asc.CAscSlideTransition();
timing.put_TransitionType(effect);
timing.put_TransitionOption(value);
props.put_transition(timing);
api.SetSlideProps(props);
}
render() {
return (
<Transition
onApplyAll={this.onApplyAll}
changeDuration={this.changeDuration}
onStartClick={this.onStartClick}
onDelayCheck={this.onDelayCheck}
onDelay={this.onDelay}
onEffectClick={this.onEffectClick}
onEffectTypeClick={this.onEffectTypeClick}
/>
);
}
}
export default TransitionController;

16
apps/presentationeditor/mobile/src/store/layout.js
View file

@ -1,16 +0,0 @@
import {action, observable} from 'mobx';
export class storeLayout {
@observable arrayLayouts;
@observable slideLayoutIndex = -1;
@action addArrayLayouts(array) {
this.arrayLayouts = array;
}
@action changeSlideLayoutIndex(index) {
this.slideLayoutIndex = index;
}
}

10
apps/presentationeditor/mobile/src/store/mainStore.js
View file

@ -6,11 +6,8 @@ import {storeUsers} from '../../../../common/mobile/lib/store/users';
import {storeApplicationSettings} from './applicationSettings';
import {storePresentationInfo} from './presentationInfo';
import {storePresentationSettings} from './presentationSettings';
import { storeLayout } from './layout';
import { storeTransition } from './transition';
import { storeTheme } from './theme';
import { storeSlideStyle } from './styleSlide';
import { storePalette } from './palette';
import { storeSlideSettings } from './slideSettings';
// import {storeTextSettings} from "./textSettings";
// import {storeParagraphSettings} from "./paragraphSettings";
// import {storeShapeSettings} from "./shapeSettings";
@ -26,10 +23,7 @@ export const stores = {
storeApplicationSettings: new storeApplicationSettings(),
storePresentationInfo: new storePresentationInfo(),
storePresentationSettings: new storePresentationSettings(),
storeLayout: new storeLayout(),
storeTransition: new storeTransition(),
storeTheme: new storeTheme(),
storeSlideStyle: new storeSlideStyle(),
storeSlideSettings: new storeSlideSettings(),
storePalette: new storePalette()
// storeTextSettings: new storeTextSettings(),
// storeParagraphSettings: new storeParagraphSettings(),

34
apps/presentationeditor/mobile/src/store/styleSlide.js → apps/presentationeditor/mobile/src/store/slideSettings.js
View file

@ -1,7 +1,14 @@
import {action, observable} from 'mobx';
import {action, observable, computed} from 'mobx';
export class storeSlideStyle {
export class storeSlideSettings {
@observable arrayLayouts;
@observable slideLayoutIndex = -1;
@observable fillColor = undefined;
@observable arrayThemes;
@observable slideThemeIndex;
@observable effect;
@observable type;
@action getFillColor (slideObject) {
@ -31,4 +38,27 @@ export class storeSlideStyle {
this.fillColor = color;
}
@action addArrayLayouts(array) {
this.arrayLayouts = array;
}
@action changeSlideLayoutIndex(index) {
this.slideLayoutIndex = index;
}
@action addArrayThemes(array) {
this.arrayThemes = array;
}
@action changeSlideThemeIndex(index) {
this.slideThemeIndex = index;
}
@action changeEffect(value) {
this.effect = value;
}
@action changeType(value) {
this.type = value;
}
}

15
apps/presentationeditor/mobile/src/store/theme.js
View file

@ -1,15 +0,0 @@
import {action, observable} from 'mobx';
export class storeTheme {
@observable arrayThemes;
@observable slideThemeIndex;
@action addArrayThemes(array) {
this.arrayThemes = array;
}
@action changeSlideThemeIndex(index) {
this.slideThemeIndex = index;
}
}

15
apps/presentationeditor/mobile/src/store/transition.js
View file

@ -1,15 +0,0 @@
import {action, observable} from 'mobx';
export class storeTransition {
@observable effect;
@observable type;
@action changeEffect(value) {
this.effect = value;
}
@action changeType(value) {
this.type = value;
}
}

17
apps/presentationeditor/mobile/src/view/edit/Edit.jsx
View file

@ -7,13 +7,8 @@ import {Device} from '../../../../../common/mobile/utils/device';
import EditSlideController from "../../controller/edit/EditSlide";
import EditTextController from "../../controller/edit/EditText";
import LayoutController from "../../controller/edit/Layout";
import TransitionController from '../../controller/edit/Transition';
import ThemeController from '../../controller/edit/Theme';
import StyleSlideController from '../../controller/edit/StyleSlideSettings';
import { CustomFillColor } from './StyleSlideSettings';
import { Effect } from './Transition';
import { Type } from './Transition';
import { Theme, Layout, Transition, Type, Effect, StyleFillColor, CustomFillColor } from './EditSlide';
//import EditShapeController from "../../controller/edit/EditShape";
//import EditImageController from "../../controller/edit/EditImage";
//import EditTableController from "../../controller/edit/EditTable";
@ -23,15 +18,15 @@ import { Type } from './Transition';
const routes = [
{
path: '/layout/',
component: LayoutController
component: Layout
},
{
path: '/theme/',
component: ThemeController
component: Theme
},
{
path: '/transition/',
component: TransitionController
component: Transition
},
{
path: '/effect/',
@ -43,7 +38,7 @@ const routes = [
},
{
path: '/style/',
component: StyleSlideController
component: StyleFillColor
},
{
path: '/edit-custom-color/',

446
apps/presentationeditor/mobile/src/view/edit/EditSlide.jsx
View file

@ -1,9 +1,9 @@
import React, {Fragment, useState} from 'react';
import {observer, inject} from "mobx-react";
import {Page, Navbar, List, ListItem, ListButton, Row, BlockTitle, Range, Toggle, Icon, View} from 'framework7-react';
import {f7} from 'framework7-react';
import {f7, Page, Navbar, List, ListItem, Row, BlockTitle, Link, Toggle, Icon, View, NavRight, ListItemCell} from 'framework7-react';
import { ThemeColorPalette, CustomColorPicker } from '../../../../../common/mobile/lib/component/ThemeColorPalette.jsx';
import { useTranslation } from 'react-i18next';
import {Device} from '../../../../../common/mobile/utils/device';
// import {Device} from '../../../../../common/mobile/utils/device';
const EditSlide = props => {
const { t } = useTranslation();
@ -12,13 +12,443 @@ const EditSlide = props => {
return (
<Fragment>
<List>
<ListItem title={_t.textTheme} link="/theme/"></ListItem>
<ListItem title={_t.textLayout} link="/layout/"></ListItem>
<ListItem title={_t.textTransition} link="/transition/"></ListItem>
<ListItem title={_t.textStyle} link="/style/"></ListItem>
<ListItem title={_t.textTheme} link="/theme/" routeProps={{
onThemeClick: props.onThemeClick
}}></ListItem>
<ListItem title={_t.textLayout} link="/layout/" routeProps={{
onLayoutClick: props.onLayoutClick
}}></ListItem>
<ListItem title={_t.textTransition} link="/transition/" routeProps={{
onEffectClick: props.onEffectClick,
onEffectTypeClick: props.onEffectTypeClick,
changeDuration: props.changeDuration,
onStartClick: props.onStartClick,
onDelayCheck: props.onDelayCheck,
onDelay: props.onDelay,
onApplyAll: props.onApplyAll
}}></ListItem>
<ListItem title={_t.textStyle} link="/style/" routeProps={{
onFillColor: props.onFillColor
}}></ListItem>
</List>
<List>
<ListItem href="#" className="duplicate-slide" onClick={props.onDuplicateSlide}>{_t.textDuplicateSlide}</ListItem>
<ListItem href="#" className="delete-slide" onClick={props.onRemoveSlide}>{_t.textDeleteSlide}</ListItem>
</List>
</Fragment>
)
};
export {EditSlide};
const PageTheme = props => {
const { t } = useTranslation();
const _t = t("View.Edit", { returnObjects: true });
const storeSlideSettings = props.storeSlideSettings;
const arrayThemes = storeSlideSettings.arrayThemes;
const slideThemeIndex = storeSlideSettings.slideThemeIndex;
const defaultThemes = arrayThemes[0];
const docThemes = arrayThemes[1];
// console.log(slideThemeIndex);
// console.log(arrayThemes);
return (
<Page className="slide-theme">
<Navbar title={_t.textTheme} backLink={_t.textBack}>
<NavRight>
<Link icon='icon-expand-down' sheetClose></Link>
</NavRight>
</Navbar>
{arrayThemes.length ? (
<List className="slide-theme__list">
{defaultThemes.map((elem, index) => {
return (
<ListItem key={elem.Index} className={elem.Index === slideThemeIndex ? "item-theme active" : "item-theme"}
style={{backgroundPosition: "0 " + index * -38 + "px"}}
onClick={() => {
storeSlideSettings.changeSlideThemeIndex(elem.Index);
props.onThemeClick(elem.Index);
}}>
</ListItem>
);
})}
{docThemes.map((elem, index) => {
return (
<ListItem key={elem.Index} className={elem.Index === slideThemeIndex ? "item-theme active" : "item-theme"}
style={{backgroundPosition: "0 -0px", backgroundImage: "url(" + elem.ThemeInfo.Thumbnail + ")"}}
onClick={() => {
storeSlideSettings.changeSlideThemeIndex(elem.Index);
props.onThemeClick(elem.Index);
}}>
</ListItem>
);
})}
</List>
) : null}
</Page>
);
};
const PageLayout = props => {
const { t } = useTranslation();
const _t = t("View.Edit", { returnObjects: true });
const storeFocusObjects = props.storeFocusObjects;
const storeSlideSettings = props.storeSlideSettings;
storeSlideSettings.changeSlideLayoutIndex(storeFocusObjects.slideObject.get_LayoutIndex());
const arrayLayouts = storeSlideSettings.arrayLayouts;
const slideLayoutIndex = storeSlideSettings.slideLayoutIndex;
// console.log(slideLayoutIndex);
// console.log(arrayLayouts);
return (
<Page className="slide-layout">
<Navbar title={_t.textLayout} backLink={_t.textBack}>
<NavRight>
<Link icon='icon-expand-down' sheetClose></Link>
</NavRight>
</Navbar>
{arrayLayouts.length ? (
<List className="slide-layout__list">
{arrayLayouts.map((elem, index) => {
return (
<ListItem key={index} className={slideLayoutIndex === index ? "active" : ""}
onClick={() => {
storeSlideSettings.changeSlideLayoutIndex(index);
props.onLayoutClick(index);
}}>
<img src={elem.Image} style={{width: elem.Width, height: elem.Height}} alt=""/>
</ListItem>
)
})}
</List>
) : null}
</Page>
);
};
const PageTransition = props => {
const { t } = useTranslation();
const _t = t("View.Edit", { returnObjects: true });
const _arrEffect = [
{displayValue: _t.textNone, value: Asc.c_oAscSlideTransitionTypes.None},
{displayValue: _t.textFade, value: Asc.c_oAscSlideTransitionTypes.Fade},
{displayValue: _t.textPush, value: Asc.c_oAscSlideTransitionTypes.Push},
{displayValue: _t.textWipe, value: Asc.c_oAscSlideTransitionTypes.Wipe},
{displayValue: _t.textSplit, value: Asc.c_oAscSlideTransitionTypes.Split},
{displayValue: _t.textUnCover, value: Asc.c_oAscSlideTransitionTypes.UnCover},
{displayValue: _t.textCover, value: Asc.c_oAscSlideTransitionTypes.Cover},
{displayValue: _t.textClock, value: Asc.c_oAscSlideTransitionTypes.Clock},
{displayValue: _t.textZoom, value: Asc.c_oAscSlideTransitionTypes.Zoom}
];
const _arrEffectType = [
{displayValue: _t.textSmoothly, value: Asc.c_oAscSlideTransitionParams.Fade_Smoothly},
{displayValue: _t.textBlack, value: Asc.c_oAscSlideTransitionParams.Fade_Through_Black},
{displayValue: _t.textLeft, value: Asc.c_oAscSlideTransitionParams.Param_Left},
{displayValue: _t.textTop, value: Asc.c_oAscSlideTransitionParams.Param_Top},
{displayValue: _t.textRight, value: Asc.c_oAscSlideTransitionParams.Param_Right},
{displayValue: _t.textBottom, value: Asc.c_oAscSlideTransitionParams.Param_Bottom},
{displayValue: _t.textTopLeft, value: Asc.c_oAscSlideTransitionParams.Param_TopLeft},
{displayValue: _t.textTopRight, value: Asc.c_oAscSlideTransitionParams.Param_TopRight},
{displayValue: _t.textBottomLeft, value: Asc.c_oAscSlideTransitionParams.Param_BottomLeft},
{displayValue: _t.textBottomRight, value: Asc.c_oAscSlideTransitionParams.Param_BottomRight},
{displayValue: _t.textVerticalIn, value: Asc.c_oAscSlideTransitionParams.Split_VerticalIn},
{displayValue: _t.textVerticalOut, value: Asc.c_oAscSlideTransitionParams.Split_VerticalOut},
{displayValue: _t.textHorizontalIn, value: Asc.c_oAscSlideTransitionParams.Split_HorizontalIn},
{displayValue: _t.textHorizontalOut, value: Asc.c_oAscSlideTransitionParams.Split_HorizontalOut},
{displayValue: _t.textClockwise, value: Asc.c_oAscSlideTransitionParams.Clock_Clockwise},
{displayValue: _t.textCounterclockwise, value: Asc.c_oAscSlideTransitionParams.Clock_Counterclockwise},
{displayValue: _t.textWedge, value: Asc.c_oAscSlideTransitionParams.Clock_Wedge},
{displayValue: _t.textZoomIn, value: Asc.c_oAscSlideTransitionParams.Zoom_In},
{displayValue: _t.textZoomOut, value: Asc.c_oAscSlideTransitionParams.Zoom_Out},
{displayValue: _t.textZoomRotate, value: Asc.c_oAscSlideTransitionParams.Zoom_AndRotate}
];
let _arrCurrentEffectTypes = [];
const fillEffectTypes = type => {
_arrCurrentEffectTypes = [];
switch (type) {
case Asc.c_oAscSlideTransitionTypes.Fade:
_arrCurrentEffectTypes.push(_arrEffectType[0], _arrEffectType[1]);
break;
case Asc.c_oAscSlideTransitionTypes.Push:
_arrCurrentEffectTypes = _arrEffectType.slice(2, 6);
break;
case Asc.c_oAscSlideTransitionTypes.Wipe:
_arrCurrentEffectTypes = _arrEffectType.slice(2, 10);
break;
case Asc.c_oAscSlideTransitionTypes.Split:
_arrCurrentEffectTypes = _arrEffectType.slice(10, 14);
break;
case Asc.c_oAscSlideTransitionTypes.UnCover:
_arrCurrentEffectTypes = _arrEffectType.slice(2, 10);
break;
case Asc.c_oAscSlideTransitionTypes.Cover:
_arrCurrentEffectTypes = _arrEffectType.slice(2, 10);
break;
case Asc.c_oAscSlideTransitionTypes.Clock:
_arrCurrentEffectTypes = _arrEffectType.slice(14, 17);
break;
case Asc.c_oAscSlideTransitionTypes.Zoom:
_arrCurrentEffectTypes = _arrEffectType.slice(17);
break;
}
return (_arrCurrentEffectTypes.length > 0) ? _arrCurrentEffectTypes[0].value : -1;
};
const getEffectName = effect => {
for (var i=0; i < _arrEffect.length; i++) {
if (_arrEffect[i].value == effect) return _arrEffect[i].displayValue;
}
return '';
};
const getEffectTypeName = type => {
for (var i=0; i < _arrCurrentEffectTypes.length; i++) {
if (_arrCurrentEffectTypes[i].value == type) return _arrCurrentEffectTypes[i].displayValue;
}
return '';
};
const storeFocusObjects = props.storeFocusObjects;
const storeSlideSettings = props.storeSlideSettings;
const transitionObj = storeFocusObjects.slideObject.get_transition();
if(!storeSlideSettings.effect) {
storeSlideSettings.changeEffect(transitionObj.get_TransitionType());
}
const _effect = storeSlideSettings.effect;
const valueEffectTypes = fillEffectTypes(_effect);
if(!storeSlideSettings.type) {
storeSlideSettings.changeType(valueEffectTypes);
}
let _effectDelay = transitionObj.get_SlideAdvanceDuration();
const [stateRange, changeRange] = useState((_effectDelay !== null && _effectDelay !== undefined) ? parseInt(_effectDelay / 1000.) : 0);
const isDelay = transitionObj.get_SlideAdvanceAfter();
const isStartOnClick = transitionObj.get_SlideAdvanceOnMouseClick();
const nameEffect = getEffectName(_effect);
const _effectType = transitionObj.get_TransitionOption();
const nameEffectType = getEffectTypeName(_effectType);
const _effectDuration = transitionObj.get_TransitionDuration();
return (
<Page className="slide-transition">
<Navbar title={_t.textTransition} backLink={_t.textBack}>
<NavRight>
<Link icon='icon-expand-down' sheetClose></Link>
</NavRight>
</Navbar>
<List>
<ListItem link="/effect/" title={_t.textEffect} after={nameEffect} routeProps={{
_arrEffect,
onEffectClick: props.onEffectClick,
fillEffectTypes
}}></ListItem>
<ListItem link="/type/" title={_t.textType}
after={_effect != Asc.c_oAscSlideTransitionTypes.None ? nameEffectType : ''}
disabled={_effect == Asc.c_oAscSlideTransitionTypes.None} routeProps={{
_arrCurrentEffectTypes,
onEffectTypeClick: props.onEffectTypeClick
}}>
</ListItem>
<ListItem title={_t.textDuration} disabled={_effect == Asc.c_oAscSlideTransitionTypes.None}>
<div slot="after" className="splitter">
<label>{(_effectDuration !== null && _effectDuration !== undefined) ? (parseInt(_effectDuration / 1000.) + ' ' + _t.textSec) : ''}</label>
<p className="buttons-row">
<span className="button" onClick={() => {
let duration = parseInt(_effectDuration / 1000);
duration = Math.max(0, --duration);
props.changeDuration(duration);
}}>-</span>
<span className="button" onClick={() => {
let duration = parseInt(_effectDuration / 1000);
duration = Math.min(300, ++duration);
props.changeDuration(duration);
}}>+</span>
</p>
</div>
</ListItem>
</List>
<List>
<ListItem>
<span>{_t.textStartOnClick}</span>
<Toggle checked={isStartOnClick} onToggleChange={() => {props.onStartClick(!isStartOnClick)}} />
</ListItem>
<ListItem>
<span>{_t.textDelay}</span>
<Toggle checked={isDelay} onToggleChange={() => {props.onDelayCheck(!isDelay, _effectDelay)}} />
</ListItem>
<ListItem>
<ListItemCell className="flex-shrink-3">
<input type="range" className="range-slider-delay" min="0" max="300" value={stateRange} step="1"
onChange={(e) => {
changeRange(e.target.value);
props.onDelay(stateRange);
}} disabled={!isDelay} />
</ListItemCell>
<ListItemCell className="width-auto flex-shrink-0">
<span>{stateRange} {_t.textSec}</span>
</ListItemCell>
</ListItem>
</List>
<List>
<ListItem className="apply-all" href="#" onClick={props.onApplyAll}>{_t.textApplyAll}</ListItem>
</List>
</Page>
);
};
const PageEffect = props => {
const { t } = useTranslation();
const _t = t("View.Edit", { returnObjects: true });
const storeSlideSettings = props.storeSlideSettings;
const _effect = storeSlideSettings.effect;
const _arrEffect = props._arrEffect;
return (
<Page className="style-effect">
<Navbar title={_t.textEffect} backLink={_t.textBack} />
{_arrEffect.length ? (
<List mediaList>
{_arrEffect.map((elem, index) => {
return (
<ListItem key={index} radio name="editslide-effect" title={elem.displayValue} value={elem.value}
checked={elem.value === _effect} onChange={() => {
storeSlideSettings.changeEffect(elem.value);
let valueEffectTypes = props.fillEffectTypes(elem.value);
storeSlideSettings.changeType(valueEffectTypes);
props.onEffectClick(elem.value, valueEffectTypes);
}}></ListItem>
)
})}
</List>
) : null}
</Page>
);
};
const PageType= props => {
const { t } = useTranslation();
const _t = t("View.Edit", { returnObjects: true });
const _arrCurrentEffectTypes = props._arrCurrentEffectTypes;
const storeSlideSettings = props.storeSlideSettings;
const _effect = storeSlideSettings.effect;
const type = storeSlideSettings.type;
return (
<Page className="style-type">
<Navbar title={_t.textType} backLink={_t.textBack}>
<NavRight>
<Link icon='icon-expand-down' sheetClose></Link>
</NavRight>
</Navbar>
{_arrCurrentEffectTypes.length ? (
<List mediaList>
{_arrCurrentEffectTypes.map((elem, index) => {
return (
<ListItem key={index} radio name="editslide-effect-type" title={elem.displayValue} value={elem.value}
checked={elem.value === type} onChange={() => {
storeSlideSettings.changeType(elem.value);
props.onEffectTypeClick(elem.value, _effect);
}}>
</ListItem>
)
})}
</List>
) : null}
</Page>
);
};
const PageFillColor = props => {
const { t } = useTranslation();
const _t = t("View.Edit", { returnObjects: true });
const storeFocusObjects = props.storeFocusObjects;
const slideObject = storeFocusObjects.slideObject;
const storePalette = props.storePalette;
const storeSlideSettings = props.storeSlideSettings;
const customColors = storePalette.customColors;
const fillColor = storeSlideSettings.fillColor ? storeSlideSettings.fillColor : storeSlideSettings.getFillColor(slideObject);
const changeColor = (color, effectId, effectValue) => {
if (color !== 'empty') {
if (effectId !== undefined ) {
const newColor = {color: color, effectId: effectId, effectValue: effectValue};
props.onFillColor(newColor);
storeSlideSettings.changeFillColor(newColor);
} else {
props.onFillColor(color);
storeSlideSettings.changeFillColor(color);
}
} else {
// open custom color menu
props.f7router.navigate('/edit-custom-color/');
}
};
return (
<Page>
<Navbar title={_t.textFill} backLink={_t.textBack}>
<NavRight>
<Link icon='icon-expand-down' sheetClose></Link>
</NavRight>
</Navbar>
<ThemeColorPalette changeColor={changeColor} curColor={fillColor} customColors={customColors} transparent={true} />
<List>
<ListItem title={_t.textAddCustomColor} link={'/edit-custom-color/'} routeProps={{
onFillColor: props.onFillColor
}}></ListItem>
</List>
</Page>
);
};
const PageCustomFillColor = props => {
const { t } = useTranslation();
const _t = t('View.Edit', {returnObjects: true});
let fillColor = props.storeSlideSettings.fillColor;
if (typeof fillColor === 'object') {
fillColor = fillColor.color;
}
const onAddNewColor = (colors, color) => {
props.storePalette.changeCustomColors(colors);
props.onFillColor(color);
props.storeSlideSettings.changeFillColor(color);
props.f7router.back();
};
return (
<Page>
<Navbar title={_t.textCustomColor} backLink={_t.textBack} />
<CustomColorPicker currentColor={fillColor} onAddNewColor={onAddNewColor} />
</Page>
)
};
const Theme = inject("storeSlideSettings")(observer(PageTheme));
const Layout = inject("storeSlideSettings", "storeFocusObjects")(observer(PageLayout));
const Transition = inject("storeSlideSettings", "storeFocusObjects")(observer(PageTransition));
const Type = inject("storeSlideSettings", "storeFocusObjects")(observer(PageType));
const Effect = inject("storeSlideSettings", "storeFocusObjects")(observer(PageEffect));
const StyleFillColor = inject("storeSlideSettings", "storePalette", "storeFocusObjects")(observer(PageFillColor));
const CustomFillColor = inject("storeSlideSettings", "storePalette", "storeFocusObjects")(observer(PageCustomFillColor));
export {
EditSlide,
Theme,
Layout,
Transition,
Type,
Effect,
StyleFillColor,
CustomFillColor
};

32
apps/presentationeditor/mobile/src/view/edit/Effect.jsx
View file

@ -1,32 +0,0 @@
// import React, {useState} from "react";
// import { observer, inject } from "mobx-react";
// import { Page, Navbar, List, ListItem } from "framework7-react";
// import { useTranslation } from "react-i18next";
// const PageEffect= props => {
// const { t } = useTranslation();
// const _t = t("View.Edit", { returnObjects: true });
// console.log(props);
// const arrEffect = props.arrEffect;
// const effect = props.effect;
// return (
// <Page>
// <Navbar title={_t.textEffect} backLink={_t.textBack} />
// {arrEffect.length ? (
// <List mediaList>
// {arrEffect.map((elem, index) => {
// return (
// <ListItem key={index} radio name="editslide-effect" title={elem.displayValue} value={elem.value}
// checked={elem.value === effect}></ListItem>
// )
// })}
// </List>
// ) : null}
// </Page>
// );
// };
// const Effect = inject("storeEffect")(observer(PageEffect));
// export default Effect;

46
apps/presentationeditor/mobile/src/view/edit/Layout.jsx
View file

@ -1,46 +0,0 @@
import React from "react";
import { observer, inject } from "mobx-react";
import { Page, Navbar, List, ListItem, NavRight, Link } from "framework7-react";
import { useTranslation } from "react-i18next";
const PageLayout = props => {
const { t } = useTranslation();
const _t = t("View.Edit", { returnObjects: true });
const storeFocusObjects = props.storeFocusObjects;
const storeLayout = props.storeLayout;
storeLayout.changeSlideLayoutIndex(storeFocusObjects.slideObject.get_LayoutIndex());
const arrayLayouts = JSON.parse(JSON.stringify(storeLayout.arrayLayouts));
const slideLayoutIndex = storeLayout.slideLayoutIndex;
// console.log(slideLayoutIndex);
// console.log(arrayLayouts);
return (
<Page className="slide-layout">
<Navbar title={_t.textLayout} backLink={_t.textBack}>
<NavRight>
<Link icon='icon-expand-down' sheetClose></Link>
</NavRight>
</Navbar>
{arrayLayouts.length ? (
<List className="slide-layout__list">
{arrayLayouts.map((elem, index) => {
return (
<ListItem key={index} className={slideLayoutIndex === index ? "active" : ""}
onClick={() => {
storeLayout.changeSlideLayoutIndex(index);
props.onLayoutClick(index);
}}>
<img src={elem.Image} style={{width: elem.Width, height: elem.Height}} alt=""/>
</ListItem>
)
})}
</List>
) : null}
</Page>
);
};
const Layout = inject("storeLayout", "storeFocusObjects")(observer(PageLayout));
export default Layout;

78
apps/presentationeditor/mobile/src/view/edit/StyleSlideSettings.jsx
View file

@ -1,78 +0,0 @@
import React from "react";
import { observer, inject } from "mobx-react";
import { Page, Navbar, List, ListItem, NavRight, Link } from "framework7-react";
import { useTranslation } from "react-i18next";
import { ThemeColorPalette, CustomColorPicker } from '../../../../../common/mobile/lib/component/ThemeColorPalette.jsx';
const PageFillColor = props => {
const { t } = useTranslation();
const _t = t("View.Edit", { returnObjects: true });
const storeFocusObjects = props.storeFocusObjects;
const slideObject = storeFocusObjects.slideObject;
const storePalette = props.storePalette;
const storeSlideStyle = props.storeSlideStyle;
const customColors = storePalette.customColors;
const fillColor = storeSlideStyle.fillColor ? storeSlideStyle.fillColor : storeSlideStyle.getFillColor(slideObject);
const changeColor = (color, effectId, effectValue) => {
if (color !== 'empty') {
if (effectId !== undefined ) {
const newColor = {color: color, effectId: effectId, effectValue: effectValue};
props.onFillColor(newColor);
storeSlideStyle.changeFillColor(newColor);
} else {
props.onFillColor(color);
storeSlideStyle.changeFillColor(color);
}
} else {
// open custom color menu
props.f7router.navigate('/edit-custom-color/');
}
};
return (
<Page>
<Navbar title={_t.textFill} backLink={_t.textBack}>
<NavRight>
<Link icon='icon-expand-down' sheetClose></Link>
</NavRight>
</Navbar>
<ThemeColorPalette changeColor={changeColor} curColor={fillColor} customColors={customColors} transparent={true} />
<List>
<ListItem title={_t.textAddCustomColor} link={'/edit-custom-color/'} routeProps={{
onFillColor: props.onFillColor
}}></ListItem>
</List>
</Page>
);
};
const PageCustomFillColor = props => {
const { t } = useTranslation();
const _t = t('View.Edit', {returnObjects: true});
let fillColor = props.storeSlideStyle.fillColor;
if (typeof fillColor === 'object') {
fillColor = fillColor.color;
}
const onAddNewColor = (colors, color) => {
props.storePalette.changeCustomColors(colors);
props.onFillColor(color);
props.storeSlideStyle.changeFillColor(color);
props.f7router.back();
};
return (
<Page>
<Navbar title={_t.textCustomColor} backLink={_t.textBack} />
<CustomColorPicker currentColor={fillColor} onAddNewColor={onAddNewColor} />
</Page>
)
};
const StyleFillColor = inject("storeSlideStyle", "storePalette", "storeFocusObjects")(observer(PageFillColor));
const CustomFillColor = inject("storeSlideStyle", "storePalette", "storeFocusObjects")(observer(PageCustomFillColor));
export { StyleFillColor, CustomFillColor };

57
apps/presentationeditor/mobile/src/view/edit/Theme.jsx
View file

@ -1,57 +0,0 @@
import React from "react";
import { observer, inject } from "mobx-react";
import { Page, Navbar, List, ListItem, NavRight, Link } from "framework7-react";
import { useTranslation } from "react-i18next";
const PageTheme = props => {
const { t } = useTranslation();
const _t = t("View.Edit", { returnObjects: true });
const store = props.storeTheme;
const arrayThemes = JSON.parse(JSON.stringify(store.arrayThemes));
const slideThemeIndex = store.slideThemeIndex;
const defaultThemes = arrayThemes[0];
const docThemes = arrayThemes[1];
// console.log(slideThemeIndex);
// console.log(arrayThemes);
return (
<Page className="slide-theme">
<Navbar title={_t.textTheme} backLink={_t.textBack}>
<NavRight>
<Link icon='icon-expand-down' sheetClose></Link>
</NavRight>
</Navbar>
{arrayThemes.length ? (
<List className="slide-theme__list">
{defaultThemes.map((elem, index) => {
return (
<ListItem key={elem.Index} className={elem.Index === slideThemeIndex ? "item-theme active" : "item-theme"}
style={{backgroundPosition: "0 " + index * -38 + "px"}}
onClick={() => {
store.changeSlideThemeIndex(elem.Index);
props.onThemeClick(elem.Index);
}}>
</ListItem>
);
})}
{docThemes.map((elem, index) => {
return (
<ListItem key={elem.Index} className={elem.Index === slideThemeIndex ? "item-theme active" : "item-theme"}
style={{backgroundPosition: "0 -0px", backgroundImage: "url(" + elem.ThemeInfo.Thumbnail + ")"}}
onClick={() => {
store.changeSlideThemeIndex(elem.Index);
props.onThemeClick(elem.Index);
}}>
</ListItem>
);
})}
</List>
) : null}
</Page>
);
};
const Theme = inject("storeTheme")(observer(PageTheme));
export default Theme;

250
apps/presentationeditor/mobile/src/view/edit/Transition.jsx
View file

@ -1,250 +0,0 @@
import React, {useState} from "react";
import { observer, inject } from "mobx-react";
import { Page, Navbar, List, ListItem, NavRight, Link, Toggle, Range, ListItemCell } from "framework7-react";
import { useTranslation } from "react-i18next";
const PageTransition = props => {
const { t } = useTranslation();
const _t = t("View.Edit", { returnObjects: true });
const _arrEffect = [
{displayValue: _t.textNone, value: Asc.c_oAscSlideTransitionTypes.None},
{displayValue: _t.textFade, value: Asc.c_oAscSlideTransitionTypes.Fade},
{displayValue: _t.textPush, value: Asc.c_oAscSlideTransitionTypes.Push},
{displayValue: _t.textWipe, value: Asc.c_oAscSlideTransitionTypes.Wipe},
{displayValue: _t.textSplit, value: Asc.c_oAscSlideTransitionTypes.Split},
{displayValue: _t.textUnCover, value: Asc.c_oAscSlideTransitionTypes.UnCover},
{displayValue: _t.textCover, value: Asc.c_oAscSlideTransitionTypes.Cover},
{displayValue: _t.textClock, value: Asc.c_oAscSlideTransitionTypes.Clock},
{displayValue: _t.textZoom, value: Asc.c_oAscSlideTransitionTypes.Zoom}
];
const _arrEffectType = [
{displayValue: _t.textSmoothly, value: Asc.c_oAscSlideTransitionParams.Fade_Smoothly},
{displayValue: _t.textBlack, value: Asc.c_oAscSlideTransitionParams.Fade_Through_Black},
{displayValue: _t.textLeft, value: Asc.c_oAscSlideTransitionParams.Param_Left},
{displayValue: _t.textTop, value: Asc.c_oAscSlideTransitionParams.Param_Top},
{displayValue: _t.textRight, value: Asc.c_oAscSlideTransitionParams.Param_Right},
{displayValue: _t.textBottom, value: Asc.c_oAscSlideTransitionParams.Param_Bottom},
{displayValue: _t.textTopLeft, value: Asc.c_oAscSlideTransitionParams.Param_TopLeft},
{displayValue: _t.textTopRight, value: Asc.c_oAscSlideTransitionParams.Param_TopRight},
{displayValue: _t.textBottomLeft, value: Asc.c_oAscSlideTransitionParams.Param_BottomLeft},
{displayValue: _t.textBottomRight, value: Asc.c_oAscSlideTransitionParams.Param_BottomRight},
{displayValue: _t.textVerticalIn, value: Asc.c_oAscSlideTransitionParams.Split_VerticalIn},
{displayValue: _t.textVerticalOut, value: Asc.c_oAscSlideTransitionParams.Split_VerticalOut},
{displayValue: _t.textHorizontalIn, value: Asc.c_oAscSlideTransitionParams.Split_HorizontalIn},
{displayValue: _t.textHorizontalOut, value: Asc.c_oAscSlideTransitionParams.Split_HorizontalOut},
{displayValue: _t.textClockwise, value: Asc.c_oAscSlideTransitionParams.Clock_Clockwise},
{displayValue: _t.textCounterclockwise, value: Asc.c_oAscSlideTransitionParams.Clock_Counterclockwise},
{displayValue: _t.textWedge, value: Asc.c_oAscSlideTransitionParams.Clock_Wedge},
{displayValue: _t.textZoomIn, value: Asc.c_oAscSlideTransitionParams.Zoom_In},
{displayValue: _t.textZoomOut, value: Asc.c_oAscSlideTransitionParams.Zoom_Out},
{displayValue: _t.textZoomRotate, value: Asc.c_oAscSlideTransitionParams.Zoom_AndRotate}
];
let _arrCurrentEffectTypes = [];
const fillEffectTypes = type => {
_arrCurrentEffectTypes = [];
switch (type) {
case Asc.c_oAscSlideTransitionTypes.Fade:
_arrCurrentEffectTypes.push(_arrEffectType[0], _arrEffectType[1]);
break;
case Asc.c_oAscSlideTransitionTypes.Push:
_arrCurrentEffectTypes = _arrEffectType.slice(2, 6);
break;
case Asc.c_oAscSlideTransitionTypes.Wipe:
_arrCurrentEffectTypes = _arrEffectType.slice(2, 10);
break;
case Asc.c_oAscSlideTransitionTypes.Split:
_arrCurrentEffectTypes = _arrEffectType.slice(10, 14);
break;
case Asc.c_oAscSlideTransitionTypes.UnCover:
_arrCurrentEffectTypes = _arrEffectType.slice(2, 10);
break;
case Asc.c_oAscSlideTransitionTypes.Cover:
_arrCurrentEffectTypes = _arrEffectType.slice(2, 10);
break;
case Asc.c_oAscSlideTransitionTypes.Clock:
_arrCurrentEffectTypes = _arrEffectType.slice(14, 17);
break;
case Asc.c_oAscSlideTransitionTypes.Zoom:
_arrCurrentEffectTypes = _arrEffectType.slice(17);
break;
}
return (_arrCurrentEffectTypes.length > 0) ? _arrCurrentEffectTypes[0].value : -1;
};
const getEffectName = effect => {
for (var i=0; i < _arrEffect.length; i++) {
if (_arrEffect[i].value == effect) return _arrEffect[i].displayValue;
}
return '';
};
const getEffectTypeName = type => {
for (var i=0; i < _arrCurrentEffectTypes.length; i++) {
if (_arrCurrentEffectTypes[i].value == type) return _arrCurrentEffectTypes[i].displayValue;
}
return '';
};
const storeFocusObjects = props.storeFocusObjects;
const storeTransition = props.storeTransition;
const transitionObj = storeFocusObjects.slideObject.get_transition();
if(!storeTransition.effect) {
storeTransition.changeEffect(transitionObj.get_TransitionType());
}
const _effect = storeTransition.effect;
const valueEffectTypes = fillEffectTypes(_effect);
if(!storeTransition.type) {
storeTransition.changeType(valueEffectTypes);
}
let _effectDelay = transitionObj.get_SlideAdvanceDuration();
const [stateRange, changeRange] = useState((_effectDelay !== null && _effectDelay !== undefined) ? parseInt(_effectDelay / 1000.) : 0);
const isDelay = transitionObj.get_SlideAdvanceAfter();
const isStartOnClick = transitionObj.get_SlideAdvanceOnMouseClick();
const nameEffect = getEffectName(_effect);
const _effectType = transitionObj.get_TransitionOption();
const nameEffectType = getEffectTypeName(_effectType);
const _effectDuration = transitionObj.get_TransitionDuration();
return (
<Page className="slide-transition">
<Navbar title={_t.textTransition} backLink={_t.textBack}>
<NavRight>
<Link icon='icon-expand-down' sheetClose></Link>
</NavRight>
</Navbar>
<List>
<ListItem link="/effect/" title={_t.textEffect} after={nameEffect} routeProps={{
_arrEffect,
onEffectClick: props.onEffectClick,
fillEffectTypes
}}></ListItem>
<ListItem link="/type/" title={_t.textType}
after={_effect != Asc.c_oAscSlideTransitionTypes.None ? nameEffectType : ''}
disabled={_effect == Asc.c_oAscSlideTransitionTypes.None} routeProps={{
_arrCurrentEffectTypes,
onEffectTypeClick: props.onEffectTypeClick
}}>
</ListItem>
<ListItem title={_t.textDuration} disabled={_effect == Asc.c_oAscSlideTransitionTypes.None}>
<div slot="after" className="splitter">
<label>{(_effectDuration !== null && _effectDuration !== undefined) ? (parseInt(_effectDuration / 1000.) + ' ' + _t.textSec) : ''}</label>
<p className="buttons-row">
<span className="button" onClick={() => {
let duration = parseInt(_effectDuration / 1000);
duration = Math.max(0, --duration);
props.changeDuration(duration);
}}>-</span>
<span className="button" onClick={() => {
let duration = parseInt(_effectDuration / 1000);
duration = Math.min(300, ++duration);
props.changeDuration(duration);
}}>+</span>
</p>
</div>
</ListItem>
</List>
<List>
<ListItem>
<span>{_t.textStartOnClick}</span>
<Toggle checked={isStartOnClick} onToggleChange={() => {props.onStartClick(!isStartOnClick)}} />
</ListItem>
<ListItem>
<span>{_t.textDelay}</span>
<Toggle checked={isDelay} onToggleChange={() => {props.onDelayCheck(!isDelay, _effectDelay)}} />
</ListItem>
<ListItem>
<ListItemCell className="flex-shrink-3">
<input type="range" className="range-slider-delay" min="0" max="300" value={stateRange} step="1"
onChange={(e) => {
changeRange(e.target.value);
props.onDelay(stateRange);
}} disabled={!isDelay} />
</ListItemCell>
<ListItemCell className="width-auto flex-shrink-0">
<span>{stateRange} {_t.textSec}</span>
</ListItemCell>
</ListItem>
</List>
<List className="apply-all">
<ListItem className="apply-all__elem" href="#" onClick={props.onApplyAll}>{_t.textApplyAll}</ListItem>
</List>
</Page>
);
};
const PageEffect = props => {
const { t } = useTranslation();
const _t = t("View.Edit", { returnObjects: true });
const storeTransition = props.storeTransition;
const _effect = storeTransition.effect;
const _arrEffect = props._arrEffect;
return (
<Page>
<Navbar title={_t.textEffect} backLink={_t.textBack} />
{_arrEffect.length ? (
<List mediaList>
{_arrEffect.map((elem, index) => {
return (
<ListItem key={index} radio name="editslide-effect" title={elem.displayValue} value={elem.value}
checked={elem.value === _effect} onChange={() => {
storeTransition.changeEffect(elem.value);
let valueEffectTypes = props.fillEffectTypes(elem.value);
storeTransition.changeType(valueEffectTypes);
props.onEffectClick(elem.value, valueEffectTypes);
}}></ListItem>
)
})}
</List>
) : null}
</Page>
);
};
const PageType= props => {
const { t } = useTranslation();
const _t = t("View.Edit", { returnObjects: true });
const _arrCurrentEffectTypes = props._arrCurrentEffectTypes;
const storeTransition = props.storeTransition;
const _effect = storeTransition.effect;
const type = storeTransition.type;
return (
<Page>
<Navbar title={_t.textType} backLink={_t.textBack}>
<NavRight>
<Link icon='icon-expand-down' sheetClose></Link>
</NavRight>
</Navbar>
{_arrCurrentEffectTypes.length ? (
<List mediaList>
{_arrCurrentEffectTypes.map((elem, index) => {
return (
<ListItem key={index} radio name="editslide-effect-type" title={elem.displayValue} value={elem.value}
checked={elem.value === type} onChange={() => {
storeTransition.changeType(elem.value);
props.onEffectTypeClick(elem.value, _effect);
}}>
</ListItem>
)
})}
</List>
) : null}
</Page>
);
};
const Effect = inject("storeTransition", "storeFocusObjects")(observer(PageEffect));
const Type = inject("storeTransition", "storeFocusObjects")(observer(PageType));
const Transition = inject("storeTransition", "storeFocusObjects")(observer(PageTransition));
export {Transition, Effect, Type};