JSFiddle - React, Tailwind, and code Playground

by pjmorse

HTML

<script src="http://cloud.github.com/downloads/emberjs/ember.js/ember-0.9.5.js"></script>
<link rel="stylesheet" href="http://flamejs.github.com/flame-address-book/css/flame.css">
<script src="http://flamejs.github.com/flame-address-book/js/libs/flame_with_github_image_urls.min.js"></script>
<script src="https://raw.github.com/flamejs/flame.js/90c29eac93482e1eedf1acc7e59b99b01ed10c35/views/vertical_split_view.js"></script>
<script type="text/x-handlebars">
    {{view App.RootView}}
</script>

JavaScript

// Demoing position issues with Flame.Panel. VerticalSplitView works fine as well - what's broken now?

App = Ember.Application.create();

App.TestPanel = Flame.Panel.extend({
    layout: { width: 400, height: 200, centerX: 0, centerY: -50 },
    // Controls whether all other controls are obscured (i.e. blocked
    // from any input while the panel is shown)
    isModal: false,
    // This controls the visual effect only, and works only if
    // isModal is set to true
    dimBackground: false,
    // Set to false if you want to e.g. allow closing the panel only
    // by clicking some button on the panel (has no effect if isModal
    // is false)
    allowClosingByClickingOutside: true,
    // Allow moving by dragging on the title bar - default is false
    allowMoving: true,
    // Title is optional - if not defined, no title bar is shown
    title: 'Test Panel',

    // A Panel must have exactly one child view named contentView
    contentView: Flame.LabelView.extend({
        layout: { left: 20, top: 90, right: 20, bottom: 20 },
        textAlign: Flame.ALIGN_CENTER,
        value: 'This is a panel.'
    })
});

// You can use the same options for a Popover that a Panel takes,
// although not all of them might make sense here.
App.TestPopover = Flame.Popover.extend({
    layout: { width: 200, height: 100 },

    // A Popover must have exactly one child view named contentView
    contentView: Flame.View.extend({
        childViews: ['labelView'],
        labelView: Flame.LabelView.extend({
            layout: { left: 20, centerY: -5, right: 20, bottom: 20 },
            textAlign: Flame.ALIGN_CENTER,
            value: 'This is a popover.'
        })
    })
});

App.RootView = Flame.RootView.extend({
    childViews: ['splitView'],
    splitView: Flame.VerticalSplitView.extend({
        topHeight: 150,
        minTopHeight: 10,
        topView: Flame.LabelView.extend({
            layout: { left: 5, top: 7 },
            textAlign: Flame.ALIGN_CENTER,
         ...