Touch-draggable Flame.Panel

by pjmorse

HTML

<link rel="stylesheet" href="http://flamejs.github.com/flame-address-book/css/flame.css">
<script src="https://github.com/downloads/emberjs/ember.js/ember-0.9.8.1.min.js"></script>
<script src="https://github.com/downloads/pjmorse/flame.js/flame.js"></script>
<script type="text/x-handlebars">
    {{view App.RootView}}
</script>

JavaScript

// An example of using Flame.Panel and Flame.Popover.
App = Ember.Application.create();

App.normalizeTouchEvent = function(event) {
    if (!event.touches) {
        event.touches = event.originalEvent.touches;
    }
    if (!event.pageX) {
        event.pageX = event.originalEvent.pageX;
    }
    if (!event.pageY) {
        event.pageY = event.originalEvent.pageY;
    }
    if (!event.screenX) {
        event.screenX = event.originalEvent.screenX;
    }
    if (!event.screenY) {
        event.screenY = event.originalEvent.screenY;
    }
    if (!event.clientX) {
        event.clientX = event.originalEvent.clientX;
    }
    if (!event.clientY) {
        event.clientY = event.originalEvent.clientY;
    }
    console.log("Normalized (page, screen, client): (" + event.pageX + ', ' + event.pageY + '), (' + event.screenX + ', ' + event.screenY + '), (' + event.clientX + ', ' + event.clientY + ')');
    return event;
};

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: true,
    // This controls the visual effect only, and works only if
    // isModal is set to true
    dimBackground: true,
    // 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)
    isResizable: true,
    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,
   ...