From 26a4e263cb86d5b07f808bf0b3baddd6d3fa696d Mon Sep 17 00:00:00 2001 From: SergeyEzhin Date: Fri, 15 Jan 2021 19:04:19 +0300 Subject: [PATCH] [PE mobile] Refactoring Slide Settings, added duplicates and remove slides --- .../resources/less/common-material.less | 17 +- apps/common/mobile/resources/less/common.less | 32 +- apps/presentationeditor/mobile/locale/en.json | 5 +- .../mobile/src/controller/Main.jsx | 20 +- .../mobile/src/controller/edit/EditSlide.jsx | 147 +++++- .../mobile/src/controller/edit/Effect.jsx | 16 - .../mobile/src/controller/edit/Layout.jsx | 21 - .../controller/edit/StyleSlideSettings.jsx | 36 -- .../mobile/src/controller/edit/Theme.jsx | 21 - .../mobile/src/controller/edit/Transition.jsx | 101 ---- .../mobile/src/store/layout.js | 16 - .../mobile/src/store/mainStore.js | 10 +- .../store/{styleSlide.js => slideSettings.js} | 36 +- .../mobile/src/store/theme.js | 15 - .../mobile/src/store/transition.js | 15 - .../mobile/src/view/edit/Edit.jsx | 17 +- .../mobile/src/view/edit/EditSlide.jsx | 446 +++++++++++++++++- .../mobile/src/view/edit/Effect.jsx | 32 -- .../mobile/src/view/edit/Layout.jsx | 46 -- .../src/view/edit/StyleSlideSettings.jsx | 78 --- .../mobile/src/view/edit/Theme.jsx | 57 --- .../mobile/src/view/edit/Transition.jsx | 250 ---------- 22 files changed, 667 insertions(+), 767 deletions(-) delete mode 100644 apps/presentationeditor/mobile/src/controller/edit/Effect.jsx delete mode 100644 apps/presentationeditor/mobile/src/controller/edit/Layout.jsx delete mode 100644 apps/presentationeditor/mobile/src/controller/edit/StyleSlideSettings.jsx delete mode 100644 apps/presentationeditor/mobile/src/controller/edit/Theme.jsx delete mode 100644 apps/presentationeditor/mobile/src/controller/edit/Transition.jsx delete mode 100644 apps/presentationeditor/mobile/src/store/layout.js rename apps/presentationeditor/mobile/src/store/{styleSlide.js => slideSettings.js} (54%) delete mode 100644 apps/presentationeditor/mobile/src/store/theme.js delete mode 100644 apps/presentationeditor/mobile/src/store/transition.js delete mode 100644 apps/presentationeditor/mobile/src/view/edit/Effect.jsx delete mode 100644 apps/presentationeditor/mobile/src/view/edit/Layout.jsx delete mode 100644 apps/presentationeditor/mobile/src/view/edit/StyleSlideSettings.jsx delete mode 100644 apps/presentationeditor/mobile/src/view/edit/Theme.jsx delete mode 100644 apps/presentationeditor/mobile/src/view/edit/Transition.jsx diff --git a/apps/common/mobile/resources/less/common-material.less b/apps/common/mobile/resources/less/common-material.less index 514521372..a6344f00b 100644 --- a/apps/common/mobile/resources/less/common-material.less +++ b/apps/common/mobile/resources/less/common-material.less @@ -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); diff --git a/apps/common/mobile/resources/less/common.less b/apps/common/mobile/resources/less/common.less index 738a11e73..1616382a0 100644 --- a/apps/common/mobile/resources/less/common.less +++ b/apps/common/mobile/resources/less/common.less @@ -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; - border: 0; - .item-inner { - justify-content: center; - } - &__elem { +.list { + .apply-all, .duplicate-slide, .delete-slide { + border: 0; + .item-content { + padding-left: 0; + } + .item-inner { + justify-content: center; + padding-right: 0; + } .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; } diff --git a/apps/presentationeditor/mobile/locale/en.json b/apps/presentationeditor/mobile/locale/en.json index 7346accc1..261713f58 100644 --- a/apps/presentationeditor/mobile/locale/en.json +++ b/apps/presentationeditor/mobile/locale/en.json @@ -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": { diff --git a/apps/presentationeditor/mobile/src/controller/Main.jsx b/apps/presentationeditor/mobile/src/controller/Main.jsx index a2c62e767..983751bc6 100644 --- a/apps/presentationeditor/mobile/src/controller/Main.jsx +++ b/apps/presentationeditor/mobile/src/controller/Main.jsx @@ -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) => { diff --git a/apps/presentationeditor/mobile/src/controller/edit/EditSlide.jsx b/apps/presentationeditor/mobile/src/controller/edit/EditSlide.jsx index 8843e39b8..db1ae774c 100644 --- a/apps/presentationeditor/mobile/src/controller/edit/EditSlide.jsx +++ b/apps/presentationeditor/mobile/src/controller/edit/EditSlide.jsx @@ -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 ( - + ) } } diff --git a/apps/presentationeditor/mobile/src/controller/edit/Effect.jsx b/apps/presentationeditor/mobile/src/controller/edit/Effect.jsx deleted file mode 100644 index 65f529a03..000000000 --- a/apps/presentationeditor/mobile/src/controller/edit/Effect.jsx +++ /dev/null @@ -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 ( -// -// ); -// } -// } - -// export default EffectController; \ No newline at end of file diff --git a/apps/presentationeditor/mobile/src/controller/edit/Layout.jsx b/apps/presentationeditor/mobile/src/controller/edit/Layout.jsx deleted file mode 100644 index acc725bc6..000000000 --- a/apps/presentationeditor/mobile/src/controller/edit/Layout.jsx +++ /dev/null @@ -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 ( - - ); - } -} - -export default LayoutController; \ No newline at end of file diff --git a/apps/presentationeditor/mobile/src/controller/edit/StyleSlideSettings.jsx b/apps/presentationeditor/mobile/src/controller/edit/StyleSlideSettings.jsx deleted file mode 100644 index f2b998411..000000000 --- a/apps/presentationeditor/mobile/src/controller/edit/StyleSlideSettings.jsx +++ /dev/null @@ -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 ( - - ); - } -} - -export default StyleSlideController; \ No newline at end of file diff --git a/apps/presentationeditor/mobile/src/controller/edit/Theme.jsx b/apps/presentationeditor/mobile/src/controller/edit/Theme.jsx deleted file mode 100644 index 5f3d23392..000000000 --- a/apps/presentationeditor/mobile/src/controller/edit/Theme.jsx +++ /dev/null @@ -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 ( - - ); - } -} - -export default ThemeController; \ No newline at end of file diff --git a/apps/presentationeditor/mobile/src/controller/edit/Transition.jsx b/apps/presentationeditor/mobile/src/controller/edit/Transition.jsx deleted file mode 100644 index d9a217472..000000000 --- a/apps/presentationeditor/mobile/src/controller/edit/Transition.jsx +++ /dev/null @@ -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 ( - - ); - } -} - - -export default TransitionController; \ No newline at end of file diff --git a/apps/presentationeditor/mobile/src/store/layout.js b/apps/presentationeditor/mobile/src/store/layout.js deleted file mode 100644 index 4992a5b79..000000000 --- a/apps/presentationeditor/mobile/src/store/layout.js +++ /dev/null @@ -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; - } - -} \ No newline at end of file diff --git a/apps/presentationeditor/mobile/src/store/mainStore.js b/apps/presentationeditor/mobile/src/store/mainStore.js index 42e0e0d3b..c8eb32009 100644 --- a/apps/presentationeditor/mobile/src/store/mainStore.js +++ b/apps/presentationeditor/mobile/src/store/mainStore.js @@ -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(), diff --git a/apps/presentationeditor/mobile/src/store/styleSlide.js b/apps/presentationeditor/mobile/src/store/slideSettings.js similarity index 54% rename from apps/presentationeditor/mobile/src/store/styleSlide.js rename to apps/presentationeditor/mobile/src/store/slideSettings.js index 1d925b2be..0899b7bbc 100644 --- a/apps/presentationeditor/mobile/src/store/styleSlide.js +++ b/apps/presentationeditor/mobile/src/store/slideSettings.js @@ -1,8 +1,15 @@ -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) { let color = 'transparent'; @@ -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; + } } \ No newline at end of file diff --git a/apps/presentationeditor/mobile/src/store/theme.js b/apps/presentationeditor/mobile/src/store/theme.js deleted file mode 100644 index 226efc562..000000000 --- a/apps/presentationeditor/mobile/src/store/theme.js +++ /dev/null @@ -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; - } -} \ No newline at end of file diff --git a/apps/presentationeditor/mobile/src/store/transition.js b/apps/presentationeditor/mobile/src/store/transition.js deleted file mode 100644 index d537e66e6..000000000 --- a/apps/presentationeditor/mobile/src/store/transition.js +++ /dev/null @@ -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; - } -} \ No newline at end of file diff --git a/apps/presentationeditor/mobile/src/view/edit/Edit.jsx b/apps/presentationeditor/mobile/src/view/edit/Edit.jsx index f9b4a8eb2..795d2106c 100644 --- a/apps/presentationeditor/mobile/src/view/edit/Edit.jsx +++ b/apps/presentationeditor/mobile/src/view/edit/Edit.jsx @@ -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/', diff --git a/apps/presentationeditor/mobile/src/view/edit/EditSlide.jsx b/apps/presentationeditor/mobile/src/view/edit/EditSlide.jsx index b7f50e6ec..e464b1418 100644 --- a/apps/presentationeditor/mobile/src/view/edit/EditSlide.jsx +++ b/apps/presentationeditor/mobile/src/view/edit/EditSlide.jsx @@ -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 ( - - - - + + + + + + + {_t.textDuplicateSlide} + {_t.textDeleteSlide} ) }; -export {EditSlide}; \ No newline at end of file +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 ( + + + + + + + {arrayThemes.length ? ( + + {defaultThemes.map((elem, index) => { + return ( + { + storeSlideSettings.changeSlideThemeIndex(elem.Index); + props.onThemeClick(elem.Index); + }}> + + ); + })} + {docThemes.map((elem, index) => { + return ( + { + storeSlideSettings.changeSlideThemeIndex(elem.Index); + props.onThemeClick(elem.Index); + }}> + + ); + })} + + ) : null} + + ); +}; + +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 ( + + + + + + + {arrayLayouts.length ? ( + + {arrayLayouts.map((elem, index) => { + return ( + { + storeSlideSettings.changeSlideLayoutIndex(index); + props.onLayoutClick(index); + }}> + + + ) + })} + + ) : null} + + ); +}; + +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 ( + + + + + + + + + + + +
+ +

+ { + let duration = parseInt(_effectDuration / 1000); + duration = Math.max(0, --duration); + props.changeDuration(duration); + }}>- + { + let duration = parseInt(_effectDuration / 1000); + duration = Math.min(300, ++duration); + props.changeDuration(duration); + }}>+ +

