Support for Duplicate and Delete of XBlock Container Leaves (disabled under Feature Flag).

cms/envs/common.py

@@ -99,6 +99,12 @@ FEATURES = {
 
     # Turn off Advanced Security by default
     'ADVANCED_SECURITY': False,
+
+    # Temporary feature flag for duplicating xblock leaves
+    'ENABLE_DUPLICATE_XBLOCK_LEAF_COMPONENT': False,
+
+    # Temporary feature flag for deleting xblock leaves
+    'ENABLE_DELETE_XBLOCK_LEAF_COMPONENT': False,
 }
 ENABLE_JASMINE = False
 

cms/static/js/views/pages/container.js

@@ -2,8 +2,8 @@
  * XBlockContainerView is used to display an xblock which has children, and allows the
  * user to interact with the children.
  */
-define(["jquery", "underscore", "js/views/baseview", "js/views/xblock", "js/views/modals/edit_xblock"],
-    function ($, _, BaseView, XBlockView, EditXBlockModal) {
+define(["jquery", "underscore", "gettext", "js/views/feedback_notification", "js/views/feedback_prompt", "js/views/baseview", "js/views/xblock", "js/views/modals/edit_xblock", "js/models/xblock_info"],
+    function ($, _, gettext, NotificationView, PromptView, BaseView, XBlockView, EditXBlockModal, XBlockInfo) {
 
         var XBlockContainerView = BaseView.extend({
             // takes XBlockInfo as a model
@@ -53,6 +53,10 @@ define(["jquery", "underscore", "js/views/baseview", "js/views/xblock", "js/view
                 return $(target).closest('[data-locator]');
             },
 
+            getURLRoot: function() {
+                return this.xblockView.model.urlRoot;
+            },
+
             addButtonActions: function(element) {
                 var self = this;
                 element.find('.edit-button').click(function(event) {
@@ -68,11 +72,98 @@ define(["jquery", "underscore", "js/views/baseview", "js/views/xblock", "js/view
                             }
                         });
                 });
+                element.find('.duplicate-button').click(function(event) {
+                    event.preventDefault();
+                    self.duplicateComponent(
+                        self.findXBlockElement(event.target)
+                    );
+                });
+                element.find('.delete-button').click(function(event) {
+                    event.preventDefault();
+                    self.deleteComponent(
+                        self.findXBlockElement(event.target)
+                    );
+                });
             },
 
-            refreshXBlock: function(xblockInfo, xblockElement) {
+            duplicateComponent: function(xblockElement) {
                 var self = this,
-                    temporaryView;
+                    parentElement = self.findXBlockElement(xblockElement.parent()),
+                    duplicating = new NotificationView.Mini({
+                        title: gettext('Duplicating…')
+                    });
+
+                duplicating.show();
+                return $.postJSON(self.getURLRoot(), {
+                    duplicate_source_locator: xblockElement.data('locator'),
+                    parent_locator: parentElement.data('locator')
+                }, function(data) {
+                    // copy the element
+                    var duplicatedElement = xblockElement.clone(false);
+
+                    // place it after the original element
+                    xblockElement.after(duplicatedElement);
+
+                    // update its locator id
+                    duplicatedElement.attr('data-locator', data.locator);
+
+                    // have it refresh itself
+                    self.refreshXBlockElement(duplicatedElement);
+
+                    // hide the notification
+                    duplicating.hide();
+                });
+            },
+
+
+            deleteComponent: function(xblockElement) {
+                var self = this, deleting;
+                return new PromptView.Warning({
+                    title: gettext('Delete this component?'),
+                    message: gettext('Deleting this component is permanent and cannot be undone.'),
+                    actions: {
+                        primary: {
+                            text: gettext('Yes, delete this component'),
+                            click: function(prompt) {
+                                prompt.hide();
+                                deleting = new NotificationView.Mini({
+                                    title: gettext('Deleting…')
+                                });
+                                deleting.show();
+                                return $.ajax({
+                                    type: 'DELETE',
+                                    url:
+                                        self.getURLRoot() + "/" +
+                                            xblockElement.data('locator') + "?" +
+                                            $.param({recurse: true, all_versions: true})
+                                }).success(function() {
+                                    deleting.hide();
+                                    xblockElement.remove();
+                                });
+                            }
+                        },
+                        secondary: {
+                            text: gettext('Cancel'),
+                            click: function(prompt) {
+                                return prompt.hide();
+                            }
+                        }
+                    }
+                }).show();
+            },
+
+            refreshXBlockElement: function(xblockElement) {
+                this.refreshXBlock(
+                    new XBlockInfo({
+                        id: xblockElement.data('locator')
+                    }),
+                    xblockElement
+                );
+            },
+
+            refreshXBlock: function(xblockInfo, xblockElement) {
+                var self = this, temporaryView;
+
                 // There is only one Backbone view created on the container page, which is
                 // for the container xblock itself. Any child xblocks rendered inside the
                 // container do not get a Backbone view. Thus, create a temporary XBlock
@@ -93,3 +184,4 @@ define(["jquery", "underscore", "js/views/baseview", "js/views/xblock", "js/view
 
         return XBlockContainerView;
     }); // end define();
+

cms/templates/studio_xblock_wrapper.html

 <%! from django.utils.translation import ugettext as _ %>
+<%! from django.conf import settings %>
+
 % if xblock.location != xblock_context['root_xblock'].location:
-  % if xblock.has_children:
-<section class="wrapper-xblock level-nesting" data-locator="${locator}" data-display-name="${xblock.display_name_with_default | h}" data-category="${xblock.category | h}">
-  % else:
-<section class="wrapper-xblock level-element" data-locator="${locator}" data-display-name="${xblock.display_name_with_default | h}" data-category="${xblock.category | h}">
-  % endif
+  <% section_class = "level-nesting" if xblock.has_children else "level-element" %>
+<section class="wrapper-xblock ${section_class}" data-locator="${locator}" data-display-name="${xblock.display_name_with_default | h}" data-category="${xblock.category | h}">
 % endif
+
     <header class="xblock-header">
         <div class="header-details">
             ${xblock.display_name_with_default | h}
@@ -13,12 +13,28 @@
         <div class="header-actions">
             <ul class="actions-list">
                 % if not xblock_context['read_only']:
-                <li class="action-item action-edit">
-                    <a href="#" class="edit-button action-button">
-                        <i class="icon-pencil"></i>
-                        <span class="action-button-text">${_("Edit")}</span>
-                    </a>
-                </li>
+                    <li class="action-item action-edit">
+                        <a href="#" class="edit-button action-button">
+                            <i class="icon-pencil"></i>
+                            <span class="action-button-text">${_("Edit")}</span>
+                        </a>
+                    </li>
+                % endif
+                %if settings.FEATURES.get('ENABLE_DUPLICATE_XBLOCK_LEAF_COMPONENT'):
+                    <li class="action-item action-duplicate">
+                        <a href="#" data-tooltip="${_("Duplicate")}" class="duplicate-button action-button">
+                            <i class="icon-copy"></i>
+                            <span class="sr">${_("Duplicate")}</span>
+                        </a>
+                    </li>
+                % endif
+                %if settings.FEATURES.get('ENABLE_DELETE_XBLOCK_LEAF_COMPONENT'):
+                    <li class="action-item action-delete">
+                        <a href="#" data-tooltip="${_("Delete")}" class="delete-button action-button">
+                            <i class="icon-trash"></i>
+                            <span class="sr">${_("Delete")}</span>
+                        </a>
+                    </li>
                 % endif
             </ul>
         </div>
@@ -26,6 +42,7 @@
     <article class="xblock-render">
 ${content}
     </article>
+
 % if xblock.location != xblock_context['root_xblock'].location:
 </section>
 % endif