Skip to content

Instantly share code, notes, and snippets.

@redamoon

redamoon/multiField_foreach_nestvar.html

Last active November 27, 2019 17:03
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save redamoon/49cb0444db07e9e55c8f63ccdef473fb to your computer and use it in GitHub Desktop.
Save redamoon/49cb0444db07e9e55c8f63ccdef473fb to your computer and use it in GitHub Desktop.
Download ZIP
mt:Foreach・NestVar・mt:Loopで出力した例
Raw
multiField_foreach_nestvar.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>マルチフィールドのサンプルコード（mt:Foreachを使った例）</title>
<!-- UIkit CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-rc.23/css/uikit.min.css" />
<!-- UIkit JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-rc.23/js/uikit.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-rc.23/js/uikit-icons.min.js"></script>
</head>
<body>
<mt:SetVarBlock name="multifield"><mt:ContentField content_field="マルチフィールド"><mt:ContentFieldValue /></mt:ContentField></mt:SetVarBlock>
<mt:Var name="multifield" convert_breaks="0" json_decode="1" setvar="json" />
<mt:Var name="json" key="items" setvar="items" />
<mt:SetVar name="items_index" value="0" />
<div id="app" class="uk-container">
<div class="uk-margin">
<mt:Foreach name="items" as="item">
<mt:Ignore>見出しレベル</mt:Ignore>
<mt:If name="item" key="type" eq="h1">
<h1 class="uk-heading-bullet"><mt:Var name="item" key="data" /></h1>
</mt:If>
<mt:If name="item" key="type" eq="h2">
<h2 class="uk-heading-line"><mt:Var name="item" key="data" /></h2>
</mt:If>
<mt:If name="item" key="type" eq="h3">
<h3 class="uk-heading-divider"><mt:Var name="item" key="data" /></h3>
</mt:If>
<mt:Ignore>テキストレベル</mt:Ignore>
<mt:If name="item" key="type" eq="text">
<p class="uk-text-small"><mt:Var name="item" key="data" /></p>
</mt:If>
<mt:If name="item" key="type" eq="textarea">
<p class="uk-text-small"><mt:Var name="item" key="data" remove_html="1" convert_breaks="0" nl2br="1" /></p>
</mt:If>
<mt:Ignore>画像アップロード</mt:Ignore>
<mt:If name="item" key="type" eq="image">
<div class="uk-margin-auto uk-margin-auto-vertical uk-width-1-2@s uk-card uk-card-default uk-card-body">
<img src="<mt:Var name="item" key="url" />">
</div>
</mt:If>
<mt:Ignore>テーブル</mt:Ignore>
<mt:If name="item" key="type" eq="table">
<mt:Ignore>表組み</mt:Ignore>
<mt:If name="item" key="label" eq="表組み">
<mt:Foreach name="item.data" as="_data">
<mt:If name="__first__"><table class="uk-table uk-table-hover uk-table-divider"></mt:If>
<tr>
<th><mt:NestVar name="_data.0.data" /></th>
<td><mt:NestVar name="_data.1.data" /></td>
</tr>
<mt:If name="__last__"></table></mt:If>
</mt:Foreach>
</mt:If>
<mt:Ignore>リスト</mt:Ignore>
<mt:If name="item" key="label" eq="リスト">
<mt:Foreach name="item.data" as="_data">
<mt:If name="__first__"><ul class="uk-list uk-list-bullet"></mt:If>
<li><a href="<mt:NestVar name='_data.0.data' />"><mt:NestVar name="_data.1.data" /></a></li>
<mt:If name="__last__"></ul></mt:If>
</mt:Foreach>
</mt:If>
</mt:If>
<mt:Ignore>マルチカラムコンテンツ</mt:Ignore>
<mt:If name="item" key="type" eq="multi-column-content">
<mt:Ignore>画像単体アップロード + テキスト</mt:Ignore>
<mt:If name="item" key="label" eq="画像単体アップロード + テキスト">
<mt:Foreach name="item.data" as="_data">
<mt:Ignore>テキストデータの初期化</mt:Ignore>
<mt:SetVar name="_text" />
<mt:If name="__first__">
<div class="uk-flex-middle" uk-grid>
</mt:If>
<mt:NestVar name="_data.0.type" setvar="_type" />
<mt:If name="_type" eq="text">
<mt:NestVar name="_data.0.data" setvar="_text" />
</mt:If>
<mt:NestVar name='_data.0.url' setvar="_url" />
<mt:If name="_text">
<div class="uk-width-2-3@m">
<p><mt:Var name="_text" /></p>
</div>
</mt:If>
<mt:If name="_url">
<div class="uk-width-1-3@m uk-flex-first">
<img src="<mt:NestVar name='_data.0.url' />">
</div>
</mt:If>
<mt:If name="__last__">
</div>
</mt:If>
</mt:Foreach>
</mt:If>
</mt:If>
</mt:Foreach>
</div>
</div>
</body>
</html>
Raw
multiField_mtloop.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>マルチフィールドのサンプルコード（mt:Loopを使った例）</title>
<!-- UIkit CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-rc.23/css/uikit.min.css" />
<!-- UIkit JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-rc.23/js/uikit.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-rc.23/js/uikit-icons.min.js"></script>
</head>
<body>
<mt:SetVarBlock name="multifield"><mt:ContentField content_field="マルチフィールド"><mt:ContentFieldValue /></mt:ContentField></mt:SetVarBlock>
<mt:Var name="multifield" convert_breaks="0" json_decode="1" setvar="json" />
<div id="app" class="uk-container">
<div class="uk-margin">
<mt:Var name="json" key="items" setvar="items" />
<mt:SetVar name="items_index" value="0" />
<mt:Loop name="items">
<mt:Var name="items" index="$items_index" setvar="item" />
<mt:Ignore>見出しレベル</mt:Ignore>
<mt:If name="item" key="type" eq="h1">
<h1 class="uk-heading-bullet"><mt:Var name="item" key="data" /></h1>
</mt:If>
<mt:If name="item" key="type" eq="h2">
<h2 class="uk-heading-line"><mt:Var name="item" key="data" /></h2>
</mt:If>
<mt:If name="item" key="type" eq="h3">
<h3 class="uk-heading-divider"><mt:Var name="item" key="data" /></h3>
</mt:If>
<mt:Ignore>テキストレベル</mt:Ignore>
<mt:If name="item" key="type" eq="text">
<p><mt:Var name="item" key="data" /></p>
</mt:If>
<mt:If name="item" key="type" eq="textarea">
<p><mt:Var name="item" key="data" remove_html="1" convert_breaks="0" nl2br="1" /></p>
</mt:If>
<mt:Ignore>画像アップロード</mt:Ignore>
<mt:If name="item" key="type" eq="image">
<div class="uk-margin-auto uk-margin-auto-vertical uk-width-1-2@s uk-card uk-card-default uk-card-body">
<img src="<mt:Var name="item" key="url" />">
</div>
</mt:If>
<mt:Ignore>テーブル</mt:Ignore>
<mt:If name="item" key="type" eq="table">
<mt:Var name="item" key="data" setvar="_data" />
<mt:Ignore>表組み</mt:Ignore>
<mt:If name="item" key="label" eq="表組み">
<mt:SetVar name="items_index2" value="0" />
<mt:Loop name="_data">
<mt:Var name="_data" index="$items_index2" setvar="__data" />
<mt:SetVar name="items_index3" value="0" />
<mt:If name="__first__"><table class="uk-table uk-table-hover uk-table-divider"></mt:If>
<mt:Loop name="__data">
<mt:Var name="__data" index="$items_index3" setvar="___data" />
<mt:If name="___data" key="label" eq="見出し"><mt:Var name="___data" key="data" setvar="__title" /></mt:If>
<mt:If name="___data" key="label" eq="テキスト"><mt:Var name="___data" key="data" setvar="__text" /></mt:If>
<mt:SetVar name="items_index3" op="++" />
</mt:Loop>
<tr>
<mt:If name="__title"><th><mt:Var name="__title" /></th></mt:If>
<mt:If name="__text"><td><mt:Var name="__text" /></td></mt:If>
</tr>
<mt:If name="__last__"></table></mt:If>
<mt:SetVar name="items_index2" op="++" />
</mt:Loop>
</mt:If>
<mt:Ignore>リスト</mt:Ignore>
<mt:If name="item" key="label" eq="リスト">
<mt:SetVar name="items_index2" value="0" />
<mt:Loop name="_data">
<mt:Var name="_data" index="$items_index2" setvar="__data" />
<mt:SetVar name="items_index3" value="0" />
<mt:If name="__first__"><ul class="uk-list uk-list-bullet"></mt:If>
<mt:Loop name="__data">
<mt:Var name="__data" index="$items_index3" setvar="___data" />
<mt:If name="___data" key="label" eq="テキスト"><mt:Var name="___data" key="data" setvar="__text" /></mt:If>
<mt:If name="___data" key="label" eq="URL"><mt:Var name="___data" key="data" setvar="__url" /></mt:If>
<mt:SetVar name="items_index3" op="++" />
</mt:Loop>
<mt:If name="__text"><li><mt:If name="__url"><a href="<mt:Var name='__url' />" target="_blank" target="_blank"></mt:If><mt:Var name="__text" /></li><mt:If name="__url"></a></mt:If></mt:If>
<mt:If name="__last__"></ul></mt:If>
<mt:SetVar name="items_index2" op="++" />
</mt:Loop>
</mt:If>
</mt:If>
<mt:Ignore>マルチカラムコンテンツ</mt:Ignore>
<mt:If name="item" key="type" eq="multi-column-content">
<mt:Var name="item" key="data" setvar="_data" />
<mt:Ignore>画像単体アップロード + テキスト</mt:Ignore>
<mt:If name="item" key="label" eq="画像単体アップロード + テキスト">
<mt:SetVar name="items_index2" value="0" />
<mt:Loop name="_data">
<mt:Var name="_data" index="$items_index2" setvar="__data" />
<mt:SetVar name="items_index3" value="0" />
<mt:Loop name="__data">
<mt:Var name="__data" index="$items_index3" setvar="___data" />
<mt:If name="___data" key="label" eq="画像"><mt:Var name="___data" key="url" setvar="img_url" /></mt:If>
<mt:If name="___data" key="label" eq="キャプション"><mt:Var name="___data" key="data" setvar="img_text" /></mt:If>
<mt:SetVar name="items_index3" op="++" />
</mt:Loop>
<mt:SetVar name="items_index2" op="++" />
</mt:Loop>
<mt:If name="img_url">
<div class="uk-flex-middle" uk-grid>
<div class="uk-width-2-3@m">
<p><mt:Var name="img_text" /></p>
</div>
<div class="uk-width-1-3@m uk-flex-first">
<img src="<mt:Var name='img_url' />">
</div>
</div>
</mt:If>
</mt:If>
</mt:If>
<mt:SetVar name="items_index" op="++" />
</mt:Loop>
</div>
</div>
</body>
</html>
Raw
user.js
'use strict';
var DEMO_MT7 = {};
var demo_mt7;
DEMO_MT7 = function() {
this.init();
};
(function($, window, document, undefined){
/*
* ==================================================
* NOTE: config
* ==================================================
*/
DEMO_MT7.prototype = {
/*
* 初期設定
*/
init: function () {
var self = this;
$('.nav-tabs').each(function () {
var id = $(this).prop('id');
var number = id.match(/(\d+)/g);
var label_text = $(this).find('label').text().trim();
if (label_text === 'マルチフィールド') {
multiFieldFunc(number);
}
});
function multiFieldFunc(id) {
mtapp.multiField({
debug: false,
id: id,
label: 'マルチフィールド',
fieldGroups: [
[
{type: 'h1', label: '見出し01'},
{type: 'h2', label: '見出し02'},
{type: 'h3', label: '見出し03'}
],
[
{type: 'text', label: '1行テキスト'},
{type: 'textarea', label: '複数行テキスト', rows: 8},
{type: 'image', label: '画像単体アップロード' }
],
[
{
type: 'table', label: '表組み', options: [
{type: 'text', label: '見出し'},
{type: 'textarea', label: 'テキスト'}
]
},
{
type: 'table', label: 'リスト', options: [
{type: 'url', 'label': 'URL'},
{type: 'text', label: 'テキスト'}
]
}
],
[
{
type: 'multi-column-content', label: '画像単体アップロード + テキスト', options: [
[
{ type: 'text', label: 'キャプション' }
],
[
{ type: 'image', label: '画像' }
]
]
}
]
]
});
}
}
}
})(jQuery, window, document);
demo_mt7 = new DEMO_MT7();
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment