Permalink
Browse files

Merge branch 'master' of github.com:mozilla/napkin

  • Loading branch information...
2 parents 3b0b0d7 + 74b919c commit 107c95ccc39201057d6c99d78123e3339bfa1af1 Jen Fong-Adwent committed Sep 10, 2012
Showing with 851 additions and 252 deletions.
  1. +5 −2 export/base-app/public/stylesheets/styles.styl
  2. +25 −6 export/index.js
  3. BIN public/images/export-to-code.png
  4. BIN public/images/interaction.png
  5. BIN public/images/layout-builder.png
  6. BIN public/images/responsiveness.png
  7. BIN public/images/summary.png
  8. +0 −28 public/javascripts/scripts/example.js
  9. +71 −49 public/javascripts/views/component.js
  10. +9 −0 public/javascripts/views/element-list.js
  11. +1 −1 public/javascripts/views/extended.js
  12. +6 −1 public/javascripts/views/screen-layout.js
  13. +447 −0 public/stylesheets/bootstrap-responsive-project.css
  14. +9 −0 public/stylesheets/bootstrap-responsive-project.min.css
  15. +3 −0 public/stylesheets/bootstrap-responsive.css
  16. +1 −1 public/stylesheets/bootstrap-responsive.min.css
  17. +6 −0 public/stylesheets/bootstrap-stripped.css
  18. +1 −1 public/stylesheets/bootstrap-stripped.min.css
  19. +120 −3 public/stylesheets/main.styl
  20. +13 −10 todo.txt
  21. +87 −112 views/example.jade
  22. +9 −12 views/helpers/share-login-form.jade
  23. +3 −0 views/index.jade
  24. +8 −4 views/layout.jade
  25. +5 −1 views/prototype.jade
  26. +1 −1 views/templates/elements/auth.jade
  27. +2 −2 views/templates/elements/input-checkbox.jade
  28. +2 −2 views/templates/elements/input-radio.jade
  29. +2 −2 views/templates/elements/input-text.jade
  30. +2 −2 views/templates/elements/textarea.jade
  31. +3 −3 views/templates/lists/article-element.jade
  32. +4 −4 views/templates/lists/form-element.jade
  33. +2 −2 views/templates/lists/navigation-element.jade
  34. +4 −3 views/templates/wrappers/form.jade
@@ -1,5 +1,8 @@
-/* CSS-only Persona button - credits to Sawyer Hollenshead */
-/* http://dev.sawyerhollenshead.com/mozilla/buttons/buttons.html */
+input, textarea
+ display block
+
+// CSS-only Persona button - credits to Sawyer Hollenshead
+// http://dev.sawyerhollenshead.com/mozilla/buttons/buttons.html
.persona-button
color #fff
display inline-block
View
@@ -317,15 +317,34 @@ function renderComponent(component, req, db, callback) {
* Returns: the rendered element's Jade
*/
function renderElementTemplate(template, element, component, screensById) {
+ var newlineIndex = template.indexOf('\n');
+ var scriptTag = template.substring(0, newlineIndex);
+
+ // get rid of first line, as this contains a script tag
+ template = template.substring(newlineIndex + 1);
var startMatch = /(\s*)if sharing\n/.exec(template);
- var startIndex = startMatch.index + startMatch[0].length;
- var whitespace = startMatch[1];
- // same amount of whitespace precedes 'else'
- var endMatch = new RegExp(whitespace + 'else').exec(template);
+ if (startMatch !== null) {
+ var startIndex = startMatch.index + startMatch[0].length;
+ var whitespace = startMatch[1];
+
+ // same amount of whitespace precedes 'else'
+ var endMatch = new RegExp('^' + whitespace + 'else', 'm').exec(template);
+
+ // only get text in the `if sharing` clause
+ template = template.substring(startIndex, endMatch.index);
+ }
- // only get text in the `if sharing` clause
- template = template.substring(startIndex, endMatch.index);
+ // strip out trailing whitespace for dedent to work properly
+ template = template.replace(/\s+$/, '');
+
+ // if the template requires a wrapping tag, add it in
+ var tagNameMatch = /data-tag='([^']+)'/.exec(scriptTag);
+ if (tagNameMatch !== null) {
+ var tag = tagNameMatch[1];
+ template = indent(dedent(template), ' ');
+ template = tag + '\n' + template;
+ }
if (component.type === 'form') {
// generate an id for this element
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
@@ -18,34 +18,6 @@ require(['jquery', 'lib/bootstrap.min', 'https://browserid.org/include.js'], fun
}
});
});
-
- // add faded overlay on top of sidebar and main content area
- $('<div/>').css({
- position: 'absolute',
- top: 70,
- left: 0,
- // outerWidth/outerHeight = width/height with padding/border
- width: $sidebar.outerWidth(),
- height: $sidebar.outerHeight() - 70,
- backgroundColor: 'rgba(0, 0, 0, 0.4)'
- }).appendTo('body');
-
- $('<div/>').css({
- position: 'absolute',
- top: 0,
- left: $sidebar.outerWidth(),
- // outerWidth/outerHeight = width/height with padding/border
- width: $body.outerWidth() - $sidebar.outerWidth(),
- height: $sidebar.outerHeight(),
- backgroundColor: 'rgba(0, 0, 0, 0.4)'
- }).appendTo('body');
-
- $loginForm.children('a').popover({
- title: 'Ready to prototype?',
- content: 'Sign in with Persona to get started.',
- trigger: 'manual',
- placement: 'bottom'
- }).popover('show');
});
});
@@ -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
@@ -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() {
@@ -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;
},
@@ -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 });
Oops, something went wrong.

0 comments on commit 107c95c

Please sign in to comment.