diff --git a/apps/presentationeditor/mobile/locale/en.json b/apps/presentationeditor/mobile/locale/en.json index 5c4503d75..0e99c1e05 100644 --- a/apps/presentationeditor/mobile/locale/en.json +++ b/apps/presentationeditor/mobile/locale/en.json @@ -92,7 +92,37 @@ "textDuration": "Duration", "textStartOnClick": "Start On Click", "textDelay": "Delay", - "textApplyAll": "Apply to All Slides" + "textApplyAll": "Apply to All Slides", + "textNone": "None", + "textFade": "Fade", + "textPush": "Push", + "textWipe": "Wipe", + "textSplit": "Split", + "textUnCover": "UnCover", + "textCover": "Cover", + "textClock": "Clock", + "textZoom": "Zoom", + "textSmoothly": "Smoothly", + "textBlack": "Through Black", + "textLeft": "Left", + "textTop": "Top", + "textRight": "Right", + "textBottom": "Bottom", + "textTopLeft": "Top-Left", + "textTopRight": "Top-Right", + "textBottomLeft": "Bottom-Left", + "textBottomRight": "Bottom-Right", + "textVerticalIn": "Vertical In", + "textVerticalOut": "Vertical Out", + "textHorizontalIn": "Horizontal In", + "textHorizontalOut": "Horizontal Out", + "textClockwise": "Clockwise", + "textCounterclockwise": "Counterclockwise", + "textWedge": "Wedge", + "textZoomIn": "Zoom In", + "textZoomOut": "Zoom Out", + "textZoomRotate": "Zoom and Rotate", + "textSec": "s" } } } \ No newline at end of file diff --git a/apps/presentationeditor/mobile/src/controller/Main.jsx b/apps/presentationeditor/mobile/src/controller/Main.jsx index ae7481d58..78f322d36 100644 --- a/apps/presentationeditor/mobile/src/controller/Main.jsx +++ b/apps/presentationeditor/mobile/src/controller/Main.jsx @@ -207,7 +207,7 @@ class MainController extends Component { storeLayout.changeSlideLayoutIndex(slideObject.get_LayoutIndex()); // const timing = slideObject.get_transition(); // console.log(timing); - storeTransition.addTransitionObj(slideObject.get_transition()); + storeTransition.addTransition(slideObject.get_transition()); } }); diff --git a/apps/presentationeditor/mobile/src/controller/edit/Transition.jsx b/apps/presentationeditor/mobile/src/controller/edit/Transition.jsx index 57f2674bc..644c280ea 100644 --- a/apps/presentationeditor/mobile/src/controller/edit/Transition.jsx +++ b/apps/presentationeditor/mobile/src/controller/edit/Transition.jsx @@ -6,38 +6,64 @@ class TransitionController extends Component { super(props); } - initTransitionView(timing) { - - const _effect = timing.get_TransitionType(); - // me.getView('EditSlide').fillEffectTypes(_effect); - // $('#edit-slide-effect .item-after').text(me.getView('EditSlide').getEffectName(_effect)); - // $('#edit-slide-effect-type').toggleClass('disabled', _effect == Asc.c_oAscSlideTransitionTypes.None); - // $('#edit-slide-duration').toggleClass('disabled', _effect == Asc.c_oAscSlideTransitionTypes.None); + onApplyAll() { + const api = Common.EditorApi.get(); + console.log(api); + // api.SlideTimingApplyToAll(); + }; - // _effectType = timing.get_TransitionOption(); - // $('#edit-slide-effect-type .item-after').text((_effect != Asc.c_oAscSlideTransitionTypes.None) ? me.getView('EditSlide').getEffectTypeName(_effectType) : ''); + changeDuration(_effectDuration) { + const api = Common.EditorApi.get(); + let props = new Asc.CAscSlideProps(), + timing = new Asc.CAscSlideTiming(); - // _effectDuration = timing.get_TransitionDuration(); - // $('#edit-slide-duration .item-after label').text((_effectDuration!==null && _effectDuration!==undefined) ? (parseInt(_effectDuration/1000.) + ' ' + me.textSec) : ''); + timing.put_TransitionDuration(_effectDuration); + props.put_timing(timing); + api.SetSlideProps(props); + }; - // $('#edit-slide-start-click input:checkbox').prop('checked', !!timing.get_SlideAdvanceOnMouseClick()); - // $('#edit-slide-delay input:checkbox').prop('checked', !!timing.get_SlideAdvanceAfter()); - // $('#edit-slide-delay .item-content:nth-child(2)').toggleClass('disabled',!timing.get_SlideAdvanceAfter()); + onStartClick(value) { + const api = Common.EditorApi.get(); + let props = new Asc.CAscSlideProps(), + timing = new Asc.CAscSlideTiming(); - // _effectDelay = timing.get_SlideAdvanceDuration(); - // $('#edit-slide-delay .item-content:nth-child(2) .item-after').text((_effectDelay!==null && _effectDelay!==undefined) ? (parseInt(_effectDelay/1000.) + ' ' + me.textSec) : ''); - // $('#edit-slide-delay .item-content:nth-child(2) input').val([(_effectDelay!==null && _effectDelay!==undefined) ? parseInt(_effectDelay/1000.) : 0]); + timing.put_SlideAdvanceOnMouseClick(value); + props.put_timing(timing); + api.SetSlideProps(props); + }; + + onDelayCheck(value, _effectDelay) { + const api = Common.EditorApi.get(); + let props = new Asc.CAscSlideProps(), + timing = new Asc.CAscSlideTiming(); + + timing.put_SlideAdvanceAfter(value); + timing.put_SlideAdvanceDuration(_effectDelay); + props.put_timing(timing); + api.SetSlideProps(props); } + onDelay(_effectDelay) { + const api = Common.EditorApi.get(); + let props = new Asc.CAscSlideProps(), + timing = new Asc.CAscSlideTiming(); + + timing.put_SlideAdvanceDuration(_effectDelay); + props.put_timing(timing); + api.SetSlideProps(props); + }; + render() { return ( - + ); } } -// const initTransitionView = (timing) => { - -// } export default TransitionController; \ No newline at end of file diff --git a/apps/presentationeditor/mobile/src/store/transition.js b/apps/presentationeditor/mobile/src/store/transition.js index 912275696..e7e511942 100644 --- a/apps/presentationeditor/mobile/src/store/transition.js +++ b/apps/presentationeditor/mobile/src/store/transition.js @@ -2,14 +2,19 @@ import {action, observable} from 'mobx'; export class storeTransition { + @observable transition = {}; @observable isDelay = false; - @observable transitionObj = {}; + @observable isStartOnClick = true; @action toggleDelay() { this.isDelay = !this.isDelay; } - @action addTransitionObj(obj) { - this.transitionObj = obj; + @action toggleStartOnClick() { + this.isStartOnClick = !this.isStartOnClick; + } + + @action addTransition(obj) { + this.transition = obj; } } \ 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 index c663be886..571fd62b3 100644 --- a/apps/presentationeditor/mobile/src/view/edit/Transition.jsx +++ b/apps/presentationeditor/mobile/src/view/edit/Transition.jsx @@ -6,15 +6,108 @@ import { useTranslation } from "react-i18next"; const PageTransition = props => { const { t } = useTranslation(); const _t = t("View.Edit", { returnObjects: true }); - const [stateRange, changeRange] = useState(0); const store = props.storeTransition; + const transition = store.transition; + const _effect = transition.get_TransitionType(); + + let _arrCurrentEffectTypes; + let _effectDelay = transition.get_SlideAdvanceDuration(); + const [stateRange, changeRange] = useState((_effectDelay !== null && _effectDelay !== undefined) ? parseInt(_effectDelay / 1000.) : 0); + const isDelay = store.isDelay; - // const dataApp = props.getAppProps(); - // const dataModified = props.getModified; - // const dataModifiedBy = props.getModifiedBy; - // const creators = props.getCreators; - // const dataDoc = JSON.parse(JSON.stringify(storeInfo.dataDoc)); - + const isStartOnClick = store.isStartOnClick; + + 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} + ]; + + 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 nameEffect = getEffectName(_effect); + const arrTypesEffect = fillEffectTypes(_effect); + const _effectType = transition.get_TransitionOption(); + const nameEffectType = getEffectTypeName(_effectType); + const _effectDuration = transition.get_TransitionDuration(); + + // console.log(_effectType); + // console.log(_effectDuration); + // console.log(transition.get_SlideAdvanceOnMouseClick()); + // console.log(transition.get_SlideAdvanceAfter()); + return ( @@ -23,16 +116,28 @@ const PageTransition = props => { - - + +
- +
- +

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

@@ -40,23 +145,33 @@ const PageTransition = props => { {_t.textStartOnClick} - + { + store.toggleStartOnClick(); + // props.onStartClick(isStartOnClick); + }} /> {_t.textDelay} - + { + store.toggleDelay(); + // props.onDelayCheck(isDelay, _effectDelay); + }} /> - + { + // changeRange() + // _effectDelay = stateRange * 1000; + // props.onDelay(_effectDelay); + }} disabled={!isDelay}> - {stateRange} s + {stateRange} {_t.textSec} - {_t.textApplyAll} + {_t.textApplyAll} );