SAKIII-4872 Implement empty row placeholder

bertpareyn · Feb 7, 2012 · 62bc302 · 62bc302
1 parent 5ceddd7
commit 62bc302
Show file tree

Hide file tree

Showing 5 changed files with 69 additions and 15 deletions.
diff --git a/devwidgets/contentauthoring/bundles/default.properties b/devwidgets/contentauthoring/bundles/default.properties
@@ -1,3 +1,4 @@
+DOUBLE_CLICK_TO_START_TYPING = Double click to start typing or drag a widget here
 DRAG_AND_DROP_ERROR = Drag and drop
 DRAG_ME_TO_REORDER_CONTENT = Drag me around to reorder the content
 DRAG_ME_TO_REORDER_ROWS = Drag me around to reorder the rows

diff --git a/devwidgets/contentauthoring/contentauthoring.html b/devwidgets/contentauthoring/contentauthoring.html
@@ -53,7 +53,13 @@
                 <div class="contentauthoring_table_row">
                     <div class="contentauthoring_cell_content">
                         {for element in column.elements}
-                            ${insertCell(element.id, element.type)}
+                            {if element.dummytext}
+                                <div class="contentauthoring_dummy_element" style="display:none;">__MSG__DOUBLE_CLICK_TO_START_TYPING__.</div>
+                            {else}
+                                ${insertCell(element.id, element.type)}
+                            {/if}
+                        {forelse}
+                            <div class="contentauthoring_dummy_element" style="display:none;">__MSG__DOUBLE_CLICK_TO_START_TYPING__.</div>
                         {/for}
                     </div>
                     <div class="contentauthoring_cell_handle ui-resizable-handle ui-resizable-e"></div>
@@ -139,5 +145,7 @@ <h1 class="s3d-dialog-header" id="contentauthoring_widget_settings_title"></h1>
     <div id="contentauthoring_widget_settings_content"></div>
 </div>
 
+<div id="contentauthoring_dummy_element_template"><!--<div class="contentauthoring_dummy_element" style="display:none;">__MSG__DOUBLE_CLICK_TO_START_TYPING__.</div>--></div>
+
 <!-- JAVASCRIPT -->
 <script type="text/javascript" src="/devwidgets/contentauthoring/javascript/contentauthoring.js"></script>
diff --git a/devwidgets/contentauthoring/css/contentauthoring.css b/devwidgets/contentauthoring/css/contentauthoring.css
@@ -268,6 +268,24 @@
     width: 120px;
 }
 
+.contentauthoring_dummy_element {
+    display: none;
+}
+
+.contentauthoring_edit_mode .contentauthoring_dummy_element {
+    -webkit-touch-callout: none;
+    -webkit-user-select: none;
+    -khtml-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    -o-user-select: none;
+    user-select: none;
+    color: #999999;
+    display: block !important;
+    cursor: pointer;
+    font-size: 12px;
+}
+
 /* Elements to add */
 #contentauthoring_buttons_elements {
     margin-left: 0px;

