Permalink
Browse files

html preview remote control feature added

  • Loading branch information...
1 parent ecb1fe9 commit 7166349f7a61637a8ede8de5de825d73872dbc50 @nkashyap committed Nov 8, 2013
View
@@ -5,7 +5,7 @@
* Website: http://nkashyap.github.io/console.io/
* Author: Nisheeth Kashyap
* Email: nisheeth.k.kashyap@gmail.com
- * Date: 2013-10-25
+ * Date: 2013-11-08
*/
code {
View
Oops, something went wrong.
Oops, something went wrong.
Oops, something went wrong.
@@ -1,3 +1,6 @@
<?xml version="1.0" encoding="utf-8"?>
<jslint>
+ <file name="src/app/view/device/html.js">
+ <issue line="98" char="48" reason="Script URL." evidence=" this.previewFrame.src = &quot;javascript:false;&quot;;" severity="W" />
+ </file>
</jslint>
View
@@ -5,7 +5,7 @@
* Website: http://nkashyap.github.io/console.io/
* Author: Nisheeth Kashyap
* Email: nisheeth.k.kashyap@gmail.com
- * Date: 2013-10-25
+ * Date: 2013-11-08
*/
var ConsoleIO = ("undefined" === typeof module ? {} : module.exports);
@@ -28,7 +28,43 @@ ConsoleIO.version = "0.2.2";
var util = exports.util = {},
domReady = false,
- pendingCallback = [];
+ pendingCallback = [],
+ HTMLTagCSSProperties = {};
+
+ function addDefaultCSS(tag){
+ if(tag && !HTMLTagCSSProperties[tag]){
+ var win = document.defaultView || global,
+ element = document.createElement(tag),
+ properties = {};
+
+ document.body.appendChild(element);
+
+ if (win.getComputedStyle) {
+ /* Modern browsers */
+ var styles = win.getComputedStyle(element, '');
+
+ util.forEach(util.toArray(styles), function (style) {
+ properties[style] = styles.getPropertyValue(style);
+ });
+
+ } else if (element.currentStyle) {
+ /* IE */
+ util.forEachProperty(element.currentStyle, function (value, style) {
+ properties[style] = value;
+ });
+
+ } else {
+ /* Ancient browser..*/
+ util.forEach(util.toArray(element.style), function (style) {
+ properties[style] = element.style[style];
+ });
+ }
+
+ HTMLTagCSSProperties[tag] = properties;
+
+ document.body.removeChild(element);
+ }
+ }
util.getScripts = function getScripts() {
return util.toArray(document.scripts || document.getElementsByName('script'));
@@ -349,28 +385,43 @@ ConsoleIO.version = "0.2.2";
});
};
+ util.isCSSPropertySame = function isCSSPropertySame(tag, property, value){
+ return (HTMLTagCSSProperties[tag][property] === value);
+ };
+
util.getAppliedStyles = function getAppliedStyles(element) {
var win = document.defaultView || global,
- styleNode = [];
+ styleNode = [],
+ tag = element.tagName;
+
+ addDefaultCSS(tag);
if (win.getComputedStyle) {
/* Modern browsers */
var styles = win.getComputedStyle(element, '');
util.forEach(util.toArray(styles), function (style) {
- styleNode.push(style + ':' + styles.getPropertyValue(style));
+ var value = styles.getPropertyValue(style);
+ if(!util.isCSSPropertySame(tag, style, value)){
+ styleNode.push(style + ':' + value);
+ }
});
} else if (element.currentStyle) {
/* IE */
util.forEachProperty(element.currentStyle, function (value, style) {
- styleNode.push(style + ':' + value);
+ if(!util.isCSSPropertySame(tag, style, value)){
+ styleNode.push(style + ':' + value);
+ }
});
} else {
/* Ancient browser..*/
util.forEach(util.toArray(element.style), function (style) {
- styleNode.push(style + ':' + element.style[style]);
+ var value = element.style[style];
+ if(!util.isCSSPropertySame(tag, style, value)){
+ styleNode.push(style + ':' + value);
+ }
});
}
@@ -542,10 +593,11 @@ ConsoleIO.version = "0.2.2";
}
};
- util.async = function async(fn, scope) {
+ util.async = function async(fn, scope, interval) {
+ interval = typeof scope === 'number' ? scope : interval;
return setTimeout(function () {
fn.call(scope);
- }, 4);
+ }, interval || 4);
};
util.extend = function extend(target, source) {
@@ -2438,26 +2490,51 @@ ConsoleIO.version = "0.2.2";
}(location.href)), 100);
}
- function onHTMLContent() {
+ function onHTMLSource() {
exports.web.hide();
- dataPacket('content', {
+ dataPacket('htmlDocument', {
content: document.documentElement.innerHTML
});
exports.web.show();
}
- function onPreview() {
+ function onHTMLPreview() {
exports.web.hide();
- exports.transport.emit('previewContent', {
- content: '<html><head><style type="text/css">' +
- getStyleRule() + '</style></head>' +
- getStyledElement().outerHTML + '</html>'
+ exports.transport.emit('htmlContent', {
+ style: '<style type="text/css">' + getStyleRule() + '</style>',
+ body: getStyledElement().outerHTML
});
exports.web.show();
}
+ function onRemoteEvent(data) {
+ var element = document.querySelector(data.selector),
+ opt = {
+ 'view': global,
+ 'bubbles': true,
+ 'cancelable': true
+ },
+ moveEvent = new global[data.event]('mousemove', opt),
+ overEvent = new global[data.event]('mouseover', opt),
+ raisedEvent = new global[data.event](data.type, opt);
+
+ if (element) {
+ if (element.innerText.indexOf('<') === 0) {
+ element.dispatchEvent(moveEvent);
+ element.dispatchEvent(overEvent);
+ element.dispatchEvent(raisedEvent);
+ } else {
+ element.parentNode.dispatchEvent(moveEvent);
+ element.parentNode.dispatchEvent(overEvent);
+ element.parentNode.dispatchEvent(raisedEvent);
+ }
+
+ exports.util.async(onHTMLPreview, 1000);
+ }
+ }
+
function onCaptureScreen() {
addBindSupport();
@@ -2560,12 +2637,18 @@ ConsoleIO.version = "0.2.2";
return data;
}
+ function isCanvasSupported() {
+ var canvas = document.createElement('canvas');
+ return !!(canvas.getContext && canvas.getContext('2d'));
+ }
+
client.getMore = function getMore() {
var data = [
{
supports: {
WebWorker: !!global.Worker,
WebSocket: !!global.WebSocket,
+ Canvas: isCanvasSupported(),
Storage: !!global.Storage,
LocalStorage: !!global.localStorage,
SessionStorage: !!global.sessionStorage,
@@ -2679,9 +2762,10 @@ ConsoleIO.version = "0.2.2";
exports.transport.on('device:disconnect', onClientDisconnect);
exports.transport.on('device:command', onCommand);
exports.transport.on('device:fileList', onFileList);
- exports.transport.on('device:htmlContent', onHTMLContent);
+ exports.transport.on('device:htmlSource', onHTMLSource);
+ exports.transport.on('device:htmlPreview', onHTMLPreview);
+ exports.transport.on('device:remoteEvent', onRemoteEvent);
exports.transport.on('device:fileSource', onFileSource);
- exports.transport.on('device:previewHTML', onPreview);
exports.transport.on('device:captureScreen', onCaptureScreen);
exports.transport.on('device:reload', onReload);
exports.transport.on('device:name', onNameChanged);
Oops, something went wrong.
Oops, something went wrong.
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.
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
@@ -252,12 +252,16 @@ function Manager() {
setUp: registerDevice,
register: registerDevice,
console: defineDeviceCommandRouteHandler('command', 'console'),
+
files: defineDeviceCommandRouteHandler('command', 'files'),
- previewContent: defineDeviceCommandRouteHandler('command', 'previewContent'),
+ source: defineDeviceCommandRouteHandler('processSource', 'source'),
+
+ htmlDocument: defineDeviceCommandRouteHandler('processSource', 'htmlDocument'),
+ htmlContent: defineDeviceCommandRouteHandler('command', 'htmlContent'),
+
screenShot: defineDeviceCommandRouteHandler('command', 'screenShot'),
+
profile: defineDeviceCommandRouteHandler('command', 'profile'),
- source: defineDeviceCommandRouteHandler('processSource', 'source'),
- content: defineDeviceCommandRouteHandler('processSource', 'content'),
status: defineDeviceRouteHandler('status'),
webStatus: defineDeviceRouteHandler('webStatus'),
serialNumber: defineDeviceRouteHandler('setSerialNumber')
@@ -274,13 +278,19 @@ function Manager() {
webConfig: defineUserCommandRouteEmitHandler('web:config', true),
webControl: defineDeviceMethodRouteHandler('control'),
+ reloadFiles: defineUserCommandRouteEmitHandler('fileList'),
fileSource: defineUserCommandRouteHandler('requestSource', 'fileSource'),
- reloadHTML: defineUserCommandRouteHandler('requestSource', 'htmlContent'),
+
+ htmlSource: defineUserCommandRouteHandler('requestSource', 'htmlSource'),
+ htmlPreview: defineUserCommandRouteEmitHandler('htmlPreview'),
+
+ remoteEvent: defineUserCommandRouteEmitHandler('remoteEvent', true),
+
+ captureScreen: defineUserCommandRouteEmitHandler('captureScreen'),
+
profiler: defineUserCommandRouteEmitHandler('profiler', true),
reloadDevice: defineUserCommandRouteEmitHandler('reload'),
- reloadFiles: defineUserCommandRouteEmitHandler('fileList'),
- previewHTML: defineUserCommandRouteEmitHandler('previewHTML'),
- captureScreen: defineUserCommandRouteEmitHandler('captureScreen'),
+
deviceStatus: defineUserCommandRouteEmitHandler('status'),
execute: defineUserCommandRouteEmitHandler('command', 'code'),
View
@@ -93,7 +93,7 @@ ConsoleIO.Constant.ICONS = {
//"OREGAN MEDIA": '',
PLAYSTATION: 'playstation.png',
- JAVASCRIPT: 'javascript.png',
+ JAVASCRIPT: 'source.png',
STYLESHEET: 'stylesheet.png',
WEB: 'web.png',
FILE: '',
@@ -19,7 +19,7 @@ ConsoleIO.App.Device = function DeviceController(parent, model) {
this.console = new ConsoleIO.App.Device.Console(this, this.model);
this.profile = new ConsoleIO.App.Device.Profile(this, this.model);
this.source = new ConsoleIO.App.Device.Source(this, this.model);
- this.preview = new ConsoleIO.App.Device.Preview(this, this.model);
+ this.html = new ConsoleIO.App.Device.HTML(this, this.model);
this.status = new ConsoleIO.App.Device.Status(this, this.model);
this.view = new ConsoleIO.View.Device(this, this.model);
@@ -30,7 +30,7 @@ ConsoleIO.App.Device.prototype.render = function render(target) {
this.view.render(target);
this.status.render(this.view.tabs);
this.source.render(this.view.tabs);
- this.preview.render(this.view.tabs);
+ this.html.render(this.view.tabs);
this.profile.render(this.view.tabs);
this.console.render(this.view.tabs);
@@ -52,7 +52,7 @@ ConsoleIO.App.Device.prototype.destroy = function destroy() {
this.console = this.console.destroy();
this.profile = this.profile.destroy();
this.source = this.source.destroy();
- this.preview = this.preview.destroy();
+ this.html = this.html.destroy();
this.status = this.status.destroy();
this.view = this.view.destroy();
};
@@ -66,7 +66,7 @@ ConsoleIO.App.Device.prototype.activate = function activate(state) {
if (!state) {
this.status.activate(state);
this.source.activate(state);
- this.preview.activate(state);
+ this.html.activate(state);
this.profile.activate(state);
this.console.activate(state);
} else if (this.activeTab) {
@@ -77,7 +77,7 @@ ConsoleIO.App.Device.prototype.activate = function activate(state) {
ConsoleIO.App.Device.prototype.setItemState = function setItemState(id, state) {
this.source.setItemState(id, state);
- this.preview.setItemState(id, state);
+ this.html.setItemState(id, state);
};
Oops, something went wrong.

0 comments on commit 7166349

Please sign in to comment.