Commit 703979e4 authored by Vincent Bechu's avatar Vincent Bechu

erp5_officejs_jquery_app: create bt for jquery based application, add image editor

parent fb0fdae3
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="shortcut icon" href="favicon.ico">
<title>Image Editor</title>
<link href="//netdna.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="jquerymobile.css">
<link rel="stylesheet" href="gadget_erp5.css">
<base href="">
<script data-renderjs-configuration="application_title" type="text/x-renderjs-configuration">Image Editor</script>
<script data-renderjs-configuration="panel_gadget" type="text/x-renderjs-configuration">gadget_officejs_application_panel.html</script>
<script data-renderjs-configuration="action_view" type="text/x-renderjs-configuration">object_view</script>
<script data-renderjs-configuration="default_view_reference" type="text/x-renderjs-configuration">view</script>
<script data-renderjs-configuration="hateoas_url" type="text/x-renderjs-configuration">hateoas/</script>
<script data-renderjs-configuration="frontpage_gadget" type="text/x-renderjs-configuration">worklist</script>
<script src="jquery.js"></script>
<script src="jquerymobile.js"></script>
<script src="rsvp.js"></script>
<script src="renderjs.js"></script>
<script src="gadget_global.js" ></script>
<script src="erp5_launcher.js"></script>
</head>
<body>
<div data-role="page">
<div data-gadget-url="gadget_jio.html"
data-gadget-scope="setting_gadget"
data-gadget-sandbox="public"></div>
<div data-gadget-url="gadget_officejs_image_editor_router.html"
data-gadget-scope="router"
data-gadget-sandbox="public"></div>
<div data-gadget-url="gadget_translation.html"
data-gadget-scope="translation_gadget"
data-gadget-sandbox="public"></div>
<div data-gadget-url="gadget_officejs_header.html"
data-gadget-scope="header"
data-gadget-sandbox="public"></div>
<div data-gadget-url="gadget_officejs_jio.html"
data-gadget-scope="jio_gadget"
data-gadget-sandbox="public"></div>
<div data-gadget-url="gadget_erp5_editor_panel.html"
data-gadget-scope="editor_panel"
data-gadget-sandbox="public"></div>
<div data-gadget-url="gadget_officejs_application_panel.html"
data-gadget-scope="panel"
data-gadget-sandbox="public"></div>
<div role="main" class="ui-content gadget-content"></div>
</div>
</body>
</html>
\ No newline at end of file
/*global window, rJS, jIO, Blob*/
/*jslint nomen: true, maxlen:80, indent:2*/
(function (rJS, RSVP, jIO, Blob) {
"use strict";
rJS(window)
.ready(function (g) {
g.props = {};
})
.ready(function (g) {
return g.getElement()
.push(function (element) {
var textarea = element.querySelector('textarea');
g.props.element = element;
g.props.blob_defer = RSVP.defer();
});
})
.declareAcquiredMethod("submitContent", "triggerSubmit")
.declareMethod('render', function (options) {
this.props.key = options.key || "text_content";
return new RSVP.Queue()
.push(function () {
if (options.value.split('data:')[1] === '') {
return '';
}
return jIO.util.dataURItoBlob(options.value);
})
.push(function (blob) {
if (!blob) {
blob = new Blob([''], {type: 'image/png'});
}
blob.name = options.name;
FILE.open_handler({target: {files: [blob]}});
return {};
});
})
.declareMethod('getContent', function () {
var result = {},
gadget = this;
return new RSVP.Queue()
.push(function () {
return FILE.save({name: gadget.props.key, type: 'BLOB'});
})
.push(function (blob) {
return jIO.util.readBlobAsDataURL(blob);
})
.push(function (datauri) {
return datauri.target.result;
});
});
}(rJS, RSVP, jIO, Blob));
\ No newline at end of file
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, user-scalable=no" />
<title>OfficeJS Router Gadget</title>
<!-- renderjs -->
<script src="rsvp.js" type="text/javascript"></script>
<script src="renderjs.js" type="text/javascript"></script>
<!-- custom script -->
<script src="gadget_officejs_router.js" type="text/javascript"></script>
</head>
<body>
<script data-renderjs-configuration="portal_type" type="text/x-renderjs-configuration">Image</script>
<script data-renderjs-configuration="parent_relative_url" type="text/x-renderjs-configuration">image_module</script>
<script data-renderjs-configuration="document_title" type="text/x-renderjs-configuration">Image</script>
<script data-renderjs-configuration="document_title_plural" type="text/x-renderjs-configuration">Images</script>
<script data-renderjs-configuration="erp5_attachment_synchro" type="text/x-renderjs-configuration">/{+id}/Base_downloadWithCors</script>
<script data-renderjs-configuration="global_setting_gadget_url" type="text/x-renderjs-configuration">../officejs_setting_gadget/</script>
</body>
</html>
\ No newline at end of file
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>OfficeJS Jio Web Page View</title>
<script src="rsvp.js"></script>
<script src="renderjs.js"></script>
<script src="handlebars.js"></script>
<script class="view-web-page-template" type="text/x-handlebars-template">
<form class="view-web-page-form">
<div class="center">
<div class="ui-field-contain">
<label data-i18n="Title:">Title:</label>
<div class="ui-input-text ui-body-inherit ui-corner-all ui-shadow-inset">
<input type="text" name="title" value="{{title}}">
</div>
</div>
<button type="submit" data-i18n="Save" style="display:none;">Save</button>
<div class="ui-field-contain">
<label data-i18n="Reference:">Reference:</label>
<input type="text" name="reference" value="{{reference}}">
</div>
<div class="ui-field-contain">
<label data-i18n="Version:">Version:</label>
<input type="text" name="version" value="{{version}}"></label>
</div>
<div class="ui-field-contain">
<label data-i18n="Language:">Language:</label>
<input type="text" name="language" value="{{language}}">
</div>
<div class="ui-field-contain">
<label data-i18n="Description:">Description:</label>
<textarea name="description">{{description}}</textarea>
</div>
<div class='document-content'></div>
</div>
</div>
</form>
</script>
<script src="gadget_officejs_jio_image_view.js"></script>
</head>
<body>
</body>
</html>
/*globals window, rJS, Handlebars, RSVP, loopEventListener, console, URL*/
/*jslint indent: 2, nomen: true, maxlen: 80*/
(function (window, RSVP, rJS, Handlebars, loopEventListener, URL) {
"use strict";
function saveContent(gadget, submit_event) {
var i,
doc = gadget.options.doc,
now = new Date(),
blob;
doc.parent_relative_url = "image_module";
doc.portal_type = "Image";
doc.modification_date = now.toISOString();
for (i = 0; i < submit_event.target.length; i += 1) {
// XXX Should check input type instead
if (submit_event.target[i].name) {
doc[submit_event.target[i].name] = submit_event.target[i].value;
}
}
return RSVP.Queue()
.push(function () {
return gadget.getDeclaredGadget("my_text_content");
})
.push(function (text_content_gadget) {
return text_content_gadget.getContent();
})
.push(function (dataURI) {
return jIO.util.dataURItoBlob(dataURI);
})
.push(function(blob) {
console.log(gadget.options.jio_key);
return RSVP.all([
gadget.put(gadget.options.jio_key, doc),
gadget.putAttachment(gadget.options.jio_key, "data", blob)
]);
});
}
function maximize(gadget) {
var iframe = gadget.props.element.querySelector('iframe'),
iframe_class_string = iframe.getAttribute('class') || "",
class_name = "ui-content-maximize",
class_index = iframe_class_string.indexOf(class_name);
if (class_index === -1) {
iframe_class_string += ' ' + class_name;
iframe.setAttribute('style', '');
iframe.setAttribute('class', iframe_class_string);
return;
}
iframe_class_string = iframe_class_string.substring(0, class_index)
+ iframe_class_string.substring(class_index + class_name.length);
iframe.setAttribute('style', 'width:100%; border: 0 none; height: 600px');
iframe.setAttribute('class', iframe_class_string);
return;
}
var gadget_klass = rJS(window),
source = gadget_klass.__template_element
.querySelector(".view-web-page-template")
.innerHTML,
template = Handlebars.compile(source);
gadget_klass
.ready(function (g) {
g.props = {};
g.options = null;
return g.getElement()
.push(function (element) {
g.props.element = element;
g.props.deferred = RSVP.defer();
});
})
.declareAcquiredMethod("updateHeader", "updateHeader")
.declareAcquiredMethod("get", "jio_get")
.declareAcquiredMethod("translateHtml", "translateHtml")
.declareAcquiredMethod("put", "jio_put")
.declareAcquiredMethod("putAttachment", "jio_putAttachment")
.declareAcquiredMethod("getAttachment", "jio_getAttachment")
.declareAcquiredMethod("redirect", "redirect")
.allowPublicAcquisition('triggerMaximize', function () {
var gadget = this;
return RSVP.Queue()
.push(function () {
return maximize(gadget);
})
.fail(function (e) {
console.log(e);
});
})
.allowPublicAcquisition('triggerSubmit', function (option) {
if (option[0] === "maximize" || option === "maximize") {
var gadget = this;
return RSVP.Queue()
.push(function () {
return maximize(gadget);
});
}
return this.props.element.querySelector('button').click();
})
.declareMethod('triggerSubmit', function (option) {
if (option[0] === "maximize" || option === "maximize") {
var gadget = this;
return RSVP.Queue()
.push(function () {
return maximize(gadget);
});
}
return this.props.element.querySelector('button').click();
})
.declareMethod("render", function (options) {
var gadget = this;
gadget.options = options;
gadget.options.doc.title = gadget.options.doc.title || "";
return new RSVP.Queue()
.push(function () {
return gadget.translateHtml(template(options.doc));
})
.push(function (html) {
gadget.props.element.innerHTML = html;
return gadget.updateHeader({
title: options.doc.title + " | Image",
save_action: true,
maximize_action: true,
maximized: gadget.options.doc.title !== ""
});
})
.push(function() {
return gadget.getAttachment(gadget.options.jio_key, "data");
})
.push(
function (blob_result) {
gadget.props.blob = blob_result;
return gadget.props.deferred.resolve();
}, function (error) {
if (error.status_code === 404) {
gadget.props.blob = new Blob([''], {type: 'image/png'});
return gadget.props.deferred.resolve();
}
throw new Error(error);
});
})
/////////////////////////////////////////
// Render text content gadget
/////////////////////////////////////////
.declareService(function () {
var gadget = this,
image_content_gadget;
return new RSVP.Queue()
.push(function () {
return gadget.props.deferred.promise;
})
.push(function () {
return gadget.declareGadget(
"../../officejs_image_editor_gadget/development/",
{
scope: "my_text_content",
sandbox: "iframe",
element: gadget.props.element.querySelector(".document-content")
}
);
})
.push(function (image_gadget) {
image_content_gadget = image_gadget;
var iframe = gadget.props.element.querySelector('iframe');
iframe.setAttribute(
'style',
'width:100%; border: 0 none; height: 600px'
);
return jIO.util.readBlobAsDataURL(gadget.props.blob);
})
.push(function (f) {
return image_content_gadget.render({
"key": 'text_content',
"value": f.target.result,
"name": gadget.options.jio_key
});
})
.push(function () {
if (gadget.options.doc.title !== "") {
return gadget.triggerSubmit("maximize");
}
})
.push(undefined, function (error) {
var display_error_element;
if (error.message.indexOf("Timed out after ") === 0) {
display_error_element =
gadget.props.element.querySelector(
"form div.center"
);
display_error_element.innerHTML =
'<br/><p style="color: red"></p><br/><br/>' +
display_error_element.innerHTML;
display_error_element.querySelector('p').textContent =
"TIMEOUT: The editor gadget is taking too long to load but is" +
" currently being cached, please wait for the page to load" +
" (check your browser loading icon) and then refresh.";
} else {
throw error;
}
});
})
/////////////////////////////////////////
// Form submit
/////////////////////////////////////////
.declareService(function () {
var gadget = this;
return new RSVP.Queue()
.push(function () {
return gadget.props.deferred.promise;
})
.push(function () {
return loopEventListener(
gadget.props.element.querySelector('form'),
'submit',
true,
function (event) {
return saveContent(gadget, event);
}
);
});
});
}(window, RSVP, rJS, Handlebars, loopEventListener, URL));
\ No newline at end of file
<registered_skin_selection>
<skin_folder_selection>
<skin_folder>erp5_officejs_image_editor</skin_folder>
<skin_selection>RJSVersioning</skin_selection>
</skin_folder_selection>
</registered_skin_selection>
\ No newline at end of file
<?xml version="1.0"?>
<ZopeData>
<record id="1" aka="AAAAAAAAAAE=">
<pickle>
<global name="Folder" module="OFS.Folder"/>
</pickle>
<pickle>
<dictionary>
<item>
<key> <string>_local_properties</string> </key>
<value>
<tuple/>
</value>
</item>
<item>
<key> <string>_objects</string> </key>
<value>
<tuple/>
</value>
</item>
<item>
<key> <string>id</string> </key>
<value> <string>erp5_officejs_image_editor</string> </value>
</item>
<item>
<key> <string>title</string> </key>
<value> <string></string> </value>
</item>
</dictionary>
</pickle>
</record>
</ZopeData>
<?xml version="1.0"?>
<ZopeData>
<record id="1" aka="AAAAAAAAAAE=">
<pickle>
<global name="Folder" module="OFS.Folder"/>
</pickle>
<pickle>
<dictionary>
<item>
<key> <string>_objects</string> </key>
<value>
<tuple/>
</value>
</item>
<item>
<key> <string>id</string> </key>
<value> <string>miniPaint</string> </value>
</item>
<item>
<key> <string>title</string> </key>
<value> <string></string> </value>
</item>
</dictionary>
</pickle>
</record>
</ZopeData>
<?xml version="1.0"?>
<ZopeData>
<record id="1" aka="AAAAAAAAAAE=">
<pickle>
<global name="Folder" module="OFS.Folder"/>
</pickle>
<pickle>
<dictionary>
<item>
<key> <string>_objects</string> </key>
<value>
<tuple/>
</value>
</item>
<item>
<key> <string>id</string> </key>
<value> <string>img</string> </value>
</item>
<item>
<key> <string>title</string> </key>
<value> <string></string> </value>
</item>
</dictionary>
</pickle>
</record>
</ZopeData>
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment