intel · zhizhangchen · Jun 4, 2012 · Jun 4, 2012 · Jun 4, 2012 · Jun 25, 2012
diff --git a/index.html b/index.html
@@ -25,6 +25,7 @@
     <body class="vbox fullsize">
         <script src="lib/jquery-1.6.4.min.js"></script>
         <script src="lib/jquery-ui-1.8.16.custom.min.js"></script>
+        <script src="src/js/msg-box.js"></script>
         <script src="src/js/widgets.js"></script>
         <script src="src/js/adm.js"></script>
         <script src="src/js/pageTemplate.js"></script>

diff --git a/src/css/builder.css b/src/css/builder.css
@@ -654,6 +654,7 @@ body.ui-tabs.ui-widget {
     font-size: 12px;
     color: #111111;
     font-style: normal;
+    text-transform: capitalize;
 }
 .treeView span.widgetType:hover {
     color: #2c7a94;
@@ -1329,13 +1330,15 @@ div.propertyItems label[for|=id] {
     size: 4;
 }
 
-.deviceSetting #buttonSet{
-    position: absolute;
+center.title {
+    margin: 1em 1em 1.5em 1em;
+}
+#buttonSet{
     bottom: 0px;
     width: 100%;
 }
-.deviceSetting #buttonSet * {
-    margin: 0 1em 3em 1em;
+#buttonSet * {
+    margin: 1.5em 1em 1.5em 1em;
     min-width: 25%;
 }
 

diff --git a/src/js/main.js b/src/js/main.js
@@ -590,44 +590,50 @@ $(function() {
 
     var fsUtils, cookieUtils, supportedBrowser, supportedOS,
         errorMsg, redirect = 'https://01.org/rib';
+    var startBuilder = function () {
+        cookieUtils = $.rib.cookieUtils;
+        // if can't get the cookie(no this record), then add exportNotice cookie
+        if (!cookieUtils.get("exportNotice")) {
+            if(!cookieUtils.set("exportNotice", "true")) {
+                // Failed to set the cookie
+                if (window.location.protocol === "file:") {
+                    console.error("Browser needs "
+                            + "'--allow-file-access-from-files"
+                            + "--enable-file-cookies' option." +
+                            + "\nClose the browser if you have already"
+                            + " opened it before.");
+                } else {
+                    console.error("Set exportNotice cookie failed.");
+                }
+            }
+        }
+        // Actually invoke the plugin that sets up our app UI
+        $(document).builder({debugMode: true, model: ADM});
+
+        // init the sandbox file system
+        fsUtils = $.rib.fsUtils;
+        // Try to init a temporary filesystem to test '--allow-file-access-from-files' option
+        requestFileSystem(window.TEMPORARY, 10,  function(filesystem) {
+            fsUtils.initFS(fsUtils.fsType, fsUtils.fsSize, fsInitSuccess, fsInitFailed);
+        }, fsInitFailed);
+    }
     // Detect browser and platform
     supportedBrowser = /(Chrome|Chromium)\/(\S+)/;
     supportedOS = /(Win|Linux|Mac)/;
     if (!supportedBrowser.test(navigator.userAgent) ||
         !supportedOS.test(navigator.platform)) {
         errorMsg = 'Only Google Chrome or Chromium are supported right now.  ' +
                    'Unfortunately, it seems you are not using one of these, ' +
-                   'but instead:\n\n\t' + navigator.userAgent + '\n\n' +
+                   'but instead:<br/><br/>' + navigator.userAgent + '<br/><br/>' +
                    'To learn more about Rapid Interface Builder and how to ' +
-                   'use it, please visit our project website at:\n\n\t' +
-                    redirect + '\n\n' +
+                   'use it, please visit our project website at:<br/><br/>' +
+                    redirect + '<br/><br/>' +
                    'You will be redirected there now (or press "Cancel" to ' +
                    'try Rapid Interface Builder at your own risk).';
-        if (confirm(errorMsg)) {
+        confirm(errorMsg, startBuilder, function (){
             document.location = redirect;
             return;
-        }
-    }
-    cookieUtils = $.rib.cookieUtils;
-    // if can't get the cookie(no this record), then add exportNotice cookie
-    if (!cookieUtils.get("exportNotice")) {
-        if(!cookieUtils.set("exportNotice", "true")) {
-            // Failed to set the cookie
-            if (window.location.protocol === "file:") {
-                console.error("Browser needs '--allow-file-access-from-files --enable-file-cookies' option." +
-                        "\nClose the browser if you have already opened it before.");
-            } else {
-                console.error("Set exportNotice cookie failed.");
-            }
-        }
+        });
     }
-    // Actually invoke the plugin that sets up our app UI
-    $(document).builder({debugMode: true, model: ADM});
-
-    // init the sandbox file system
-    fsUtils = $.rib.fsUtils;
-    // Try to init a temporary filesystem to test '--allow-file-access-from-files' option
-    requestFileSystem(window.TEMPORARY, 10,  function(filesystem) {
-        fsUtils.initFS(fsUtils.fsType, fsUtils.fsSize, fsInitSuccess, fsInitFailed);
-    }, fsInitFailed);
+    else startBuilder();
 });
