Skip to content

Instantly share code, notes, and snippets.

@ohcibi
Last active March 24, 2016 16:31
Show Gist options
  • Save ohcibi/131ec7cb7cb1e7403730 to your computer and use it in GitHub Desktop.
Save ohcibi/131ec7cb7cb1e7403730 to your computer and use it in GitHub Desktop.
New Twiddle
import Ember from 'ember';
export default Ember.Component.extend({
attributeBindings: ["draggable"],
classNames: ["a-handle"],
draggable: true,
setupDragImg: Ember.on("didInsertElement", function() {
this._dragImg = document.createElement("img");
this._dragImg.src = "data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==";
document.body.appendChild(this._dragImg);
}),
removeDragImg: Ember.on("willDestroyElement", function() {
document.body.removeChild(this._dragImg);
}),
mouseDown(e) {
e.preventDefault();
this.set("dragging", true);
//e.dataTransfer.setDragImage(this._dragImg, 0, 0);
Ember.$(document).on("mousemove.a-handle", this.mouseMovee.bind(this));
Ember.$(document).one("mouseup", this.mouseUpp.bind(this));
this.set("origX", e.originalEvent.clientX);
this.set("origWidth", parseInt(this.$().closest("th,td").css("width").replace(/px$/, ""), 10));
},
mouseMovee(e) {
if (this.get("dragging")) {
const newX = e.originalEvent.pageX;
console.log(newX);
if (newX > 0) {
this.sendAction("resize",
this.get("origWidth") - this.get("origX") + newX);
}
}
},
mouseUpp(e) {
this.set("dragging", false);
this.set("origX", false);
Ember.$(document).off("mousemove.a-handle");
}
});
import Ember from 'ember';
const {
computed
} = Ember;
export default Ember.Controller.extend({
actions: {
resize(column, width) {
if (width > 10) {
const fullWidth = this.get("fullWidth");
if (column === "a") {
let newBWidth = fullWidth - this.get("cWidthPx") - width;
if (newBWidth > 10) {
console.log("set a width");
this.set("aWidthPx", width);
this.set("bWidthPx", newBWidth);
}
} else {
console.log("b column");
let newCWidth = fullWidth - this.get("aWidthPx") - width;
if (newCWidth > 10) {
this.set("bWidthPx", width);
this.set("cWidthPx", newCWidth);
}
}
}
}
},
aWidthPx: 150,
aWidth: computed("aWidthPx", function() {
return `width: ${this.get("aWidthPx")}px`;
}),
bWidthPx: 150,
bWidth: computed("bWidthPx", function() {
return `width: ${this.get("bWidthPx")}px`;
}),
cWidthPx: 150,
cWidth: computed("cWidthPx", function() {
return `width: ${this.get("cWidthPx")}px`;
}),
fullWidth: 450,
fullWidthStyle: computed("fullWidth", function() {
return `width: ${this.get("fullWidth")}px`;
}),
appName: 'Ember Twiddle'
});
<h1>Welcome to {{appName}}</h1>
<br>
<br>
<table style={{fullWidthStyle}}>
<tr>
<th style={{aWidth}}>a really long title{{a-handle resize=(action "resize" "a")}}</th>
<th style={{bWidth}}>b{{a-handle tagName="i" resize=(action "resize" "b")}}</th>
<th style={{cWidth}}>c</th>
</tr>
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
</tr>
</table>
{{outlet}}
<br>
<br>
* {
box-sizing: border-box;
}
[draggable] {
-khtml-user-drag: element;
-webkit-user-drag: element;
}
body {
margin: 12px 16px;
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-size: 12pt;
}
.a-handle {
position: absolute;
right: 0;
top: 0;
display:block;
width: 5px;
height: 100%;
background: transparent;
float: right;
cursor: ew-resize;
visibility: invisible;
}
table {
border-collapse: collapse;
table-layout: fixed;
}
table, td, th, tr {
padding: 0;
margin: 0;
}
td, th {
position: relative;
border: 1px solid black;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis
}
{
"version": "0.6.5",
"EmberENV": {
"FEATURES": {}
},
"options": {
"enable-testing": false
},
"dependencies": {
"jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.js",
"ember": "https://cdnjs.cloudflare.com/ajax/libs/ember.js/2.4.3/ember.debug.js",
"ember-data": "https://cdnjs.cloudflare.com/ajax/libs/ember-data.js/2.4.0/ember-data.js",
"ember-template-compiler": "https://cdnjs.cloudflare.com/ajax/libs/ember.js/2.4.3/ember-template-compiler.js"
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment