Merge pull request #1094 from ONLYOFFICE/feature/Bug_47900
Feature/bug 47900
This commit is contained in:
maxkadushkin
GitHub
commit
f1e8c9cc24
|
|
@ -580,6 +580,14 @@
|
|||
-ms-appearance: none;
|
||||
appearance: none;
|
||||
}
|
||||
|
||||
// Fonts List
|
||||
|
||||
.font-item {
|
||||
.item-content {
|
||||
padding-left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -555,4 +555,12 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Fonts List
|
||||
|
||||
.font-item {
|
||||
.item-radio:not(.item-radio-icon-end) > .icon-radio {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -860,6 +860,17 @@ input[type="number"]::-webkit-inner-spin-button {
|
|||
box-shadow: inset 0 2px red;
|
||||
}
|
||||
|
||||
// Fonts List
|
||||
|
||||
.font-item {
|
||||
.item-inner {
|
||||
overflow: hidden;
|
||||
&:after {
|
||||
left: 16px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -198,25 +198,26 @@ class EditTextController extends Component {
|
|||
|
||||
render() {
|
||||
return (
|
||||
<EditText changeFontSize={this.changeFontSize}
|
||||
changeFontFamily={this.changeFontFamily}
|
||||
onTextColorAuto={this.onTextColorAuto}
|
||||
onTextColor={this.onTextColor}
|
||||
onBackgroundColor={this.onBackgroundColor}
|
||||
toggleBold={this.toggleBold}
|
||||
toggleItalic={this.toggleItalic}
|
||||
toggleUnderline={this.toggleUnderline}
|
||||
toggleStrikethrough={this.toggleStrikethrough}
|
||||
onAdditionalStrikethrough={this.onAdditionalStrikethrough}
|
||||
onAdditionalCaps={this.onAdditionalCaps}
|
||||
onAdditionalScript={this.onAdditionalScript}
|
||||
changeLetterSpacing={this.changeLetterSpacing}
|
||||
onParagraphAlign={this.onParagraphAlign}
|
||||
onParagraphMove={this.onParagraphMove}
|
||||
onBullet={this.onBullet}
|
||||
onNumber={this.onNumber}
|
||||
onMultiLevelList={this.onMultiLevelList}
|
||||
onLineSpacing={this.onLineSpacing}
|
||||
<EditText
|
||||
changeFontSize={this.changeFontSize}
|
||||
changeFontFamily={this.changeFontFamily}
|
||||
onTextColorAuto={this.onTextColorAuto}
|
||||
onTextColor={this.onTextColor}
|
||||
onBackgroundColor={this.onBackgroundColor}
|
||||
toggleBold={this.toggleBold}
|
||||
toggleItalic={this.toggleItalic}
|
||||
toggleUnderline={this.toggleUnderline}
|
||||
toggleStrikethrough={this.toggleStrikethrough}
|
||||
onAdditionalStrikethrough={this.onAdditionalStrikethrough}
|
||||
onAdditionalCaps={this.onAdditionalCaps}
|
||||
onAdditionalScript={this.onAdditionalScript}
|
||||
changeLetterSpacing={this.changeLetterSpacing}
|
||||
onParagraphAlign={this.onParagraphAlign}
|
||||
onParagraphMove={this.onParagraphMove}
|
||||
onBullet={this.onBullet}
|
||||
onNumber={this.onNumber}
|
||||
onMultiLevelList={this.onMultiLevelList}
|
||||
onLineSpacing={this.onLineSpacing}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -42,10 +42,27 @@ export class storeTextSettings {
|
|||
resetLineSpacing: action,
|
||||
resetBackgroundColor: action,
|
||||
changeFontFamily: action,
|
||||
iconWidth: observable,
|
||||
iconHeight: observable,
|
||||
thumbCanvas: observable,
|
||||
thumbContext: observable,
|
||||
thumbs: observable,
|
||||
thumbIdx: observable,
|
||||
listItemHeight: observable,
|
||||
spriteCols: observable,
|
||||
loadSprite: action,
|
||||
addFontToRecent:action
|
||||
});
|
||||
}
|
||||
|
||||
iconWidth;
|
||||
iconHeight;
|
||||
thumbCanvas;
|
||||
thumbContext;
|
||||
thumbs;
|
||||
thumbIdx = 0;
|
||||
listItemHeight = 28;
|
||||
spriteCols = 1;
|
||||
fontsArray = [];
|
||||
arrayRecentFonts = [];
|
||||
fontName = '';
|
||||
|
|
@ -84,7 +101,44 @@ export class storeTextSettings {
|
|||
});
|
||||
|
||||
this.fontsArray = array;
|
||||
this.iconWidth = 300;
|
||||
this.iconHeight = Asc.FONT_THUMBNAIL_HEIGHT || 28;
|
||||
this.thumbCanvas = document.createElement('canvas');
|
||||
this.thumbContext = this.thumbCanvas.getContext('2d');
|
||||
this.thumbs = [
|
||||
{ratio: 1, path: '../../../../../../../sdkjs/common/Images/fonts_thumbnail.png', width: this.iconWidth, height: this.iconHeight},
|
||||
{ratio: 1.25, path: '../../../../../../../sdkjs/common/Images/fonts_thumbnail@1.25x.png', width: this.iconWidth * 1.25, height: this.iconHeight * 1.25},
|
||||
{ratio: 1.5, path: '../../../../../../../sdkjs/common/Images/fonts_thumbnail@1.5x.png', width: this.iconWidth * 1.5, height: this.iconHeight * 1.5},
|
||||
{ratio: 1.75, path: '../../../../../../../sdkjs/common/Images/fonts_thumbnail@1.75x.png', width: this.iconWidth * 1.75, height: this.iconHeight * 1.75},
|
||||
{ratio: 2, path: '../../../../../../../sdkjs/common/Images/fonts_thumbnail@2x.png', width: this.iconWidth * 2, height: this.iconHeight * 2}
|
||||
];
|
||||
|
||||
const applicationPixelRatio = Common.Utils.applicationPixelRatio();
|
||||
|
||||
let bestDistance = Math.abs(applicationPixelRatio - this.thumbs[0].ratio);
|
||||
let currentDistance = 0;
|
||||
|
||||
for (let i = 1; i < this.thumbs.length; i++) {
|
||||
currentDistance = Math.abs(applicationPixelRatio - this.thumbs[i].ratio);
|
||||
if (currentDistance < (bestDistance - 0.0001))
|
||||
{
|
||||
bestDistance = currentDistance;
|
||||
this.thumbIdx = i;
|
||||
}
|
||||
}
|
||||
|
||||
this.thumbCanvas.height = this.thumbs[this.thumbIdx].height;
|
||||
this.thumbCanvas.width = this.thumbs[this.thumbIdx].width;
|
||||
|
||||
this.loadSprite();
|
||||
}
|
||||
|
||||
loadSprite() {
|
||||
this.spriteThumbs = new Image();
|
||||
this.spriteCols = Math.floor(this.spriteThumbs.width / (this.thumbs[this.thumbIdx].width)) || 1;
|
||||
this.spriteThumbs.src = this.thumbs[this.thumbIdx].path;
|
||||
}
|
||||
|
||||
resetFontName (font) {
|
||||
let name = (typeof font.get_Name) === "function" ? font.get_Name() : font.asc_getName();
|
||||
this.fontName = name;
|
||||
|
|
@ -92,7 +146,7 @@ export class storeTextSettings {
|
|||
|
||||
resetFontsRecent(fonts) {
|
||||
this.arrayRecentFonts = fonts;
|
||||
this.arrayRecentFonts = this.arrayRecentFonts ? this.arrayRecentFonts.split(';') : [];
|
||||
this.arrayRecentFonts = this.arrayRecentFonts ? JSON.parse(this.arrayRecentFonts) : [];
|
||||
}
|
||||
|
||||
resetFontSize (size) {
|
||||
|
|
@ -185,7 +239,7 @@ export class storeTextSettings {
|
|||
|
||||
addFontToRecent (font) {
|
||||
this.arrayRecentFonts.forEach(item => {
|
||||
if (item === font) this.arrayRecentFonts.splice(this.arrayRecentFonts.indexOf(item),1);
|
||||
if (item.name === font.name) this.arrayRecentFonts.splice(this.arrayRecentFonts.indexOf(item),1);
|
||||
})
|
||||
this.arrayRecentFonts.unshift(font);
|
||||
|
||||
|
|
|
|||
|
|
@ -14,13 +14,20 @@ const PageFonts = props => {
|
|||
const displaySize = typeof size === 'undefined' ? t('Edit.textAuto') : size + ' ' + t('Edit.textPt');
|
||||
const curFontName = storeTextSettings.fontName;
|
||||
const fonts = storeTextSettings.fontsArray;
|
||||
const arrayFonts = storeTextSettings.arrayRecentFonts;
|
||||
const iconWidth = storeTextSettings.iconWidth;
|
||||
const iconHeight = storeTextSettings.iconHeight;
|
||||
const thumbs = storeTextSettings.thumbs;
|
||||
const thumbIdx = storeTextSettings.thumbIdx;
|
||||
const thumbCanvas = storeTextSettings.thumbCanvas;
|
||||
const thumbContext = storeTextSettings.thumbContext;
|
||||
const spriteCols = storeTextSettings.spriteCols;
|
||||
const spriteThumbs = storeTextSettings.spriteThumbs;
|
||||
const arrayRecentFonts = storeTextSettings.arrayRecentFonts;
|
||||
|
||||
const addRecentStorage = () => {
|
||||
let arr = [];
|
||||
arrayFonts.forEach(item => arr.push(item));
|
||||
arr = arr.join(';');
|
||||
LocalStorage.setItem('dde-settings-recent-fonts', arr);
|
||||
arrayRecentFonts.forEach(item => arr.push(item));
|
||||
LocalStorage.setItem('dde-settings-recent-fonts', JSON.stringify(arr));
|
||||
}
|
||||
|
||||
const [vlFonts, setVlFonts] = useState({
|
||||
|
|
@ -39,6 +46,13 @@ const PageFonts = props => {
|
|||
});
|
||||
};
|
||||
|
||||
const getImageUri = (font) => {
|
||||
thumbContext.clearRect(0, 0, thumbs[thumbIdx].width, thumbs[thumbIdx].height);
|
||||
thumbContext.drawImage(spriteThumbs, 0, -thumbs[thumbIdx].height * Math.floor(font.imgidx / spriteCols));
|
||||
|
||||
return thumbCanvas.toDataURL();
|
||||
}
|
||||
|
||||
return (
|
||||
<Page>
|
||||
<Navbar title={t('Edit.textFonts')} backLink={t('Edit.textBack')}>
|
||||
|
|
@ -67,17 +81,15 @@ const PageFonts = props => {
|
|||
</ListItem>
|
||||
</List>
|
||||
<BlockTitle>{t('Edit.textFonts')}</BlockTitle>
|
||||
{!!arrayFonts.length &&
|
||||
{!!arrayRecentFonts.length &&
|
||||
<List>
|
||||
{arrayFonts.map((item,index) => (
|
||||
<ListItem
|
||||
key={index}
|
||||
radio
|
||||
checked={curFontName === item}
|
||||
title={item}
|
||||
style={{fontFamily: `${item}`}}
|
||||
onClick={() => {storeTextSettings.changeFontFamily(item); props.changeFontFamily(item);}}
|
||||
/>
|
||||
{arrayRecentFonts.map((item, index) => (
|
||||
<ListItem className="font-item" key={index} radio checked={curFontName === item.name} onClick={() => {
|
||||
storeTextSettings.changeFontFamily(item.name);
|
||||
props.changeFontFamily(item.name);
|
||||
}}>
|
||||
<img src={getImageUri(item)} style={{width: `${iconWidth}px`, height: `${iconHeight}px`}} />
|
||||
</ListItem>
|
||||
))}
|
||||
</List>
|
||||
}
|
||||
|
|
@ -87,15 +99,14 @@ const PageFonts = props => {
|
|||
}}>
|
||||
<ul>
|
||||
{vlFonts.vlData.items.map((item, index) => (
|
||||
<ListItem
|
||||
key={index}
|
||||
radio
|
||||
checked={curFontName === item.name}
|
||||
title={item.name}
|
||||
style={{fontFamily: `${item.name}`}}
|
||||
onClick={() => {storeTextSettings.changeFontFamily(item.name); props.changeFontFamily(item.name);
|
||||
storeTextSettings.addFontToRecent(item.name); addRecentStorage()}}
|
||||
></ListItem>
|
||||
<ListItem className="font-item" key={index} radio checked={curFontName === item.name} onClick={() => {
|
||||
storeTextSettings.changeFontFamily(item.name);
|
||||
props.changeFontFamily(item.name);
|
||||
storeTextSettings.addFontToRecent(item);
|
||||
addRecentStorage();
|
||||
}}>
|
||||
<img src={getImageUri(item)} style={{width: `${iconWidth}px`, height: `${iconHeight}px`}} />
|
||||
</ListItem>
|
||||
))}
|
||||
</ul>
|
||||
</List>
|
||||
|
|
|
|||
|
|
@ -43,10 +43,27 @@ export class storeTextSettings {
|
|||
resetTextColor: action,
|
||||
changeCustomTextColors: action,
|
||||
resetLineSpacing: action,
|
||||
iconWidth: observable,
|
||||
iconHeight: observable,
|
||||
thumbCanvas: observable,
|
||||
thumbContext: observable,
|
||||
thumbs: observable,
|
||||
thumbIdx: observable,
|
||||
listItemHeight: observable,
|
||||
spriteCols: observable,
|
||||
loadSprite: action,
|
||||
addFontToRecent:action
|
||||
});
|
||||
}
|
||||
|
||||
iconWidth;
|
||||
iconHeight;
|
||||
thumbCanvas;
|
||||
thumbContext;
|
||||
thumbs;
|
||||
thumbIdx = 0;
|
||||
listItemHeight = 28;
|
||||
spriteCols = 1;
|
||||
fontsArray = [];
|
||||
arrayRecentFonts = [];
|
||||
fontName = '';
|
||||
|
|
@ -85,6 +102,42 @@ export class storeTextSettings {
|
|||
});
|
||||
|
||||
this.fontsArray = array;
|
||||
this.iconWidth = 300;
|
||||
this.iconHeight = Asc.FONT_THUMBNAIL_HEIGHT || 28;
|
||||
this.thumbCanvas = document.createElement('canvas');
|
||||
this.thumbContext = this.thumbCanvas.getContext('2d');
|
||||
this.thumbs = [
|
||||
{ratio: 1, path: '../../../../../../../sdkjs/common/Images/fonts_thumbnail.png', width: this.iconWidth, height: this.iconHeight},
|
||||
{ratio: 1.25, path: '../../../../../../../sdkjs/common/Images/fonts_thumbnail@1.25x.png', width: this.iconWidth * 1.25, height: this.iconHeight * 1.25},
|
||||
{ratio: 1.5, path: '../../../../../../../sdkjs/common/Images/fonts_thumbnail@1.5x.png', width: this.iconWidth * 1.5, height: this.iconHeight * 1.5},
|
||||
{ratio: 1.75, path: '../../../../../../../sdkjs/common/Images/fonts_thumbnail@1.75x.png', width: this.iconWidth * 1.75, height: this.iconHeight * 1.75},
|
||||
{ratio: 2, path: '../../../../../../../sdkjs/common/Images/fonts_thumbnail@2x.png', width: this.iconWidth * 2, height: this.iconHeight * 2}
|
||||
];
|
||||
|
||||
const applicationPixelRatio = Common.Utils.applicationPixelRatio();
|
||||
|
||||
let bestDistance = Math.abs(applicationPixelRatio - this.thumbs[0].ratio);
|
||||
let currentDistance = 0;
|
||||
|
||||
for (let i = 1; i < this.thumbs.length; i++) {
|
||||
currentDistance = Math.abs(applicationPixelRatio - this.thumbs[i].ratio);
|
||||
if (currentDistance < (bestDistance - 0.0001))
|
||||
{
|
||||
bestDistance = currentDistance;
|
||||
this.thumbIdx = i;
|
||||
}
|
||||
}
|
||||
|
||||
this.thumbCanvas.height = this.thumbs[this.thumbIdx].height;
|
||||
this.thumbCanvas.width = this.thumbs[this.thumbIdx].width;
|
||||
|
||||
this.loadSprite();
|
||||
}
|
||||
|
||||
loadSprite() {
|
||||
this.spriteThumbs = new Image();
|
||||
this.spriteCols = Math.floor(this.spriteThumbs.width / (this.thumbs[this.thumbIdx].width)) || 1;
|
||||
this.spriteThumbs.src = this.thumbs[this.thumbIdx].path;
|
||||
}
|
||||
|
||||
resetFontName (font) {
|
||||
|
|
@ -94,7 +147,7 @@ export class storeTextSettings {
|
|||
|
||||
resetFontsRecent(fonts) {
|
||||
this.arrayRecentFonts = fonts;
|
||||
this.arrayRecentFonts = this.arrayRecentFonts ? this.arrayRecentFonts.split(';') : [];
|
||||
this.arrayRecentFonts = this.arrayRecentFonts ? JSON.parse(this.arrayRecentFonts) : [];
|
||||
}
|
||||
|
||||
resetFontSize (size) {
|
||||
|
|
@ -215,7 +268,7 @@ export class storeTextSettings {
|
|||
|
||||
addFontToRecent (font) {
|
||||
this.arrayRecentFonts.forEach(item => {
|
||||
if (item === font) this.arrayRecentFonts.splice(this.arrayRecentFonts.indexOf(item),1);
|
||||
if (item.name === font.name) this.arrayRecentFonts.splice(this.arrayRecentFonts.indexOf(item),1);
|
||||
})
|
||||
this.arrayRecentFonts.unshift(font);
|
||||
|
||||
|
|
|
|||
|
|
@ -186,13 +186,20 @@ const PageFonts = props => {
|
|||
const displaySize = typeof size === 'undefined' || size == '' ? _t.textAuto : size + ' ' + _t.textPt;
|
||||
const curFontName = storeTextSettings.fontName;
|
||||
const fonts = storeTextSettings.fontsArray;
|
||||
const arrayFonts = storeTextSettings.arrayRecentFonts;
|
||||
const iconWidth = storeTextSettings.iconWidth;
|
||||
const iconHeight = storeTextSettings.iconHeight;
|
||||
const thumbs = storeTextSettings.thumbs;
|
||||
const thumbIdx = storeTextSettings.thumbIdx;
|
||||
const thumbCanvas = storeTextSettings.thumbCanvas;
|
||||
const thumbContext = storeTextSettings.thumbContext;
|
||||
const spriteCols = storeTextSettings.spriteCols;
|
||||
const spriteThumbs = storeTextSettings.spriteThumbs;
|
||||
const arrayRecentFonts = storeTextSettings.arrayRecentFonts;
|
||||
|
||||
const addRecentStorage = () => {
|
||||
let arr = [];
|
||||
arrayFonts.forEach(item => arr.push(item));
|
||||
arr = arr.join(';');
|
||||
LocalStorage.setItem('ppe-settings-recent-fonts', arr);
|
||||
arrayRecentFonts.forEach(item => arr.push(item));
|
||||
LocalStorage.setItem('ppe-settings-recent-fonts', JSON.stringify(arr));
|
||||
}
|
||||
|
||||
const [vlFonts, setVlFonts] = useState({
|
||||
|
|
@ -211,6 +218,13 @@ const PageFonts = props => {
|
|||
});
|
||||
};
|
||||
|
||||
const getImageUri = (font) => {
|
||||
thumbContext.clearRect(0, 0, thumbs[thumbIdx].width, thumbs[thumbIdx].height);
|
||||
thumbContext.drawImage(spriteThumbs, 0, -thumbs[thumbIdx].height * Math.floor(font.imgidx / spriteCols));
|
||||
|
||||
return thumbCanvas.toDataURL();
|
||||
}
|
||||
|
||||
const paragraph = props.storeFocusObjects.paragraphObject;
|
||||
if (!paragraph && Device.phone) {
|
||||
$$('.sheet-modal.modal-in').length > 0 && f7.sheet.close();
|
||||
|
|
@ -245,17 +259,14 @@ const PageFonts = props => {
|
|||
</ListItem>
|
||||
</List>
|
||||
<BlockTitle>{_t.textFonts}</BlockTitle>
|
||||
{!!arrayFonts.length &&
|
||||
{!!arrayRecentFonts.length &&
|
||||
<List>
|
||||
{arrayFonts.map((item,index) => (
|
||||
<ListItem
|
||||
key={index}
|
||||
radio
|
||||
checked={curFontName === item}
|
||||
title={item}
|
||||
style={{fontFamily: `${item}`}}
|
||||
onClick={() => {props.changeFontFamily(item)}}
|
||||
/>
|
||||
{arrayRecentFonts.map((item, index) => (
|
||||
<ListItem className="font-item" key={index} radio checked={curFontName === item.name} onClick={() => {
|
||||
props.changeFontFamily(item.name);
|
||||
}}>
|
||||
<img src={getImageUri(item)} style={{width: `${iconWidth}px`, height: `${iconHeight}px`}} />
|
||||
</ListItem>
|
||||
))}
|
||||
</List>
|
||||
}
|
||||
|
|
@ -265,15 +276,13 @@ const PageFonts = props => {
|
|||
}}>
|
||||
<ul>
|
||||
{vlFonts.vlData.items.map((item, index) => (
|
||||
<ListItem
|
||||
key={index}
|
||||
radio
|
||||
checked={curFontName === item.name}
|
||||
title={item.name}
|
||||
style={{fontFamily: `${item.name}`}}
|
||||
onClick={() => {props.changeFontFamily(item.name); storeTextSettings.addFontToRecent(item.name);
|
||||
addRecentStorage()}}
|
||||
></ListItem>
|
||||
<ListItem className="font-item" key={index} radio checked={curFontName === item.name} onClick={() => {
|
||||
props.changeFontFamily(item.name);
|
||||
storeTextSettings.addFontToRecent(item);
|
||||
addRecentStorage();
|
||||
}}>
|
||||
<img src={getImageUri(item)} style={{width: `${iconWidth}px`, height: `${iconHeight}px`}} />
|
||||
</ListItem>
|
||||
))}
|
||||
</ul>
|
||||
</List>
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@ export class storeTextSettings {
|
|||
fontsArray: observable,
|
||||
fontInfo: observable,
|
||||
fontName: observable,
|
||||
arrayRecentFonts:observable,
|
||||
arrayRecentFonts: observable,
|
||||
fontSize: observable,
|
||||
isBold: observable,
|
||||
isItalic: observable,
|
||||
|
|
@ -23,10 +23,27 @@ export class storeTextSettings {
|
|||
initFontInfo: action,
|
||||
changeTextColor: action,
|
||||
changeCustomTextColors: action,
|
||||
iconWidth: observable,
|
||||
iconHeight: observable,
|
||||
thumbCanvas: observable,
|
||||
thumbContext: observable,
|
||||
thumbs: observable,
|
||||
thumbIdx: observable,
|
||||
listItemHeight: observable,
|
||||
spriteCols: observable,
|
||||
loadSprite: action,
|
||||
addFontToRecent:action
|
||||
});
|
||||
}
|
||||
|
||||
iconWidth;
|
||||
iconHeight;
|
||||
thumbCanvas;
|
||||
thumbContext;
|
||||
thumbs;
|
||||
thumbIdx = 0;
|
||||
listItemHeight = 28;
|
||||
spriteCols = 1;
|
||||
fontsArray = [];
|
||||
arrayRecentFonts = [];
|
||||
fontInfo = {};
|
||||
|
|
@ -88,6 +105,42 @@ export class storeTextSettings {
|
|||
});
|
||||
|
||||
this.fontsArray = array;
|
||||
this.iconWidth = 300;
|
||||
this.iconHeight = Asc.FONT_THUMBNAIL_HEIGHT || 28;
|
||||
this.thumbCanvas = document.createElement('canvas');
|
||||
this.thumbContext = this.thumbCanvas.getContext('2d');
|
||||
this.thumbs = [
|
||||
{ratio: 1, path: '../../../../../../../sdkjs/common/Images/fonts_thumbnail.png', width: this.iconWidth, height: this.iconHeight},
|
||||
{ratio: 1.25, path: '../../../../../../../sdkjs/common/Images/fonts_thumbnail@1.25x.png', width: this.iconWidth * 1.25, height: this.iconHeight * 1.25},
|
||||
{ratio: 1.5, path: '../../../../../../../sdkjs/common/Images/fonts_thumbnail@1.5x.png', width: this.iconWidth * 1.5, height: this.iconHeight * 1.5},
|
||||
{ratio: 1.75, path: '../../../../../../../sdkjs/common/Images/fonts_thumbnail@1.75x.png', width: this.iconWidth * 1.75, height: this.iconHeight * 1.75},
|
||||
{ratio: 2, path: '../../../../../../../sdkjs/common/Images/fonts_thumbnail@2x.png', width: this.iconWidth * 2, height: this.iconHeight * 2}
|
||||
];
|
||||
|
||||
const applicationPixelRatio = Common.Utils.applicationPixelRatio();
|
||||
|
||||
let bestDistance = Math.abs(applicationPixelRatio - this.thumbs[0].ratio);
|
||||
let currentDistance = 0;
|
||||
|
||||
for (let i = 1; i < this.thumbs.length; i++) {
|
||||
currentDistance = Math.abs(applicationPixelRatio - this.thumbs[i].ratio);
|
||||
if (currentDistance < (bestDistance - 0.0001))
|
||||
{
|
||||
bestDistance = currentDistance;
|
||||
this.thumbIdx = i;
|
||||
}
|
||||
}
|
||||
|
||||
this.thumbCanvas.height = this.thumbs[this.thumbIdx].height;
|
||||
this.thumbCanvas.width = this.thumbs[this.thumbIdx].width;
|
||||
|
||||
this.loadSprite();
|
||||
}
|
||||
|
||||
loadSprite() {
|
||||
this.spriteThumbs = new Image();
|
||||
this.spriteCols = Math.floor(this.spriteThumbs.width / (this.thumbs[this.thumbIdx].width)) || 1;
|
||||
this.spriteThumbs.src = this.thumbs[this.thumbIdx].path;
|
||||
}
|
||||
|
||||
initFontInfo(fontObj) {
|
||||
|
|
@ -96,7 +149,7 @@ export class storeTextSettings {
|
|||
|
||||
addFontToRecent (font) {
|
||||
this.arrayRecentFonts.forEach(item => {
|
||||
if (item === font) this.arrayRecentFonts.splice(this.arrayRecentFonts.indexOf(item),1);
|
||||
if (item.name === font.name) this.arrayRecentFonts.splice(this.arrayRecentFonts.indexOf(item),1);
|
||||
})
|
||||
this.arrayRecentFonts.unshift(font);
|
||||
|
||||
|
|
@ -130,7 +183,7 @@ export class storeTextSettings {
|
|||
|
||||
resetFontsRecent(fonts) {
|
||||
this.arrayRecentFonts = fonts;
|
||||
this.arrayRecentFonts = this.arrayRecentFonts ? this.arrayRecentFonts.split(';') : [];
|
||||
this.arrayRecentFonts = this.arrayRecentFonts ? JSON.parse(this.arrayRecentFonts) : [];
|
||||
}
|
||||
|
||||
changeCustomTextColors (colors) {
|
||||
|
|
|
|||
|
|
@ -128,13 +128,20 @@ const PageFontsCell = props => {
|
|||
const displaySize = typeof size === 'undefined' ? _t.textAuto : size + ' ' + _t.textPt;
|
||||
const curFontName = fontInfo.name;
|
||||
const fonts = storeCellSettings.fontsArray;
|
||||
const arrayFonts = storeTextSettings.arrayRecentFonts;
|
||||
const arrayRecentFonts = storeTextSettings.arrayRecentFonts;
|
||||
const iconWidth = storeTextSettings.iconWidth;
|
||||
const iconHeight = storeTextSettings.iconHeight;
|
||||
const thumbs = storeTextSettings.thumbs;
|
||||
const thumbIdx = storeTextSettings.thumbIdx;
|
||||
const thumbCanvas = storeTextSettings.thumbCanvas;
|
||||
const thumbContext = storeTextSettings.thumbContext;
|
||||
const spriteCols = storeTextSettings.spriteCols;
|
||||
const spriteThumbs = storeTextSettings.spriteThumbs;
|
||||
|
||||
const addRecentStorage = () => {
|
||||
let arr = [];
|
||||
arrayFonts.forEach(item => arr.push(item));
|
||||
arr = arr.join(';');
|
||||
LocalStorage.setItem('sse-settings-recent-fonts', arr);
|
||||
arrayRecentFonts.forEach(item => arr.push(item));
|
||||
LocalStorage.setItem('sse-settings-recent-fonts', JSON.stringify(arr));
|
||||
}
|
||||
|
||||
const [vlFonts, setVlFonts] = useState({
|
||||
|
|
@ -153,6 +160,13 @@ const PageFontsCell = props => {
|
|||
});
|
||||
};
|
||||
|
||||
const getImageUri = (font) => {
|
||||
thumbContext.clearRect(0, 0, thumbs[thumbIdx].width, thumbs[thumbIdx].height);
|
||||
thumbContext.drawImage(spriteThumbs, 0, -thumbs[thumbIdx].height * Math.floor(font.imgidx / spriteCols));
|
||||
|
||||
return thumbCanvas.toDataURL();
|
||||
}
|
||||
|
||||
const storeFocusObjects = props.storeFocusObjects;
|
||||
if ((storeFocusObjects.focusOn !== 'cell') && Device.phone) {
|
||||
$$('.sheet-modal.modal-in').length > 0 && f7.sheet.close();
|
||||
|
|
@ -185,17 +199,14 @@ const PageFontsCell = props => {
|
|||
</ListItem>
|
||||
</List>
|
||||
<BlockTitle>{_t.textFonts}</BlockTitle>
|
||||
{!!arrayFonts.length &&
|
||||
{!!arrayRecentFonts.length &&
|
||||
<List>
|
||||
{arrayFonts.map((item,index) => (
|
||||
<ListItem
|
||||
key={index}
|
||||
radio
|
||||
checked={curFontName === item}
|
||||
title={item}
|
||||
style={{fontFamily: `${item}`}}
|
||||
onClick={() => {props.onFontClick(item)}}
|
||||
/>
|
||||
{arrayRecentFonts.map((item,index) => (
|
||||
<ListItem className="font-item" key={index} radio checked={curFontName === item.name} onClick={() => {
|
||||
props.onFontClick(item.name);
|
||||
}}>
|
||||
<img src={getImageUri(item)} style={{width: `${iconWidth}px`, height: `${iconHeight}px`}} />
|
||||
</ListItem>
|
||||
))}
|
||||
</List>
|
||||
}
|
||||
|
|
@ -205,15 +216,13 @@ const PageFontsCell = props => {
|
|||
}}>
|
||||
<ul>
|
||||
{vlFonts.vlData.items.map((item, index) => (
|
||||
<ListItem
|
||||
key={index}
|
||||
radio
|
||||
checked={curFontName === item.name}
|
||||
title={item.name}
|
||||
style={{fontFamily: `${item.name}`}}
|
||||
onClick={() => {props.onFontClick(item.name); storeTextSettings.addFontToRecent(item.name);
|
||||
addRecentStorage()}}
|
||||
></ListItem>
|
||||
<ListItem className="font-item" key={index} radio checked={curFontName === item.name} onClick={() => {
|
||||
props.onFontClick(item.name);
|
||||
storeTextSettings.addFontToRecent(item);
|
||||
addRecentStorage();
|
||||
}}>
|
||||
<img src={getImageUri(item)} style={{width: `${iconWidth}px`, height: `${iconHeight}px`}} />
|
||||
</ListItem>
|
||||
))}
|
||||
</ul>
|
||||
</List>
|
||||
|
|
|
|||
|
|
@ -99,13 +99,20 @@ const PageFonts = props => {
|
|||
const displaySize = typeof size === 'undefined' ? _t.textAuto : size + ' ' + _t.textPt;
|
||||
const curFontName = storeTextSettings.fontName;
|
||||
const fonts = storeTextSettings.fontsArray;
|
||||
const arrayFonts = storeTextSettings.arrayRecentFonts;
|
||||
const iconWidth = storeTextSettings.iconWidth;
|
||||
const iconHeight = storeTextSettings.iconHeight;
|
||||
const thumbs = storeTextSettings.thumbs;
|
||||
const thumbIdx = storeTextSettings.thumbIdx;
|
||||
const thumbCanvas = storeTextSettings.thumbCanvas;
|
||||
const thumbContext = storeTextSettings.thumbContext;
|
||||
const spriteCols = storeTextSettings.spriteCols;
|
||||
const spriteThumbs = storeTextSettings.spriteThumbs;
|
||||
const arrayRecentFonts = storeTextSettings.arrayRecentFonts;
|
||||
|
||||
const addRecentStorage = () => {
|
||||
let arr = [];
|
||||
arrayFonts.forEach(item => arr.push(item));
|
||||
arr = arr.join(';');
|
||||
LocalStorage.setItem('sse-settings-recent-fonts', arr);
|
||||
arrayRecentFonts.forEach(item => arr.push(item));
|
||||
LocalStorage.setItem('sse-settings-recent-fonts', JSON.stringify(arr));
|
||||
}
|
||||
|
||||
const [vlFonts, setVlFonts] = useState({
|
||||
|
|
@ -124,6 +131,13 @@ const PageFonts = props => {
|
|||
});
|
||||
};
|
||||
|
||||
const getImageUri = (font) => {
|
||||
thumbContext.clearRect(0, 0, thumbs[thumbIdx].width, thumbs[thumbIdx].height);
|
||||
thumbContext.drawImage(spriteThumbs, 0, -thumbs[thumbIdx].height * Math.floor(font.imgidx / spriteCols));
|
||||
|
||||
return thumbCanvas.toDataURL();
|
||||
}
|
||||
|
||||
return (
|
||||
<Page>
|
||||
<Navbar title={_t.textFonts} backLink={_t.textBack}>
|
||||
|
|
@ -150,17 +164,14 @@ const PageFonts = props => {
|
|||
</ListItem>
|
||||
</List>
|
||||
<BlockTitle>{_t.textFonts}</BlockTitle>
|
||||
{!!arrayFonts.length &&
|
||||
{!!arrayRecentFonts.length &&
|
||||
<List>
|
||||
{arrayFonts.map((item,index) => (
|
||||
<ListItem
|
||||
key={index}
|
||||
radio
|
||||
checked={curFontName === item}
|
||||
title={item}
|
||||
style={{fontFamily: `${item}`}}
|
||||
onClick={() => {props.changeFontFamily(item)}}
|
||||
/>
|
||||
{arrayRecentFonts.map((item, index) => (
|
||||
<ListItem className="font-item" key={index} radio checked={curFontName === item.name} onClick={() => {
|
||||
props.changeFontFamily(item.name);
|
||||
}}>
|
||||
<img src={getImageUri(item)} style={{width: `${iconWidth}px`, height: `${iconHeight}px`}} />
|
||||
</ListItem>
|
||||
))}
|
||||
</List>
|
||||
}
|
||||
|
|
@ -170,15 +181,13 @@ const PageFonts = props => {
|
|||
}}>
|
||||
<ul>
|
||||
{vlFonts.vlData.items.map((item, index) => (
|
||||
<ListItem
|
||||
key={index}
|
||||
radio
|
||||
checked={curFontName === item.name}
|
||||
title={item.name}
|
||||
style={{fontFamily: `${item.name}`}}
|
||||
onClick={() => {props.changeFontFamily(item.name); storeTextSettings.addFontToRecent(item.name);
|
||||
addRecentStorage()}}
|
||||
></ListItem>
|
||||
<ListItem className="font-item" key={index} radio checked={curFontName === item.name} onClick={() => {
|
||||
props.changeFontFamily(item.name);
|
||||
storeTextSettings.addFontToRecent(item);
|
||||
addRecentStorage();
|
||||
}}>
|
||||
<img src={getImageUri(item)} style={{width: `${iconWidth}px`, height: `${iconHeight}px`}} />
|
||||
</ListItem>
|
||||
))}
|
||||
</ul>
|
||||
</List>
|
||||
|
|
|
|||
Loading…
Reference in a new issue