Permalink
Browse files

[WIP] getting closer

Signed-off-by: Shane Bryan <shane.bryan@intel.com>
  • Loading branch information...
1 parent 38c3fbb commit 49c5f7a97f7df9ea8fa4a5a09d881fd3e60310d8 @sbryan sbryan committed May 1, 2012
Showing with 138 additions and 40 deletions.
  1. +2 −3 src/css/builder.css
  2. +82 −30 src/js/main.js
  3. +33 −0 src/js/projects.js
  4. +2 −0 src/js/views/base.js
  5. +13 −2 src/js/views/live.js
  6. +6 −5 src/js/views/project.js
View
@@ -8,10 +8,9 @@
*
*/
.test-thumbnail {
- border: 1px dashed purple;
- position: absolute;
+ position: relative;
top: 0px;
- right: 0px;
+ left: 0px;
display: inline-block;
background-color: white;
}
View
@@ -631,43 +631,95 @@ $(function() {
fsUtils.initFS(fsUtils.fsType, fsUtils.fsSize, fsInitSuccess, fsInitFailed);
}, fsInitFailed);
- $.rib.thumbnail = $('<svg class="test-thumbnail" xmlns="http://www.w3.org/2000/svg"><foreignObject id="svg-container" width="100%" height="100%"><html class="thumbnail-content" xmlns="http://www.w3.org/1999/xhtml"><head></head><body><em>SVG</em></body></html></foreignObject></svg>')
- .width('320px')
- .height('480px')
- .draggable()
- .appendTo('body #projectView .stage');
+ $.rib.thumbnail = $('<svg class="test-thumbnail" xmlns="http://www.w3.org/2000/svg"><style type="text/css" ><![CDATA[ @import url("src/css/jquery.mobile.structure-1.0.css"); @import url("src/css/jquery.mobile-1.0.css"); @import url("src/css/web-ui-fw-theme.css"); @import url("src/css/web-ui-fw-widget.css"); ]]> </style><foreignObject id="svg-container" width="100%" height="100%"><em>SVG</em></foreignObject></svg>');
+ $.rib.tnWrapper = $('<div class="thumbnail-wrapper" />')
+ .append($.rib.thumbnail).appendTo('#projectView .stage');
$.rib.updateThumbnail = function() {
var f = $.rib.thumbnail && $('#svg-container', $.rib.thumbnail),
- c = $(':rib-liveView').liveView('option','contentDocument'),
+ o = $(':rib-liveView').liveView('option'),
+ c = o.contentDocument,
+ i = o.iframe,
+ d = $(c[0].documentElement).clone(), s, w, h, sX, sY, oX, oY,
+ tn = $.rib.tnWrapper,
p = $('.ui-page-active',c[0].body).clone();
- if (f && f.length && c && c.length && p && p.length) {
-var usedefs = false;
-if (usedefs) {
- if (!$('defs',$.rib.thumbnail).length) {
- $.rib.thumbnail.prepend(
- '<defs>\n' +
- '<link href="src/css/jquery.mobile.structure-1.0.css" type="text/css" rel="stylesheet" xmlns="http://www.w3.org/1999/xhtml"/>\n'+
- '<link href="src/css/jquery.mobile-1.0.css" type="text/css" rel="stylesheet" xmlns="http://www.w3.org/1999/xhtml"/>\n'+
- '<link href="src/css/web-ui-fw-theme.css" type="text/css" rel="stylesheet" xmlns="http://www.w3.org/1999/xhtml"/>\n'+
- '<link href="src/css/web-ui-fw-widget.css" type="text/css" rel="stylesheet" xmlns="http://www.w3.org/1999/xhtml"/>\n'+
- '</defs>');
- }
-}
+
+ $('body',d).children(':not(.ui-page-active)').remove(),
+ $('head',d).remove(),
+ s = d[0].outerHTML;
+ s = s.replace(/<(html|body)/ig,'<div');
+ s = s.replace(/(html|body)>/ig,'div>');
+
+ if (f && f.length && d && d.length && s && s.length) {
+ $.rib.thumbnail.width(i.width())
+ $.rib.thumbnail.height(i.height());
f.empty();
-// f.append('<html class="thumbnail-content" xmlns="http://www.w3.org/1999/xhtml"><head></head></html>');
-if (!usedefs) {
- f.append(
- '<style>\n' +
- '@import url("src/css/jquery.mobile.structure-1.0.css");\n'+
- '@import url("src/css/jquery.mobile-1.0.css");\n'+
- '@import url("src/css/web-ui-fw-theme.css");\n'+
- '@import url("src/css/web-ui-fw-widget.css");\n'+
- '</style>');
-}
- f.append(p);
+ f.append(s);
+ w = tn.width(), h = tn.height();
+ sX = w/i.width();
+ sY = h/i.height();
+ oX = (1 - w*sX);
+ oY = (1 - h*sY);
+/*
+ tn.empty().append(
+ $.rib.thumbnail.clone()
+ .css('-webkit-transform','scale('+sX+','+sY+')')
+ .offset({top:oY, left:oX}));
+*/
+
+ $.rib.saveThumbnailToImage(tn.html());
}
};
+ $.rib.saveThumbnailToImage = function(svgString) {
+ var builder, DOMURL, image, dataURL;
+
+ if (!svgString) return;
+
+ // 2. create blob builder
+ builder = new (window.BlobBuilder || window.WebKitBlobBuilder);
+
+ // 3. create URL object
+ DOMURL = window.URL || window.webkitURL || window;
+
+ // 5. append svg data to blob builder
+ builder.append(svgString);
+
+ // 6. capture the dataUrl of the blob as 'image/svg+xml'
+ dataURL = DOMURL.createObjectURL(
+ builder.getBlob('image/svg+xml;charset=utf-8'));
+
+/*
+ // 7. set up an onload handler for the image
+ image.one('load', function(event) {
+ var canvas, context;
+
+ console.log('onload(): drawing image to canvas...');
+ // 1. create canvas
+ canvas = document.createElement('CANVAS');
+ // 2. get canvas context
+ context = canvas.getContext('2d');
+ // 3. draw the image into the canvas
+ context.drawImage(image, 0, 0);
+ // 4. revoke the object URL (why?)
+ //DOMURL.revokeObjectURL(dataURL);
+ // 5. add the canvas to our DOM
+ $('#projectView > .stage').append(canvas);
+ };
+*/
+
+ // 8. save it to the project
+ if ($.rib.pmUtils.getActive())
+ $.rib.pmUtils.setThumbnail($.rib.pmUtils.getActive(),dataURL);
+
+/*
+ // 4. remove the old and create a new IMG element
+ $('.projectBox.ui-state-active .thumbnail')
+ .empty()
+ .append('<img src="',+dataURL+'">');
+ image = $('.projectBox.ui-state-active .thumbnail > img');
+*/
+ };
+
});
View
@@ -458,6 +458,39 @@ $(function () {
};
/**
+ * Get project Thumbnail
+ *
+ * @param {String} project id
+ * @return {String/null} return project thumbnail uri or null if fails
+ */
+ pmUtils.getThumbnail = function (pid) {
+ var pInfo = pmUtils._projectsInfo[pid];
+ if (!pInfo) {
+ console.error("Error: Invalid pid for project");
+ return null;
+ }
+ return pmUtils._projectsInfo[pid].thumbnail;
+ };
+
+ /**
+ * Set project Thumbnail
+ *
+ * @param {String} project id
+ * @param {String} thumbnail URI
+ * @return {Bool} return true if success, false when fails
+ */
+ pmUtils.setThumbnail = function (pid, uri) {
+ var pInfo = pmUtils._projectsInfo[pid];
+ if (!pInfo) {
+ console.error("Error: Invalid pid for project");
+ return false;
+ }
+ pInfo.thumbnail = uri.toString();
+ pmUtils.pInfoDirty = true;
+ return true;
+ };
+
+ /**
* Get project tags
*
* @param {String} project id
View
@@ -153,6 +153,8 @@
widget.designRoot = d;
// Finally, redraw our view since the ADMDesign root has changed
+ event.id = event.id || d.getUid();
+ event.name = event.name || 'designReset';
widget.refresh && widget.refresh(event, widget);
},
});
View
@@ -208,7 +208,10 @@
widget = widget || this;
- if (!widget.element.data('visible')) return;
+ if (!widget.element.data('visible') &&
+ (event && !event.name === 'designReset')) {
+ return;
+ }
iframe = widget.options.iframe;
if (iframe.length) {
@@ -363,6 +366,9 @@
return;
}
+ widget._setPreviewPage(id);
+
+/*
win = widget.options.contentDocument[0].defaultView;
if (win && win.$ && win.$.mobile) {
@@ -388,6 +394,7 @@
.append(page);
}
}
+*/
},
_modelUpdatedHandler: function(event, widget) {
@@ -402,7 +409,11 @@
win = widget.options.contentDocument[0].defaultView;
if (win && win.$ && win.$.mobile) {
- win.$.mobile.changePage("#" + pageId, {transition: "none"});
+ if (win.$.mobile.activePage &&
+ win.$.mobile.activePage.attr('id') !== pageId) {
+ win.$.mobile.changePage("#" + pageId, {transition: "none"});
+ }
+ $.rib && $.rib.updateThumbnail && $.rib.updateThumbnail();
}
},
});
View
@@ -90,16 +90,17 @@
if(!pidArr){
console.error("Error: failed to list all projects.");
}
+
+ // Update the thumbnail
+ $.rib.updateThumbnail && $.rib.updateThumbnail();
+
$.each(pidArr, function(index, value){
// value is an object contains {"pid":XX, "date":XXX}
widget.createProjectBox(value.pid, container, widget);
});
// Mark the active project box
$('#'+$.rib.pmUtils.getActive(), container)
.addClass('ui-state-active');
-
- // Update the thumbnail
-// $.rib.updateThumbnail && $.rib.updateThumbnail();
},
// Private functions
@@ -305,8 +306,8 @@
.appendTo(box);
content = $('<div />').addClass('content flex1 hbox')
.appendTo(box);
- //TODO: imgPath = pmUtils.getThumbnail(pid);
- imgPath = 'src/css/images/emptyProjectThumbnail.png';
+ imgPath = $.rib.pmUtils.getThumbnail(pid);
+ imgPath = imgPath || 'src/css/images/emptyProjectThumbnail.png';
thumbnail= $('<img />').attr('src', imgPath);
$('<div />').addClass('thumbnail flex1')
.append(thumbnail)

0 comments on commit 49c5f7a

Please sign in to comment.