You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
781 lines
26 KiB
781 lines
26 KiB
function flex2html(element, json) {
|
|
let carousel = carousel_struc()
|
|
let result = ''
|
|
|
|
if(json['type'] === 'flex') {
|
|
json = json['contents']
|
|
if(json['type'] === 'bubble') {
|
|
result = bubble_object(json)
|
|
carousel = carousel.replace('<!-- inner -->', result)
|
|
} else if(json['type'] === 'carousel') {
|
|
json['contents'].forEach((obj, index) => {
|
|
let result = bubble_object(obj)
|
|
result = result.replace('<!-- content -->', '')
|
|
result = result.replace('<!-- inner -->', '')
|
|
carousel = carousel.replace('<!-- inner -->', result + '<!-- inner -->')
|
|
})
|
|
}
|
|
}
|
|
|
|
document.getElementById(element).innerHTML += carousel
|
|
return carousel
|
|
}
|
|
|
|
function bubble_object(json) {
|
|
let { hero, header, body, footer } = json
|
|
let hero_object = hero_struc(json)
|
|
let header_object = header_struc(json)
|
|
let body_object = body_struc(json)
|
|
let footer_object = footer_struc(json)
|
|
let bubble = bubble_struc(json)
|
|
|
|
let box = ''
|
|
for(let key in hero){
|
|
if(hero.hasOwnProperty(key)) {
|
|
if(key === 'type' && hero[key] === 'box') {
|
|
box = box_object(hero)
|
|
let box_inner = box_recursive(box, hero['contents'])
|
|
box = box_inner
|
|
} else {
|
|
box = convert_object(hero)
|
|
}
|
|
}
|
|
}
|
|
hero_object = hero_object.replace('<!-- inner -->', box)
|
|
|
|
box = ''
|
|
for(let key in header){
|
|
if(header.hasOwnProperty(key)) {
|
|
if(key === 'type' && header[key] === 'box') {
|
|
box = box_object(header)
|
|
let box_inner = box_recursive(box, header['contents'])
|
|
box = box_inner
|
|
}
|
|
}
|
|
}
|
|
header_object = header_object.replace('<!-- inner -->', box)
|
|
|
|
box = ''
|
|
for(let key in body){
|
|
if(body.hasOwnProperty(key)) {
|
|
if(key === 'type' && body[key] === 'box') {
|
|
box = box_object(body)
|
|
let box_inner = box_recursive(box, body['contents'])
|
|
box = box_inner
|
|
}
|
|
}
|
|
}
|
|
body_object = body_object.replace('<!-- inner -->', box)
|
|
|
|
box = ''
|
|
for(let key in footer){
|
|
if(footer.hasOwnProperty(key)) {
|
|
if(key === 'type' && footer[key] === 'box') {
|
|
box = box_object(footer)
|
|
let box_inner = box_recursive(box, footer['contents'])
|
|
box = box_inner
|
|
}
|
|
}
|
|
}
|
|
footer_object = footer_object.replace('<!-- inner -->', box)
|
|
|
|
|
|
bubble = bubble.replace('<!-- hero -->', hero_object)
|
|
bubble = bubble.replace('<!-- header -->', header_object)
|
|
bubble = bubble.replace('<!-- body -->', body_object)
|
|
bubble = bubble.replace('<!-- footer -->', footer_object)
|
|
|
|
return bubble
|
|
}
|
|
function box_recursive(parent_box, json) {
|
|
let result = []
|
|
json.forEach((obj, index) => {
|
|
let temp
|
|
if(obj['type'] === 'box') {
|
|
let temp2 = box_object(obj)
|
|
temp = box_recursive(temp2, obj['contents'])
|
|
} else if(obj['type'] === 'text' && obj['contents'] && obj['contents'].length > 0 ) {
|
|
let temp2 = convert_object(obj)
|
|
temp = box_recursive(temp2, obj['contents'])
|
|
} else {
|
|
temp = convert_object(obj)
|
|
}
|
|
result[index] = temp
|
|
})
|
|
json.forEach((obj, index) => {
|
|
result[index] = result[index].replace('<!-- content -->', '')
|
|
parent_box = parent_box.replace('<!-- content -->', result[index] + '<!-- content -->')
|
|
})
|
|
|
|
return parent_box
|
|
}
|
|
|
|
function convert_object(json) {
|
|
switch(json['type']) {
|
|
case 'image':
|
|
object = image_object(json)
|
|
break;
|
|
case 'icon':
|
|
object = icon_object(json)
|
|
break;
|
|
case 'text':
|
|
object = text_object(json)
|
|
break;
|
|
case 'span':
|
|
object = span_object(json)
|
|
break;
|
|
case 'button':
|
|
object = button_object(json)
|
|
break;
|
|
case 'filler':
|
|
object = filler_object(json)
|
|
break;
|
|
case 'spacer':
|
|
object = spacer_object(json)
|
|
break;
|
|
case 'separator':
|
|
object = separator_object(json)
|
|
break;
|
|
default:
|
|
object = null
|
|
}
|
|
return object
|
|
}
|
|
|
|
function box_object(json) {
|
|
let style = ''
|
|
let {layout, position, flex, spacing, margin, width, height, backgroundColor, borderColor, borderWidth, cornerRadius, justifyContent, alignItems, offsetTop, offsetBottom, offsetStart, offsetEnd, paddingAll, paddingTop, paddingBottom, paddingStart, paddingEnd, background} = json
|
|
if(layout === 'baseline') {
|
|
layout1 = 'hr'
|
|
layout2 = 'bl'
|
|
} else if(layout === 'horizontal') {
|
|
layout1 = 'hr'
|
|
layout2 = ''
|
|
} else if(layout === 'vertical') {
|
|
layout1 = 'vr'
|
|
layout2 = ''
|
|
}
|
|
fl = ''
|
|
if(flex > 3) {
|
|
style += `-webkit-box-flex:${flex};flex-grow:${flex};`
|
|
} else {
|
|
fl = (flex >= 0) ? `fl${flex}` : ''
|
|
}
|
|
exabs = (position === 'absolute') ? 'ExAbs' : ''
|
|
|
|
if(spacing && spacing.indexOf("px") >= 0) {
|
|
spc = ''
|
|
} else {
|
|
spc = (spacing) ? 'spc' + upperalldigit(spacing) : ''
|
|
}
|
|
|
|
if(margin && (margin.indexOf("px") >= 0 || margin.indexOf("%") >= 0)) {
|
|
style += `margin-top:${margin};`
|
|
exmgn = ''
|
|
} else {
|
|
exmgn = (margin) ? 'ExMgnT' + upperalldigit(margin) : ''
|
|
}
|
|
if(width && width !== '') {
|
|
style += `width:${width}; max-width:${width};`
|
|
}
|
|
if(height && height !== '') {
|
|
style += `height:${height};`
|
|
}
|
|
if(backgroundColor) {
|
|
style += `background-color:${backgroundColor} !important;`
|
|
}
|
|
if(borderColor) {
|
|
style += `border-color:${borderColor} !important;`
|
|
}
|
|
|
|
if(borderWidth && (borderWidth.indexOf("px") >= 0 || borderWidth.indexOf("%") >= 0)) {
|
|
style += `border-width:${borderWidth};`
|
|
ExBdr = ''
|
|
} else {
|
|
switch(borderWidth) {
|
|
case 'none':
|
|
ExBdr = 'ExBdrWdtNone'
|
|
break;
|
|
case 'light':
|
|
ExBdr = 'ExBdrWdtLgh'
|
|
break;
|
|
case 'normal':
|
|
ExBdr = 'ExBdrWdtNml'
|
|
break;
|
|
case 'medium':
|
|
ExBdr = 'ExBdrWdtMdm'
|
|
break;
|
|
case 'semi-bold':
|
|
ExBdr = 'ExBdrWdtSbd'
|
|
break;
|
|
case 'bold':
|
|
ExBdr = 'ExBdrWdtBld'
|
|
break;
|
|
default:
|
|
ExBdr = ''
|
|
// code block
|
|
}
|
|
}
|
|
if(cornerRadius && (cornerRadius.indexOf("px") >= 0 || cornerRadius.indexOf("%") >= 0)) {
|
|
style += `border-radius:${cornerRadius};`
|
|
ExBdrRad = ''
|
|
} else {
|
|
ExBdrRad = (cornerRadius) ? 'ExBdrRad' + upperalldigit(cornerRadius) : ''
|
|
}
|
|
|
|
jfc = ''
|
|
if(justifyContent && justifyContent !== '') {
|
|
switch(justifyContent) {
|
|
case 'center':
|
|
jfc = 'itms-jfcC'
|
|
break;
|
|
case 'flex-start':
|
|
jfc = 'itms-jfcS'
|
|
break;
|
|
case 'flex-end':
|
|
jfc = 'itms-jfcE'
|
|
break;
|
|
case 'space-between':
|
|
jfc = 'itms-jfcSB'
|
|
break;
|
|
case 'space-around':
|
|
jfc = 'itms-jfcSA'
|
|
break;
|
|
case 'space-evenly':
|
|
jfc = 'itms-jfcSE'
|
|
break;
|
|
default:
|
|
jfc = ''
|
|
// code block
|
|
}
|
|
}
|
|
alg = ''
|
|
if(alignItems && alignItems !== '') {
|
|
switch(alignItems) {
|
|
case 'center':
|
|
alg = 'itms-algC'
|
|
break;
|
|
case 'flex-start':
|
|
alg = 'itms-algS'
|
|
break;
|
|
case 'flex-end':
|
|
alg = 'itms-algE'
|
|
break;
|
|
default:
|
|
alg = ''
|
|
// code block
|
|
}
|
|
}
|
|
if(offsetTop && (offsetTop.indexOf("px") >= 0 || offsetTop.indexOf("%") >= 0)) {
|
|
style += `top:${offsetTop};`
|
|
ext = ''
|
|
} else {
|
|
ext = (offsetTop) ? 'ExT' + upperalldigit(offsetTop) : ''
|
|
}
|
|
|
|
if(offsetBottom && (offsetBottom.indexOf("px") >= 0 || offsetBottom.indexOf("%") >= 0)) {
|
|
style += `bottom:${offsetBottom};`
|
|
exb = ''
|
|
} else {
|
|
exb = (offsetBottom) ? 'ExB' + upperalldigit(offsetBottom) : ''
|
|
}
|
|
|
|
if(offsetStart && (offsetStart.indexOf("px") >= 0 ||offsetStart.indexOf("%") >= 0)) {
|
|
style += `left:${offsetStart};`
|
|
exl = ''
|
|
} else {
|
|
exl = (offsetStart) ? 'ExL' + upperalldigit(offsetStart) : ''
|
|
}
|
|
|
|
if(offsetEnd && (offsetEnd.indexOf("px") >= 0 || offsetEnd.indexOf("%") >= 0)) {
|
|
style += `right:${offsetEnd};`
|
|
exr = ''
|
|
} else {
|
|
exr = (offsetEnd) ? 'ExR' + upperalldigit(offsetEnd) : ''
|
|
}
|
|
|
|
if(paddingAll && (paddingAll.indexOf("px") >= 0 || paddingAll.indexOf("%") >= 0)) {
|
|
style += `padding:${paddingAll};`
|
|
ExPadA = ''
|
|
} else {
|
|
ExPadA = (paddingAll) ? 'ExPadA' + upperalldigit(paddingAll) : ''
|
|
}
|
|
|
|
if(paddingTop && (paddingTop.indexOf("px") >= 0 ||paddingTop.indexOf("%") >= 0)) {
|
|
style += `padding-top:${paddingTop};`
|
|
ExPadT = ''
|
|
} else {
|
|
ExPadT = (paddingTop) ? 'ExPadT' + upperalldigit(paddingTop) : ''
|
|
}
|
|
|
|
if(paddingBottom && (paddingBottom.indexOf("px") >= 0 || paddingBottom.indexOf("%")>=0)) {
|
|
style += `padding-bottom:${paddingBottom};`
|
|
ExPadB = ''
|
|
} else {
|
|
ExPadB = (paddingBottom) ? 'ExPadB' + upperalldigit(paddingBottom) : ''
|
|
}
|
|
|
|
if(paddingStart && (paddingStart.indexOf("px") >= 0 || paddingStart.indexOf("%") >= 0)) {
|
|
style += `padding-left:${paddingStart};`
|
|
ExPadL = ''
|
|
} else {
|
|
ExPadL = (paddingStart) ? 'ExPadL' + upperalldigit(paddingStart) : ''
|
|
}
|
|
|
|
if(paddingEnd && (paddingEnd.indexOf("px") >= 0 || paddingEnd.indexOf("%") >= 0)) {
|
|
style += `padding-right:${paddingEnd};`
|
|
ExPadR = ''
|
|
} else {
|
|
ExPadR = (paddingEnd) ? 'ExPadR' + upperalldigit(paddingEnd) : ''
|
|
}
|
|
|
|
if(background && background.type === 'linearGradient') {
|
|
centerPosition = (background.centerPosition) ? background.centerPosition : '50%'
|
|
if(background.centerColor) {
|
|
style += `background: linear-gradient(${background.angle}, ${background.startColor} 0%, ${background.centerColor} ${centerPosition}, ${background.endColor} 100%);`
|
|
} else {
|
|
style += `background: linear-gradient(${background.angle}, ${background.startColor} 0%, ${background.endColor} 100%);`
|
|
}
|
|
}
|
|
|
|
return `<div class="MdBx ${layout1} ${layout2} ${fl} ${exabs} ${exmgn} ${spc} ${ExBdr} ${ExBdrRad} ${jfc} ${alg} ${ext} ${exb} ${exl} ${exr} ${ExPadA} ${ExPadT} ${ExPadB} ${ExPadL} ${ExPadR}" style="${style}"><!-- content --></div>`
|
|
}
|
|
|
|
function button_object(json) {
|
|
style2 = ''
|
|
style3 = ''
|
|
|
|
let {flex, margin, position, height, style, color, gravity, adjustMode, offsetTop, offsetBottom, offsetStart, offsetEnd, action} = json
|
|
|
|
fl = ''
|
|
if(flex > 3) {
|
|
style2 += `-webkit-box-flex:${flex};flex-grow:${flex};`
|
|
} else {
|
|
fl = (flex >= 0) ? `fl${flex}` : ''
|
|
}
|
|
exabs = (position === 'absolute') ? 'ExAbs' : ''
|
|
|
|
if(margin && (margin.indexOf("px") >= 0||margin.indexOf("%") >= 0)) {
|
|
style2 += `margin-top:${margin};`
|
|
exmgn = ''
|
|
} else {
|
|
exmgn = (margin) ? 'ExMgnT' + upperalldigit(margin) : ''
|
|
}
|
|
|
|
height = (!height || height === '' || height === 'md') ? '' : 'Ex' + upperalldigit(height)
|
|
grv = (gravity === 'bottom' || gravity === 'center') ? 'grv' + upper1digit(gravity) : '';
|
|
|
|
ExBtn = 'ExBtnL'
|
|
if(style && style !== '') {
|
|
switch(style) {
|
|
case 'link':
|
|
ExBtn = 'ExBtnL'
|
|
break;
|
|
case 'primary':
|
|
ExBtn = 'ExBtn1'
|
|
break;
|
|
case 'secondary':
|
|
ExBtn = 'ExBtn2'
|
|
break;
|
|
default:
|
|
ExBtn = 'ExBtnL'
|
|
// code block
|
|
}
|
|
}
|
|
|
|
if(color) {
|
|
style3 += `background-color:${color} !important;`
|
|
}
|
|
|
|
if(offsetTop && (offsetTop.indexOf("px") >= 0 || offsetTop.indexOf("%") >= 0)) {
|
|
style2 += `top:${offsetTop};`
|
|
ext = ''
|
|
} else {
|
|
ext = (offsetTop) ? 'ExT' + upperalldigit(offsetTop) : ''
|
|
}
|
|
|
|
if(offsetBottom && (offsetBottom.indexOf("px") >= 0||offsetBottom.indexOf("%") >= 0)) {
|
|
style2 += `bottom:${offsetBottom};`
|
|
exb = ''
|
|
} else {
|
|
exb = (offsetBottom) ? 'ExB' + upperalldigit(offsetBottom) : ''
|
|
}
|
|
|
|
if(offsetStart && (offsetStart.indexOf("px") >= 0 ||offsetStart.indexOf("%") >= 0)) {
|
|
style2 += `left:${offsetStart};`
|
|
exl = ''
|
|
} else {
|
|
exl = (offsetStart) ? 'ExL' + upperalldigit(offsetStart) : ''
|
|
}
|
|
|
|
if(offsetEnd && (offsetEnd.indexOf("px") >= 0 || offsetEnd.indexOf("%") >= 0)) {
|
|
style2 += `right:${offsetEnd};`
|
|
exr = ''
|
|
} else {
|
|
exr = (offsetEnd) ? 'ExR' + upperalldigit(offsetEnd) : ''
|
|
}
|
|
|
|
action = (!action) ? {'type':'none'} : action
|
|
if(action.type === 'uri') {
|
|
return `<div class="MdBtn ${ExBtn} ${height} ${fl} ${exabs} ${exmgn} ${grv} ${ext} ${exb} ${exl} ${exr}" style="${style2}" id="8d1efea2-4017-4c89-8931-98a5f4f141f2"><a href="${action.uri}" target="_blank" style="${style3}"><div>${action.label}</div></a></div>`
|
|
} else if(action.type === 'message') {
|
|
return `<div class="MdBtn ${ExBtn} ${height} ${fl} ${exabs} ${exmgn} ${grv} ${ext} ${exb} ${exl} ${exr}" style="${style2}" id="8d1efea2-4017-4c89-8931-98a5f4f141f2"><a onclick="alert('message: ${action.text}')" style="${style3}"><div>${action.label}</div></a></div>`
|
|
} else if(action.type === 'postback') {
|
|
return `<div class="MdBtn ${ExBtn} ${height} ${fl} ${exabs} ${exmgn} ${grv} ${ext} ${exb} ${exl} ${exr}" style="${style2}" id="8d1efea2-4017-4c89-8931-98a5f4f141f2"><a onclick="alert('postback data: ${action.data}')" style="${style3}"><div>${action.label}</div></a></div>`
|
|
} else {
|
|
return `<div class="MdBtn ${ExBtn} ${height} ${fl} ${exabs} ${exmgn} ${grv} ${ext} ${exb} ${exl} ${exr}" style="${style2}" id="8d1efea2-4017-4c89-8931-98a5f4f141f2"><a style="${style3}"><div>${action.label}</div></a></div>`
|
|
}
|
|
}
|
|
function filler_object(json) {
|
|
let style = ''
|
|
let {flex} = json
|
|
fl = ''
|
|
if(flex > 3) {
|
|
style += `-webkit-box-flex:${flex};flex-grow:${flex};`
|
|
} else {
|
|
fl = (flex >= 0) ? `fl${flex}` : ''
|
|
}
|
|
return `<div class="mdBxFiller ${fl}" style="${style}" ></div>`
|
|
}
|
|
function icon_object(json) {
|
|
let style2 = ''
|
|
let {size, aspectRatio, url, position, margin, offsetTop, offsetBottom, offsetStart, offsetEnd} = json
|
|
let styleimg = `background-image:url('${url}');`
|
|
|
|
size = (!size || size === '') ? 'md' : size
|
|
if(size.indexOf("px") >= 0 || size.indexOf("%") >= 0) {
|
|
style2 += `font-size:${size};`
|
|
size = ''
|
|
} else {
|
|
size = 'Ex' + upperalldigit(size)
|
|
}
|
|
|
|
if(!aspectRatio || aspectRatio === '') {
|
|
styleimg += `width:1em;`
|
|
} else {
|
|
ratio = ratio[0]/ratio[1]
|
|
styleimg += `width:${ratio}em;`
|
|
}
|
|
exabs = (position === 'absolute') ? 'ExAbs' : ''
|
|
|
|
if(margin && (margin.indexOf("px") >= 0 ||margin.indexOf("%") >= 0)) {
|
|
style2 += `margin-top:${margin};`
|
|
exmgn = ''
|
|
} else {
|
|
exmgn = (margin) ? 'ExMgnT' + upperalldigit(margin) : ''
|
|
}
|
|
|
|
if(offsetTop && (offsetTop.indexOf("px") >= 0||offsetTop.indexOf("%") >= 0)) {
|
|
style2 += `top:${offsetTop};`
|
|
ext = ''
|
|
} else {
|
|
ext = (offsetTop) ? 'ExT' + upperalldigit(offsetTop) : ''
|
|
}
|
|
|
|
if(offsetBottom && (offsetBottom.indexOf("px") >= 0 || offsetBottom.indexOf("%") >= 0)) {
|
|
style2 += `bottom:${offsetBottom};`
|
|
exb = ''
|
|
} else {
|
|
exb = (offsetBottom) ? 'ExB' + upperalldigit(offsetBottom) : ''
|
|
}
|
|
|
|
if(offsetStart && (offsetStart.indexOf("px") >= 0||offsetStart.indexOf("%") >= 0)) {
|
|
style2 += `left:${offsetStart};`
|
|
exl = ''
|
|
} else {
|
|
exl = (offsetStart) ? 'ExL' + upperalldigit(offsetStart) : ''
|
|
}
|
|
|
|
if(offsetEnd && (offsetEnd.indexOf("px") >= 0 || offsetEnd.indexOf("%") >= 0)) {
|
|
style2 += `right:${offsetEnd};`
|
|
exr = ''
|
|
} else {
|
|
exr = (offsetEnd) ? 'ExR' + upperalldigit(offsetEnd) : ''
|
|
}
|
|
|
|
return `<div class="MdIco fl0 ${size} ${exabs} ${exmgn} ${ext} ${exb} ${exl} ${exr}" style="${style2}" ><div><span style="${styleimg}"></span></div></div>`
|
|
}
|
|
function image_object(json) {
|
|
let style = ''
|
|
let style2 = ''
|
|
let {aspectMode, size, aspectRatio, url, position, flex, margin, align, gravity, backgroundColor, offsetTop, offsetBottom, offsetStart, offsetEnd, action} = json
|
|
let styleimg = `background-image:url('${url}');`
|
|
if(backgroundColor) {
|
|
styleimg += `background-color:${backgroundColor} !important;`
|
|
}
|
|
|
|
aspectMode = (!aspectMode || aspectMode === '') ? 'fit' : aspectMode
|
|
size = (!size || size === '') ? 'md' : size
|
|
aspectMode = upperalldigit(aspectMode)
|
|
if(size.indexOf("px") >= 0||size.indexOf("%") >= 0) {
|
|
style2 += `width:${size};`
|
|
size = ''
|
|
} else {
|
|
size = 'Ex' + upperalldigit(size)
|
|
}
|
|
|
|
if(!aspectRatio || aspectRatio === '') {
|
|
ratio = '100'
|
|
} else {
|
|
ratio = aspectRatio.split(':')
|
|
ratio = ratio[1]*100/ratio[0]
|
|
}
|
|
fl = ''
|
|
if(flex > 3) {
|
|
style += `-webkit-box-flex:${flex};flex-grow:${flex};`
|
|
} else {
|
|
fl = (flex >= 0) ? `fl${flex}` : ''
|
|
}
|
|
exabs = (position === 'absolute') ? 'ExAbs' : ''
|
|
|
|
if(margin && (margin.indexOf("px") >= 0||margin.indexOf("%") >= 0)) {
|
|
style += `margin-top:${margin};`
|
|
exmgn = ''
|
|
} else {
|
|
exmgn = (margin) ? 'ExMgnT' + upperalldigit(margin) : ''
|
|
}
|
|
|
|
alg = (align === 'start' || align === 'end') ? 'alg' + upper1digit(align) : '';
|
|
grv = (gravity === 'bottom' || gravity === 'center') ? 'grv' + upper1digit(gravity) : '';
|
|
|
|
if(offsetTop && (offsetTop.indexOf("px") >= 0||offsetTop.indexOf("%") >= 0)) {
|
|
style += `top:${offsetTop};`
|
|
ext = ''
|
|
} else {
|
|
ext = (offsetTop) ? 'ExT' + upperalldigit(offsetTop) : ''
|
|
}
|
|
|
|
if(offsetBottom && (offsetBottom.indexOf("px") >= 0||offsetBottom.indexOf("%") >= 0)) {
|
|
style += `bottom:${offsetBottom};`
|
|
exb = ''
|
|
} else {
|
|
exb = (offsetBottom) ? 'ExB' + upperalldigit(offsetBottom) : ''
|
|
}
|
|
|
|
if(offsetStart && (offsetStart.indexOf("px") >= 0 ||offsetStart.indexOf("%") >= 0)) {
|
|
style += `left:${offsetStart};`
|
|
exl = ''
|
|
} else {
|
|
exl = (offsetStart) ? 'ExL' + upperalldigit(offsetStart) : ''
|
|
}
|
|
|
|
if(offsetEnd && (offsetEnd.indexOf("px") >= 0||offsetEnd.indexOf("%") >= 0)) {
|
|
style += `right:${offsetEnd};`
|
|
exr = ''
|
|
} else {
|
|
exr = (offsetEnd) ? 'ExR' + upperalldigit(offsetEnd) : ''
|
|
}
|
|
action = (!action) ? {'type':'none'} : action
|
|
if(action.type === 'uri') {
|
|
return `<div class="MdImg Ex${aspectMode} ${fl} ${size} ${exabs} ${exmgn} ${alg} ${grv} ${ext} ${exb} ${exl} ${exr}" style="${style}">
|
|
<div style="${style2}">
|
|
<a href="${action.uri}" target="_blank" style="padding-bottom:${ratio}%;">
|
|
<span style="${styleimg}"></span>
|
|
</a>
|
|
</div>
|
|
</div>`
|
|
} else if(action.type === 'message') {
|
|
return `<div class="MdImg Ex${aspectMode} ${fl} ${size} ${exabs} ${exmgn} ${alg} ${grv} ${ext} ${exb} ${exl} ${exr}" style="${style}">
|
|
<div style="${style2}">
|
|
<a onclick="alert('message: ${action.text}')" style="padding-bottom:${ratio}%;">
|
|
<span style="${styleimg}"></span>
|
|
</a>
|
|
</div>
|
|
</div>`
|
|
} else if(action.type === 'postback') {
|
|
return `<div class="MdImg Ex${aspectMode} ${fl} ${size} ${exabs} ${exmgn} ${alg} ${grv} ${ext} ${exb} ${exl} ${exr}" style="${style}">
|
|
<div style="${style2}">
|
|
<a onclick="alert('postback data: ${action.data}')" style="padding-bottom:${ratio}%;">
|
|
<span style="${styleimg}"></span>
|
|
</a>
|
|
</div>
|
|
</div>`
|
|
} else {
|
|
return `<div class="MdImg Ex${aspectMode} ${fl} ${size} ${exabs} ${exmgn} ${alg} ${grv} ${ext} ${exb} ${exl} ${exr}" style="${style}">
|
|
<div style="${style2}">
|
|
<a style="padding-bottom:${ratio}%;">
|
|
<span style="${styleimg}"></span>
|
|
</a>
|
|
</div>
|
|
</div>`
|
|
}
|
|
|
|
|
|
}
|
|
function separator_object(json) {
|
|
let style = ''
|
|
let {margin, color} = json
|
|
|
|
if(margin && (margin.indexOf("px") >= 0||margin.indexOf("%") >= 0)) {
|
|
style += `margin-top:${margin};`
|
|
exmgn = ''
|
|
} else {
|
|
exmgn = (margin) ? 'ExMgnT' + upperalldigit(margin) : ''
|
|
}
|
|
if(color) {
|
|
style += `border-color:${color} !important;`
|
|
}
|
|
|
|
return `<div class="fl0 MdSep ${exmgn}" style="${style}" ></div>`
|
|
}
|
|
function spacer_object(json) {
|
|
let {size} = json
|
|
size = (!size || size === '') ? 'md' : size
|
|
if(size.indexOf("px") >= 0 || size.indexOf("%") >= 0) {
|
|
size = ''
|
|
} else {
|
|
size = 'spc' + upperalldigit(size)
|
|
}
|
|
return `<div class="mdBxSpacer ${size} fl0" ></div>`
|
|
}
|
|
function span_object(json) {
|
|
|
|
let style2 = ''
|
|
let {text, size, color, weight, style, decoration} = json
|
|
|
|
if(size && size !== '') {
|
|
if(size.indexOf("px") >= 0 || size.indexOf("%") >= 0) {
|
|
style2 += `font-size:${size};`
|
|
size = ''
|
|
} else {
|
|
size = 'Ex' + upperalldigit(size)
|
|
}
|
|
} else {
|
|
size = ''
|
|
}
|
|
|
|
if(color && color!=='') {
|
|
style2 += `color:${color};`
|
|
}
|
|
ExWB = (weight === 'bold') ? 'ExWB' : ''
|
|
ExFntSty = (style === 'normal') ? 'ExFntStyNml' : (style === 'italic') ? 'ExFntStyIt' : ''
|
|
ExTxtDec = (decoration === 'line-through') ? 'ExTxtDecLt' : (decoration === 'underline') ? 'ExTxtDecUl' : (decoration === 'none') ? 'ExTxtDecNone' : ''
|
|
|
|
return `<span class="MdSpn ${ExWB} ${size} ${ExFntSty} ${ExTxtDec}" style="${style2}" >${text}</span>`
|
|
}
|
|
function carousel_struc() {
|
|
return `<div class="LySlider"><div class="lyInner"><!-- inner --></div></div><br>`
|
|
}
|
|
|
|
function bubble_struc(json) {
|
|
let {size, direction, action} = json
|
|
size = (!size || size === '') ? 'medium' : size
|
|
direction = (!direction || direction == '') ? 'ltr' : direction
|
|
size = upper2digit(size)
|
|
|
|
return `<div class="lyItem Ly${size}"><div class="T1 fx${direction.toUpperCase()}" dir="${direction}"><!-- hero --><!-- header --><!-- body --><!-- footer --></div></div>`
|
|
}
|
|
function hero_struc(json) {
|
|
let {styles} = json
|
|
let backgroundColor = ''
|
|
if(styles) {
|
|
let { hero } = styles
|
|
backgroundColor = (hero && hero.backgroundColor) ? `background-color:${hero.backgroundColor}` : ''
|
|
}
|
|
return `<div class="t1Hero" style="${backgroundColor}"><!-- inner --></div>`
|
|
}
|
|
function header_struc(json) {
|
|
let {styles} = json
|
|
let backgroundColor = ''
|
|
if(styles) {
|
|
let { header } = styles
|
|
backgroundColor = (header && header.backgroundColor) ? `background-color:${header.backgroundColor}` : ''
|
|
}
|
|
return `<div class="t1Header" style="${backgroundColor}"><!-- inner --></div>`
|
|
}
|
|
function body_struc(json) {
|
|
let {footer, styles} = json
|
|
let backgroundColor = ''
|
|
if(styles) {
|
|
let { body } = styles
|
|
backgroundColor = (body && body.backgroundColor) ? `background-color:${body.backgroundColor}` : ''
|
|
}
|
|
let ExHasFooter = (footer) ? 'ExHasFooter' : ''
|
|
return `<div class="t1Body ${ExHasFooter}" style="${backgroundColor}"><!-- inner --></div>`
|
|
}
|
|
function footer_struc(json) {
|
|
let {styles} = json
|
|
let backgroundColor = ''
|
|
if(styles) {
|
|
let { footer } = styles
|
|
backgroundColor = (footer && footer.backgroundColor) ? `background-color:${footer.backgroundColor}` : ''
|
|
}
|
|
return `<div class="t1Footer" style="${backgroundColor}"><!-- inner --></div>`
|
|
}
|
|
function text_object(json) {
|
|
|
|
let style2 = ''
|
|
let {flex, margin, size, position, align, gravity, text, color, weight, style, decoration, wrap, maxLines, adjustMode, offsetTop, offsetBottom, offsetStart, offsetEnd} = json
|
|
|
|
fl = ''
|
|
if(flex > 3) {
|
|
style2 += `-webkit-box-flex:${flex};flex-grow:${flex};`
|
|
} else {
|
|
fl = (flex >= 0) ? `fl${flex}` : ''
|
|
}
|
|
exabs = (position === 'absolute') ? 'ExAbs' : ''
|
|
|
|
if(margin && (margin.indexOf("px") >= 0 || margin.indexOf("%") >= 0)) {
|
|
style2 += `margin-top:${margin};`
|
|
exmgn = ''
|
|
} else {
|
|
exmgn = (margin) ? 'ExMgnL' + upperalldigit(margin) : ''
|
|
}
|
|
|
|
alg = (align === 'start' || align === 'end' || align === 'center') ? 'ExAlg' + upper1digit(align) : '';
|
|
grv = (gravity === 'bottom' || gravity === 'center') ? 'grv' + upper1digit(gravity) : '';
|
|
size = (!size || size === '') ? 'md' : size
|
|
if(size.indexOf("px") >= 0 || size.indexOf("%") >= 0) {
|
|
style2 += `font-size:${size};`
|
|
size = ''
|
|
} else {
|
|
size = 'Ex' + upperalldigit(size)
|
|
}
|
|
|
|
if(color && color!=='') {
|
|
style2 += `color:${color};`
|
|
}
|
|
ExWB = (weight === 'bold') ? 'ExWB' : ''
|
|
ExFntSty = (style === 'normal') ? 'ExFntStyNml' : (style === 'italic') ? 'ExFntStyIt' : ''
|
|
ExTxtDec = (decoration === 'line-through') ? 'ExTxtDecLt' : (decoration === 'underline') ? 'ExTxtDecUl' : (decoration === 'none') ? 'ExTxtDecNone' : ''
|
|
ExWrap = (wrap === true) ? 'ExWrap' : ''
|
|
if(offsetTop && (offsetTop.indexOf("px") >= 0 || offsetTop.indexOf("%") >= 0)) {
|
|
style2 += `top:${offsetTop};`
|
|
ext = ''
|
|
} else {
|
|
ext = (offsetTop) ? 'ExT' + upperalldigit(offsetTop) : ''
|
|
}
|
|
|
|
if(offsetBottom && (offsetBottom.indexOf("px") >= 0||offsetBottom.indexOf("%") >= 0)) {
|
|
style2 += `bottom:${offsetBottom};`
|
|
exb = ''
|
|
} else {
|
|
exb = (offsetBottom) ? 'ExB' + upperalldigit(offsetBottom) : ''
|
|
}
|
|
|
|
if(offsetStart && offsetStart.indexOf("px") >= 0) {
|
|
style2 += `left:${offsetStart};`
|
|
exl = ''
|
|
} else {
|
|
exl = (offsetStart) ? 'ExL' + upperalldigit(offsetStart) : ''
|
|
}
|
|
|
|
if(offsetEnd && (offsetEnd.indexOf("px") >= 0 || offsetEnd.indexOf("%") >= 0)) {
|
|
style2 += `right:${offsetEnd};`
|
|
exr = ''
|
|
} else {
|
|
exr = (offsetEnd) ? 'ExR' + upperalldigit(offsetEnd) : ''
|
|
}
|
|
text = (!text) ? '' : text
|
|
return `<div class="MdTxt ${fl} ${exabs} ${exmgn} ${alg} ${grv} ${size} ${ExWB} ${ExFntSty} ${ExTxtDec} ${ExWrap} ${ext} ${exb} ${exl} ${exr}" style="${style2}"><p>${text}<!-- content --></p></div>`
|
|
}
|
|
function upper1digit(str) {
|
|
return str.charAt(0).toUpperCase()
|
|
}
|
|
function upper2digit(str) {
|
|
return str.charAt(0).toUpperCase() + str.substring(1, 2)
|
|
}
|
|
function upperalldigit(str) {
|
|
return str.charAt(0).toUpperCase() + str.slice(1)
|
|
}
|