1.11.7 • Published 9 months ago

@blockquote-web-components/blockquote-base-embedded-webview v1.11.7

Weekly downloads
-
License
MIT
Repository
-
Last release
9 months ago

Lit

blockquote-base-embedded-webview offers a responsive display using individual HTML files as content with different use cases to be displayed. It will create a select tag with the provided demo HTML files and add the [data-embedded] attribute to the loaded body tag.

Demo

Open in StackBlitz

Usage

<blockquote-base-embedded-webview heading="My demo title">
  <template data-src="./base.html" data-option="Base" data-description="base - description"></template>
  <template data-src="./complex.html" data-option="Complex" data-description="complex - description"></template>
</blockquote-base-embedded-webview>

base.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Demo Base</title>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta charset="utf-8" />
    <style>
      :root {
        font: normal medium/1.25 sans-serif;
      }
      body {
        margin: 0;
      }
      [data-embedded] .hidden {
        display: none;
      }
    </style>
  </head>
  <body>
    <h1 class="hidden">Heading</h1>
    <p>Base Demo</p>
  </body>
</html>

src/BlockquoteBaseEmbeddedWebview.js:

class: BlockquoteBaseEmbeddedWebview, blockquote-base-embedded-webview

Fields
NamePrivacyTypeDefaultDescriptionInherited From
_updateSize
_headingLevel
_lightDomTpl
_headerTpl
_headingTpl
_navigationDemosTpl
_selectTpl
_externalLinkTpl
_descriptionTpl
_readDataPosTpl
_screenSizeTpl
_mainTpl
_embeddedSlotTpl
selectedpublicnumber0Index of currently srcset file
screenSizeSelectedpublicnumber0Index of currently screen size selected
headingLevelpublicnumber1Heading level from 1 to 6
headingpublicstring''The heading of the webview.
__resetResizingbooleanfalse
__selectArrowhtml` <svg aria-hidden="true" viewBox="0 0 24 24" stroke-width="2" stroke="currentcolor" fill="none" stroke-linecap="round" stroke-linejoin="round"> <polyline points="6 9 12 15 18 9" /> </svg> `
__readDataPosobject{ x: '0', y: '0', resizing: false, cursor: '' }
limitHeightpublicbooleanfalseLimit height to 100% available
_sourcesarray[{ src: '', option: '', description: '' }]
_embeddedResizeRef
Methods
NamePrivacyDescriptionParametersReturnInherited From
_litHtmlRender
_onChangeFile{ target }
Attributes
NameFieldInherited From
headingheading
selectedselected
heading-levelheadingLevel
screen-size-selectedscreenSizeSelected
limit-heightlimitHeight

Exports

KindNameDeclarationModulePackage
jsBlockquoteBaseEmbeddedWebviewBlockquoteBaseEmbeddedWebviewsrc/BlockquoteBaseEmbeddedWebview.js

Lit

blockquote-base-embedded-webview-element wraps an iframe or object and shows it through light dom.

src/BlockquoteBaseEmbeddedWebviewElement.js:

class: BlockquoteBaseEmbeddedWebviewElement, blockquote-base-embedded-webview-element

Fields
NamePrivacyTypeDefaultDescriptionInherited From
_lightDomTpl
_loadResource
_embeddedTpl
_onLoadElement
embeddedTitlepublicstring''The title attribute on an \ to label its content
srcpublicstring''The URL of the page to embed
typepublicstring'iframe'The type of the tag to embed - iframe or object
Methods
NamePrivacyDescriptionParametersReturnInherited From
_litHtmlRender
_fetchresource
Attributes
NameFieldInherited From
embedded-titleembeddedTitle
srcsrc
typetype

Exports

KindNameDeclarationModulePackage
jsBlockquoteBaseEmbeddedWebviewElementBlockquoteBaseEmbeddedWebviewElementsrc/BlockquoteBaseEmbeddedWebviewElement.js

Lit

blockquote-base-embedded-webview-resize

