iframeSDK

Setup

Installing the package using npm i iframehostingsdk-sam.

Please be aware of that when importing the module into a <script> tag src .js file, type='module' needs to specified for the tag.

For instance, in a index.html file where we are importing a .js file named index.js that uses this iframeSDK module, the <script> tag should be defined in the following manner

<script type="module" src="index.js"></script>

To setup the package in the src .js file,

import { FrameSDK } from "./node_modules/iframehostingsdk-sam/index.js"

In order to properly create an instance of the FrameSDK class, a HTML element and a valid web url are needed for initilizing a FrameSDK object.

For example,

let wholePage = document.body
let webUrl = 'https://funnysamx.dev'

// here a frameSDK instance is created

let frameSDK = new FrameSDK(wholePage, webUrl)

// after .init() method is called, an 'Open iFrame' button 
// will be shown on the HTML template where this SDK is being used

let wholePage = frameSDK.init() 

One thing users of this SDK should be aware of is that if the objective is to insert the <iframe> tag between elements, a third initial condition, reference HTML element before which the <iframe> tag will be inserted, is required for FrameSDK instance initializtion.

Usage

Once an instance of the FrameSDK class has been created and .init() built-in method has been triggered, 3 other major built-in methods can be accessed through the instance.

// .selectButton() will have the 'Open iFrame' button created by the .init() method selected
// and store the element in the iframeButton variable

let iframeButton = frameSDK.selectButton()

Now it is time to implement a clicking event listener onto the button. As soon as the click is detected, .buttonClicking() method can be called to have an <iframe> element embedded

iframeButton.addEventListener('click',() => {
    frameSDK.buttonClicking()
})

Base on your personal preference, the third method .containerSpacing(topMargin, bottomMargin) can be triggered after .buttonClicking() to adjust the spacing above and beneath the <iframe> element

// unlike the last event listener example seen above, 
// this one adds 50px margin on the top of the iframe tag

iframeButton.addEventListener('click',() => {
    frameSDK.buttonClicking()
    frameSDK.containerSpacing(50, 20) 
})