Metal-modal-deprecate#9: make modal draggable

Metal-modal-deprecate#9: customize starting modal height

demos/index.html

@@ -15,10 +15,12 @@ <h1>Modal</h1>
 	<button type="button" class="btn btn-primary openModal">Open Modal</button>
 	<script type="text/javascript">
 		window.modal = new metal.Modal({
+			body: 'One fine body...',
+			disableDrag: false,
 			element: '.modal',
+			footer: '<button type="button" class="btn btn-primary">OK</button>',
 			header: '<h4 class="modal-title">Modal header</h4>',
-			body: 'One fine body...',
-			footer: '<button type="button" class="btn btn-primary">OK</button>'
+			offsetTop: 200
 		});
 
 		document.querySelector('.openModal').addEventListener('click', function() {

package.json

@@ -29,11 +29,9 @@
     "modal"
   ],
   "dependencies": {
-    "metal": "^2.0.0",
-    "metal-component": "^2.0.0",
-    "metal-dom": "^2.0.0",
-    "metal-events": "^2.0.0",
-    "metal-soy": "^2.0.0"
+    "metal-component": "^1.0.0-rc.11",
+    "metal-drag-drop": "^2.0.1",
+    "metal-soy": "^1.0.0-rc.11"
   },
   "devDependencies": {
     "bootstrap": "^3.3.6",

src/Modal.js

@@ -2,6 +2,7 @@
 
 import core from 'metal';
 import dom from 'metal-dom';
+import { Drag } from 'metal-drag-drop';
 import { EventHandler } from 'metal-events';
 import templates from './Modal.soy.js';
 import Component from 'metal-component';
@@ -18,6 +19,13 @@ class Modal extends Component {
 	 */
 	created() {
 		this.eventHandler_ = new EventHandler();
+
+		this.drag_ = new Drag({
+			disabled: this.get('disableDrag'),
+			handles: '.modal-header',
+			sources: '.modal',
+			useShim: false
+		});
 	}
 
 	/**
@@ -219,6 +227,15 @@ Modal.STATE = {
 		validator: core.isString
 	},
 
+	/**
+	 * Boolean to determine whether modal will be draggable.
+	 * @type {Boolean}
+	 */
+	disableDrag: {
+		validator: core.isBoolean,
+		value: false
+	},
+
 	/**
 	 * Content to be placed inside modal footer. Can be either an html string or
 	 * a function that calls incremental-dom to render the footer.
@@ -263,6 +280,13 @@ Modal.STATE = {
 		value: false
 	},
 
+	/**
+	 * Number indicating the vertical position of modal in pixels.
+	 * @type {number}
+	 */
+	offsetTop: {
+	},
+
 	/**
 	 * Whether overlay should be visible when modal is visible.
 	 * @type {boolean}

src/Modal.soy

@@ -12,22 +12,23 @@
 	{@param? header: html|string}
 	{@param? headerId: string}
 	{@param? noCloseButton: bool}
+	{@param? offsetTop: number}
 	{@param? role: string}
 	{@param? visible: bool}
 	<div
 		class="modal{$elementClasses ? ' ' + $elementClasses : ''}"
 		style="display: {$visible ? 'block' : 'none'}">
 		<div
+			aria-describedby="{$bodyId}"
+			aria-labelledby="{$headerId}"
 			class="modal-dialog{$dialogClasses ? ' ' + $dialogClasses : ''}"
-			tabindex="0"
 			role="{$role ? $role : 'dialog'}"
-			aria-labelledby="{$headerId}"
-			aria-describedby="{$bodyId}">
-			<div class="modal-content">
+			tabindex="0">
+			<div class="modal-content" style="top: {$offsetTop}px">
 				<header class="modal-header">
 					{if $header}
 						{if not $noCloseButton}
-							<button type="button" class="close" data-onclick="hide" aria-label="Close">
+							<button aria-label="Close" class="close" data-onclick="hide" type="button">
 								<span aria-hidden="true">×</span>
 							</button>
 						{/if}