[PE mobile] Make Transition Settings
This commit is contained in:
parent
57b7d0c410
commit
b948e839db
|
@ -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"
|
||||
}
|
||||
}
|
||||
}
|
|
@ -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());
|
||||
}
|
||||
});
|
||||
|
||||
|
|
|
@ -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;
|
|
@ -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;
|
||||
}
|
||||
}
|
|
@ -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>
|
||||
);
|
||||
|
|
Loading…
Reference in a new issue