Browse files

Merge pull request #77 from karthikv/master

Make elements draggable.
  • Loading branch information...
2 parents ba137bd + 5312537 commit 3cd66218e67f1addb8e2707a2b6a358665a32669 Jennifer Fong committed Sep 6, 2012
View
120 public/javascripts/views/component.js
@@ -152,12 +152,82 @@ define(['jquery', 'backbone', 'underscore', './extended', 'collections/element',
return $lastElement.data('model');
},
+ createElement: function($element) {
+ if (this.$el.hasClass('active')) {
+ var self = this;
+ // gather all element data; clone to prevent data modifications below
+ // from affecting the original element
+ var data = _.extend({}, $element.data());
+
+ // get rid of jquery-ui data
+ delete data.draggable;
+ delete data.sortable;
+
+ // integer level for headings
+ if (data.level) {
+ data.level = parseInt(data.level, 10);
+ }
+
+ // text for headings/paragraphs
+ var text = $element.text();
+ if (text) {
+ data.text = text;
+ }
+
+ var lastElement = self.getLastElement();
+ if (!lastElement) {
+ data.head = true;
+ }
+
+ self.Elements.create(data, {
+ success: function(element) {
+ element.justCreated = true;
+
+ function onLinkedListReady() {
+ // when the linked list ready, refresh the elements
+ self.publish('component:deactivateElements');
+ self.addAllElements();
+ }
+
+ if (lastElement) {
+ // lastElement is no longer the last; it now has a next
+ lastElement.save({ nextId: element.get('id') }, {
+ success: onLinkedListReady,
+ wait: true
+ });
+ } else {
+ onLinkedListReady();
+ }
+ },
+
+ error: errors.tooltipHandler($element),
+ wait: true
+ });
+ }
+ },
+
events: {
'click .icon-trash': function(event) {
event.preventDefault();
this.publish('component:deactivateElements');
this.remove();
},
+
+ 'drop': function(event, ui) {
+ var $element = $(ui.draggable);
+
+ if (!$element.is('.element')) {
+ // an element was not dragged; perhaps this is a component?
+ return;
+ }
+
+ // reset component position, since it was just dragged
+ $element.css({ top: 0, left: 0 });
+
+ if (this.$el.hasClass('active')) {
+ this.createElement($element);
+ }
+ }
},
contextualEvents: {
@@ -218,55 +288,7 @@ define(['jquery', 'backbone', 'underscore', './extended', 'collections/element',
}
},
- 'elementList:addElement': function($element) {
- if (this.$el.hasClass('active')) {
- var self = this;
- // gather all element data; clone to prevent data modifications below
- // from affecting the original element
- var data = _.extend({}, $element.data());
-
- // integer level for headings
- if (data.level) {
- data.level = parseInt(data.level, 10);
- }
-
- // text for headings/paragraphs
- var text = $element.text();
- if (text) {
- data.text = text;
- }
-
- var lastElement = self.getLastElement();
- if (!lastElement) {
- data.head = true;
- }
-
- self.Elements.create(data, {
- success: function(element) {
- element.justCreated = true;
-
- function onLinkedListReady() {
- // when the linked list ready, refresh the elements
- self.publish('component:deactivateElements');
- self.addAllElements();
- }
-
- if (lastElement) {
- // lastElement is no longer the last; it now has a next
- lastElement.save({ nextId: element.get('id') }, {
- success: onLinkedListReady,
- wait: true
- });
- } else {
- onLinkedListReady();
- }
- },
-
- error: errors.tooltipHandler($element),
- wait: true
- });
- }
- },
+ 'elementList:addElement': 'createElement',
'layoutModification:deleteComponent': function(location) {
// remove this component if it corresponds to the given location
View
9 public/javascripts/views/element-list.js
@@ -8,6 +8,12 @@ define(['jquery', 'backbone', 'underscore', './extended', 'helpers/errors',
this.render();
},
+ dragOptions: {
+ revert: 'invalid',
+ // don't cancel if input is dragged
+ cancel: ''
+ },
+
setComponentModel: function(component) {
if (this.component !== component) {
this.publish('screenActions:deactivateElementsInComponent', this.component);
@@ -34,6 +40,9 @@ define(['jquery', 'backbone', 'underscore', './extended', 'helpers/errors',
var $select = this.$('.field select');
$select.siblings('.selection')
.text($select.find('option:selected').text());
+
+ // elements can also be dragged into their component
+ this.$('.element').draggable(this.dragOptions);
},
unrender: function() {
View
2 public/javascripts/views/extended.js
@@ -88,7 +88,7 @@ define(['jquery', 'backbone', 'underscore', 'router', 'helpers/screen-utils'],
// callback may be a string reference to a function as opposed to
// a function itself, so resolve it if necessary
if (_.isString(callback)) {
- callback = self[callback];
+ callback = this[callback];
}
return callback;
},
View
7 public/javascripts/views/screen-layout.js
@@ -33,7 +33,7 @@ define(['jquery', 'backbone', 'underscore', './extended', 'collections/component
dropOptions: {
hoverClass: 'component-hover',
- accept: '.component'
+ accept: '.component, .element'
},
render: function() {
@@ -132,6 +132,11 @@ define(['jquery', 'backbone', 'underscore', './extended', 'collections/component
var componentType = $component.data('type');
var existingView = self.getComponentView($componentLocation);
+ if (!$component.is('.component')) {
+ // a component was not dragged; perhaps this is an element?
+ return;
+ }
+
// reset component position, since it was just dragged
$component.css({ top: 0, left: 0 });
View
2 public/stylesheets/main.styl
@@ -418,12 +418,12 @@ header a
.elements li
list-style-type none
- overflow hidden
margin-bottom 15px
.element
float left
max-width 190px
+ z-index 500
.live-element:hover, .live-element.active
background rgba(78, 150, 0, 0.3)
View
6 views/templates/lists/article-element.jade
@@ -2,13 +2,13 @@ script#article-element-list-template(type='text/template')
h2 Article Elements
ul
- li
+ li.clearfix
h3.element(data-type='heading', data-level='3') Heading
a.btn.btn-success(href='#add-element') +
- li
+ li.clearfix
p.element(data-type='paragraph') Paragraph text
a.btn.btn-success(href='#add-element') +
- li
+ li.clearfix
a.element.persona-button(data-type='auth')
span Sign in
a.btn.btn-success(href='#add-element') +
View
8 views/templates/lists/form-element.jade
@@ -1,22 +1,22 @@
script#form-element-list-template(type='text/template')
h2 Form Elements
ul
- li
+ li.clearfix
.element(data-type='input-text', data-name='input-text')
label(for='input-text') Text Input:
input(type='text', name='input-text', disabled='disabled')
a.btn.btn-success(href='#add-element') +
- li
+ li.clearfix
.element(data-type='input-radio', data-name='input-radio')
label(for='input-radio') Radio Input:
input.radio(type='radio', name='input-radio', disabled='disabled')
a.btn.btn-success(href='#add-element') +
- li
+ li.clearfix
.element(data-type='input-checkbox', data-name='input-checkbox')
label(for='input-checkbox') Checkbox Input:
input.checkbox(type='checkbox', name='input-checkbox', disabled='disabled')
a.btn.btn-success(href='#add-element') +
- li
+ li.clearfix
.element(data-type='textarea', data-name='textarea')
label(for='textarea') Textarea:
textarea(rows='8', cols='20', name='textarea', disabled='disabled')
View
4 views/templates/lists/navigation-element.jade
@@ -1,10 +1,10 @@
script#navigation-element-list-template(type='text/template')
h2 Navigation Elements
ul
- li
+ li.clearfix
a.element(href='#', data-type='screen-link', data-screen='#{screenId}') Screen link
a.btn.btn-success(href='#add-element') +
- li
+ li.clearfix
a.element(href='#', data-type='external-link', data-url='http://example.com') External link
a.btn.btn-success(href='#add-element') +

0 comments on commit 3cd6621

Please sign in to comment.