Skip to content

X
xblock-drag-and-drop-v2
Commit 80465114 by Braden MacDonald
Options

Make zones proportional in Studio

parent 74a0e79a
Showing with 79 additions and 95 deletions
drag_and_drop_v2/public/js/drag_and_drop_edit.js
......@@ -12,10 +12,7 @@ function DragAndDropEditBlock(runtime, element, params) {
var dragAndDrop = (function($) {
var _fn = {
// DOM Elements
$target: $('.target-img', element),
// Templates
tpl: {
init: function() {
_fn.tpl = {
......@@ -41,7 +38,8 @@ function DragAndDropEditBlock(runtime, element, params) {
form: $('.drag-builder .items-form', element),
tab: $('.drag-builder .items-tab', element)
},
target: $('.drag-builder .target', element)
targetImage: $('.drag-builder .target .target-img', element),
zonesPreview: $('.drag-builder .target .zones-preview', element),
},
init: function() {
_fn.data = params.data;
......@@ -50,7 +48,7 @@ function DragAndDropEditBlock(runtime, element, params) {
_fn.tpl.init();
// Display target image
_fn.$target.show();
_fn.build.$el.targetImage.show();
_fn.build.clickHandlers();
},
......@@ -71,9 +69,10 @@ function DragAndDropEditBlock(runtime, element, params) {
_fn.build.form.zone.add();
}
// Set the target image:
// Set the target image and bind its event handler:
$('.target-image-form input', element).val(_fn.data.targetImg);
$('.target-img', element).attr('src', params.target_img_expanded_url);
_fn.build.$el.targetImage.load(_fn.build.form.zone.imageLoaded);
_fn.build.$el.targetImage.attr('src', params.target_img_expanded_url);
if (_fn.data.displayLabels) {
$('.display-labels-form input', element).prop('checked', true);
......@@ -88,7 +87,7 @@ function DragAndDropEditBlock(runtime, element, params) {
$(this).one('click', function(e) {
// $zoneTab -> $itemTab
e.preventDefault();
_fn.build.form.zone.setAll();
for (var i = 0; i < _fn.data.items.length; i++) {
_fn.build.form.item.add(_fn.data.items[i]);
}
......@@ -119,6 +118,7 @@ function DragAndDropEditBlock(runtime, element, params) {
_fn.build.form.zone.add();
})
.on('click', '.remove-zone', _fn.build.form.zone.remove)
.on('input', '.zone-row input', _fn.build.form.zone.changedInputHandler)
.on('click', '.target-image-form button', function(e) {
e.preventDefault();
......@@ -128,7 +128,7 @@ function DragAndDropEditBlock(runtime, element, params) {
// e.g. '/static/blah.png' becomes '/asset-v1:course+id/blah.png'
var handlerUrl = runtime.handlerUrl(element, 'expand_static_url');
$.post(handlerUrl, JSON.stringify(new_img_url), function(result) {
_fn.$target.attr('src', result.url);
_fn.build.$el.targetImage.attr('src', result.url);
}).error(function(a, b, c) { console.log(a, b, c); });
// Placeholder shim for IE9
......@@ -148,21 +148,18 @@ function DragAndDropEditBlock(runtime, element, params) {
zone: {
count: 0,
formCount: 0,
list: [],
obj: [],
zoneObjects: [],
getObjByIndex: function(num) {
for (var i = 0; i < _fn.build.form.zone.obj.length; i++) {
if (_fn.build.form.zone.obj[i].index == num)
return _fn.build.form.zone.obj[i];
for (var i = 0; i < _fn.build.form.zone.zoneObjects.length; i++) {
if (_fn.build.form.zone.zoneObjects[i].index == num)
return _fn.build.form.zone.zoneObjects[i];
}
},
add: function(oldZone) {
var inputTemplate = _fn.tpl.zoneInput,
zoneTemplate = _fn.tpl.zoneElement,
name = 'zone-',
$elements = _fn.build.$el,
num,
zoneObj;
num;
if (!oldZone) oldZone = {};
......@@ -172,17 +169,17 @@ function DragAndDropEditBlock(runtime, element, params) {
name += num;
// Update zone obj
zoneObj = {
var zoneObj = {
title: oldZone.title || 'Zone ' + num,
id: name,
index: num,
width: oldZone.width || 200,
height: oldZone.height || 100,
x: oldZone.x || 0,
y: oldZone.y || 0
y: oldZone.y || 0,
};
_fn.build.form.zone.obj.push(zoneObj);
_fn.build.form.zone.zoneObjects.push(zoneObj);
// Add fields to zone position form
$zoneNode = $(inputTemplate(zoneObj));
......@@ -191,10 +188,7 @@ function DragAndDropEditBlock(runtime, element, params) {
_fn.build.form.zone.enableDelete();
// Add zone div to target
$elements.target.append(zoneTemplate(zoneObj));
// Listen to changes in form to update zone div
_fn.build.form.zone.clickHandler(num);
_fn.build.form.zone.renderZonesPreview();
// Placeholder shim for IE9
$.placeholder.shim();
......@@ -208,14 +202,14 @@ function DragAndDropEditBlock(runtime, element, params) {
e.preventDefault();
$el.detach();
$('#' + id, element).detach();
// Find the index of the zone in the array and remove it.
for (array_index = 0; array_index < _fn.build.form.zone.obj.length;
for (array_index = 0; array_index < _fn.build.form.zone.zoneObjects.length;
array_index++) {
if (_fn.build.form.zone.obj[array_index].index == index) break;
if (_fn.build.form.zone.zoneObjects[array_index].index == index) break;
}
_fn.build.form.zone.obj.splice(array_index, 1);
_fn.build.form.zone.zoneObjects.splice(array_index, 1);
_fn.build.form.zone.renderZonesPreview();
_fn.build.form.zone.formCount--;
_fn.build.form.zone.disableDelete();
......@@ -233,80 +227,68 @@ function DragAndDropEditBlock(runtime, element, params) {
_fn.build.$el.zones.form.find('.remove-zone').addClass('hidden');
}
},
setAll: function() {
var zones = [],
$form = _fn.build.$el.zones.form.find('.title');
renderZonesPreview: function() {
// Refresh the div which shows a preview of the zones over top of
// the background image.
_fn.build.$el.zonesPreview.html('');
var imgWidth = _fn.build.$el.targetImage[0].naturalWidth;
var imgHeight = _fn.build.$el.targetImage[0].naturalHeight;
this.zoneObjects.forEach(function(zoneObj) {
_fn.build.$el.zonesPreview.append(
_fn.tpl.zoneElement({
id: zoneObj.id,
title: zoneObj.title,
x_percent: (+zoneObj.x) / imgWidth * 100,
y_percent: (+zoneObj.y) / imgHeight * 100,
width_percent: (+zoneObj.width) / imgWidth * 100,
height_percent: (+zoneObj.height) / imgHeight * 100,
})
);
});
},
getZoneNames: function() {
var zoneNames = [];
var $form = _fn.build.$el.zones.form.find('.title');
$form.each(function(i, el) {
var val = $(el).val();
if (val.length > 0) {
zones.push(val);
zoneNames.push(val);
}
});
_fn.build.form.zone.list = zones;
return zoneNames;
},
clickHandler: function(num) {
var $div = $('#zone-' + num, element),
$form = _fn.build.$el.zones.form.find('.zone-row.zone-' + num);
// Listen to form changes and update zone div position
$form.on('keyup', '.title', function(e) {
var text = $(e.currentTarget).val(),
record = _fn.build.form.zone.getObjByIndex(num);
$div.find('p').html(text);
record.title = text;
}).on('keyup', '.width', function(e) {
var width = $(e.currentTarget).val(),
record = _fn.build.form.zone.getObjByIndex(num);
$div.css('width', width + 'px');
record.width = width;
}).on('keyup', '.height', function(e) {
var height = $(e.currentTarget).val(),
record = _fn.build.form.zone.getObjByIndex(num);
$div.css('height', height + 'px');
record.height = height;
}).on('keyup', '.x', function(e) {
var x = $(e.currentTarget).val(),
record = _fn.build.form.zone.getObjByIndex(num);
$div.css('left', x + 'px');
record.x = x;
}).on('keyup', '.y', function(e) {
var y = $(e.currentTarget).val(),
record = _fn.build.form.zone.getObjByIndex(num);
$div.css('top', y + 'px');
record.y = y;
});
},
cleanObject: function(arr) {
var clean = [],
i,
len = arr.length;
for (i=0; i<len; i++) {
clean.push(arr[i]);
changedInputHandler: function(ev) {
// Called when any of the inputs have changed.
var $changedInput = $(ev.currentTarget);
var $row = $changedInput.closest('.zone-row');
var record = _fn.build.form.zone.getObjByIndex($row.data('index'));
if ($changedInput.hasClass('title')) {
record.title = $changedInput.val();
} else if ($changedInput.hasClass('width')) {
record.width = $changedInput.val();
} else if ($changedInput.hasClass('height')) {
record.height = $changedInput.val();
} else if ($changedInput.hasClass('x')) {
record.x = $changedInput.val();
} else if ($changedInput.hasClass('y')) {
record.y = $changedInput.val();
}
return clean;
}
_fn.build.form.zone.renderZonesPreview();
},
imageLoaded: function() {
// The target background image has loaded (or reloaded, if changed).
_fn.build.form.zone.renderZonesPreview();
},
},
createDropdown: function(selected) {
var tpl = _fn.tpl.zoneDropdown,
i,
is_sel,
arr = _fn.build.form.zone.list,
dropdown = [],
html,
dropdown_items = arr.concat('none');
dropdown_items = _fn.build.form.zone.getZoneNames().concat('none');
for (i=0; i<dropdown_items.length; i++) {
is_sel = (dropdown_items[i] == selected) ? 'selected' : '';
for (var i=0; i<dropdown_items.length; i++) {
var is_sel = (dropdown_items[i] == selected) ? 'selected' : '';
dropdown.push(tpl({ value: dropdown_items[i], selected: is_sel }));
}
......@@ -425,7 +407,7 @@ function DragAndDropEditBlock(runtime, element, params) {
});
_fn.data.items = items;
_fn.data.zones = _fn.build.form.zone.cleanObject(_fn.build.form.zone.obj);
_fn.data.zones = _fn.build.form.zone.zoneObjects;
var data = {
'display_name': $element.find('.display-name').val(),
......
drag_and_drop_v2/templates/html/drag_and_drop_edit.html
......@@ -60,6 +60,8 @@
</div>
<div class="target">
<img class="target-img">
<div class="zones-preview">
</div>
</div>
</div>
</section>
......
drag_and_drop_v2/templates/html/js_templates.html
<script id="zone-element-tpl" type="text/html">
<div id="{{ id }}" class="zone" data-zone="{{ title }}" style="
top:{{ y }}px;
left:{{ x }}px;
width:{{ width }}px;
height:{{ height }}px;">
top:{{ y_percent }}%;
left:{{ x_percent }}%;
width:{{ width_percent }}%;
height:{{ height_percent }}%;">
<p>{{{ title }}}</p>
</div>
</script>
<script id="zone-input-tpl" type="text/html">
<div class="zone-row {{ id }}">
<div class="zone-row {{ id }}" data-index="{{index}}">
<label>{{i18n "Text"}}</label>
<input type="text" class="title" value="{{ title }}" />
<a href="#" class="remove-zone hidden">
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment