FontView.js 3.3 KB

123456789101112131415
  1. export class FontView extends UI.SimpleView{constructor(mimeType,contentProvider){super(Common.UIString('Font'));this.registerRequiredCSS('source_frame/fontView.css');this.element.classList.add('font-view');this._url=contentProvider.contentURL();UI.ARIAUtils.setAccessibleName(this.element,ls`Preview of font from ${this._url}`);this._mimeType=mimeType;this._contentProvider=contentProvider;this._mimeTypeLabel=new UI.ToolbarText(mimeType);}
  2. syncToolbarItems(){return[this._mimeTypeLabel];}
  3. _onFontContentLoaded(uniqueFontName,deferredContent){const{content}=deferredContent;const url=content?Common.ContentProvider.contentAsDataURL(content,this._mimeType,true):this._url;this.fontStyleElement.textContent=String.sprintf('@font-face { font-family: "%s"; src: url(%s); }',uniqueFontName,url);}
  4. _createContentIfNeeded(){if(this.fontPreviewElement){return;}
  5. const uniqueFontName='WebInspectorFontPreview'+(++_fontId);this.fontStyleElement=createElement('style');this._contentProvider.requestContent().then(deferredContent=>{this._onFontContentLoaded(uniqueFontName,deferredContent);});this.element.appendChild(this.fontStyleElement);const fontPreview=createElement('div');for(let i=0;i<_fontPreviewLines.length;++i){if(i>0){fontPreview.createChild('br');}
  6. fontPreview.createTextChild(_fontPreviewLines[i]);}
  7. this.fontPreviewElement=fontPreview.cloneNode(true);UI.ARIAUtils.markAsHidden(this.fontPreviewElement);this.fontPreviewElement.style.overflow='hidden';this.fontPreviewElement.style.setProperty('font-family',uniqueFontName);this.fontPreviewElement.style.setProperty('visibility','hidden');this._dummyElement=fontPreview;this._dummyElement.style.visibility='hidden';this._dummyElement.style.zIndex='-1';this._dummyElement.style.display='inline';this._dummyElement.style.position='absolute';this._dummyElement.style.setProperty('font-family',uniqueFontName);this._dummyElement.style.setProperty('font-size',_measureFontSize+'px');this.element.appendChild(this.fontPreviewElement);}
  8. wasShown(){this._createContentIfNeeded();this.updateFontPreviewSize();}
  9. onResize(){if(this._inResize){return;}
  10. this._inResize=true;try{this.updateFontPreviewSize();}finally{delete this._inResize;}}
  11. _measureElement(){this.element.appendChild(this._dummyElement);const result={width:this._dummyElement.offsetWidth,height:this._dummyElement.offsetHeight};this.element.removeChild(this._dummyElement);return result;}
  12. updateFontPreviewSize(){if(!this.fontPreviewElement||!this.isShowing()){return;}
  13. this.fontPreviewElement.style.removeProperty('visibility');const dimension=this._measureElement();const height=dimension.height;const width=dimension.width;const containerWidth=this.element.offsetWidth-50;const containerHeight=this.element.offsetHeight-30;if(!height||!width||!containerWidth||!containerHeight){this.fontPreviewElement.style.removeProperty('font-size');return;}
  14. const widthRatio=containerWidth/width;const heightRatio=containerHeight/height;const finalFontSize=Math.floor(_measureFontSize*Math.min(widthRatio,heightRatio))-2;this.fontPreviewElement.style.setProperty('font-size',finalFontSize+'px',null);}}
  15. let _fontId=0;const _fontPreviewLines=['ABCDEFGHIJKLM','NOPQRSTUVWXYZ','abcdefghijklm','nopqrstuvwxyz','1234567890'];const _measureFontSize=50;self.SourceFrame=self.SourceFrame||{};SourceFrame=SourceFrame||{};SourceFrame.FontView=FontView;