src/BlockquoteBaseEmbeddedWebviewResize.js:

class: BlockquoteBaseEmbeddedWebviewResize, blockquote-base-embedded-webview-resize

Fields
NamePrivacyTypeDefaultDescriptionInherited From
_resizersTpl
_doubleclickForCssInitialSize
_cursorstring''
_createResizerLeft
_createResizerRight
_createResizerBottom
_createResizerBottomLeft
_createResizerBottomRight
_getBoundingClientRectWidthnumber0
_getBoundingClientRectHeightnumber0
Methods
NamePrivacyDescriptionParametersReturnInherited From
_createResizerDOMRect: !string, ev: PointerEvent
_resize{ detail }
_dispatchResizeEvent
_getBoundingClientRectDOMRect: !string
Events
NameTypeDescriptionInherited From
webviewresizeRaised when the element's dimensions changes

Exports

KindNameDeclarationModulePackage
jsBlockquoteBaseEmbeddedWebviewResizeBlockquoteBaseEmbeddedWebviewResizesrc/BlockquoteBaseEmbeddedWebviewResize.js

Lit

blockquote-base-embedded-webview-size provides a list of ideal screen sizes for responsive designs.

<blockquote-base-embedded-webview-size
  screen-sizes="[
    { width: 360, height: 800, id: '360x800' },
    { width: 390, height: 864, id: '390x864' },
    { width: 414, height: 896, id: '414x896' },
    { width: 768, height: 1024, id: '768x1024' },
    { width: 810, height: 1080, id: '810x1080' },
    { width: 1280, height: 720, id: '1280x800' },
    { width: 1366, height: 768, id: '1366x768' },
    { width: 1536, height: 864, id: '1536x864' },
    { width: 1920, height: 1080, id: '1920x1080' },
  ]"></blockquote-base-embedded-webview-size>

src/BlockquoteBaseEmbeddedWebviewSize.js:

class: BlockquoteBaseEmbeddedWebviewSize, blockquote-base-embedded-webview-size

Fields
NamePrivacyTypeDefaultDescriptionInherited From
selectedSize
selectedDetail
computedStyleWidth
_toolbarTpl
_visualTextTpl
_onResize
showOverflowSizepublicbooleanfalseShow screen size options that are too large for the container
selectedpublicnumber0The screen size option selected
disabledSelectedSizeTextpublicbooleanfalseIf true, selected size text is disabled
screenSizespublicarray[ { width: 360, height: 800, id: '360x800' }, { width: 390, height: 864, id: '390x864' }, { width: 414, height: 896, id: '414x896' }, { width: 768, height: 1024, id: '768x1024' }, { width: 810, height: 1080, id: '810x1080' }, { width: 1280, height: 720, id: '1280x800' }, { width: 1366, height: 768, id: '1366x768' }, { width: 1536, height: 864, id: '1536x864' }, { width: 1920, height: 1080, id: '1920x1080' }, ]The screen size options to display
widthInPercentpublicbooleanfalsePercentage value for the width
Methods
NamePrivacyDescriptionParametersReturnInherited From
_setSelectedev
Attributes
NameFieldInherited From
screen-sizesscreenSizes
width-in-percentwidthInPercent
show-overflow-sizeshowOverflowSize
disabled-selected-size-textdisabledSelectedSizeText
selectedselected

Exports

KindNameDeclarationModulePackage
jsBlockquoteBaseEmbeddedWebviewSizeBlockquoteBaseEmbeddedWebviewSizesrc/BlockquoteBaseEmbeddedWebviewSize.js

src/index.js:

Exports

KindNameDeclarationModulePackage
jsBlockquoteBaseEmbeddedWebviewBlockquoteBaseEmbeddedWebview./BlockquoteBaseEmbeddedWebview.js
jsBlockquoteBaseEmbeddedWebviewSizeBlockquoteBaseEmbeddedWebviewSize./BlockquoteBaseEmbeddedWebviewSize.js
jsBlockquoteBaseEmbeddedWebviewResizeBlockquoteBaseEmbeddedWebviewResize./BlockquoteBaseEmbeddedWebviewResize.js
jsBlockquoteBaseEmbeddedWebviewElementBlockquoteBaseEmbeddedWebviewElement./BlockquoteBaseEmbeddedWebviewElement.js

