[PE] Adding an image to a list item
This commit is contained in:
parent
0f5a22ebe7
commit
9ffbcf8e9a
|
@ -321,6 +321,7 @@
|
|||
"textHyperlink": "Hyperlink",
|
||||
"textImage": "Image",
|
||||
"textImageURL": "Image URL",
|
||||
"textInsertImage": "Insert Image",
|
||||
"textLastColumn": "Last Column",
|
||||
"textLastSlide": "Last Slide",
|
||||
"textLayout": "Layout",
|
||||
|
|
|
@ -8,6 +8,26 @@ import { EditText } from '../../view/edit/EditText';
|
|||
class EditTextController extends Component {
|
||||
constructor (props) {
|
||||
super(props);
|
||||
|
||||
this.onApiImageLoaded = this.onApiImageLoaded.bind(this);
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
const api = Common.EditorApi.get();
|
||||
api.asc_registerCallback('asc_onBulletImageLoaded', this.onApiImageLoaded);
|
||||
}
|
||||
|
||||
componentWillUnmount() {
|
||||
const api = Common.EditorApi.get();
|
||||
api.asc_unregisterCallback('asc_onBulletImageLoaded', this.onApiImageLoaded);
|
||||
}
|
||||
|
||||
closeModal() {
|
||||
if ( Device.phone ) {
|
||||
f7.sheet.close('.edit-popover', true);
|
||||
} else {
|
||||
f7.popover.close('#edit-popover');
|
||||
}
|
||||
}
|
||||
|
||||
toggleBold(value) {
|
||||
|
@ -247,6 +267,40 @@ class EditTextController extends Component {
|
|||
if (api) api.SetDrawImagePreviewBulletForMenu(arr, type);
|
||||
}
|
||||
|
||||
onApiImageLoaded(bullet) {
|
||||
const api = Common.EditorApi.get();
|
||||
const selectedElements = api.getSelectedElements();
|
||||
const imageProp = {id: bullet.asc_getImageId(), redraw: true};
|
||||
|
||||
let selectItem = null;
|
||||
|
||||
if(selectedElements) {
|
||||
for (var i = 0; i< selectedElements.length; i++) {
|
||||
if (Asc.c_oAscTypeSelectElement.Paragraph == selectedElements[i].get_ObjectType()) {
|
||||
selectItem = selectedElements[i].get_ObjectValue();
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
bullet.asc_fillBulletImage(imageProp.id);
|
||||
selectItem.asc_putBullet(bullet);
|
||||
api.paraApply(selectItem);
|
||||
this.closeModal();
|
||||
}
|
||||
|
||||
onImageSelect() {
|
||||
(new Asc.asc_CBullet()).asc_showFileDialog();
|
||||
}
|
||||
|
||||
onInsertByUrl(value) {
|
||||
var checkUrl = value.replace(/ /g, '');
|
||||
|
||||
if(checkUrl) {
|
||||
(new Asc.asc_CBullet()).asc_putImageUrl(checkUrl);
|
||||
}
|
||||
}
|
||||
|
||||
onLineSpacing(value) {
|
||||
const api = Common.EditorApi.get();
|
||||
const LINERULE_AUTO = 1;
|
||||
|
@ -276,6 +330,8 @@ class EditTextController extends Component {
|
|||
onBullet={this.onBullet}
|
||||
onNumber={this.onNumber}
|
||||
getIconsBulletsAndNumbers={this.getIconsBulletsAndNumbers}
|
||||
onImageSelect={this.onImageSelect}
|
||||
onInsertByUrl={this.onInsertByUrl}
|
||||
onLineSpacing={this.onLineSpacing}
|
||||
/>
|
||||
)
|
||||
|
|
|
@ -171,4 +171,12 @@
|
|||
z-index: 1;
|
||||
.encoded-svg-background('<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" viewBox="0 0 22 22" fill="#aa5252"><g><circle fill="#fff" cx="11" cy="11" r="11"/><path d="M11,21A10,10,0,1,1,21,11,10,10,0,0,1,11,21h0ZM17.4,7.32L17.06,7a0.48,0.48,0,0,0-.67,0l-7,6.84L6.95,11.24a0.51,0.51,0,0,0-.59.08L6,11.66a0.58,0.58,0,0,0,0,.65l3.19,3.35a0.38,0.38,0,0,0,.39,0L17.4,8a0.48,0.48,0,0,0,0-.67h0Z"/></g></svg>');
|
||||
}
|
||||
}
|
||||
|
||||
.bullet-menu-image ul{
|
||||
padding: 0;
|
||||
|
||||
li {
|
||||
display: inherit;
|
||||
}
|
||||
}
|
|
@ -14,7 +14,7 @@ import EditChartController from "../../controller/edit/EditChart";
|
|||
import { EditLinkController } from "../../controller/edit/EditLink";
|
||||
|
||||
import { Theme, Layout, Transition, Type, Effect, StyleFillColor, CustomFillColor } from './EditSlide';
|
||||
import { PageTextFonts, PageTextFontColor, PageTextHighlightColor, PageTextCustomFontColor, PageTextAddFormatting, PageTextBulletsAndNumbers, PageTextLineSpacing } from './EditText';
|
||||
import { PageTextFonts, PageTextFontColor, PageTextHighlightColor, PageTextCustomFontColor, PageTextAddFormatting, PageTextBulletsAndNumbers, PageTextLineSpacing, PageTextBulletsLinkSettings } from './EditText';
|
||||
import { PageShapeStyle, PageShapeStyleNoFill, PageReplaceContainer, PageReorderContainer, PageAlignContainer, PageShapeBorderColor, PageShapeCustomBorderColor, PageShapeCustomFillColor } from './EditShape';
|
||||
import { PageImageReplace, PageImageReorder, PageImageAlign, PageLinkSettings } from './EditImage';
|
||||
import { PageTableStyle, PageTableStyleOptions, PageTableCustomFillColor, PageTableBorderColor, PageTableCustomBorderColor, PageTableReorder, PageTableAlign } from './EditTable';
|
||||
|
@ -78,7 +78,13 @@ const routes = [
|
|||
},
|
||||
{
|
||||
path: '/edit-bullets-and-numbers/',
|
||||
component: PageTextBulletsAndNumbers
|
||||
component: PageTextBulletsAndNumbers,
|
||||
routes: [
|
||||
{
|
||||
path: 'image-link/',
|
||||
component: PageTextBulletsLinkSettings
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
path: '/edit-text-line-spacing/',
|
||||
|
|
|
@ -1,6 +1,6 @@
|
|||
import React, {Fragment, useState, useEffect} from 'react';
|
||||
import {observer, inject} from "mobx-react";
|
||||
import {f7, Swiper, View, SwiperSlide, List, ListItem, Icon, Row, Button, Page, Navbar, Segmented, BlockTitle, NavRight, Link} from 'framework7-react';
|
||||
import {f7, Swiper, View, SwiperSlide, List, ListItem, ListButton, ListInput, Icon, Row, Button, Page, Navbar, Segmented, BlockTitle, NavRight, Link} from 'framework7-react';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import {Device} from '../../../../../common/mobile/utils/device';
|
||||
import { ThemeColorPalette, CustomColorPicker } from '../../../../../common/mobile/lib/component/ThemeColorPalette.jsx';
|
||||
|
@ -143,7 +143,9 @@ const EditText = props => {
|
|||
<ListItem title={_t.textBulletsAndNumbers} link='/edit-bullets-and-numbers/' routeProps={{
|
||||
onBullet: props.onBullet,
|
||||
onNumber: props.onNumber,
|
||||
getIconsBulletsAndNumbers: props.getIconsBulletsAndNumbers
|
||||
getIconsBulletsAndNumbers: props.getIconsBulletsAndNumbers,
|
||||
onImageSelect: props.onImageSelect,
|
||||
onInsertByUrl: props.onInsertByUrl
|
||||
|
||||
}}>
|
||||
<div className="preview">{previewList}</div>
|
||||
|
@ -498,18 +500,51 @@ const PageAdditionalFormatting = props => {
|
|||
)
|
||||
};
|
||||
|
||||
const PageBulletLinkSettings = (props) => {
|
||||
const { t } = useTranslation();
|
||||
const _t = t('View.Edit', {returnObjects: true});
|
||||
const [stateValue, setValue] = useState('');
|
||||
|
||||
return (
|
||||
<Page>
|
||||
<Navbar title={_t.textLinkSettings} backLink={_t.textBack}></Navbar>
|
||||
<BlockTitle>{_t.textAddress}</BlockTitle>
|
||||
<List className='add-image'>
|
||||
<ListInput
|
||||
type='text'
|
||||
placeholder={_t.textImageURL}
|
||||
value={stateValue}
|
||||
onChange={(event) => {setValue(event.target.value)}}
|
||||
>
|
||||
</ListInput>
|
||||
</List>
|
||||
<List className="buttons-list">
|
||||
<ListButton
|
||||
className={'button-fill button-raised' + (stateValue.length < 1 ? ' disabled' : '')}
|
||||
onClick={() => {props.onInsertByUrl(stateValue)}}
|
||||
>
|
||||
{_t.textInsertImage}
|
||||
</ListButton>
|
||||
</List>
|
||||
</Page>
|
||||
)
|
||||
}
|
||||
|
||||
const PageBullets = observer(props => {
|
||||
const { t } = useTranslation();
|
||||
const _t = t('View.Edit', {returnObjects: true});
|
||||
|
||||
const storeTextSettings = props.storeTextSettings;
|
||||
const typeBullets = storeTextSettings.typeBullets;
|
||||
const bulletArrays = [
|
||||
{id: `id-markers-0`, type: 0, subtype: -1, drawdata: {type: Asc.asc_PreviewBulletType.text, text: 'None'} },
|
||||
{id: `id-markers-1`, type: 0, subtype: 1, drawdata: {type: Asc.asc_PreviewBulletType.char, char: String.fromCharCode(0x00B7), specialFont: 'Symbol'} },
|
||||
{id: `id-markers-2`, type: 0, subtype: 2, drawdata: {type: Asc.asc_PreviewBulletType.char, char: 'o', specialFont: 'Courier New'} },
|
||||
{id: `id-markers-3`, type: 0, subtype: 3, drawdata: {type: Asc.asc_PreviewBulletType.char, char: String.fromCharCode(0x00A7), specialFont: 'Wingdings'} },
|
||||
{id: `id-markers-4`, type: 0, subtype: 4, drawdata: {type: Asc.asc_PreviewBulletType.char, char: String.fromCharCode(0x0076), specialFont: 'Wingdings'} },
|
||||
{id: `id-markers-5`, type: 0, subtype: 5, drawdata: {type: Asc.asc_PreviewBulletType.char, char: String.fromCharCode(0x00D8), specialFont: 'Wingdings'} },
|
||||
{id: `id-markers-6`, type: 0, subtype: 6, drawdata: {type: Asc.asc_PreviewBulletType.char, char: String.fromCharCode(0x00FC), specialFont: 'Wingdings'} },
|
||||
{id: `id-markers-7`, type: 0, subtype: 7, drawdata: {type: Asc.asc_PreviewBulletType.char, char: String.fromCharCode(0x00A8), specialFont: 'Symbol'} }
|
||||
{id: 'id-markers-0', type: 0, subtype: -1, drawdata: {type: Asc.asc_PreviewBulletType.text, text: 'None'} },
|
||||
{id: 'id-markers-1', type: 0, subtype: 1, drawdata: {type: Asc.asc_PreviewBulletType.char, char: String.fromCharCode(0x00B7), specialFont: 'Symbol'} },
|
||||
{id: 'id-markers-2', type: 0, subtype: 2, drawdata: {type: Asc.asc_PreviewBulletType.char, char: 'o', specialFont: 'Courier New'} },
|
||||
{id: 'id-markers-3', type: 0, subtype: 3, drawdata: {type: Asc.asc_PreviewBulletType.char, char: String.fromCharCode(0x00A7), specialFont: 'Wingdings'} },
|
||||
{id: 'id-markers-4', type: 0, subtype: 4, drawdata: {type: Asc.asc_PreviewBulletType.char, char: String.fromCharCode(0x0076), specialFont: 'Wingdings'} },
|
||||
{id: 'id-markers-5', type: 0, subtype: 5, drawdata: {type: Asc.asc_PreviewBulletType.char, char: String.fromCharCode(0x00D8), specialFont: 'Wingdings'} },
|
||||
{id: 'id-markers-6', type: 0, subtype: 6, drawdata: {type: Asc.asc_PreviewBulletType.char, char: String.fromCharCode(0x00FC), specialFont: 'Wingdings'} },
|
||||
{id: 'id-markers-7', type: 0, subtype: 7, drawdata: {type: Asc.asc_PreviewBulletType.char, char: String.fromCharCode(0x00A8), specialFont: 'Symbol'} }
|
||||
];
|
||||
|
||||
useEffect(() => {
|
||||
|
@ -539,6 +574,20 @@ const PageBullets = observer(props => {
|
|||
</ListItem>
|
||||
))}
|
||||
</List>
|
||||
{ !Device.isPhone ?
|
||||
<List className='bullet-menu-image'>
|
||||
<ListItem title={_t.textPictureFromLibrary} onClick={props.onImageSelect}>
|
||||
<Icon slot="media" icon="icon-image-library" />
|
||||
</ListItem>
|
||||
<ListItem title={_t.textPictureFromURL} link="#" onClick={() =>
|
||||
props.f7router.navigate('/edit-bullets-and-numbers/image-link/',
|
||||
{props: {onInsertByUrl: props.onInsertByUrl}}) }>
|
||||
<Icon slot="media" icon="icon-link" />
|
||||
</ListItem>
|
||||
</List>
|
||||
|
||||
: null
|
||||
}
|
||||
</View>
|
||||
)
|
||||
});
|
||||
|
@ -547,14 +596,14 @@ const PageNumbers = observer(props => {
|
|||
const storeTextSettings = props.storeTextSettings;
|
||||
const typeNumbers = storeTextSettings.typeNumbers;
|
||||
const numberArrays = [
|
||||
{id: `id-numbers-0`, type: 1, subtype: -1, drawdata: {type: Asc.asc_PreviewBulletType.text, text: 'None'}},
|
||||
{id: `id-numbers-4`, type: 1, subtype: 4, drawdata: {type: Asc.asc_PreviewBulletType.number, numberingType: Asc.asc_oAscNumberingLevel.UpperLetterDot_Left}},
|
||||
{id: `id-numbers-5`, type: 1, subtype: 5, drawdata: {type: Asc.asc_PreviewBulletType.number, numberingType: Asc.asc_oAscNumberingLevel.LowerLetterBracket_Left}},
|
||||
{id: `id-numbers-6`, type: 1, subtype: 6, drawdata: {type: Asc.asc_PreviewBulletType.number, numberingType: Asc.asc_oAscNumberingLevel.LowerLetterDot_Left}},
|
||||
{id: `id-numbers-1`, type: 1, subtype: 1, drawdata: {type: Asc.asc_PreviewBulletType.number, numberingType: Asc.asc_oAscNumberingLevel.DecimalDot_Right}},
|
||||
{id: `id-numbers-2`, type: 1, subtype: 2, drawdata: {type: Asc.asc_PreviewBulletType.number, numberingType: Asc.asc_oAscNumberingLevel.DecimalBracket_Right}},
|
||||
{id: `id-numbers-3`, type: 1, subtype: 3, drawdata: {type: Asc.asc_PreviewBulletType.number, numberingType: Asc.asc_oAscNumberingLevel.UpperRomanDot_Right}},
|
||||
{id: `id-numbers-7`, type: 1, subtype: 7, drawdata: {type: Asc.asc_PreviewBulletType.number, numberingType: Asc.asc_oAscNumberingLevel.LowerRomanDot_Right}}
|
||||
{id: 'id-numbers-0', type: 1, subtype: -1, drawdata: {type: Asc.asc_PreviewBulletType.text, text: 'None'}},
|
||||
{id: 'id-numbers-4', type: 1, subtype: 4, drawdata: {type: Asc.asc_PreviewBulletType.number, numberingType: Asc.asc_oAscNumberingLevel.UpperLetterDot_Left}},
|
||||
{id: 'id-numbers-5', type: 1, subtype: 5, drawdata: {type: Asc.asc_PreviewBulletType.number, numberingType: Asc.asc_oAscNumberingLevel.LowerLetterBracket_Left}},
|
||||
{id: 'id-numbers-6', type: 1, subtype: 6, drawdata: {type: Asc.asc_PreviewBulletType.number, numberingType: Asc.asc_oAscNumberingLevel.LowerLetterDot_Left}},
|
||||
{id: 'id-numbers-1', type: 1, subtype: 1, drawdata: {type: Asc.asc_PreviewBulletType.number, numberingType: Asc.asc_oAscNumberingLevel.DecimalDot_Right}},
|
||||
{id: 'id-numbers-2', type: 1, subtype: 2, drawdata: {type: Asc.asc_PreviewBulletType.number, numberingType: Asc.asc_oAscNumberingLevel.DecimalBracket_Right}},
|
||||
{id: 'id-numbers-3', type: 1, subtype: 3, drawdata: {type: Asc.asc_PreviewBulletType.number, numberingType: Asc.asc_oAscNumberingLevel.UpperRomanDot_Right}},
|
||||
{id: 'id-numbers-7', type: 1, subtype: 7, drawdata: {type: Asc.asc_PreviewBulletType.number, numberingType: Asc.asc_oAscNumberingLevel.LowerRomanDot_Right}}
|
||||
];
|
||||
|
||||
useEffect(() => {
|
||||
|
@ -570,25 +619,20 @@ const PageNumbers = observer(props => {
|
|||
|
||||
return (
|
||||
<View className='numbers dataview'>
|
||||
{numberArrays.map((numbers, index) => (
|
||||
<List className="row" style={{listStyle: 'none'}} key={'numbers-' + index}>
|
||||
{numbers.map((number) => (
|
||||
<ListItem key={'number-' + number.type} data-type={number.type} className={(number.type === typeNumbers) &&
|
||||
(storeTextSettings.listType === 1 || storeTextSettings.listType === -1) ? 'active' : ''}
|
||||
onClick={() => {
|
||||
storeTextSettings.resetNumbers(number.type);
|
||||
props.onNumber(number.type);
|
||||
}}>
|
||||
{number.thumb.length < 1 ?
|
||||
<Icon className="thumb" style={{position: 'relative'}}>
|
||||
<label>{_t.textNone}</label>
|
||||
</Icon> :
|
||||
<Icon className="thumb" icon={`icon-numbers-${number.type}`} />
|
||||
}
|
||||
</ListItem>
|
||||
<List className="row" style={{listStyle: 'none'}}>
|
||||
{numberArrays.map((number, index) => (
|
||||
<ListItem key={'number-' + number.subtype} data-type={number.subtype} className={(number.subtype === typeNumbers) &&
|
||||
(storeTextSettings.listType === 1 || storeTextSettings.listType === -1) ? 'active' : ''}
|
||||
onClick={() => {
|
||||
storeTextSettings.resetNumbers(number.subtype);
|
||||
props.onNumber(number.subtype);
|
||||
}}>
|
||||
<div id={number.id} className='item-number'>
|
||||
|
||||
</div>
|
||||
</ListItem>
|
||||
))}
|
||||
</List>
|
||||
))}
|
||||
</List>
|
||||
</View>
|
||||
);
|
||||
});
|
||||
|
@ -627,6 +671,8 @@ const PageBulletsAndNumbers = props => {
|
|||
storeTextSettings={storeTextSettings}
|
||||
onBullet={props.onBullet}
|
||||
getIconsBulletsAndNumbers={props.getIconsBulletsAndNumbers}
|
||||
onImageSelect={props.onImageSelect}
|
||||
onInsertByUrl={props.onInsertByUrl}
|
||||
/>
|
||||
</SwiperSlide>
|
||||
</Swiper>
|
||||
|
@ -678,6 +724,7 @@ const PageTextCustomFontColor = inject("storeTextSettings", "storePalette")(obse
|
|||
const PageTextAddFormatting = inject("storeTextSettings", "storeFocusObjects")(observer(PageAdditionalFormatting));
|
||||
const PageTextBulletsAndNumbers = inject("storeTextSettings", "storeFocusObjects")(observer(PageBulletsAndNumbers));
|
||||
const PageTextLineSpacing = inject("storeTextSettings", "storeFocusObjects")(observer(PageLineSpacing));
|
||||
const PageTextBulletsLinkSettings = inject("storeTextSettings", "storeFocusObjects")(observer(PageBulletLinkSettings));
|
||||
|
||||
export {
|
||||
EditTextContainer as EditText,
|
||||
|
@ -687,5 +734,6 @@ export {
|
|||
PageTextCustomFontColor,
|
||||
PageTextAddFormatting,
|
||||
PageTextBulletsAndNumbers,
|
||||
PageTextLineSpacing
|
||||
PageTextLineSpacing,
|
||||
PageTextBulletsLinkSettings
|
||||
};
|
Loading…
Reference in a new issue