Merge pull request #51 from open-craft/alignment-fix-and-cleanup

Ensure correct alignment of zone labels; remove IE9 shims

drag_and_drop_v2/drag_and_drop_v2.py

@@ -198,7 +198,6 @@ class DragAndDropBlock(XBlock, XBlockWithSettingsMixin, ThemableXBlockMixin):
         )
         js_urls = (
             'public/js/vendor/jquery-ui-1.10.4.custom.min.js',
-            'public/js/vendor/jquery.html5-placeholder-shim.js',
             'public/js/vendor/handlebars-v1.1.2.js',
             'public/js/drag_and_drop_edit.js',
         )

drag_and_drop_v2/public/css/drag_and_drop.css

@@ -242,7 +242,7 @@
     border: 2px solid #a5a5a5;
 }
 
-.xblock--drag-and-drop .zone p {
+.xblock--drag-and-drop .drag-container .target .zone p {
     width: 100%;
     font-family: Arial;
     font-size: 16px;
@@ -253,17 +253,6 @@
     margin-bottom: auto;
 }
 
-/*** IE9 alignment fix ***/
-.lt-ie10 .xblock--drag-and-drop .zone {
-    display: table;
-}
-
-.lt-ie10 .xblock--drag-and-drop .zone p {
-    display: table-cell;
-    vertical-align: middle;
-    text-align: center;
-}
-
 /*** FEEDBACK ***/
 
 .xblock--drag-and-drop .feedback {

drag_and_drop_v2/public/css/drag_and_drop_edit.css

@@ -50,17 +50,6 @@
     margin-bottom: auto;
 }
 
-/*** IE9 alignment fix ***/
-.lt-ie10 .xblock--drag-and-drop--editor .zone {
-    display: table;
-}
-
-.lt-ie10 .xblock--drag-and-drop--editor .zone p {
-    display: table-cell;
-    vertical-align: middle;
-    text-align: center;
-}
-
 /** Builder **/
 .xblock--drag-and-drop--editor .hidden {
     display: none !important;

drag_and_drop_v2/public/js/drag_and_drop_edit.js

@@ -87,9 +87,6 @@ function DragAndDropEditBlock(runtime, element, params) {
                         $fbkTab.addClass('hidden');
                         $zoneTab.removeClass('hidden');
 
-                        // Placeholder shim for IE9
-                        $.placeholder.shim();
-
                         $(this).one('click', function(e) {
                             // $zoneTab -> $itemTab
                             e.preventDefault();
@@ -104,9 +101,6 @@ function DragAndDropEditBlock(runtime, element, params) {
                             $zoneTab.addClass('hidden');
                             $itemTab.removeClass('hidden');
 
-                            // Placeholder shim for IE9
-                            $.placeholder.shim();
-
                             $(this).addClass('hidden');
                             $('.save-button', element).parent()
                                 .removeClass('hidden')
@@ -148,8 +142,6 @@ function DragAndDropEditBlock(runtime, element, params) {
                             _fn.build.$el.targetImage.attr('alt', new_description);
                             _fn.data.targetImgDescription = new_description;
 
-                            // Placeholder shim for IE9
-                            $.placeholder.shim();
                         })
                         .on('click', '.display-labels-form input', function(e) {
                             _fn.data.displayLabels = $('.display-labels-form input', element).is(':checked');
@@ -211,8 +203,6 @@ function DragAndDropEditBlock(runtime, element, params) {
                             // Add zone div to target
                             _fn.build.form.zone.renderZonesPreview();
 
-                            // Placeholder shim for IE9
-                            $.placeholder.shim();
                         },
                         remove: function(e) {
                             var $el = $(e.currentTarget).closest('.zone-row'),
@@ -235,8 +225,6 @@ function DragAndDropEditBlock(runtime, element, params) {
                             _fn.build.form.zone.formCount--;
                             _fn.build.form.zone.disableDelete();
 
-                            // Placeholder shim for IE9
-                            $.placeholder.shim();
                         },
                         enableDelete: function() {
                             if (_fn.build.form.zone.formCount > 1) {
@@ -362,8 +350,6 @@ function DragAndDropEditBlock(runtime, element, params) {
                             $form.append(tpl(ctx));
                             _fn.build.form.item.enableDelete();
 
-                            // Placeholder shim for IE9
-                            $.placeholder.shim();
                         },
                         remove: function(e) {
                             var $el = $(e.currentTarget).closest('.item');
@@ -374,8 +360,6 @@ function DragAndDropEditBlock(runtime, element, params) {
                             _fn.build.form.item.count--;
                             _fn.build.form.item.disableDelete();
 
-                            // Placeholder shim for IE9
-                            $.placeholder.shim();
                         },
                         enableDelete: function() {
                             if (_fn.build.form.item.count > 1) {

drag_and_drop_v2/public/js/vendor/jquery.html5-placeholder-shim.js

-(function($) {
-  // @todo Document this.
-  $.extend($,{ placeholder: {
-      browser_supported: function() {
-        return this._supported !== undefined ?
-          this._supported :
-          ( this._supported = !!('placeholder' in $('<input type="text">')[0]) );
-      },
-      shim: function(opts) {
-        var config = {
-          color: '#888',
-          cls: 'placeholder',
-          selector: 'input[placeholder], textarea[placeholder]'
-        };
-        $.extend(config,opts);
-        return !this.browser_supported() && $(config.selector)._placeholder_shim(config);
-      }
-  }});
-
-  $.extend($.fn,{
-    _placeholder_shim: function(config) {
-      function calcPositionCss(target)
-      {
-        var op = $(target).offsetParent().offset();
-        var ot = $(target).offset();
-
-        return {
-          top: ot.top - op.top,
-          left: ot.left - op.left,
-          width: $(target).width()
-        };
-      }
-      function adjustToResizing(label) {
-      	var $target = label.data('target');
-      	if(typeof $target !== "undefined") {
-          label.css(calcPositionCss($target));
-          $(window).one("resize", function () { adjustToResizing(label); });
-        }
-      }
-      return this.each(function() {
-        var $this = $(this);
-
-        if( $this.is(':visible') ) {
-
-          if( $this.data('placeholder') ) {
-            var $ol = $this.data('placeholder');
-            $ol.css(calcPositionCss($this));
-            return true;
-          }
-
-          var possible_line_height = {};
-          if( !$this.is('textarea') && $this.css('height') != 'auto') {
-            possible_line_height = { lineHeight: $this.css('height'), whiteSpace: 'nowrap' };
-          }
-
-          var isBorderBox = ($this.css('box-sizing') === 'border-box');
-
-          var ol = $('<label />')
-            .text($this.attr('placeholder'))
-            .addClass(config.cls)
-            .css($.extend({
-              position:'absolute',
-              display: 'inline',
-              'float':'none',
-              overflow:'hidden',
-              textAlign: 'left',
-              color: config.color,
-              cursor: 'text',
-              paddingTop: isBorderBox ? '0' : $this.css('padding-top'),
-              paddingRight: $this.css('padding-right'),
-              paddingBottom: isBorderBox ? '0' : $this.css('padding-bottom'),
-              paddingLeft: $this.css('padding-left'),
-              fontSize: $this.css('font-size'),
-              fontFamily: $this.css('font-family'),
-              fontStyle: $this.css('font-style'),
-              fontWeight: $this.css('font-weight'),
-              textTransform: $this.css('text-transform'),
-              backgroundColor: 'transparent',
-              zIndex: 99
-            }, possible_line_height))
-            .css(calcPositionCss(this))
-            .attr('for', this.id)
-            .data('target',$this)
-            .click(function(){
-                if (!$(this).data('target').is(':disabled')) {
-                    $(this).data('target').focus();
-                }
-            })
-            .insertBefore(this);
-          $this
-            .data('placeholder',ol)
-						.keydown(function(){
-							ol.hide();
-						})
-						.blur(function() {
-              ol[$this.val().length ? 'hide' : 'show']();
-            }).triggerHandler('blur');
-          $(window).one("resize", function () { adjustToResizing(ol); });
-        }
-      });
-    }
-  });
-})(jQuery);
-
-jQuery(document).add(window).bind('ready load', function() {
-  if (jQuery.placeholder) {
-    jQuery.placeholder.shim();
-  }
-});

drag_and_drop_v2/public/themes/apros.css

@@ -51,7 +51,7 @@
     background-color: #fff;
 }
 
-.themed-xblock.xblock--drag-and-drop .zone p {
+.themed-xblock.xblock--drag-and-drop .drag-container .target .zone p {
     font-family: Arial;
     font-size: 16px;
     font-weight: bold;