[PE mobile] Make Transition Settings

This commit is contained in:
SergeyEzhin 2020-12-29 02:09:59 +03:00
parent 57b7d0c410
commit b948e839db
5 changed files with 220 additions and 44 deletions

View file

@ -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"
}
}
}

View file

@ -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());
}
});

View file

@ -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 (
<Transition />
<Transition
onApplyAll={this.onApplyAll}
onStartClick={this.onStartClick}
onDelayCheck={this.onDelayCheck}
onDelay={this.onDelay}
/>
);
}
}
// const initTransitionView = (timing) => {
// }
export default TransitionController;

View file

@ -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;
}
}

View file

@ -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 (
<Page className="slide-transition">
<Navbar title={_t.textTransition} backLink={_t.textBack}>
@ -23,16 +116,28 @@ const PageTransition = props => {
</NavRight>
</Navbar>
<List>
<ListItem link="/effect/" title={_t.textEffect} after="None"></ListItem>
<ListItem link="/type/" title={_t.textType}>
<ListItem link="/effect/" title={_t.textEffect} after={nameEffect}></ListItem>
<ListItem link="/type/" title={_t.textType}
after={_effect != Asc.c_oAscSlideTransitionTypes.None ? nameEffectType : ''}
disabled={_effect == Asc.c_oAscSlideTransitionTypes.None}>
<div slot="after"></div>
</ListItem>
<ListItem title={_t.textDuration}>
<ListItem title={_t.textDuration} disabled={_effect == Asc.c_oAscSlideTransitionTypes.None}>
<div slot="after" className="splitter">
<label>2 s</label>
<label>{(_effectDuration !== null && _effectDuration !== undefined) ? (parseInt(_effectDuration / 1000.) + ' ' + _t.textSec) : ''}</label>
<p className="buttons-row">
<span className="button">-</span>
<span className="button">+</span>
<span className="button decrement" onClick={() => {
let duration = parseInt(_effectDuration / 1000);
duration = Math.max(0, --duration);
_effectDuration = duration * 1000;
props.changeDuration(_effectDuration);
}}>-</span>
<span className="button increment" onClick={() => {
let duration = parseInt(_effectDuration / 1000);
duration = Math.min(300, ++duration);
_effectDuration = duration * 1000;
props.changeDuration(_effectDuration);
}}>+</span>
</p>
</div>
</ListItem>
@ -40,23 +145,33 @@ const PageTransition = props => {
<List>
<ListItem>
<span>{_t.textStartOnClick}</span>
<Toggle />
<Toggle checked={isStartOnClick} onChange={() => {
store.toggleStartOnClick();
// props.onStartClick(isStartOnClick);
}} />
</ListItem>
<ListItem>
<span>{_t.textDelay}</span>
<Toggle checked={isDelay} onChange={store.toggleDelay.bind(store)} />
<Toggle checked={isDelay} onChange={() => {
store.toggleDelay();
// props.onDelayCheck(isDelay, _effectDelay);
}} />
</ListItem>
<ListItem>
<ListItemCell className="flex-shrink-3">
<Range min={0} max={300} step={1} value={stateRange} onRangeChange={changeRange.bind(this)} disabled={!isDelay}></Range>
<Range min={0} max={300} step={1} value={stateRange} onRangeChange={() => {
// changeRange()
// _effectDelay = stateRange * 1000;
// props.onDelay(_effectDelay);
}} disabled={!isDelay}></Range>
</ListItemCell>
<ListItemCell className="width-auto flex-shrink-0">
<span>{stateRange} s</span>
<span>{stateRange} {_t.textSec}</span>
</ListItemCell>
</ListItem>
</List>
<List>
<ListItem className="slide-apply-all">{_t.textApplyAll}</ListItem>
<ListItem className="slide-apply-all" onClick={props.onApplyAll}>{_t.textApplyAll}</ListItem>
</List>
</Page>
);