Commit 11c8c6ff authored by Ludovic Kiefer's avatar Ludovic Kiefer Committed by Romain Courteaud

erp5_run_my_doc: manage illustration and screenshot slide types

parent 8dcf1a14
...@@ -29,15 +29,28 @@ div[data-gadget-url$="slideeditor.gadget.html"] > .slide_list > section.drag { ...@@ -29,15 +29,28 @@ div[data-gadget-url$="slideeditor.gadget.html"] > .slide_list > section.drag {
div[data-gadget-url$="slideeditor.gadget.html"] > .slide_list > section.over { div[data-gadget-url$="slideeditor.gadget.html"] > .slide_list > section.over {
border-style: dashed; border-style: dashed;
} }
div[data-gadget-url$="slideeditor.gadget.html"] > .slide_list > section > img {
width: 8em;
height: 8em;
object-fit: cover;
position: relative;
top: -2em;
z-index: 1;
border-radius: 0.325em;
}
div[data-gadget-url$="slideeditor.gadget.html"] > .slide_list > section button { div[data-gadget-url$="slideeditor.gadget.html"] > .slide_list > section button {
padding: 3pt; padding: 3pt;
border: 1px solid rgba(0, 0, 0, 0.14); border: 1px solid rgba(0, 0, 0, 0.14);
border-radius: 0.325em; border-radius: 0.325em;
background-color: #FFFFFF; background-color: #FFFFFF;
width: 2em; width: 2em;
heigth: 2em;
min-height: 2em;
overflow: hidden; overflow: hidden;
text-indent: -9999px; text-indent: -9999px;
white-space: nowrap; white-space: nowrap;
position: relative;
z-index: 2;
} }
div[data-gadget-url$="slideeditor.gadget.html"] > .slide_list > section button::before { div[data-gadget-url$="slideeditor.gadget.html"] > .slide_list > section button::before {
float: left; float: left;
......
...@@ -21,6 +21,8 @@ ...@@ -21,6 +21,8 @@
data-i18n=Illustration data-i18n=Illustration
data-i18n=Code data-i18n=Code
data-i18n=Master data-i18n=Master
data-i18n=Image URL
data-i18n=Image Caption
--> -->
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
......
...@@ -26,7 +26,9 @@ ...@@ -26,7 +26,9 @@
'Screenshot', 'Screenshot',
'Illustration', 'Illustration',
'Code', 'Code',
'Master' 'Master',
'Image URL',
'Image Caption'
]; ];
/////////////////////////////////////////////////// ///////////////////////////////////////////////////
...@@ -66,11 +68,14 @@ ...@@ -66,11 +68,14 @@
function getSlideDictFromSlideElement(slide) { function getSlideDictFromSlideElement(slide) {
var h1, var h1,
details, details,
img,
result = { result = {
type: '', type: '',
title_html: '', title_html: '',
comment_html: '', comment_html: '',
slide_html: '' slide_html: '',
image_url: '',
image_caption: ''
}; };
// Clone the slide, // Clone the slide,
...@@ -103,9 +108,17 @@ ...@@ -103,9 +108,17 @@
slide.removeChild(details); slide.removeChild(details);
} }
// Get the screenshot or illustration
if (result.type === 'illustration' || result.type === 'screenshot') {
img = slide.querySelector(':scope > img');
if (img !== null) {
result.image_url = img.getAttribute("src");
result.image_caption = img.getAttribute("title");
slide.removeChild(img);
}
}
// Finally, extract the slide // Finally, extract the slide
result.slide_html = slide.innerHTML; result.slide_html = slide.innerHTML;
return result; return result;
} }
...@@ -124,7 +137,8 @@ ...@@ -124,7 +137,8 @@
slide_dict = getSlideDictFromSlideElement(slide), slide_dict = getSlideDictFromSlideElement(slide),
i, i,
class_string, class_string,
key; key,
img = '';
// Hack: remove keys sent to erp5 // Hack: remove keys sent to erp5
delete value_dict['default_type:int']; delete value_dict['default_type:int'];
...@@ -142,7 +156,19 @@ ...@@ -142,7 +156,19 @@
class_string += ' ' + slide.classList[i]; class_string += ' ' + slide.classList[i];
} }
slide.className = class_string; slide.className = class_string;
if (slide_dict.type === 'illustration' ||
slide_dict.type === 'screenshot') {
if (slide_dict.image_caption || slide_dict.image_url) {
img = domsugar('img', {
src: slide_dict.image_url,
type: "image/svg+xml",
title: slide_dict.image_caption,
alt: slide_dict.image_caption
}).outerHTML;
}
}
slide.innerHTML = '<h1>' + slide_dict.title_html + '</h1>' + slide.innerHTML = '<h1>' + slide_dict.title_html + '</h1>' +
img +
'<details>' + slide_dict.comment_html + '</details>' + '<details>' + slide_dict.comment_html + '</details>' +
slide_dict.slide_html; slide_dict.slide_html;
...@@ -207,7 +233,8 @@ ...@@ -207,7 +233,8 @@
/////////////////////////////////////////////////// ///////////////////////////////////////////////////
// Page view handling // Page view handling
/////////////////////////////////////////////////// ///////////////////////////////////////////////////
function getCKEditorJSON(translation_dict, key, value, title_html, type) { function getCKEditorJSON(translation_dict, key, value, title_html, type,
image_url, image_caption) {
var ck_editor_json = { var ck_editor_json = {
erp5_document: { erp5_document: {
"_embedded": { "_embedded": {
...@@ -248,7 +275,7 @@ ...@@ -248,7 +275,7 @@
"title": translation_dict["Chapter Title"], "title": translation_dict["Chapter Title"],
"type": "StringField", "type": "StringField",
"editable": 1, "editable": 1,
"required": 1, "required": 0,
"key": "title_html", "key": "title_html",
"value": title_html "value": title_html
}; };
...@@ -268,6 +295,34 @@ ...@@ -268,6 +295,34 @@
value: type value: type
}; };
if (image_url !== null) {
ck_editor_json.erp5_document._embedded._view.your_image_url = {
"title": translation_dict["Image URL"],
"type": "StringField",
"editable": 1,
"required": 0,
"key": "image_url",
"value": image_url
};
ck_editor_json.erp5_document._embedded._view.your_image_caption = {
"title": translation_dict["Image Caption"],
"type": "StringField",
"editable": 1,
"required": 0,
"key": "image_caption",
"value": image_caption
};
ck_editor_json.form_definition.group_list = [
["left", [
["your_chapter_title"],
["your_slide_type"],
["your_image_url"],
["your_image_caption"]
]]
].concat(ck_editor_json.form_definition.group_list);
} else {
ck_editor_json.form_definition.group_list = [ ck_editor_json.form_definition.group_list = [
["left", [ ["left", [
["your_chapter_title"], ["your_chapter_title"],
...@@ -275,6 +330,7 @@ ...@@ -275,6 +330,7 @@
]] ]]
].concat(ck_editor_json.form_definition.group_list); ].concat(ck_editor_json.form_definition.group_list);
} }
}
return ck_editor_json; return ck_editor_json;
} }
...@@ -288,14 +344,29 @@ ...@@ -288,14 +344,29 @@
getSlideFromList(slide_list, gadget.state.display_index) getSlideFromList(slide_list, gadget.state.display_index)
), ),
queue; queue;
if (slide_dialog === DIALOG_SLIDE && (
if (slide_dialog === DIALOG_SLIDE) { slide_dict.type === 'illustration' ||
slide_dict.type === 'screenshot'
)
) {
render_dict = getCKEditorJSON( render_dict = getCKEditorJSON(
translation_dict, translation_dict,
"slide_html", "slide_html",
slide_dict.slide_html, slide_dict.slide_html,
slide_dict.title_html, slide_dict.title_html,
slide_dict.type slide_dict.type,
slide_dict.image_url,
slide_dict.image_caption
);
} else if (slide_dialog === DIALOG_SLIDE) {
render_dict = getCKEditorJSON(
translation_dict,
"slide_html",
slide_dict.slide_html,
slide_dict.title_html,
slide_dict.type,
null,
null
); );
} else if (slide_dialog === DIALOG_COMMENT) { } else if (slide_dialog === DIALOG_COMMENT) {
render_dict = getCKEditorJSON( render_dict = getCKEditorJSON(
...@@ -303,6 +374,8 @@ ...@@ -303,6 +374,8 @@
"comment_html", "comment_html",
slide_dict.comment_html, slide_dict.comment_html,
null, null,
null,
null,
null null
); );
} else { } else {
...@@ -354,7 +427,8 @@ ...@@ -354,7 +427,8 @@
var header_element, var header_element,
section_list = getSlideElementList(gadget.state.value), section_list = getSlideElementList(gadget.state.value),
draggable_element_list = [], draggable_element_list = [],
i; i,
content;
// Clone listbox header structure to reuse the css // Clone listbox header structure to reuse the css
header_element = domsugar('div', {'class': 'document_table'}, [ header_element = domsugar('div', {'class': 'document_table'}, [
...@@ -365,17 +439,31 @@ ...@@ -365,17 +439,31 @@
]); ]);
for (i = 0; i < section_list.length; i += 1) { for (i = 0; i < section_list.length; i += 1) {
draggable_element_list.push(domsugar('section', { // If slide type is sreenshot/illustration, show image instead of title
draggable: true, if (getSlideDictFromSlideElement(section_list[i]).image_url) {
'data-slide-index': i content = [
}, [ domsugar('button', {type: 'button', text: translation_dict.Edit,
'class': 'display-slide ui-icon-pencil ui-btn-icon-left',
'data-slide-index': i}),
domsugar('img', {
src: getSlideDictFromSlideElement(section_list[i]).image_url,
draggable: false
})
];
} else {
content = [
domsugar('button', {type: 'button', text: translation_dict.Edit, domsugar('button', {type: 'button', text: translation_dict.Edit,
'class': 'display-slide ui-icon-pencil ui-btn-icon-left', 'class': 'display-slide ui-icon-pencil ui-btn-icon-left',
'data-slide-index': i}), 'data-slide-index': i}),
domsugar('h1', { domsugar('h1', {
html: getSlideDictFromSlideElement(section_list[i]).title_html html: getSlideDictFromSlideElement(section_list[i]).title_html
}) })
])); ];
}
draggable_element_list.push(domsugar('section', {
draggable: true,
'data-slide-index': i
}, content));
} }
// Add the "Add slide" button // Add the "Add slide" button
// div.appendChild(domsugar('section', {text: 'Add Slide'})); // div.appendChild(domsugar('section', {text: 'Add Slide'}));
...@@ -489,6 +577,29 @@ ...@@ -489,6 +577,29 @@
throw new Error('Unhandled display step: ' + display_step); throw new Error('Unhandled display step: ' + display_step);
}) })
.onEvent("change", function (evt) {
var gadget = this,
tag_name = evt.target.tagName,
queue;
// Always get content to ensure the possible displayed form
// is checked and content propagated to the gadget state value
queue = gadget.getContent();
if (tag_name !== 'SELECT') {
return queue;
}
if (evt.target.id === 'type') {
return queue
.push(function () {
return gadget.changeState({
type: evt.target.value
});
});
}
})
.onEvent("click", function (evt) { .onEvent("click", function (evt) {
// Only handle click on BUTTON and IMG element // Only handle click on BUTTON and IMG element
var gadget = this, var gadget = this,
...@@ -508,7 +619,8 @@ ...@@ -508,7 +619,8 @@
return queue return queue
.push(function () { .push(function () {
return gadget.changeState({ return gadget.changeState({
display_index: gadget.state.display_index + 1 display_index: gadget.state.display_index + 1,
type: undefined
}); });
}); });
} }
...@@ -517,7 +629,8 @@ ...@@ -517,7 +629,8 @@
return queue return queue
.push(function () { .push(function () {
return gadget.changeState({ return gadget.changeState({
display_index: gadget.state.display_index - 1 display_index: gadget.state.display_index - 1,
type: undefined
}); });
}); });
} }
...@@ -526,7 +639,8 @@ ...@@ -526,7 +639,8 @@
return queue return queue
.push(function () { .push(function () {
return gadget.changeState({ return gadget.changeState({
display_step: DISPLAY_LIST display_step: DISPLAY_LIST,
type: undefined
}); });
}); });
} }
...@@ -536,6 +650,7 @@ ...@@ -536,6 +650,7 @@
.push(function () { .push(function () {
return gadget.changeState({ return gadget.changeState({
display_step: DISPLAY_SLIDE, display_step: DISPLAY_SLIDE,
type: undefined,
display_index: parseInt( display_index: parseInt(
evt.target.getAttribute('data-slide-index'), evt.target.getAttribute('data-slide-index'),
10 10
...@@ -549,7 +664,8 @@ ...@@ -549,7 +664,8 @@
return queue return queue
.push(function () { .push(function () {
return gadget.changeState({ return gadget.changeState({
slide_dialog: DIALOG_COMMENT slide_dialog: DIALOG_COMMENT,
type: undefined
}); });
}); });
} }
...@@ -558,7 +674,8 @@ ...@@ -558,7 +674,8 @@
return queue return queue
.push(function () { .push(function () {
return gadget.changeState({ return gadget.changeState({
slide_dialog: DIALOG_SLIDE slide_dialog: DIALOG_SLIDE,
type: undefined
}); });
}); });
} }
...@@ -571,7 +688,8 @@ ...@@ -571,7 +688,8 @@
return RSVP.all([ return RSVP.all([
gadget.changeState({ gadget.changeState({
value: slideListAsHTML(slide_list), value: slideListAsHTML(slide_list),
display_step: DISPLAY_LIST display_step: DISPLAY_LIST,
type: undefined
}), }),
gadget.notifyChange() gadget.notifyChange()
]); ]);
...@@ -585,7 +703,8 @@ ...@@ -585,7 +703,8 @@
display_index: getSlideElementList(gadget.state.value).length, display_index: getSlideElementList(gadget.state.value).length,
display_step: DISPLAY_SLIDE, display_step: DISPLAY_SLIDE,
slide_dialog: gadget.state.slide_dialog || DIALOG_SLIDE, slide_dialog: gadget.state.slide_dialog || DIALOG_SLIDE,
value: gadget.state.value + "<section></section>" value: gadget.state.value + "<section></section>",
type: undefined
}); });
}); });
} }
......
...@@ -34,6 +34,15 @@ div[data-gadget-url$="slideeditor.gadget.html"] { ...@@ -34,6 +34,15 @@ div[data-gadget-url$="slideeditor.gadget.html"] {
// border: 2px solid #000000; // border: 2px solid #000000;
border-style: dashed; border-style: dashed;
} }
& > img {
width: 8em;
height: 8em;
object-fit: cover;
position: relative;
top: -2em;
z-index: 1;
border-radius: 0.325em;
}
// Spacing between every section // Spacing between every section
margin-right: 2em; margin-right: 2em;
...@@ -48,9 +57,13 @@ div[data-gadget-url$="slideeditor.gadget.html"] { ...@@ -48,9 +57,13 @@ div[data-gadget-url$="slideeditor.gadget.html"] {
background-color: #FFFFFF; background-color: #FFFFFF;
width: 2em; width: 2em;
heigth: 2em;
min-height: 2em;
overflow: hidden; overflow: hidden;
text-indent: -9999px; text-indent: -9999px;
white-space: nowrap; white-space: nowrap;
position: relative;
z-index: 2;
&::before { &::before {
float: left; float: left;
text-indent: 0; text-indent: 0;
......
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