gymadarasz / mozaik

mozaik

Usage:

<!-- include dependencies -->
<link rel="stylesheet" href="vendor/components/jqueryui/themes/ui-lightness/jquery-ui.min.css">
<script src='vendor/components/jquery/jquery.min.js'></script>
<script src="vendor/components/jqueryui/jquery-ui.min.js"></script>
<script src='vendor/tinymce/tinymce/tinymce.min.js'></script>
<script src="vendor/gymadarasz/imagesloaded/imagesloaded.pkgd.min.js"></script>
<script src="vendor/gymadarasz/ace/src-min/ace.js" type="text/javascript" charset="utf-8"></script>

<!-- include mozaik -->
<link rel="stylesheet" href="jquery.mozaik.css">
<script src='jquery.mozaik.js'></script>

Example:

HTML:

<div id="template"></div>

JavaScript:

$(function(){
    // initialize
    $('#template').mozaik();

    // get value
    $('#template').getMozaikValue();

    // apply inline styles (tipically for email templates)
    $('#template').getMozaikValue({inlineStyles: true});
});

Default settings:

$('#template').mozaik({
                headline: {thumbnail: 'tpls/default/thumbs/headline.png', label: 'Headline', tpl: 'tpls/default/headline.html'},
                content1: {thumbnail: 'tpls/default/thumbs/content1.png', label: 'Content', tpl: 'tpls/default/content1.html'},
                content3: {thumbnail: 'tpls/default/thumbs/content3.jpg', label: 'Three column', tpl: 'tpls/default/content3.html'},
                content2: {thumbnail: 'tpls/default/thumbs/content2.jpg', label: 'Two column', tpl: 'tpls/default/content2.html'},
                image3: {thumbnail: 'tpls/default/thumbs/image3.jpg', label: 'Three column with image', tpl: 'tpls/default/image3.html'},
                image2: {thumbnail: 'tpls/default/thumbs/image2.jpg', label: 'Two column with image', tpl: 'tpls/default/image2.html'},
                image1left: {thumbnail: 'tpls/default/thumbs/image1left.jpg', label: 'Content with image (left)', tpl: 'tpls/default/image1left.html'},
                image1right: {thumbnail: 'tpls/default/thumbs/image1right.jpg', label: 'Content with image (right)', tpl: 'tpls/default/image1right.html'},
                footer: {thumbnail: 'tpls/default/thumbs/footer.png', label: 'Footer', tpl: 'tpls/default/footer.html'},
            },
            editables: 'editable',
            style: 'tpls/default/styles/default.css',
            namespace: false,
            tinyMCEPlugins: "link image imagetools code"
        });

See more on Guthub: https://github.com/gymadarasz/mozaik

mozaik's Issues

drag and drop template items

When you drag and drop template items, the item being dragged appears a good 200-300px right of your cursor. I'd expect it to be grabbed and be directly under the mouse or where you are dragging from.

Table properties WYSIWYG is buggy

The Table properties WYSIWYG is buggy and often in the way of editing the text - actually it appears to have stuck to my screen when I navigate to other steps

dragging/dropping 'grab' cursor to show

When dragging/dropping, it would be useful to the user for the 'grab' cursor to show. Currently it just shows the mouse pointer.

designing is not clear

When designing an email template, it looks like you drag and drop the full template across to then edit it but you're actually able to drag across individual elements. This is not clear. The template contents are also blurry and could be more clear/visible to the user.