[PE mobile] Corrected Link Settings and Presentation Settings
This commit is contained in:
SergeyEzhin
parent
c3dd451d7a
commit
0a36021498
|
|
@ -9,8 +9,14 @@ import { EditLink } from '../../view/edit/EditLink';
|
|||
class EditLinkController extends Component {
|
||||
constructor (props) {
|
||||
super(props);
|
||||
|
||||
const api = Common.EditorApi.get();
|
||||
|
||||
this.onEditLink = this.onEditLink.bind(this);
|
||||
this.onRemoveLink = this.onRemoveLink.bind(this);
|
||||
this.initLink = this.initLink.bind(this);
|
||||
this.slidesCount = api.getCountPages();
|
||||
this.initLink();
|
||||
}
|
||||
|
||||
closeModal () {
|
||||
|
|
@ -21,6 +27,58 @@ class EditLinkController extends Component {
|
|||
}
|
||||
}
|
||||
|
||||
initLink() {
|
||||
const api = Common.EditorApi.get();
|
||||
const linkObject = this.props.storeFocusObjects.linkObject;
|
||||
const url = linkObject.get_Value();
|
||||
const tooltip = linkObject.get_ToolTip();
|
||||
const display = linkObject.get_Text();
|
||||
|
||||
this.url = url;
|
||||
this.tooltip = tooltip;
|
||||
this.display = display;
|
||||
this.slideLink = 0;
|
||||
this.slideNum = 0;
|
||||
|
||||
let indAction;
|
||||
let slidesCount;
|
||||
let slideNum;
|
||||
|
||||
if(url === null || url === undefined || url === '') {
|
||||
this.typeLink = 1;
|
||||
}
|
||||
else {
|
||||
indAction = url.indexOf("ppaction://hlink");
|
||||
if(0 == indAction) {
|
||||
if (url == "ppaction://hlinkshowjump?jump=firstslide") {
|
||||
this.slideLink = 2;
|
||||
} else if (url == "ppaction://hlinkshowjump?jump=lastslide") {
|
||||
this.slideLink = 3;
|
||||
}
|
||||
else if (url == "ppaction://hlinkshowjump?jump=nextslide") {
|
||||
this.slideLink = 0;
|
||||
}
|
||||
else if (url == "ppaction://hlinkshowjump?jump=previousslide") {
|
||||
this.slideLink = 1;
|
||||
}
|
||||
else {
|
||||
this.slideLink = 4;
|
||||
slidesCount = api.getCountPages();
|
||||
let mask = "ppaction://hlinksldjumpslide",
|
||||
indSlide = url.indexOf(mask);
|
||||
if (0 == indSlide) {
|
||||
slideNum = parseInt(url.substring(mask.length));
|
||||
if (slideNum < 0) this.slideNum = 0;
|
||||
if (slideNum >= slidesCount) this.slideNum = slidesCount - 1;
|
||||
} else this.slideNum = 0;
|
||||
}
|
||||
this.typeLink = 0
|
||||
} else {
|
||||
this.typeLink = 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
onEditLink(type, linkInfo) {
|
||||
const api = Common.EditorApi.get();
|
||||
const { t } = this.props;
|
||||
|
|
@ -102,13 +160,21 @@ class EditLinkController extends Component {
|
|||
render () {
|
||||
return (
|
||||
<EditLink
|
||||
initLink={this.initLink}
|
||||
typeLink={this.typeLink}
|
||||
url={this.url}
|
||||
display={this.display}
|
||||
tooltip={this.tooltip}
|
||||
slideLink={this.slideLink}
|
||||
slideNum={this.slideNum}
|
||||
onEditLink={this.onEditLink}
|
||||
onRemoveLink={this.onRemoveLink}
|
||||
slidesCount={this.slidesCount}
|
||||
/>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
const EditLinkWithTranslation = withTranslation()(EditLinkController);
|
||||
const EditLinkWithTranslation = inject("storeFocusObjects")(observer(withTranslation()(EditLinkController)));
|
||||
|
||||
export {EditLinkWithTranslation as EditLinkController};
|
||||
|
|
@ -6,6 +6,7 @@ class PresentationSettingsController extends Component {
|
|||
constructor(props) {
|
||||
super(props);
|
||||
this.initSlideSize = this.initSlideSize.bind(this);
|
||||
this.onSlideSize = this.onSlideSize.bind(this);
|
||||
}
|
||||
|
||||
initSlideSize() {
|
||||
|
|
@ -18,7 +19,15 @@ class PresentationSettingsController extends Component {
|
|||
|
||||
onSlideSize(slideSizeArr) {
|
||||
const api = Common.EditorApi.get();
|
||||
api.changeSlideSize(slideSizeArr[0], slideSizeArr[1]);
|
||||
|
||||
let ratio = slideSizeArr[1] / slideSizeArr[0];
|
||||
let currentHeight = this.props.storePresentationSettings.currentPageSize.height;
|
||||
let currentPageSize = {
|
||||
width: (currentHeight || slideSizeArr[1]) / ratio,
|
||||
height: currentHeight
|
||||
};
|
||||
// api.changeSlideSize(slideSizeArr[0], slideSizeArr[1], slideSizeArr[2]);
|
||||
api.changeSlideSize(currentPageSize.width, currentPageSize.height, slideSizeArr[2]);
|
||||
}
|
||||
|
||||
// Color Schemes
|
||||
|
|
|
|||
|
|
@ -5,68 +5,4 @@ export class storeLinkSettings {
|
|||
@action canAddHyperlink (value) {
|
||||
this.canAddLink = value;
|
||||
}
|
||||
|
||||
@observable typeLink;
|
||||
@action changeLinkType(value) {
|
||||
this.typeLink = value;
|
||||
}
|
||||
|
||||
@observable slideLink;
|
||||
@action changeSlideLink(value) {
|
||||
this.slideLink = value;
|
||||
}
|
||||
|
||||
@observable slideNum;
|
||||
@action changeSlideNum(value) {
|
||||
this.slideNum = value;
|
||||
}
|
||||
|
||||
@observable slideName;
|
||||
@action changeSlideName(value) {
|
||||
this.slideName = value;
|
||||
}
|
||||
|
||||
initCategory(linkObject) {
|
||||
const url = linkObject.get_Value();
|
||||
const api = Common.EditorApi.get();
|
||||
|
||||
let indAction;
|
||||
let slidesCount;
|
||||
let slideNum;
|
||||
|
||||
if(url === null || url === undefined || url === '') {
|
||||
this.changeLinkType(1);
|
||||
}
|
||||
else {
|
||||
indAction = url.indexOf("ppaction://hlink");
|
||||
if(0 == indAction) {
|
||||
if (url == "ppaction://hlinkshowjump?jump=firstslide") {
|
||||
this.changeSlideLink(2);
|
||||
} else if (url == "ppaction://hlinkshowjump?jump=lastslide") {
|
||||
this.changeSlideLink(3);
|
||||
}
|
||||
else if (url == "ppaction://hlinkshowjump?jump=nextslide") {
|
||||
this.changeSlideLink(0);
|
||||
}
|
||||
else if (url == "ppaction://hlinkshowjump?jump=previousslide") {
|
||||
this.changeSlideLink(1);
|
||||
}
|
||||
else {
|
||||
this.changeSlideLink(4);
|
||||
slidesCount = api.getCountPages();
|
||||
let mask = "ppaction://hlinksldjumpslide",
|
||||
indSlide = url.indexOf(mask);
|
||||
if (0 == indSlide) {
|
||||
slideNum = parseInt(url.substring(mask.length));
|
||||
if (slideNum < 0) this.changeSlideNum(0);
|
||||
if (slideNum >= slidesCount) this.changeSlideNum(slidesCount - 1);
|
||||
} else this.changeSlideNum(0);
|
||||
}
|
||||
this.changeLinkType(0);
|
||||
} else {
|
||||
this.changeLinkType(1);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,19 +1,23 @@
|
|||
import {action, observable} from 'mobx';
|
||||
|
||||
export class storePresentationSettings {
|
||||
slideSize = [[254, 190.5], [254, 143]];
|
||||
@observable slideSizes = [
|
||||
[9144000, 6858000, Asc.c_oAscSlideSZType.SzScreen4x3],
|
||||
[12192000, 6858000, Asc.c_oAscSlideSZType.SzCustom]
|
||||
];
|
||||
|
||||
@observable currentPageSize;
|
||||
@observable slideSizeIndex;
|
||||
|
||||
get getSlideSizes() {
|
||||
return this.slideSize;
|
||||
}
|
||||
|
||||
@action changeSizeIndex(width, height) {
|
||||
this.slideSize.forEach((array, index) => {
|
||||
if(Math.abs(array[0] - width) < 0.001 && Math.abs((array[1] - height)) < 0.001) {
|
||||
this.currentPageSize = {width, height};
|
||||
let ratio = height / width;
|
||||
|
||||
this.slideSizes.forEach((array, index) => {
|
||||
if(Math.abs(array[1] / array[0] - ratio) < 0.001) {
|
||||
this.slideSizeIndex = index;
|
||||
}
|
||||
})
|
||||
});
|
||||
}
|
||||
|
||||
// Color Schemes
|
||||
|
|
|
|||
|
|
@ -7,15 +7,14 @@ import {Device} from "../../../../../common/mobile/utils/device";
|
|||
const PageTypeLink = props => {
|
||||
const { t } = useTranslation();
|
||||
const _t = t('View.Edit', {returnObjects: true});
|
||||
const storeLinkSettings = props.storeLinkSettings;
|
||||
const typeLink = storeLinkSettings.typeLink;
|
||||
const [typeLink, setTypeLink] = useState(props.curType);
|
||||
|
||||
return (
|
||||
<Page>
|
||||
<Navbar title={_t.textLinkType} backLink={_t.textBack}/>
|
||||
<List>
|
||||
<ListItem title={_t.textExternalLink} radio checked={typeLink === 1} onClick={() => {storeLinkSettings.changeLinkType(1);}}></ListItem>
|
||||
<ListItem title={_t.textSlideInThisPresentation} radio checked={typeLink === 0} onClick={() => {storeLinkSettings.changeLinkType(0);}}></ListItem>
|
||||
<ListItem title={_t.textExternalLink} radio checked={typeLink === 1} onClick={() => {setTypeLink(1); props.changeType(1); props.initLink();}}></ListItem>
|
||||
<ListItem title={_t.textSlideInThisPresentation} radio checked={typeLink === 0} onClick={() => {setTypeLink(0); props.changeType(0); props.initLink();}}></ListItem>
|
||||
</List>
|
||||
</Page>
|
||||
)
|
||||
|
|
@ -25,23 +24,18 @@ const PageLinkTo = props => {
|
|||
const isAndroid = Device.android;
|
||||
const { t } = useTranslation();
|
||||
const _t = t('View.Edit', {returnObjects: true});
|
||||
const api = Common.EditorApi.get();
|
||||
const slidesCount = api.getCountPages();
|
||||
const storeLinkSettings = props.storeLinkSettings;
|
||||
const slideLink = storeLinkSettings.slideLink;
|
||||
// console.log(slideLink);
|
||||
// const slideNum = storeLinkSettings.slideNum;
|
||||
// const [stateTypeTo, setTypeTo] = useState(props.curTo);
|
||||
const slidesCount = props.slidesCount;
|
||||
const [stateTypeTo, setTypeTo] = useState(props.curTo);
|
||||
|
||||
const changeTypeTo = (type) => {
|
||||
storeLinkSettings.changeSlideLink(type);
|
||||
setTypeTo(type);
|
||||
props.changeTo(type);
|
||||
};
|
||||
|
||||
const [stateNumberTo, setNumberTo] = useState(0);
|
||||
|
||||
const changeNumber = (curNumber, isDecrement) => {
|
||||
storeLinkSettings.changeSlideLink(4);
|
||||
setTypeTo(4);
|
||||
let value;
|
||||
|
||||
if (isDecrement) {
|
||||
|
|
@ -51,7 +45,6 @@ const PageLinkTo = props => {
|
|||
}
|
||||
|
||||
setNumberTo(value);
|
||||
storeLinkSettings.changeSlideNum(value);
|
||||
props.changeTo(4, value);
|
||||
};
|
||||
|
||||
|
|
@ -59,10 +52,10 @@ const PageLinkTo = props => {
|
|||
<Page>
|
||||
<Navbar title={_t.textLinkTo} backLink={_t.textBack}/>
|
||||
<List>
|
||||
<ListItem title={_t.textNextSlide} radio checked={slideLink === 0} onClick={() => {changeTypeTo(0)}}></ListItem>
|
||||
<ListItem title={_t.textPreviousSlide} radio checked={slideLink === 1} onClick={() => {changeTypeTo(1)}}></ListItem>
|
||||
<ListItem title={_t.textFirstSlide} radio checked={slideLink === 2} onClick={() => {changeTypeTo(2)}}></ListItem>
|
||||
<ListItem title={_t.textLastSlide} radio checked={slideLink === 3} onClick={() => {changeTypeTo(3)}}></ListItem>
|
||||
<ListItem title={_t.textNextSlide} radio checked={stateTypeTo === 0} onClick={() => {changeTypeTo(0)}}></ListItem>
|
||||
<ListItem title={_t.textPreviousSlide} radio checked={stateTypeTo === 1} onClick={() => {changeTypeTo(1)}}></ListItem>
|
||||
<ListItem title={_t.textFirstSlide} radio checked={stateTypeTo === 2} onClick={() => {changeTypeTo(2)}}></ListItem>
|
||||
<ListItem title={_t.textLastSlide} radio checked={stateTypeTo === 3} onClick={() => {changeTypeTo(3)}}></ListItem>
|
||||
<ListItem title={_t.textSlideNumber}>
|
||||
{!isAndroid && <div slot='after-start'>{stateNumberTo + 1}</div>}
|
||||
<div slot='after'>
|
||||
|
|
@ -85,42 +78,44 @@ const PageLinkTo = props => {
|
|||
const PageLink = props => {
|
||||
const { t } = useTranslation();
|
||||
const _t = t('View.Edit', {returnObjects: true});
|
||||
const storeFocusObjects = props.storeFocusObjects;
|
||||
const storeLinkSettings = props.storeLinkSettings;
|
||||
const linkObject = storeFocusObjects.linkObject;
|
||||
|
||||
useEffect(() => {
|
||||
storeLinkSettings.initCategory(linkObject);
|
||||
}, [linkObject]);
|
||||
const url = props.url;
|
||||
const tooltip = props.tooltip;
|
||||
const display = props.display;
|
||||
const slideNum = props.slideNum;
|
||||
const slideLink = props.slideLink;
|
||||
const valueTypeLink = props.typeLink;
|
||||
|
||||
const url = linkObject.get_Value();
|
||||
const tooltip = linkObject.get_ToolTip();
|
||||
const display = linkObject.get_Text();
|
||||
const slideNum = storeLinkSettings.slideNum;
|
||||
const slideLink = storeLinkSettings.slideLink;
|
||||
const typeLink = storeLinkSettings.typeLink;
|
||||
|
||||
if(typeLink === 1) {
|
||||
storeLinkSettings.changeSlideName(_t.textNextSlide);
|
||||
storeLinkSettings.changeSlideLink(0);
|
||||
}
|
||||
const typesDisplayTo = {
|
||||
0: `${_t.textNextSlide}`,
|
||||
1: `${_t.textPreviousSlide}`,
|
||||
2: `${_t.textFirstSlide}`,
|
||||
3: `${_t.textLastSlide}`,
|
||||
4: `${_t.textSlide} ${slideNum + 1}`
|
||||
};
|
||||
|
||||
const [typeLink, setTypeLink] = useState(valueTypeLink);
|
||||
const textType = typeLink === 1 ? _t.textExternalLink : _t.textSlideInThisPresentation;
|
||||
|
||||
const changeType = (newType) => {
|
||||
setTypeLink(newType);
|
||||
};
|
||||
|
||||
const [link, setLink] = useState(typeLink !== 0 ? url : '');
|
||||
const [linkTo, setLinkTo] = useState(slideLink);
|
||||
const [displayTo, setDisplayTo] = useState(typesDisplayTo[slideLink]);
|
||||
const [numberTo, setNumberTo] = useState(slideNum);
|
||||
|
||||
const changeTo = (slideLink, number) => {
|
||||
switch (slideLink) {
|
||||
case 0 : storeLinkSettings.changeSlideName(_t.textNextSlide); break;
|
||||
case 1 : storeLinkSettings.changeSlideName(_t.textPreviousSlide); break;
|
||||
case 2 : storeLinkSettings.changeSlideName(_t.textFirstSlide); break;
|
||||
case 3 : storeLinkSettings.changeSlideName(_t.textLastSlide); break;
|
||||
case 4 : storeLinkSettings.changeSlideName(`${_t.textSlide} ${number + 1}`); storeLinkSettings.changeSlideNum(number);
|
||||
const changeTo = (type, number) => {
|
||||
setLinkTo(type);
|
||||
switch (type) {
|
||||
case 0 : setDisplayTo(_t.textNextSlide); break;
|
||||
case 1 : setDisplayTo(_t.textPreviousSlide); break;
|
||||
case 2 : setDisplayTo(_t.textFirstSlide); break;
|
||||
case 3 : setDisplayTo(_t.textLastSlide); break;
|
||||
case 4 : setDisplayTo(`${_t.textSlide} ${number + 1}`); setNumberTo(number); break;
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
changeTo(slideLink, slideNum);
|
||||
|
||||
const slideName = storeLinkSettings.slideName;
|
||||
const [screenTip, setScreenTip] = useState(tooltip);
|
||||
const displayDisabled = display !== false && display === null;
|
||||
const [stateDisplay, setDisplay] = useState(display !== false ? ((display !== null) ? display : _t.textDefault) : "");
|
||||
|
|
@ -130,7 +125,9 @@ const PageLink = props => {
|
|||
<Navbar title={_t.textLink} backLink={_t.textBack}/>
|
||||
<List inlineLabels className='inputs-list'>
|
||||
<ListItem link={'/edit-link-type/'} title={_t.textLinkType} after={textType} routeProps={{
|
||||
curType: typeLink
|
||||
changeType,
|
||||
curType: typeLink,
|
||||
initLink: props.initLink
|
||||
}} />
|
||||
{typeLink !== 0 ?
|
||||
<ListInput label={_t.textLink}
|
||||
|
|
@ -139,9 +136,11 @@ const PageLink = props => {
|
|||
value={link}
|
||||
onChange={(event) => {setLink(event.target.value)}}
|
||||
/> :
|
||||
<ListItem link={'/edit-link-to/'} title={_t.textLinkTo} after={slideName} routeProps={{
|
||||
<ListItem link={'/edit-link-to/'} title={_t.textLinkTo} after={displayTo} routeProps={{
|
||||
changeTo: changeTo,
|
||||
curTo: slideLink
|
||||
curTo: linkTo,
|
||||
initLink: props.initLink,
|
||||
slidesCount: props.slidesCount
|
||||
}}/>
|
||||
}
|
||||
<ListInput label={_t.textDisplay}
|
||||
|
|
@ -164,7 +163,7 @@ const PageLink = props => {
|
|||
onClick={() => {
|
||||
props.onEditLink(typeLink, (typeLink === 1 ?
|
||||
{url: link, display: stateDisplay, tip: screenTip, displayDisabled: displayDisabled } :
|
||||
{linkTo: slideLink, numberTo: slideNum, display: stateDisplay, tip: screenTip, displayDisabled: displayDisabled}));
|
||||
{linkTo: linkTo, numberTo: numberTo, display: stateDisplay, tip: screenTip, displayDisabled: displayDisabled}));
|
||||
}}
|
||||
/>
|
||||
<ListButton title={_t.textRemoveLink}
|
||||
|
|
@ -178,10 +177,6 @@ const PageLink = props => {
|
|||
)
|
||||
};
|
||||
|
||||
const EditLink = inject("storeFocusObjects", "storeLinkSettings")(observer(PageLink));
|
||||
const LinkTo = inject("storeFocusObjects", "storeLinkSettings")(observer(PageLinkTo));
|
||||
const TypeLink = inject("storeFocusObjects", "storeLinkSettings")(observer(PageTypeLink));
|
||||
|
||||
export {EditLink,
|
||||
LinkTo as PageLinkTo,
|
||||
TypeLink as PageTypeLink}
|
||||
export {PageLink as EditLink,
|
||||
PageLinkTo,
|
||||
PageTypeLink}
|
||||
|
|
@ -7,14 +7,13 @@ const PagePresentationSettings = props => {
|
|||
const { t } = useTranslation();
|
||||
const _t = t("View.Settings", { returnObjects: true });
|
||||
props.initSlideSize();
|
||||
const store = props.storePresentationSettings;
|
||||
const slideSizeArr = store.getSlideSizes;
|
||||
const slideSizeIndex = store.slideSizeIndex;
|
||||
const storePresentationSettings = props.storePresentationSettings;
|
||||
const slideSizeArr = storePresentationSettings.slideSizes;
|
||||
const slideSizeIndex = storePresentationSettings.slideSizeIndex;
|
||||
|
||||
return (
|
||||
<Page>
|
||||
<Navbar title={_t.textPresentationSettings} backLink={_t.textBack} />
|
||||
|
||||
<BlockTitle>{_t.textSlideSize}</BlockTitle>
|
||||
<List>
|
||||
<ListItem radio name="slide-size" checked={slideSizeIndex === 0}
|
||||
|
|
@ -22,7 +21,6 @@ const PagePresentationSettings = props => {
|
|||
<ListItem radio name="slide-size" checked={slideSizeIndex === 1}
|
||||
onChange={() => props.onSlideSize(slideSizeArr[1])} title={_t.mniSlideWide}></ListItem>
|
||||
</List>
|
||||
|
||||
<List mediaList>
|
||||
<ListItem title={_t.textColorSchemes} link="/color-schemes/" routeProps={{
|
||||
onColorSchemeChange: props.onColorSchemeChange,
|
||||
|
|
@ -38,8 +36,8 @@ const PagePresentationColorSchemes = props => {
|
|||
const curScheme = props.initPageColorSchemes();
|
||||
const [stateScheme, setScheme] = useState(curScheme);
|
||||
const _t = t('View.Settings', {returnObjects: true});
|
||||
const store = props.storePresentationSettings;
|
||||
const allSchemes = store.allSchemes;
|
||||
const storePresentationSettings = props.storePresentationSettings;
|
||||
const allSchemes = storePresentationSettings.allSchemes;
|
||||
|
||||
return (
|
||||
<Page>
|
||||
|
|
|
|||
Loading…
Reference in a new issue