diff --git a/src/js/msg-box.js b/src/js/msg-box.js
@@ -0,0 +1,30 @@
+$.rib = $.rib || {};
+$.rib.msgbox = function (){
+    var dlg = $("<div/>").append('<center class="title">'
+            + arguments[0] + '</center>'),
+        buttons = arguments[1], buttonSet;
+    if (buttons) {
+        buttonSet = $('<div align="center" id="buttonSet" />').appendTo(dlg);
+        $.each(buttons, function (name, value) {
+                buttonSet.append($('<button class="buttonStyle"/>')
+                    .text(name)
+                    .bind('click', value)
+                    .bind('click', function () {dlg.dialog('close')}));
+        });
+    }
+    dlg.dialog();
+};
+
+window.alert =  function (msg) {
+    $.rib.msgbox(msg, {"OK": null});
+}
+
+var old_confirm = window.confirm;
+window.confirm = function () {
+    if (arguments.length > 1) {
+       $.rib.msgbox(arguments[0], {'Continue': arguments[1], 'Cancel': arguments[2]});
+    }
+    else
+        return old_confirm(arguments[0]);
+}
+
diff --git a/src/js/pageTemplate.js b/src/js/pageTemplate.js
@@ -18,7 +18,8 @@ $(function() {
         options :{
             design: null,
             pageTemplate: "Blank Page",
-            layout: ['Content']
+            layout: ['Content'],
+            pageStyle: 'page'
         },
         /**
          * Creates an new page according to page configure.
@@ -30,6 +31,7 @@ $(function() {
             var design = config.design || ADM.getDesignRoot(),
                 pageTemplate = config.pageTemplate || this.options[pageTemplate],
                 layout = this.options.layout.concat(config.layout),
+                style = config.pageStyle || this.options[pageStyle],
                 newPage, result;
 
             if (!design.instanceOf("Design")) {
@@ -43,6 +45,12 @@ $(function() {
                 return null;
             }
 
+            //set page style
+            result = newPage.setProperty('style', style);
+            if (!result.result) {
+                return null;
+            }
+
             //set page layout
             result = setPageLayout(newPage, layout);
             //TODO: if we have some specfic logic to handle with template,

diff --git a/src/js/views/layout.js b/src/js/views/layout.js
@@ -395,6 +395,11 @@
                 $(domNode).addClass('adm-editable');
             }
 
+            // If this node is a "dialog", make it display as "page" in layout view
+            if (admNode.getType() === "Page" && admNode.getProperty("style") === "dialog") {
+                $(domNode).attr('data-role', 'page');
+            }
+
             // FIXME: This is a bit of a hack; we're removing the disabled
             // attribute from widgets because when they're disabled, they
             // lose mouse clicks and can't be selected. This code is assuming

diff --git a/src/js/views/live.js b/src/js/views/live.js
@@ -88,7 +88,7 @@
                                     }
                                     return false;
                                 })
-                            deviceForm.dialog({title: label, modal:true, width: 360, height: 260, resizable:false });
+                            deviceForm.dialog({title: label, modal:true, width: 360, resizable:false });
                         });
                     $('<a href="javascript:void(0)">' + label +'</a>').appendTo(deviceToolbar).click(function () {
                         deviceButton.trigger('click');

diff --git a/src/js/views/outline.js b/src/js/views/outline.js
@@ -167,11 +167,14 @@
             if (node.getType() === "Page") {
                 //set page id
                 var id = node.getProperty('id'),
-                    titleNode = domNode.find("> a > .pageTitle");
+                    titleNode = domNode.find("> a > .pageTitle"),
+                    widgetNode = domNode.find( "> a > .widgetType"),
+                    style = node.getProperty('style');
                 if (titleNode.length === 0)
                     titleNode = $('<span/>').addClass('pageTitle')
                         .appendTo(domNode.find("> a"));
                 titleNode.text(' (' + id + ')');
+                widgetNode.text(style);
             }
         },
         _render: function (domNode, data) {

diff --git a/src/js/views/page.js b/src/js/views/page.js
@@ -243,6 +243,7 @@
                 dialog.find('#pagePicker').get(0).selectedIndex = 0;
                 dialog.find('#header_layout').attr("checked", true);
                 dialog.find('#footer_layout').attr("checked", true);
+                dialog.find('input:radio[name=Layout]')[0].checked = true;
             }
             catch (err) {
                 console.error(err.message);
@@ -256,6 +257,12 @@
                     dialog = $('#pageDialog');
 
                 options.pageTemplate = dialog.find("#pagePicker").val();
+                //get style of new page
+                if (dialog.find('input:radio[name=Layout]:checked').next().html() === 'Dialog') {
+                    options.pageStyle = 'dialog';
+                } else {
+                    options.pageStyle = 'page';
+                }
                 //get checkbox value
                 if (dialog.find('#header_layout').is(":checked")) {
                     layout.push('Header');
@@ -297,14 +304,12 @@
                         '<select id="pagePicker" size="1"></select></li>' +
                         '<li class="m150 mt30"><label for="Layout">Layout</label>' +
                         '<fieldset><ul>' +
-                        /*
                         '<li>' +
                         '<input class="fieldInput" type="radio" name="Layout"/>' +
                         '<label class="fieldLabel" for="layout">Normal Page</label></li>' +
                         '<li>' +
                         '<input class="fieldInput" type="radio" name="Layout"/>' +
                         '<label class="fieldLabel" for="layout">Dialog</label></li>' +
-                        */
                         '<li>' +
                         '<input id="header_layout" class="fieldInput" type="checkbox" name="Header"/>' +
                         '<label class="fieldLabel" for="layout">Header</label></li>' +

diff --git a/src/js/views/palette.js b/src/js/views/palette.js
@@ -72,7 +72,9 @@
             listWidgets = function (container, group) {
                 $.each(group, function (i, value) {
                     if (value && typeof value === "string") {
-                        if (BWidget.isPaletteWidget(value)) {
+                        if (BWidget.isPaletteWidget(value) &&
+                            // Avoid duplication
+                            container.find("#BWidget-" + value).length === 0) {
                             generateWidget(container, value);
                         }
                     }

diff --git a/src/js/views/project.js b/src/js/views/project.js
@@ -289,10 +289,9 @@
                         });
                     }
                 };
-                var continueToDelete = confirm("Are you sure you want to delete it?");
-                if(continueToDelete) {
+                confirm("Are you sure you want to delete it?", function() {
                     $.rib.pmUtils.deleteProject(pid, success);
-                }
+                });
             };
             // draw project box
             box = $('<div/>').attr('id',pid)

diff --git a/src/js/views/property.js b/src/js/views/property.js
@@ -321,13 +321,22 @@
                                 .attr('id', valueId)
                                 .addClass('title')
                                 .appendTo(value);
-                            //add options to select list
-                            for (o in options[p]) {
-                                //TODO make it simple
-                                $('<option value="' + options[p][o] +
-                                  '">' +options[p][o] + '</option>')
+                            //Forbid changing the style of the first page to "Dialog", we don't want
+                            //to user adjust style of the first page
+                            if (type === 'Page' &&
+                                    node.getDesign().getChildren()[0] === node &&
+                                    p === 'style') {
+                                $('<option value="page">page</option>')
                                     .appendTo(value.find("#" + valueId));
-                                value.find('#'+ valueId).val(valueVal);
+                            } else {
+                                //add options to select list
+                                for (o in options[p]) {
+                                    //TODO make it simple
+                                    $('<option value="' + options[p][o] +
+                                            '">' +options[p][o] + '</option>')
+                                        .appendTo(value.find("#" + valueId));
+                                    value.find('#'+ valueId).val(valueVal);
+                                }
                             }
                         } else {
                             $('<input type ="text" value="">')
@@ -372,36 +381,39 @@
             content.find('#deleteElement')
                 .bind('click', function (e) {
                     var parent, zone, index;
-                    try {
-                        index = node.getZoneIndex();
-                        parent = node.getParent();
-                        zone = parent.getZoneArray(node.getZone());
-                        if (type === "Page") {
-                            continueToDelete = confirm("Are you sure you want to delete the page?");
-                            if(!continueToDelete) {
-                                return false;
+                    var doDelete = function () {
+                        try {
+                            index = node.getZoneIndex();
+                            parent = node.getParent();
+                            zone = parent.getZoneArray(node.getZone());
+                            if (type === "Page") {
+                                $.rib.pageUtils.deletePage(node.getUid(), false);
+                            } else {
+                                ADM.removeChild(node.getUid(), false);
                             }
-                            $.rib.pageUtils.deletePage(node.getUid(), false);
-                        } else {
-                            ADM.removeChild(node.getUid(), false);
-                        }
-                        // Select sibling of removed node, or parent node
-                        // if removed node is the last node of parent.  The
-                        // order is next sibling, prev sibling and parent
-                        if (zone.length === 0) {
-                            //find the first selectable ancestor
-                            while (!parent.isSelectable()) {
-                                parent = parent.getParent();
+                            // Select sibling of removed node, or parent node
+                            // if removed node is the last node of parent.  The
+                            // order is next sibling, prev sibling and parent
+                            if (zone.length === 0) {
+                                //find the first selectable ancestor
+                                while (!parent.isSelectable()) {
+                                    parent = parent.getParent();
+                                }
+                                ADM.setSelected(parent);
+                            } else if (index < zone.length) {
+                                ADM.setSelected(zone[index])
+                            } else {
+                                ADM.setSelected(zone[zone.length - 1]);
                             }
-                            ADM.setSelected(parent);
-                        } else if (index < zone.length) {
-                            ADM.setSelected(zone[index])
-                        } else {
-                            ADM.setSelected(zone[zone.length - 1]);
+                        }
+                        catch (err) {
+                            console.error(err.message);
                         }
                     }
-                    catch (err) {
-                        console.error(err.message);
+                    if (type === "Page") {
+                        confirm("Are you sure you want to delete the page?", doDelete);
+                    } else {
+                        doDelete();
                     }
                     e.stopPropagation();
                     return false;