Skip to content

Commit

Permalink
Browse files Browse the repository at this point in the history
Add snap to grid and arrow key moving
  • Loading branch information
maccman committed Mar 26, 2010
1 parent 600eac1 commit 959175d
Show file tree
Hide file tree
Showing 3 changed files with 84 additions and 11 deletions.
12 changes: 12 additions & 0 deletions README.markdown
Expand Up @@ -4,6 +4,18 @@

Requires WebKit (i.e. Safari/Chrome).

[Live demo](http://eribium.org/ymockup)

##Features

* Saves your mockup locally
* Customisable for any HTML/CSS
* Edit elements in place
* Drag and drop
* Snap to grid dragging
* z-index control
* Move elements with the arrow keys (hold ctrl)

##Usage

First, clone the repository and open index.html in your browser.
Expand Down
7 changes: 3 additions & 4 deletions TODO
@@ -1,4 +1,3 @@
* Keyboard shortcuts
* Listen to the arrow keys - move elements
* Fix resizing issue
* Multiple sessions - select on startup
* Multiple views - dropdown select
* Snap resizing
* Undo/Redo
76 changes: 69 additions & 7 deletions scripts/ymockup.js
Expand Up @@ -16,11 +16,19 @@ Type.extend({
});

var Element = SuperModel.setup("Element");
Element.attributes = ["typeID", "html"];
Element.attributes = ["typeID", "html", "setup", "ref"];

Element.extend({
append: function(){
this.each(function(el){ el.append(); });
},

topZIndex: function(){
var result = 0;
this.each(function(el){
result += el.zindex;
});
return result;
}
});

Expand All @@ -35,29 +43,36 @@ Element.include({
var html = this.html;
if ( !html ) html = this.type().html;
this.ref = $(html);
this.ref.addClass("ymockupType");

if ( !this.ref.css("left") ) {
if ( !this.setup ) {
this.setup = true;

this.ref.addClass("ymockupType");

this.ref.css({
position: "absolute",
left: "20%",
top: "20%"
});

this.ref.css("z-index", this._class.topZIndex() + 1);
}

// Cancel null to make input draggable
this.ref.draggable({cancel:null});
this.ref.draggable({cancel:null, scroll:true, snap:"*", snapTolerance:5});
this.ref.bind("dragstop", $.proxy(function(){ this.updateOffset(); }, this));
// No resize event :(
this.ref.bind("mouseup", $.proxy(function(){ this.updateSize(); }, this));
this.ref.bind("focus", $.proxy(function(){ this._class.selected = this; }, this));
this.ref.bind("click", $.proxy(function(){ this._class.selected = this; }, this));

this.save();
$("body").append(this.ref);
},

remove: function(){
this.ref.remove();
if (this.ref)
this.ref.remove();
},

updateOffset: function(){
Expand All @@ -70,9 +85,30 @@ Element.include({
updateSize: function(){
this.width = this.ref.width();
this.height = this.ref.height();
this.save();
},

relativeMove: function(x, y) {
this.left += (x || 0);
this.top += (y || 0);
this.ref.css({
left: this.left,
top: this.top
});
this.save();
}
});

// Element#ref is a html element, which can't be serialized.
Element.serializeRecords = function(){
var result = {};
for(var key in this.records) {
result[key] = this.records[key].attributes();
delete result[key].ref;
}
return result;
};

Element.selectedUpdate = jQuery.noop;

Element.getters({
Expand All @@ -86,7 +122,7 @@ Element.setters({
this._selected = value;
this.selectedUpdate(value);
}
})
});

Element.fn.getters({
html: function(){
Expand All @@ -102,7 +138,7 @@ Element.fn.getters({
var zi = this.ref && this.ref.css("z-index");
return(parseInt(zi) || 0);
}
})
});

Element.fn.setters({
typeName: function(name){
Expand Down Expand Up @@ -166,6 +202,32 @@ jQuery(function($){
};
Element.selected = null;

$("body").keydown(function(e){
if ( !Element.selected ) return;
if ( !e.ctrlKey ) return;
var keyCode = e.keyCode || e.which,
arrow = {left: 37, up: 38, right: 39, down: 40 };

switch (keyCode) {
case arrow.left:
Element.selected.relativeMove(-1, 0);
return false;
break;
case arrow.up:
Element.selected.relativeMove(0, -1);
return false;
break;
case arrow.right:
Element.selected.relativeMove(1, 0);
return false;
break;
case arrow.down:
Element.selected.relativeMove(0, 1);
return false;
break;
}
});

$.get("types.html", function(data){
$("#ymockupTypes").html(data);

Expand Down

0 comments on commit 959175d

Please sign in to comment.