JSFiddle - React, Tailwind, and code Playground

PE - Block menu

by Ben Clayton

HTML

<div id="toolbox">
  <div v-for="category in categories">
    <div v-on:click="changeOpenState(category)" v-bind:class="{msclosed:!category.open,msopen:category.open,tbtitle:true}">
      {{category.title}}
    </div>
    <div v-if="category.open" v-for="blockmenuitem in getcategory(category.title,template,mode)">
      <vue-blockmenuitem :mode="mode" :blockmenuitem="blockmenuitem"></vue-blockmenuitem>
    </div>
  </div>
</div>


<script type="text/x-template" id="blockmenuitem-template">
  <div>
    <div v-for="subitem in blockmenuitem.item" v-html="blockmenuitem.text + ' - ' + subitem.text" v-on:click="click(subitem.addBlockFunction,blockmenuitem.enableMask)" v-bind:class="{blockmenuitem:1,enabled:getEnabled(blockmenuitem.enableMask)}">
    </div>
  </div>
</script>


<!--



<div id="menusectionclosed0" class="msclosed" style="margin-bottom:6px;display:block">
  <table width="100%" border="0" cellspacing="0" cellpadding="0">
    <tbody>
      <tr>
        <td colspan="3" bgcolor="#e9e9e9" style="border-radius:1px; height:18px;">
          <div class="padding">
            <table cellspacing="0" cellpadding="0">
              <tbody>
                <tr>
                  <td><span onclick="pageEditor.instance.menuSupport.hideShowMenuSection(1,0)" class="menuopenclose open"><img src="/x_icons/spacer.gif" style="cursor:pointer" alt="+" title="Expand"></span></td>
                  <td style="vertical-align:middle;padding-left:4px;"><span class="menutitle">&nbsp;Page Construction Blocks</span></td>
                </tr>
              </tbody>
            </table>
          </div>
        </td>
      </tr>
    </tbody>
  </table>
</div>





<div id="menusectionopen0" class="msopen" style="margin-bottom:6px;display: none">
  <table width="100%" border="0" cellspacing="0" cellpadding="0">
    <tbody>
      <tr>
        <td colspan="3" bgcolor="#e9e9e9" style="border-radius:1px; height:18px;">
          <div class="padding">
            <table cellspacing="0"...

CSS

.tbtitle {
  width: 100%;
  height: 22px;
  margin-bottom: 5px;
  padding: 3px;
  font-size: 18px;
}

.tbtitle::before {
  border: 1px solid gray;
  width: 22px;
  height: 20px;
  background-color: lightgray;
  display: inline-block;
  position: relative;
  text-align: center;
}

.tbtitle.msclosed::before {
  content: '+';
}

.tbtitle.msopen::before {
  content: '-';
}

.msopen {
  background-color: lightgray;
}

.msclosed {
  background-color: lightblue;
}

.blockmenuitem {
  width: 100%;
  color: lightgray;
}

.blockmenuitem.enabled {
  color: black;
}

.blockmenuitem.enabled:hover {
  background-color: lightgray;
}

TypeScript

Vue.component('vue-blockmenuitem', {
  props: ["blockmenuitem","mode"],
  template: "#blockmenuitem-template",
  methods: {
    click: (addBlockFunction,enableMask) => {
			if(this.getEnabled(enableMask)){
      	alert(addBlockFunction)
			}
    },
		getEnabled: (enableMask) => {
			return (enableMask & this.mode) > 0
		}
	}
})


const categories = [
					{open:false,title:"Page Construction Blocks"},
					{open:false,title:"Visual Blocks"},
					{open:false,title:"Data and Graphing"},
					{open:false,title:"Bespoke"},
					{open:false,title:"Gadget and Insert Blocks"},
					{open:false,title:"Forms"}
		];
		
const template = "normal";

const mode = 3;

const blockmenuitems = {
"Page Construction Blocks":[{"text":"Wrappers","alternateText":"","attr":"bgcolor=#fffff0","templateExclude":"newsletterv2_","enableMask":3,"lvl":0,"category":"Page Construction Blocks","icon":"/x_icons/v5blocks/icon-wrapper.gif","item":[{"blockTypes":["expandwrapper","emptycol"],"text":"Expand <>","addBlockFunction":"pageEditor.instance.blockUtils.addBlock('(#type#,expandwrapper,#content#,(#type#,emptycol))')"},{"blockTypes":["contentwrapper","emptycol"],"text":"Content [&nbsp;]","addBlockFunction":"pageEditor.instance.blockUtils.addBlock('(#type#,contentwrapper,#content#,(#type#,emptycol))')"},{"blockTypes":["groupwrapper","emptycol"],"text":"Group (&nbsp;)","addBlockFunction":"pageEditor.instance.blockUtils.addBlock('(#type#,groupwrapper,#content#,(#type#,emptycol))')"},{"blockTypes":["backgroundwrapper","emptycol"],"text":"Background (+)","addBlockFunction":"pageEditor.instance.blockUtils.addBlock('(#type#,backgroundwrapper,#content#,(#type#,emptycol))')"}]},
{"text":"Wrappers","alternateText":"","attr":"bgcolor=#fffff0","templateExclude":"normal","enableMask":2,"lvl":0,"category":"Page Construction Blocks","icon":"/x_icons/v5blocks/icon-wrapper.gif","item":[{"blockTypes":["expandwrapper","emptycol"],"text":"Expand...