How to use zoid - 10 common examples
To help you get started, we’ve selected a few zoid examples, based on popular ways it is used in public projects.
Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.
joshgreenwell / zoid-lesson / src / tutorial3 / components / child.js View on Github 
import zoid from 'zoid'
import { config } from '../../config'
const helloWorld = zoid.create({
tag: 'hello-world', // This has to be unique per js loaded on the page
url: `${config.baseUrl}/child.html`
})jQuery(".hadron-iframe").show();
return;
}
var data = this.getHadronAttributes()
data.botIsSecure = this.isSecure;
var hadronAppUrl
if (process.env.NODE_ENV == 'development') {
hadronAppUrl = 'hadron.app.html'
} else if (process.env.NODE_ENV == 'production') {
hadronAppUrl = HADRON_URL + 'hadron.app.html'
}
if (!window.hadronLauncherIframe) {
window.hadronLauncherIframe = zoid.create({
tag: 'hadron-iframe-handler', // This has to be unique per js loaded on the page
url: hadronAppUrl,
containerTemplate: ({ uid, frame, prerenderFrame, doc, props, event, dimensions : { width, height } }) => {
const CLASS = {
VISIBLE: 'visible',
INVISIBLE: 'invisible'
};
let div = doc.createElement('div');
div.setAttribute('id', uid);
const style = doc.createElement('style');
if (props.cspNonce) {
style.setAttribute('nonce', props.cspNonce);
}
style.appendChild(doc.createTextNode(`position: 'bottom-left',
bgColor: false,
textColor: false,
textAlign: 'left',
icon: false,
beforeShow: function () {},
afterShown: function () {},
beforeHide: function () {},
afterHidden: function () {},
onClick: function () {}
};
})( jQuery, window, document );
//conect iframe with parent
zoid.create({
tag: 'hadron-iframe-handler', // This has to be unique per js loaded on the page
url: 'hadron.app.html'
})
var inControl;
window.inControl = inControl = new Hadron("inControl", "#hadron-container");
inControl.runControl();import zoid from 'zoid'
import { config } from '../../config'
const element = 'zoid-component'
const options = {}
const helloWorld = zoid.create({
tag: 'hello-world', // This has to be unique per js loaded on the page
url: `${config.baseUrl}/child.html`
})
helloWorld.render(options, element)import zoid from 'zoid'
import { config } from '../../config'
const zoidComponentInit = zoid.create({
tag: 'zoid-presentation', // This has to be unique per js loaded on the page
url: `${config.baseUrl}/child.html`
})
// --------------------------------------------------
// Passing Options
// const element = document.querySelector('#title')
// element.innerHTML = window.xprops.alternateText
// document.addEventListener('click', () => {
// window.xprops.updateBackgroundColor('card', 'pink')
// }, false)if (!frame || !prerenderFrame) {
return;
}
if (container && container.tagName.toLowerCase() === 'button') {
throw new Error(`Do not render the PayPal button into a button element`);
}
frame.classList.add(CLASS.COMPONENT_FRAME);
prerenderFrame.classList.add(CLASS.PRERENDER_FRAME);
frame.classList.add(CLASS.INVISIBLE);
prerenderFrame.classList.add(CLASS.VISIBLE);
event.on(EVENT.RENDERED, () => {
prerenderFrame.classList.remove(CLASS.VISIBLE);
prerenderFrame.classList.add(CLASS.INVISIBLE);
frame.classList.remove(CLASS.INVISIBLE);
frame.classList.add(CLASS.VISIBLE);
setTimeout(() => {
destroyElement(prerenderFrame);
}, 1000);
});
// $FlowFixMe
const { style } = props;
const { label, layout, height: buttonHeight } = style;
let minimumSize = MINIMUM_SIZE[layout];}
function focusComponent(e) : ZalgoPromise {
e.preventDefault();
e.stopPropagation();
// $FlowFixMe
return focus();
}
frame.classList.add(CLASS.COMPONENT_FRAME);
prerenderFrame.classList.add(CLASS.PRERENDER_FRAME);
frame.classList.add(CLASS.INVISIBLE);
prerenderFrame.classList.add(CLASS.VISIBLE);
event.on(EVENT.RENDERED, () => {
prerenderFrame.classList.remove(CLASS.VISIBLE);
prerenderFrame.classList.add(CLASS.INVISIBLE);
frame.classList.remove(CLASS.INVISIBLE);
frame.classList.add(CLASS.VISIBLE);
setTimeout(() => {
destroyElement(prerenderFrame);
}, 1);
});
return node('div', { 'id': uid, 'onClick': focusComponent, 'class': `${ tag } ${ tag }-tag-${ tag } ${ tag }-context-${ context } ${ tag }-focus` },
node('a', { 'href': '#', 'onClick': closeComponent, 'class': `${ tag }-close` }),
node('div', { class: CLASS.OUTLET },/* @flow */
/** @jsx jsxDom */
/* eslint max-lines: 0 */
import { create } from 'zoid/src';
import { base64encode } from 'belter/src';
import { ENV } from '../constants';
import { getBrowserLocale, getCurrentScriptUrl } from '../lib';
import { config } from '../config';
import { containerTemplate } from '../billing/template';
export const ThreeDomainSecure = create({
tag: 'paypal-3ds',
name: '3ds',
buildUrl(props) : string {
const env = props.env || config.env;
return `${ config.inlinedCardFieldUrls[env] }/init3ds`;
},
get domain() : Object {
return {
...config.paypalDomains
};
},
scrolling: true,/*
event.on('zoid-resize', ({ width: newWidth, height: newHeight }) => {
if (typeof newWidth === 'number') {
div.style.width = toCSS(newWidth);
}
if (typeof newHeight === 'number') {
div.style.height = toCSS(newHeight);
}
});
*/
return div;
}
export const DiscoveryComponent = zoid.create({
// The html tag used to render my component
tag: 'thiss-cta',
url: process.env.COMPONENT_URL,
defaultEnv: 'thiss',
// default dimensions for the component
dimensions: {
width: '350px',
height: '80px'
},
// defines the log level in the JavaScript console
defaultLogLevel: process.env.LOGLEVEL,/* eslint import/no-commonjs: off, flowtype/require-valid-file-annotation: off, flowtype/require-return-type: off */
const postRobotGlobals = require('post-robot/globals');
const zoidGlobals = require('zoid/globals');
module.exports = {
__ZOID__: {
...zoidGlobals.__ZOID__,
__DEFAULT_CONTAINER__: true,
__DEFAULT_PRERENDER__: true,
__FRAMEWORK_SUPPORT__: true
},
__POST_ROBOT__: {
...postRobotGlobals.__POST_ROBOT__,
__IE_POPUP_SUPPORT__: false
},
__PAYPAL_CHECKOUT__: {
__REMEMBERED_FUNDING__: [],
__URI__: {
__CHECKOUT__: '/checkoutnow',
__BUTTONS__: '/smart/buttons',
__MENU__: '/smart/menu',
