blob: e7fe22a7ce96d24f289241b21a6137e1664d9e31 [file] [log] [blame]
{{ target: SpreadsheetMain }}
<!-- <div class="ecdoc-sprsht-switch" data-cpt="type: 'Button', name: 'switch'"></div> -->
<div class="ecdoc-sprsht-main ecdoc-sprsht-datatable-to-codeinputs">
<div class="ecdoc-sprsht-datatable-ctrl">
<div data-cpt="
type: 'Button',
name: 'dataTableControl.clear',
text: lang.dataTableControl.clear,
css: 'datatable-ctrl-btn'">
</div>
<div data-cpt="
type: 'Button',
name: 'dataTableControl.lt',
text: lang.dataTableControl.lt,
css: 'datatable-ctrl-btn'">
</div>
<div data-cpt="
type: 'Button',
name: 'dataTableControl.rb',
text: lang.dataTableControl.rb,
css: 'datatable-ctrl-btn'">
</div>
<div data-cpt="
type: 'Button',
name: 'dataTableControl.t',
text: lang.dataTableControl.t,
css: 'datatable-ctrl-btn'">
</div>
<div data-cpt="
type: 'Button',
name: 'dataTableControl.b',
text: lang.dataTableControl.b,
css: 'datatable-ctrl-btn'">
</div>
<div data-cpt="
type: 'Button',
name: 'dataTableControl.l',
text: lang.dataTableControl.l,
css: 'datatable-ctrl-btn'">
</div>
<div data-cpt="
type: 'Button',
name: 'dataTableControl.r',
text: lang.dataTableControl.r,
css: 'datatable-ctrl-btn'">
</div>
</div>
<div data-cpt="
type: 'spreadsheet/DataTable',
name: 'dataTable',
viewModel: {
jsDataOb: viewModel.jsDataOb
}"></div>
</div>
<div class="ecdoc-sprsht-right">
<div class="ecdoc-sprsht-ctrl-area ecdoc-normal-panel">
<h1>${lang.pageTitle}</h1>
<div class="ecdoc-sprsht-desc">
<div class="ecdoc-sprsht-desc-text">${lang.pageDescHTML|raw}</div>
</div>
<div data-cpt="
type: 'Tab',
name: 'jsDataType',
viewModel: {
currentTab: lib.ob('dimArray'),
baseCss: 'ctrl-tab',
tabAttr: 'cpt-tab',
conAttr: 'cpt-con'
}">
<ul class="ctrl-tab ecdoc-sprsht-line">
<label>${lang.typeSetting}</label>
<li data-cpt-tab="dimArray">${lang.jsDataTypeDimArray|html}</li>
<li data-cpt-tab="arrayObject">${lang.jsDataTypeArrayObject|html}</li>
<li data-cpt-tab="geo">${lang.jsDataTypeGEO|html}</li>
</ul>
<div data-cpt-con="dimArray" class="ecdoc-sprsht-line ecdoc-sprsht-dim-setting">
<label>${lang.dimensionSetting}</label>
<div data-cpt="
type: 'CheckButton',
name: 'dimColStep',
viewModel: {
checked: lib.ob(null),
dataList: [
{value: 'max', text: lang.dimDesc.dimallto2},
{value: null, text: lang.dimDesc.dim1to1},
{value: 1, text: lang.dimDesc.dim1to2},
{value: 2, text: lang.dimDesc.dim2to2},
{value: 3, text: lang.dimDesc.dim3to2},
{value: 4, text: lang.dimDesc.dim4to2},
{value: 5, text: lang.dimDesc.dim5to2},
{value: 6, text: lang.dimDesc.dim6to2}
]
}">
</div>
</div>
<div data-cpt-con="arrayObject" class="ecdoc-sprsht-line ecdoc-sprsht-attr-setting">
<label>${lang.attributeSetting}</label>
<div class="ecdoc-sprsht-attr-change">
<div data-cpt="type: 'Button', name: 'addAttrInput', text: '+'"></div>
<div data-cpt="type: 'Button', name: 'removeAttrInput', text: '−'"></div>
</div>
<div data-cpt="
type: 'Foreach',
viewModelGet: 'attrInfoListOb',
itemTplTarget: 'attrInfoItem'
"></div>
</div>
<div data-cpt-con="geo" class="ecdoc-sprsht-line ecdoc-sprsht-attr-setting">
<label>${lang.geoConvertDesc}</label>
<div data-cpt="
type: 'Button',
name: 'geoConvert',
text: lang.geoConvertBtn">
</div>
<br><br>
<div>${lang.geoDesc}</div>
</div>
</div>
<div data-cpt="
type: 'Tab',
name: 'outputFormat',
viewModel: {
currentTab: lib.ob('js'),
baseCss: 'ctrl-tab',
tabAttr: 'cpt-tab',
conAttr: 'cpt-con'
}">
<ul class="ctrl-tab ecdoc-sprsht-line">
<label>${lang.outputFormat}</label>
<li data-cpt-tab="js">${lang.outputFormatJS|html}</li>
<li data-cpt-tab="json">${lang.outputFormatJSON|html}</li>
</ul>
<div data-cpt-con="js">
<div class="ecdoc-sprsht-line">
<label>${lang.quotationMarkSetting}</label>
<div data-cpt="
type: 'CheckButton',
name: 'quotationMark',
viewModel: {
checked: lib.ob('\''),
dataList: [
{value: '\'', text: lang.quotationMarks.singleQuotes},
{value: '&quot;', text: lang.quotationMarks.doubleQuotes}
]
}">
</div>
</div>
<div class="ecdoc-sprsht-line">
<label>${lang.codeFormatSetting}</label>
<div data-cpt="
type: 'CheckButton',
name: 'codeFormatJS',
viewModel: {
checked: lib.ob('expanded4Indent'),
dataList: [
{value: 'compressed', text: lang.codeFormat.compressed},
{value: 'expanded2Indent', text: lang.codeFormat.expanded2Indent},
{value: 'expanded4Indent', text: lang.codeFormat.expanded4Indent}
]
}">
</div>
</div>
</div>
<div data-cpt-con="json">
<div class="ecdoc-sprsht-line">
<label>${lang.codeFormatSetting}</label>
<div data-cpt="
type: 'CheckButton',
name: 'codeFormatJSON',
viewModel: {
checked: lib.ob('compressed'),
dataList: [
{value: 'compressed', text: lang.codeFormat.compressed},
{value: 'expanded2Indent', text: lang.codeFormat.expanded2Indent},
{value: 'expanded4Indent', text: lang.codeFormat.expanded4Indent}
]
}">
</div>
</div>
</div>
</div>
<br>
<div class="ecdoc-sprsht-line">
<label>${lang.emptyValueSetting}</label>
<div data-cpt="
type: 'CheckButton',
name: 'emptyValue',
viewModel: {
checked: lib.ob(constant.EC_EMPTY_VALUE),
dataList: [
{value: constant.EC_EMPTY_VALUE, text: lang.ecEmptyValue},
{value: null, text: 'JavaScript null'},
{value: undefined, text: 'JavaScript undefined'}
]
}">
</div>
</div>
</div>
<div class="ecdoc-sprsht-codeinputs-area">
<label>${lang.convertResult}</label>
<div data-cpt="
type: 'spreadsheet/CodeInputs',
name: 'codeInputs',
viewModel: {
jsDataOb: viewModel.jsDataOb
}"></div>
</div>
</div>
{{ /target }}
{{ target: attrInfoItem }}
<div class="ecdoc-attr-info">
<div class="ecdoc-attr-title" data-cpt="type: 'Text', viewModel: {value: viewModel.title}"></div>
<div class="ecdoc-attr-block">
<label>${lang.attrInfoAttrName}</label>
<div data-cpt="
type: 'TextInput',
viewModel: {
mouseEnterSelect: lib.ob(true),
value: viewModel.value
}">
</div>
</div>
<div class="ecdoc-attr-block">
<label>${lang.attrInfoType}</label>
<div data-cpt="
type: 'CheckButton',
name: 'itemDataType',
viewModel: {
checked: viewModel.itemDataType,
css: 'ecdoc-attr-data-type',
dataList: [
{value: 'auto', text: 'auto'},
{value: 'number', text: 'number'},
{value: 'string', text: 'string'}
]
}">
</div>
</div>
</div>
{{ /target }}
{{ target: DataTable }}
<div class="ecdoc-sprsht-ht"></div>
{{ /target }}
{{ target: CodeInputs }}
<div class="ecdoc-sprsht-mainlist" data-cpt="
type: 'Foreach',
viewModelGet: 'mainListViewModels',
itemTplTarget: 'codeInputItem'
"></div>
{{ /target }}
{{ target: codeInputItem }}
<div class="ecdoc-sprsht-codeinput">
<div class="ecdoc-sprsht-title">${viewModel.title}</div>
<div data-cpt="
type: 'TextInput',
viewModel: {
type: 'textarea',
mouseEnterSelect: lib.ob(true),
value: viewModel.codeTextOb
}">
</div>
<div data-cpt="
type: 'CheckButton',
viewModel: {
checked: lib.ob('auto'),
dataList: [
{value: 'auto', text: 'auto'},
{value: 'number', text: 'number'},
{value: 'string', text: 'string'}
]
}">
</div>
</div>
{{ /target }}