`
}
-
+
}
+
function separator_object(layout, json) {
let style = ''
let {margin, color} = json
- if(margin && margin.indexOf("px") >= 0) {
+ if (margin && margin.indexOf("px") >= 0) {
style += (layout === 'vertical') ? `margin-top:${margin};` : `margin-left:${margin};`
exmgn = ''
} else {
exmgn = (margin) ? 'ExMgnT' + upperalldigit(margin) : ''
}
- if(color) {
+ if (color) {
style += `border-color:${color} !important;`
}
return `
`
}
+
function spacer_object(json) {
let {size} = json
size = (!size || size === '') ? 'md' : size
- if(size.indexOf("px") >= 0) {
+ if (size.indexOf("px") >= 0) {
size = ''
} else {
size = 'spc' + upperalldigit(size)
}
return `
`
}
+
function span_object(json) {
let style2 = ''
let {text, size, color, weight, style, decoration} = json
-
- if(size && size !== '') {
- if(size.indexOf("px") >= 0) {
+
+ if (size && size !== '') {
+ if (size.indexOf("px") >= 0) {
style2 += `font-size:${size};`
size = ''
} else {
@@ -670,16 +677,17 @@ function span_object(json) {
} else {
size = ''
}
-
- if(color && color!=='') {
+
+ 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 `
${text}`
}
+
function carousel_struc() {
return `
`
}
@@ -692,115 +700,121 @@ function bubble_struc(json) {
return `
`
}
+
function hero_struc(json) {
let {styles} = json
let backgroundColor = ''
- if(styles) {
- let { hero } = styles
+ if (styles) {
+ let {hero} = styles
backgroundColor = (hero && hero.backgroundColor) ? `background-color:${hero.backgroundColor}` : ''
}
return `
`
}
+
function header_struc(json) {
let {styles} = json
let backgroundColor = ''
- if(styles) {
- let { header } = styles
+ if (styles) {
+ let {header} = styles
backgroundColor = (header && header.backgroundColor) ? `background-color:${header.backgroundColor}` : ''
}
return ``
}
+
function body_struc(json) {
let {footer, styles} = json
let backgroundColor = ''
- if(styles) {
- let { body } = styles
+ if (styles) {
+ let {body} = styles
backgroundColor = (body && body.backgroundColor) ? `background-color:${body.backgroundColor}` : ''
}
let ExHasFooter = (footer) ? 'ExHasFooter' : ''
return `
`
}
+
function footer_struc(json) {
let {styles} = json
let backgroundColor = ''
- if(styles) {
- let { footer } = styles
+ if (styles) {
+ let {footer} = styles
backgroundColor = (footer && footer.backgroundColor) ? `background-color:${footer.backgroundColor}` : ''
}
return ``
}
+
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, lineSpacing} = json
-
+
fl = ''
- if(flex > 3) {
+ 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) {
+
+ if (margin && margin.indexOf("px") >= 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) {
+ if (size.indexOf("px") >= 0) {
style2 += `font-size:${size};`
size = ''
} else {
size = 'Ex' + upperalldigit(size)
}
- if(color && color!=='') {
+ 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) {
+ if (offsetTop && offsetTop.indexOf("px") >= 0) {
style2 += `top:${offsetTop};`
ext = ''
} else {
ext = (offsetTop) ? 'ExT' + upperalldigit(offsetTop) : ''
}
- if(offsetBottom && offsetBottom.indexOf("px") >= 0) {
+ if (offsetBottom && /px|%/.test(offsetBottom)) {
style2 += `bottom:${offsetBottom};`
exb = ''
} else {
exb = (offsetBottom) ? 'ExB' + upperalldigit(offsetBottom) : ''
}
- if(offsetStart && offsetStart.indexOf("px") >= 0) {
+ if (offsetStart && /px|%/.test(offsetStart)) {
style2 += `left:${offsetStart};`
exl = ''
} else {
exl = (offsetStart) ? 'ExL' + upperalldigit(offsetStart) : ''
}
- if(offsetEnd && offsetEnd.indexOf("px") >= 0) {
+ if (offsetEnd && /px|%/.test(offsetEnd)) {
style2 += `right:${offsetEnd};`
exr = ''
} else {
exr = (offsetEnd) ? 'ExR' + upperalldigit(offsetEnd) : ''
}
- if(lineSpacing && lineSpacing.indexOf("px") >= 0) {
- let lineHeight = (parseInt(lineSpacing.replace('px','')) + 15) + 'px'
+ if (lineSpacing && lineSpacing.indexOf("px") >= 0) {
+ let lineHeight = (parseInt(lineSpacing.replace('px', '')) + 15) + 'px'
style2 += `line-height:${lineHeight};`
}
- text = (!text) ? '' : text
+ text = (!text) ? '' : text
return `
`
}
+
function upper1digit(str) {
return str.charAt(0).toUpperCase()
}
@@ -808,5 +822,9 @@ function upper2digit(str) {
return str.charAt(0).toUpperCase() + str.substring(1, 2)
}
function upperalldigit(str) {
- return str.charAt(0).toUpperCase() + str.slice(1)
+ if (str.toLowerCase() === 'xxl') {
+ return 'XXl'
+ } else {
+ return str.charAt(0).toUpperCase() + str.slice(1)
+ }
}
From 0a96615694508a7de1ccd972da90284f3fb69142 Mon Sep 17 00:00:00 2001
From: UwUmei <51425629+EndRollModel@users.noreply.github.com>
Date: Tue, 18 Feb 2025 11:36:06 +0800
Subject: [PATCH 2/2] 1. add if action has uri, message , postback show alert
or go link
2.Added maxLines style to display correctly.
---
js/flex2html.js | 38 +++++++++++++++++++++++++++++++-------
js/flex2html.min.js | 2 +-
2 files changed, 32 insertions(+), 8 deletions(-)
diff --git a/js/flex2html.js b/js/flex2html.js
index d76e2d3..ae184b9 100644
--- a/js/flex2html.js
+++ b/js/flex2html.js
@@ -165,7 +165,7 @@ function convert_object(layout, json) {
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, maxWidth, maxHeight} = json
+ let {layout, position, flex, spacing, margin, width, height, backgroundColor, borderColor, borderWidth, cornerRadius, justifyContent, alignItems, offsetTop, offsetBottom, offsetStart, offsetEnd, paddingAll, paddingTop, paddingBottom, paddingStart, paddingEnd, background, maxWidth, maxHeight, action} = json
if (layout === 'baseline') {
layout1 = 'hr'
layout2 = 'bl'
@@ -366,7 +366,16 @@ function box_object(json) {
style += `max-height:${maxHeight};`
}
- return `
`
+ action = (!action) ? {type: 'none'} : action
+ if(action.type === 'uri'){
+ return `
`
+ }else if(action.type === 'message') {
+ return `
`
+ }else if(action.type === 'postback'){
+ return `
`
+ }else {
+ return `
`
+ }
}
function button_object(json) {
@@ -630,8 +639,6 @@ function image_object(json) {
`
}
-
-
}
function separator_object(layout, json) {
@@ -745,7 +752,7 @@ function footer_struc(json) {
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, lineSpacing} = json
+ let {flex, margin, size, position, align, gravity, text, color, weight, style, decoration, wrap, maxLines, adjustMode, offsetTop, offsetBottom, offsetStart, offsetEnd, lineSpacing, action} = json
fl = ''
if (flex > 3) {
@@ -807,12 +814,29 @@ function text_object(json) {
exr = (offsetEnd) ? 'ExR' + upperalldigit(offsetEnd) : ''
}
+ let cstyle = ''
+ if(maxLines && /\d{0,2}/.test(maxLines)){
+ // style2 += `display : -webkit-box; -webkit-line-clamp : ${maxLines}; text-overflow: ellipsis; overflow:hidden; -webkit-box-orient: vertical; `
+ cstyle = `display: -webkit-box; -webkit-line-clamp: ${maxLines}; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis;`
+ }
+
if (lineSpacing && lineSpacing.indexOf("px") >= 0) {
let lineHeight = (parseInt(lineSpacing.replace('px', '')) + 15) + 'px'
style2 += `line-height:${lineHeight};`
}
- text = (!text) ? '' : text
- return `