diff --git a/drafty.js b/drafty.js
index db480e82..be141306 100644
--- a/drafty.js
+++ b/drafty.js
@@ -89,7 +89,7 @@ Sample JSON representation of the text above:
LN: { name: 'a', isVoid: false },
MN: { name: 'a', isVoid: false },
HT: { name: 'a', isVoid: false },
- IM: { name: ['a','img'], isVoid: true }
+ IM: { name: 'img', isVoid: true }
};
// Convert base64-encoded string into Blob.
@@ -142,17 +142,15 @@ Sample JSON representation of the text above:
},
props: function(data) {
var url = base64toObjectUrl(data.val, data.mime);
- return [
- {
- download: data.name,
- href: url
- },
- {
- src: url,
- width: data.width,
- height: data.height,
- }
- ];
+ return {
+ src: url,
+ title: data.name,
+ 'data-width': data.width,
+ 'data-height': data.height,
+ 'data-name': data.name,
+ 'data-size': (data.val.length * 0.75) | 0,
+ 'data-mime': data.mime
+ };
},
}
};
diff --git a/index.html b/index.html
index 9dc31291..cbfe6ff0 100644
--- a/index.html
+++ b/index.html
@@ -83,34 +83,34 @@
'data:image/' + photo.type + ';base64,' + photo.data : null;
}
+ // Scale liner dimensions to fit uder certain size
+ function imageScaleDown(width, height, maxWidth, maxHeight) {
+ if (!width || !height || !maxWidth || !maxHeight) {
+ return null;
+ }
+ var scale = Math.min(
+ Math.min(width, maxWidth) / width,
+ Math.min(height, maxHeight) / height
+ );
+
+ return {width: (width * scale) | 0, height: (height * scale) | 0};
+ }
+
// Convert uploaded image into a base64-encoded string.
function imageFileToBase64(file, callback) {
var img = new Image();
img.crossOrigin = 'Anonymous';
img.onload = function() {
- var width, height;
- if (this.height > this.width) {
- height = this.height;
- while(height > MAX_IMAGE_SIZE) {
- height = height >> 1;
- }
- width = (this.width * height / this.height) | 0;
- } else {
- width = this.width;
- while(width > MAX_IMAGE_SIZE) {
- width = width >> 1;
- }
- height = (this.height * width / this.width) | 0;
- }
+ var size = imageScaleDown(this.width, this.height, MAX_IMAGE_SIZE, MAX_IMAGE_SIZE);
var canvas = document.createElement('CANVAS');
- canvas.width = width;
- canvas.height = height;
+ canvas.width = size.width;
+ canvas.height = size.height;
var ctx = canvas.getContext('2d');
ctx.imageSmoothingEnabled = true;
ctx.drawImage(this, 0, 0, this.width, this.height, 0, 0, canvas.width, canvas.height);
var imageBits = canvas.toDataURL("image/jpeg");
canvas = null;
- callback(imageBits, width, height);
+ callback(imageBits, size.width, size.height);
};
img.src = URL.createObjectURL(file);
}
@@ -2360,40 +2360,20 @@
var formatter = function(style, data, values) {
elementKey += 1;
- if (style == "IM") {
- // Handle inline image
- var width = data.width, height = data.height;
- var style = null;
- if (width && height) {
- var scale = 1.0;
- if (data.width > REM_SIZE * 36) {
- scale = REM_SIZE * 36 / data.width;
- }
- if (data.height * scale > REM_SIZE * 24) {
- scale = REM_SIZE * 24 / data.height;
- }
- style = {
- width: Math.round(data.width * scale / REM_SIZE) + "rem",
- height: Math.round(data.height * scale / REM_SIZE) + "rem"
- }
+ var el = Drafty.tagName(style);
+ if (el) {
+ var attr = Drafty.attrValue(style, data) || {};
+ attr.key = elementKey;
+ if (style == "IM") {
+ // Additional processing for images
+ var size = imageScaleDown(data.width, data.height, REM_SIZE * 36, REM_SIZE * 24);
+ attr.className = "inline-image";
+ attr.style = size ? { width: size.width + "px", height: size.height + "px" } : null;
+ attr.onClick = this.handlePreviewImage;
}
- var url = Drafty.getBlobUrl(data);
- return (
- 
- );
+ return React.createElement(el, attr, values);
} else {
- var el = Drafty.tagName(style);
- if (el) {
- var attr = Drafty.attrValue(style, data) || {};
- attr.key = elementKey;
- return React.createElement(el, attr, values);
- } else {
- return values;
- }
+ return values;
}
};
@@ -2984,23 +2964,22 @@
if (!this.props.content) {
return null;
}
-
var instance = this;
- var width = null, height = null;
- console.log(this.props.content.width, this.props.content.height, this.state.width, this.state.height);
- if (this.props.content.width && this.props.content.height) {
- width = Math.max(Math.min(this.state.width, this.props.content.width), 8);
- height = Math.max(Math.min(this.state.height, this.props.content.height), 8);
- var scale = Math.min(width / this.props.content.width, height / this.props.content.height, 1.0);
- width = (this.props.content.width * scale) | 0;
- height = (this.props.content.height * scale) | 0;
+ var size = imageScaleDown(this.props.content.width, this.props.content.height,
+ this.state.width, this.state.hight);
+ if (size) {
+ size.width += "px";
+ size.height += "px";
+ } else {
+ size = (this.props.content.width > this.props.content.height) ?
+ {width: '100%'} : {height: '100%'};
}
var filename = this.props.content.filename;
if (filename.length > 20) {
filename = filename.slice(0, 8) + "..." + filename.slice(-8);
}
return (
-
-
+