Skip to content

R
renderjs
Commit 71b14409 authored by Thibaut Frain's avatar Thibaut Frain
Browse files
Options

Adding basic image support

parent 3b2e3f40
Show whitespace changes
Inline Side-by-side
Showing with 176 additions and 66 deletions
examples/officejs/catalog.js
View file @ 71b14409
......@@ -30,7 +30,7 @@
"interface" : "http://www.renderjs.org/interface/editor"
},
editor_5_dict = {
"path" : "./presentation-editor.html",
"path" : "./presentation-editor/index.html",
"title" : "Presentation Editor Gadget",
"interface" : "http://www.renderjs.org/interface/editor"
},
......
examples/officejs/presentation-editor/css/presentation-editor.css
View file @ 71b14409
/* #slide-list { */
/* margin: 1%; */
/* } */
.block {
display: inline-block;
float: left;
......@@ -17,7 +13,7 @@
}
.block.slide-thumb {
background-color: #F5F5F6;
background-color: white;
box-shadow: 2px 2px 2px 3px #ccc;
border: 2px solid grey;
}
......@@ -68,9 +64,7 @@
.ui-panel-page-content-open.ui-panel-page-content-position-left.ui-panel-page-content-display-push {
padding-right: 35vw;
}
/* .ui-panel-page-content-open.ui-panel-page-content-position-right.ui-panel-page-content-display-push { */
/* margin-left: 100px; */
/* } */
.ui-panel-page-content-open.ui-panel-page-content-display-push {
width: auto;
}
......@@ -88,15 +82,16 @@
left: 100%;
}
/* .ui-panel-animate.ui-panel-position-left.ui-panel-display-overlay, .ui-panel-animate.ui-panel-position-left.ui-panel-display-push { */
/* -webkit-transform: translate3d(100%,0,0); */
/* -moz-transform: translate3d(100%,0,0); */
/* transform: translate3d(100%,0,0); */
/* } */
.ui-panel-animate.ui-panel-page-content-position-left {
-webkit-transform: translate3d(100%,0,0);
-moz-transform: translate3d(100%,0,0);
transform: translate3d(100%,0,0);
}
}
#image-preview {
position: relative;
float: right;
width: 24%;
margin: 3%
}
\ No newline at end of file
examples/officejs/presentation-editor/index.html
View file @ 71b14409
......@@ -31,28 +31,58 @@
<div data-role="page">
<div id="form-panel" data-role="panel" data-display="push" data-position-fixed="true">
<div class="panel-content">
<div id="form-panel" data-role="panel" data-display="push">
<div class="panel-content page">
<form id="slide-form">
<div data-role="fieldcontain">
<label for="title" >Title:</label>
<input type="text" name="title" id="title" value="" />
<label for="title" ><strong>Title</strong></label>
<input type="text" name="title" id="title" placeholder="Type here the slide title" data-clear-btn="true" required/>
</div>
<br/>
<div data-role="fieldcontain">
<select name="Type" id="type" data-inline="true">
<option value="chapter">chapter</option>
<option value="illustration">illustration</option>
</select>
<label for="type"><strong>Type</strong></label>
<fieldset data-role="controlgroup" data-mini="true" id="type">
<input type="radio" name="type" id="basic-type" value="" checked="checked" />
<label for="basic-type">basic</label>
<input type="radio" name="type" id="chapter-type" value="chapter" />
<label for="chapter-type">chapter</label>
<input type="radio" name="type" id="screenshot-type" value="screenshot" />
<label for="screenshot-type">screenshot</label>
<input type="radio" name="type" id="illustration-type" value="illustration" />
<label for="illustration-type">illustration</label>
<input type="radio" name="type" id="code-type" value="code" />
<label for="code-type">code</label>
<input type="radio" name="type" id="master-type" value="master" />
<label for="master-type">master</label>
</fieldset>
</div>
<br/>
<div data-role="fieldcontain" id="image-field">
<label for="image"><strong>Image</strong></label>
<input type="file" name="image" id="image-input" class="ui-btn" />
<img id="image-preview" class="ui-shadow ui-corner-all">
</div>
<div data-role="fieldcontain">
<label for="content">Content:</label>
<textarea name="content" id="content"></textarea>
<label for="content"><strong>Slide text</strong></label>
<textarea name="content" id="content" placeholder="This text will appear in the slide"></textarea>
</div>
<input data-inline="true" type="submit" id="submit" value="Add slide">
<input data-inline="true" type="button" id="cancel" value="Cancel" data-theme="b">
<div data-role="fieldcontain">
<label for="details"><strong>Slide details</strong></label>
<textarea name="details" id="details" placeholder="This text will be hidden"></textarea>
</div>
<br/>
<div id="slide-form-buttons" class="ui-grid-a">
<div class="ui-block-a"><input type="button" id="cancel" value="Cancel" data-theme="b"></div>
<div class="ui-block-b"><input type="submit" id="submit" value="Add slide" class="ui-block-b"></div>
</div>
</form>
</div>
</div>
......@@ -80,6 +110,7 @@
<div class="dummy"></div>
<div class="slide">
<h1></h1>
<img>
<div class="content"></div>
</div>
</section>
......
examples/officejs/presentation-editor/lib/presentation-editor.js
View file @ 71b14409
/*globals window, document, $, html_beautify */
/*globals window, document, $, html_beautify, FileReader */
/*jslint unparam: true */
$(function () {
"use strict";
......@@ -10,6 +10,7 @@ $(function () {
formPanel.panel({ beforeclose: function () {
newSlideButton.show();
slideForm.reset();
}});
function openForm() {
......@@ -36,11 +37,11 @@ $(function () {
} else {
this.update(params);
}
$(this.htmlEditButton()).click(function () {
$(this.editBtn()).click(function () {
slideForm.bindToEdit(that);
openForm();
});
$(this.htmlDeleteButton()).click(function () {
$(this.deleteBtn()).click(function () {
presentation.deleteSlide(that);
});
}
......@@ -50,21 +51,11 @@ $(function () {
dataTemplate: document.querySelector('template#slide-data').content.firstElementChild,
htmlTemplate: document.querySelector('template#slide-html').content.firstElementChild,
htmlEditButton: function () {
return this.html.querySelector("button.edit");
},
htmlDeleteButton: function () {
return this.html.querySelector("button.delete");
},
htmlContent: function () {
return this.html.querySelector(".content");
},
htmlTitle: function () {
return this.html.querySelector("h1");
},
editBtn: function () {return this.html.querySelector("button.edit");},
deleteBtn: function () {return this.html.querySelector("button.delete");},
htmlContent: function () {return this.html.querySelector(".content");},
htmlImage: function () {return this.html.querySelector("img");},
htmlTitle: function () {return this.html.querySelector("h1");},
data: function () {
var res = document.importNode(this.dataTemplate, true);
......@@ -75,40 +66,134 @@ $(function () {
},
update: function (params) {
console.log(params);
$.extend(this, params);
this.htmlTitle().textContent = this.title;
this.htmlContent().innerHTML = this.content;
if (this.type === "screenshot" || this.type === "illustration") {
this.htmlImage().src = this.image;
}else{
this.htmlImage().src= "";
}
}
};
function SlideForm() {
var that = this;
this.elt = document.querySelector("#slide-form");
this.bindToAdd();
$(this.elt).find("#cancel").click(closeForm);
$(this.elt).find('input[type="radio"]').click(function () {
that.updateFieldVisibility();
});
$(this.elt).find('#image-input').change(function (evt) {
var file = evt.target.files[0];
console.log(file);
if (file) {
var reader = new FileReader();
reader.onload = function (e) {
console.log(e.target);
that.attrImageFile(e.target.result);
};
reader.readAsDataURL(file);
}
});
}
SlideForm.prototype = {
attrTextInput: function (inputElt, content) {
if (content !== undefined) {
inputElt.value = content;
}else{
return inputElt.value;
}
},
attrTitle: function(content) {
return this.attrTextInput(this.elt.querySelector('#title'), content);
},
attrContent: function(content) {
return this.attrTextInput(this.elt.querySelector('#content'), content);
},
attrDetails: function(content) {
return this.attrTextInput(this.elt.querySelector('#details'), content);
},
attrType: function(type) {
var radios = $(this.elt).find('input[type="radio"]');
if (type !== undefined) {
radios.prop('checked', false);
if (type === "") {type = "basic";}
radios.filter("#"+type+"-type").prop('checked', true);
radios.checkboxradio('refresh');
this.updateFieldVisibility();
}else{
return radios.filter(':checked').val();
}
},
attrImageFile: function (imageFile) {
var input = this.elt.querySelector('#image-input');
var preview = this.elt.querySelector('#image-preview');
if (imageFile !== undefined) {
input.value = "";
preview.src = imageFile;
}else{
return preview.src;
}
},
attrAll: function (slide) {
if (slide !== undefined) {
this.attrTitle(slide.title);
this.attrType(slide.type);
this.attrContent(slide.content);
this.attrDetails(slide.details);
this.attrImageFile(slide.image);
}else{
return {
title: this.attrTitle(),
type: this.attrType(),
content: this.attrContent(),
details: this.attrDetails(),
image: this.attrImageFile()
};
}
},
updateFieldVisibility: function () {
var type = this.attrType();
if (type === "screenshot" || type === "illustration") {
$(this.elt).find('#image-field').show("blind", {direction: "up"});
}else{
$(this.elt).find('#image-field').hide("blind", {direction: "up"});
}
},
setSubmitLabel: function (label) {
var submit = $(this.elt).find("#submit");
submit.prop("value", label).button('refresh');
},
reset: function () {
this.elt.querySelector('#title').value = "";
this.elt.querySelector('#type').value = "";
this.elt.querySelector('#content').value = "";
this.attrAll({title: "", type: "basic", content: "", details: "", image: ""});
},
bindToEdit: function (slide) {
var that = this;
that.currentSlide = slide;
$(this.elt).off();
this.elt.querySelector('#title').value = slide.title;
this.elt.querySelector('#type').value = slide.type;
this.elt.querySelector('#content').value = slide.content;
this.attrAll(slide);
$(this.elt).submit(function (e) {
slide.update({
title: that.elt.querySelector('#title').value,
type: that.elt.querySelector('#type').value,
content: that.elt.querySelector('#content').value
});
slide.update(that.attrAll());
e.preventDefault();
that.currentSlide = null;
slideForm.bindToAdd();
});
this.setSubmitLabel("Save");
},
bindToAdd: function () {
......@@ -116,15 +201,11 @@ $(function () {
$(this.elt).off();
this.reset();
$(this.elt).submit(function (e) {
presentation.addSlide(new Slide({
title: that.elt.querySelector('#title').value,
type: that.elt.querySelector('#type').value,
content: that.elt.querySelector('#content').value
}));
this.reset();
presentation.addSlide(new Slide(that.attrAll()));
that.reset();
e.preventDefault();
});
$(this.elt).find("#cancel").click(closeForm);
this.setSubmitLabel("Add");
}
};
......@@ -149,6 +230,9 @@ $(function () {
},
deleteSlide: function (slide) {
if (slideForm.currentSlide === slide) {
slideForm.bindToAdd();
}
var index = this.slides.indexOf(slide);
this.slides.splice(index, 1);
slide.html.remove();
......
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
GitLab Nexedi Edition | About GitLab | About Nexedi | 沪ICP备2021021310号-2 | 沪ICP备2021021310号-7