+
+ + + + + {_t.textStartOnClick} + {props.onStartClick(!isStartOnClick)}} /> + + + {_t.textDelay} + {props.onDelayCheck(!isDelay, _effectDelay)}} /> + + + + { + changeRange(e.target.value); + props.onDelay(stateRange); + }} disabled={!isDelay} /> + + + {stateRange} {_t.textSec} + + + + + {_t.textApplyAll} + + + ); +}; + + +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 ( + + + {_arrEffect.length ? ( + + {_arrEffect.map((elem, index) => { + return ( + { + storeSlideSettings.changeEffect(elem.value); + let valueEffectTypes = props.fillEffectTypes(elem.value); + storeSlideSettings.changeType(valueEffectTypes); + props.onEffectClick(elem.value, valueEffectTypes); + }}> + ) + })} + + ) : null} + + ); +}; + +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 ( + + + + + + + {_arrCurrentEffectTypes.length ? ( + + {_arrCurrentEffectTypes.map((elem, index) => { + return ( + { + storeSlideSettings.changeType(elem.value); + props.onEffectTypeClick(elem.value, _effect); + }}> + + ) + })} + + ) : null} + + ); +}; + +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 ( + + + + + + + + + + + + ); +}; + +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 ( + + + + + ) +}; + +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 +}; \ No newline at end of file diff --git a/apps/presentationeditor/mobile/src/view/edit/Effect.jsx b/apps/presentationeditor/mobile/src/view/edit/Effect.jsx deleted file mode 100644 index 1557bf4a5..000000000 --- a/apps/presentationeditor/mobile/src/view/edit/Effect.jsx +++ /dev/null @@ -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 ( -// -// -// {arrEffect.length ? ( -// -// {arrEffect.map((elem, index) => { -// return ( -// -// ) -// })} -// -// ) : null} -// -// ); -// }; - -// const Effect = inject("storeEffect")(observer(PageEffect)); - -// export default Effect; \ No newline at end of file diff --git a/apps/presentationeditor/mobile/src/view/edit/Layout.jsx b/apps/presentationeditor/mobile/src/view/edit/Layout.jsx deleted file mode 100644 index b543fcbce..000000000 --- a/apps/presentationeditor/mobile/src/view/edit/Layout.jsx +++ /dev/null @@ -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 ( - - - - - - - {arrayLayouts.length ? ( - - {arrayLayouts.map((elem, index) => { - return ( - { - storeLayout.changeSlideLayoutIndex(index); - props.onLayoutClick(index); - }}> - - - ) - })} - - ) : null} - - ); -}; - -const Layout = inject("storeLayout", "storeFocusObjects")(observer(PageLayout)); - -export default Layout; \ No newline at end of file diff --git a/apps/presentationeditor/mobile/src/view/edit/StyleSlideSettings.jsx b/apps/presentationeditor/mobile/src/view/edit/StyleSlideSettings.jsx deleted file mode 100644 index 547e5b38e..000000000 --- a/apps/presentationeditor/mobile/src/view/edit/StyleSlideSettings.jsx +++ /dev/null @@ -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 ( - - - - - - - - - - - - ); -}; - -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 ( - - - - - ) -}; - -const StyleFillColor = inject("storeSlideStyle", "storePalette", "storeFocusObjects")(observer(PageFillColor)); -const CustomFillColor = inject("storeSlideStyle", "storePalette", "storeFocusObjects")(observer(PageCustomFillColor)); - -export { StyleFillColor, CustomFillColor }; \ No newline at end of file diff --git a/apps/presentationeditor/mobile/src/view/edit/Theme.jsx b/apps/presentationeditor/mobile/src/view/edit/Theme.jsx deleted file mode 100644 index 3fd828eea..000000000 --- a/apps/presentationeditor/mobile/src/view/edit/Theme.jsx +++ /dev/null @@ -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 ( - - - - - - - {arrayThemes.length ? ( - - {defaultThemes.map((elem, index) => { - return ( - { - store.changeSlideThemeIndex(elem.Index); - props.onThemeClick(elem.Index); - }}> - - ); - })} - {docThemes.map((elem, index) => { - return ( - { - store.changeSlideThemeIndex(elem.Index); - props.onThemeClick(elem.Index); - }}> - - ); - })} - - ) : null} - - ); -}; - -const Theme = inject("storeTheme")(observer(PageTheme)); - -export default Theme; \ No newline at end of file diff --git a/apps/presentationeditor/mobile/src/view/edit/Transition.jsx b/apps/presentationeditor/mobile/src/view/edit/Transition.jsx deleted file mode 100644 index 3767f503d..000000000 --- a/apps/presentationeditor/mobile/src/view/edit/Transition.jsx +++ /dev/null @@ -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 ( - - - - - - - - - - - -
- -

- { - let duration = parseInt(_effectDuration / 1000); - duration = Math.max(0, --duration); - props.changeDuration(duration); - }}>- - { - let duration = parseInt(_effectDuration / 1000); - duration = Math.min(300, ++duration); - props.changeDuration(duration); - }}>+ -

-
- - - - - {_t.textStartOnClick} - {props.onStartClick(!isStartOnClick)}} /> - - - {_t.textDelay} - {props.onDelayCheck(!isDelay, _effectDelay)}} /> - - - - { - changeRange(e.target.value); - props.onDelay(stateRange); - }} disabled={!isDelay} /> - - - {stateRange} {_t.textSec} - - - - - {_t.textApplyAll} - - - ); -}; - - -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 ( - - - {_arrEffect.length ? ( - - {_arrEffect.map((elem, index) => { - return ( - { - storeTransition.changeEffect(elem.value); - let valueEffectTypes = props.fillEffectTypes(elem.value); - storeTransition.changeType(valueEffectTypes); - props.onEffectClick(elem.value, valueEffectTypes); - }}> - ) - })} - - ) : null} - - ); -}; - -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 ( - - - - - - - {_arrCurrentEffectTypes.length ? ( - - {_arrCurrentEffectTypes.map((elem, index) => { - return ( - { - storeTransition.changeType(elem.value); - props.onEffectTypeClick(elem.value, _effect); - }}> - - ) - })} - - ) : null} - - ); -}; - -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}; \ No newline at end of file