diff --git a/devwidgets/contentauthoring/javascript/contentauthoring.js b/devwidgets/contentauthoring/javascript/contentauthoring.js
@@ -74,7 +74,6 @@ require(["jquery", "sakai/sakai.api.core", "jquery-ui"], function($, sakai) {
             if (isInEditMode()){
                 $rootel.removeClass("contentauthoring_edit_mode");
                 $(".contentauthoring_cell_content").sortable("destroy");
-                $("#contentauthoring_add_row").hide();
                 $("#inserterbar_widget").hide();
             } else {
                 $rootel.addClass("contentauthoring_edit_mode");
@@ -218,10 +217,12 @@ require(["jquery", "sakai/sakai.api.core", "jquery-ui"], function($, sakai) {
                         $(this).sortable("refresh");
                     });
                     sakai_global.contentauthoring.isDragging = false;
+                    $(".contentauthoring_dummy_element", $(this)).hide();
+                    checkColumnsEmpty();
                     if($(ui.item).data("collectionId")){
                         addExistingElement(event, ui);
                     } else if(!$(ui.item).data("contentId")){
-                        addNewElement(event, ui);
+                        addNewElement(event, $(ui.item));
                     } else {
                         addExistingElement(event, ui);
                     }
@@ -355,13 +356,6 @@ require(["jquery", "sakai/sakai.api.core", "jquery-ui"], function($, sakai) {
         // Add a new row //
         ///////////////////
 
-        $("#contentauthoring_add_row").bind("click", function(){
-            $("#contentauthoring_widget_container").append(generateNewRow());
-            sakai.api.Widgets.widgetLoader.insertWidgets("contentauthoring_widget", false, STORE_PATH);
-            setActions();
-            updateColumnHandles();
-        });
-
         var generateNewRow = function(){
             var newRow = {
                 "id": sakai.api.Util.generateWidgetId(),
@@ -370,8 +364,7 @@ require(["jquery", "sakai/sakai.api.core", "jquery-ui"], function($, sakai) {
                         "width": 1,
                         "elements": [
                             {
-                                "id": sakai.api.Util.generateWidgetId(),
-                                "type": "htmlblock"
+                                "dummytext": true
                             }
                         ]
                     }
@@ -440,6 +433,7 @@ require(["jquery", "sakai/sakai.api.core", "jquery-ui"], function($, sakai) {
                             } else {
                                 $el.append($(element));
                             }
+                            checkColumnsEmpty();
                             sakai.api.Widgets.widgetLoader.insertWidgets("contentauthoring_widget", false, STORE_PATH);
                             setActions();
                             sakai.api.Util.progressIndicator.hideProgressIndicator();
@@ -549,6 +543,7 @@ require(["jquery", "sakai/sakai.api.core", "jquery-ui"], function($, sakai) {
                             } else {
                                 $el.append($(element));
                             }
+                            checkColumnsEmpty();
                             sakai.api.Widgets.widgetLoader.insertWidgets("contentauthoring_widget", false, STORE_PATH);
                             setActions();
                             sakai.api.Util.progressIndicator.hideProgressIndicator();
@@ -608,10 +603,24 @@ require(["jquery", "sakai/sakai.api.core", "jquery-ui"], function($, sakai) {
             }
         });
 
+        var checkColumnsEmpty = function(){
+            $.each($(".contentauthoring_cell_content", $("#contentauthoring_widget")), function(i, cellcontainer){
+                if(!$(cellcontainer).find(".contentauthoring_cell_element").length){
+                    if(!$(cellcontainer).find(".contentauthoring_dummy_element").length){
+                        var dummy = $(sakai.api.Util.TemplateRenderer("contentauthoring_dummy_element_template", {}));
+                        $(cellcontainer).append(dummy);
+                    }
+                } else {
+                    $(cellcontainer).find(".contentauthoring_dummy_element").remove();
+                }
+            });
+        };
+
         var removeColumns = function($row, lastColumn){
             var widths = getColumnWidths($row);
             var remainingWidth = 1;
             var $cells = $(".contentauthoring_cell", $row);
+            $row.find(".contentauthoring_dummy_element").remove();
             for (var i = lastColumn + 1; i < $cells.length; i++){
                 var $cell = $($cells[i]);
                 $cell.find('.tinyMCE').each(function(){
@@ -627,6 +636,7 @@ require(["jquery", "sakai/sakai.api.core", "jquery-ui"], function($, sakai) {
             for (var i = 0; i <= lastColumn; i++) {
                 $($cells[i]).css("width", (widths[i] / remainingWidth) * 100 + "%");
             }
+            checkColumnsEmpty();
             updateColumnHandles();
         };
 
@@ -794,16 +804,21 @@ require(["jquery", "sakai/sakai.api.core", "jquery-ui"], function($, sakai) {
             $cell.find('.tinyMCE').each(function(){
                 tinyMCE.execCommand( 'mceRemoveControl', false, $(this).attr('id') );
             });
-            $cell.remove();
+            if($(this).parents(".contentauthoring_cell_content").children(".contentauthoring_cell_element").length > 1){
+                $cell.remove();
+            } else {
+                var dummy = $(sakai.api.Util.TemplateRenderer("contentauthoring_dummy_element_template", {}));
+                $cell.replaceWith(dummy);
+                setHeight(dummy.parents(".contentauthoring_table_row.contentauthoring_cell_container_row"));
+            }
         });
 
 
         /////////////////////
         // Add new element //
         /////////////////////
 
-        var addNewElement = function(event, ui){
-            var addedElement = $(ui.item);
+        var addNewElement = function(event, addedElement){
             var $row = $(addedElement).parents(".contentauthoring_table_row.contentauthoring_cell_container_row");
             if (addedElement.hasClass("inserterbar_widget_draggable")){
                 var type = addedElement.attr("data-element-type");
@@ -861,6 +876,7 @@ require(["jquery", "sakai/sakai.api.core", "jquery-ui"], function($, sakai) {
                     "settingsoverridden": true
                 });
                 $(ui.item).replaceWith($(element));
+                checkColumnsEmpty();
                 sakai.api.Widgets.widgetLoader.insertWidgets("contentauthoring_widget", false, STORE_PATH);
                 setActions();
                 sakai.api.Util.progressIndicator.hideProgressIndicator();
@@ -1120,6 +1136,14 @@ require(["jquery", "sakai/sakai.api.core", "jquery-ui"], function($, sakai) {
             determineEmptyPage(currentPageShown);
         });
 
+        $(".contentauthoring_dummy_element").live("dblclick", function(ev){
+            var $el = $(this);
+            $el.attr("data-element-type", "htmlblock");
+            $el.addClass("inserterbar_widget_draggable");
+            addNewElement(ev, $el);
+        });
+
+
         /////////////////////////////
         /////////////////////////////
         // Moved from sakaidocs.js //

diff --git a/devwidgets/htmlblock/javascript/htmlblock.js b/devwidgets/htmlblock/javascript/htmlblock.js
@@ -174,6 +174,9 @@ require(["jquery", "sakai/sakai.api.core"], function($, sakai) {
                                 $("#inserterbar_widget #inserterbar_tinymce_container").show();
                                 $(this.contentAreaContainer).parents(".contentauthoring_cell_element").find(".contentauthoring_cell_element_actions").hide();
                             });
+                            ed.onInit.add(function(ed) {
+                                ed.focus();
+                            });
                         }
                     });
                 }