MameBlock.js

Simple visual code editor library.

Download (Beta ver 0.2.2)

source code on Github


Simple

Just only 100 lines Javascript code with some library.


Embedded

You can use your own visual code editor with Web page and apps.


Open source

Released under the MIT License.

Demo

Click Run button to execute code.

Drag & drop block, Click expression for edit code.

Edit Area:

			

			

			
Example

			
		

		

		

			
Try It


			
1.Download

			
Download and extract.

			 Download

			
2.Open files

			
Open index.html to same this page.

			
Editor load mameBlock_template.html.

		

		

		

			
Setting

			
Copy some files and folders and set these css, HTML and Javascript on your HTML file.


			
1.Files

			
Copy these files

			

			
2.CSS

			
Make html file and set css

			
<link rel="stylesheet" type="text/css" href="css/mameblock.min.css" media="all" />


			
3.HTML tags

			
set Run button with block area in html

			
<a id="mameRun" href="javascript:void(0)">Run</a>
<a id="mameCode" href="javascript:void(0)">View Code</a>
<div id="loading_area">Edit Area:</div>


			
set frame of dialog in html.

			
<!-- express dialog -->
<div id="modal-express">
    <div class="modal-body">
        <label for="expModalText">Edit expression</label><br />
        <input id="expModalText" type="text" />
    </div>
    <a class="modal_close" href="#">[OK]</a>
</div>


			
4.Javascript

			
Load jquery and library in index.html.

			
<!-- Javascript -->
<script type="text/javascript" src="js/jquery-1.11.2.min.js"></script>
<script type="text/javascript" src="js/mameblock.min.js"></script>
			


			
Load control script in index.html.

			
<script type="text/javascript">
    $(function() {
        <!-- # Init -->
        var codeArea = $("#exampleArea");
        var codeText = MAME_BLOCK.init("#loading_area", "mameBlock_template.html");
        /* wait for DOM building */
        var wait0 = setTimeout(function() {
            setCode(MAME_BLOCK.getCodeBlock(), codeArea);
        }, 500);

        <!-- # Run -->
        $("#mameRun").click(function() {
            <!-- get code -->
            var codeText = MAME_BLOCK.getCodeBlock();
            setCode(codeText, codeArea);
            var mameExec = new Function(codeText);
            mameExec();
        });

        <!-- # View code -->
        $("#mameCode").click(function() {
            alert(MAME_BLOCK.getCodeBlock());
        });
    });
</script>


			
5.Misc

			
You can use your favarite librarly for code-highlighter and excutting code. I use highlight.js and Function class.

		

		

		

			
Development Guide

			
			

			
Environment

			
MameBlock.js tested and working in these browsers.

			
			

			
News

			
			

			
Constraints

			
			

			
Relational Projects