src/styles/blockquote-base-embedded-webview-element-styles.css.js:

Variables

NameDescriptionType
styles

Exports

KindNameDeclarationModulePackage
jsstylesstylessrc/styles/blockquote-base-embedded-webview-element-styles.css.js

src/styles/blockquote-base-embedded-webview-resize-styles.css.js:

Variables

NameDescriptionType
styles

Exports

KindNameDeclarationModulePackage
jsstylesstylessrc/styles/blockquote-base-embedded-webview-resize-styles.css.js

src/styles/blockquote-base-embedded-webview-size-styles.css.js:

Variables

NameDescriptionType
styles

Exports

KindNameDeclarationModulePackage
jsstylesstylessrc/styles/blockquote-base-embedded-webview-size-styles.css.js

src/styles/blockquote-base-embedded-webview-styles.css.js:

Variables

NameDescriptionType
styles

Exports

KindNameDeclarationModulePackage
jsstylesstylessrc/styles/blockquote-base-embedded-webview-styles.css.js

define/blockquote-base-embedded-webview-element.js:

Exports

KindNameDeclarationModulePackage
custom-element-definitionblockquote-base-embedded-webview-elementBlockquoteBaseEmbeddedWebviewElement/src/BlockquoteBaseEmbeddedWebviewElement.js

define/blockquote-base-embedded-webview-resize.js:

Exports

KindNameDeclarationModulePackage
custom-element-definitionblockquote-base-embedded-webview-resizeBlockquoteBaseEmbeddedWebviewResize/src/BlockquoteBaseEmbeddedWebviewResize.js

define/blockquote-base-embedded-webview-size.js:

Exports

KindNameDeclarationModulePackage
custom-element-definitionblockquote-base-embedded-webview-sizeBlockquoteBaseEmbeddedWebviewSize/src/BlockquoteBaseEmbeddedWebviewSize.js

define/blockquote-base-embedded-webview.js:

Exports

KindNameDeclarationModulePackage
custom-element-definitionblockquote-base-embedded-webviewBlockquoteBaseEmbeddedWebview/src/BlockquoteBaseEmbeddedWebview.js
1.11.7

9 months ago

1.11.6

9 months ago

1.11.5

9 months ago

1.11.4

10 months ago

1.11.3

10 months ago

1.11.2

10 months ago

1.10.3

1 year ago

1.11.1

12 months ago

1.10.2

1 year ago

1.11.0

1 year ago

1.10.1

1 year ago

1.10.0

1 year ago

1.9.0

1 year ago

1.8.0

1 year ago

1.7.0

1 year ago

1.6.6

1 year ago

1.6.5

1 year ago

1.6.4

1 year ago

1.6.3

2 years ago

1.6.2

2 years ago

1.6.1

2 years ago

1.5.3

2 years ago

1.5.2

2 years ago

1.6.0

2 years ago

1.5.1

2 years ago

1.3.3

2 years ago

1.5.0

2 years ago

1.4.1

2 years ago

1.3.2

2 years ago

1.4.0

2 years ago

1.2.6

2 years ago

1.3.1

2 years ago

1.3.0

2 years ago

1.2.0

3 years ago

1.1.1

3 years ago

1.1.0

3 years ago

1.2.5

3 years ago

1.2.4

3 years ago

1.2.3

3 years ago

1.2.2

3 years ago

1.2.1

3 years ago

1.1.2

3 years ago

1.0.9

3 years ago

1.0.8

3 years ago

1.0.7

3 years ago

1.0.6

3 years ago

1.0.5

3 years ago

1.0.4

3 years ago

1.0.3

3 years ago

1.0.2

3 years ago

1.0.1

3 years ago

1.0.0

3 years ago