Skip to content

R
renderjs
Commit 3b2e3f40 authored by Thibaut Frain's avatar Thibaut Frain
Browse files
Options

use panel as slide form

parent 7cc4c15a
Hide whitespace changes
Inline Side-by-side
Showing with 139 additions and 149 deletions
examples/officejs/presentation-editor.html deleted 100644 → 0
View file @ 7cc4c15a
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Presentation editor</title>
<!-- Presentation editor -->
<script src="presentation-editor/lib/jquery.min.js"></script>
<script src="presentation-editor/lib/jquery-ui.min.js"></script>
<script src="presentation-editor/lib/jquery.mobile.min.js"></script>
<script src="presentation-editor/lib/beautify-html.js"></script>
<script src="presentation-editor/lib/presentation-editor.js"></script>
<!-- Renderjs -->
<script src="presentation-editor/lib/rsvp.min.js"></script>
<script src="presentation-editor/lib/jschannel.js"></script>
<script src="presentation-editor/lib/renderjs.js"></script>
<!-- IO definitions for presentation editor gadget-->
<script src="presentation-editor/gadget.js"></script>
<!-- Jquery ui and jquery-mobile stylesheet -->
<link rel="stylesheet" href="presentation-editor/css/jquery-ui.min.css">
<link rel="stylesheet" href="presentation-editor/css/jquery.mobile.min.css">
<!-- Presentation editor stylesheet -->
<link rel="stylesheet" href="presentation-editor/css/presentation-editor.css">
</head>
<body>
<div data-role="page">
<input type="button" value="Add slide" id="add-slide" data-inline="true"></input>
<form id="slide-form" style="display:none;">
<div data-role="fieldcontain">
<label for="title" >Title:</label>
<input type="text" name="title" id="title" value="" />
</div>
<div data-role="fieldcontain">
<select name="Type" id="type" data-inline="true">
<option value="chapter">chapter</option>
<option value="illustration">illustration</option>
</select>
</div>
<div data-role="fieldcontain">
<label for="content">Content:</label>
<textarea name="content" id="content"></textarea>
</div>
<input data-inline="true" type="submit" id="submit" value="Add slide">
</form>
<div id="slide-list"></div>
<template id="slide-html">
<section class="ui-shadow ui-corner-all">
<button class="edit ui-shadow ui-corner-all ui-btn ui-btn-inline ui-icon-edit ui-btn-icon-notext"
data-inline="true">
</button>
<button class="delete ui-shadow ui-corner-all ui-btn ui-btn-inline ui-icon-delete ui-btn-icon-notext"
data-inline="true">
</button>
<div class="slide">
<h1></h1>
<div class="content"></div>
</div>
</section>
</template>
<template id="slide-data">
<section>
<h1></h1>
</section>
</template>
</div>
</body>
</html>
examples/officejs/presentation-editor/css/jquery.mobile.min.css
View file @ 3b2e3f40
This source diff could not be displayed because it is too large. You can view the blob instead.
examples/officejs/presentation-editor/css/presentation-editor.css
View file @ 3b2e3f40
body { /* #slide-list { */
background-color: white; /* margin: 1%; */
} /* } */
#templates {
display: none;
}
#slide-list { .block {
margin: 50px; display: inline-block;
}
#slide-list section {
display: block;
float: left; float: left;
margin: 2%; margin: 1%;
position: relative; position: relative;
padding: 5px; padding: 2%;
cursor: pointer; cursor: pointer;
position: relative; position: relative;
width: 200px; width: 7.9vw;
height: 200px; min-width: 150px;
border: 2px solid grey;
background-color: #f7f7f7;
z-index: 10; z-index: 10;
overflow: hidden; overflow: hidden;
}
.block.slide-thumb {
background-color: #F5F5F6;
box-shadow: 2px 2px 2px 3px #ccc;
border: 2px solid grey;
}
.block#add-slide .slide {
margin-left: auto;
margin-right: auto;
margin-top: 30%;
font-size: 150%;
}
.block > .dummy {
margin-top: 100%;
}
.block > .slide {
position: absolute;
top: 2%;
bottom: 2%;
left: 2%;
right: 2%;
} }
#slide-list > section > button.edit { .block > button.edit {
position: absolute; position: absolute;
top: 169px; bottom: -2%;
right: -8px; right: -2%;
z-index: 20; z-index: 20;
} }
#slide-list > section > button.delete { .block > button.delete {
position: absolute; position: absolute;
top: -6px; top: -2%;
right: -8px; right: -2%;
z-index: 20; z-index: 20;
} }
#slide-list .slide > h1 { .block .slide > h1 {
text-align: center; text-align: center;
} }
#slide-list > section > .slide * { .block > .slide * {
position: relative; position: relative;
max-width: 190px; max-width: 98%;
max-height: 190px; word-wrap: break-word;
word-wrap: break-word; }
.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;
}
.ui-panel-dismiss-display-push {
display: none;
}
@media (max-width: 1000px) {
.ui-panel {
width: 100%;
}
.ui-panel-position-left {
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);
}
} }
\ No newline at end of file
examples/officejs/presentation-editor/index.html
View file @ 3b2e3f40
...@@ -30,40 +30,54 @@ ...@@ -30,40 +30,54 @@
<body> <body>
<div data-role="page"> <div data-role="page">
<input type="button" value="Add slide" id="add-slide" data-inline="true"></input>
<form id="slide-form" style="display:none;">
<div data-role="fieldcontain"> <div id="form-panel" data-role="panel" data-display="push" data-position-fixed="true">
<label for="title" >Title:</label> <div class="panel-content">
<input type="text" name="title" id="title" value="" /> <form id="slide-form">
</div> <div data-role="fieldcontain">
<label for="title" >Title:</label>
<div data-role="fieldcontain"> <input type="text" name="title" id="title" value="" />
<select name="Type" id="type" data-inline="true"> </div>
<option value="chapter">chapter</option>
<option value="illustration">illustration</option> <div data-role="fieldcontain">
</select> <select name="Type" id="type" data-inline="true">
<option value="chapter">chapter</option>
<option value="illustration">illustration</option>
</select>
</div>
<div data-role="fieldcontain">
<label for="content">Content:</label>
<textarea name="content" id="content"></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">
</form>
</div> </div>
</div>
<div data-role="fieldcontain"> <div role="main" class="ui-content">
<label for="content">Content:</label> <div id="slide-list">
<textarea name="content" id="content"></textarea>
</div> </div>
<input data-inline="true" type="submit" id="submit" value="Add slide">
</form>
<div id="slide-list"></div> <section id="add-slide" class="block ui-shadow ui-corner-all ui-btn">
<div class="dummy"></div>
<div class="slide">
New slide
</div>
</section>
</div>
<template id="slide-html"> <template id="slide-html">
<section class="ui-shadow ui-corner-all"> <section class="block slide-thumb ui-shadow ui-corner-all">
<button class="edit ui-shadow ui-corner-all ui-btn ui-btn-inline ui-icon-edit ui-btn-icon-notext" <button class="edit ui-shadow ui-corner-all ui-btn ui-btn-inline ui-icon-edit ui-btn-icon-notext"
data-inline="true"> data-inline="true">
</button> </button>
<button class="delete ui-shadow ui-corner-all ui-btn ui-btn-inline ui-icon-delete ui-btn-icon-notext" <button class="delete ui-shadow ui-corner-all ui-btn ui-btn-inline ui-icon-delete ui-btn-icon-notext"
data-inline="true"> data-inline="true">
</button> </button>
<div class="dummy"></div>
<div class="slide"> <div class="slide">
<h1></h1> <h1></h1>
<div class="content"></div> <div class="content"></div>
......
examples/officejs/presentation-editor/lib/presentation-editor.js
View file @ 3b2e3f40
...@@ -3,12 +3,24 @@ ...@@ -3,12 +3,24 @@
$(function () { $(function () {
"use strict"; "use strict";
var presentation = null, slideForm; var presentation = null,
slideForm,
function blindForm() { newSlideButton = $('#add-slide'),
$('#slide-form').toggle("blind"); formPanel = $('#form-panel');
formPanel.panel({ beforeclose: function () {
newSlideButton.show();
}});
function openForm() {
formPanel.panel("open");
newSlideButton.hide();
} }
function closeForm() {
formPanel.panel("close");
}
function Slide(params) { function Slide(params) {
var that = this; var that = this;
this.html = document.importNode(this.htmlTemplate, true); this.html = document.importNode(this.htmlTemplate, true);
...@@ -24,14 +36,12 @@ $(function () { ...@@ -24,14 +36,12 @@ $(function () {
} else { } else {
this.update(params); this.update(params);
} }
$(this.htmlEditButton()).click(function (e) { $(this.htmlEditButton()).click(function () {
slideForm.bindToEdit(that); slideForm.bindToEdit(that);
blindForm(); openForm();
e.preventDefault();
}); });
$(this.htmlDeleteButton()).click(function (e) { $(this.htmlDeleteButton()).click(function () {
presentation.deleteSlide(that); presentation.deleteSlide(that);
e.preventDefault();
}); });
} }
...@@ -96,7 +106,6 @@ $(function () { ...@@ -96,7 +106,6 @@ $(function () {
type: that.elt.querySelector('#type').value, type: that.elt.querySelector('#type').value,
content: that.elt.querySelector('#content').value content: that.elt.querySelector('#content').value
}); });
blindForm();
e.preventDefault(); e.preventDefault();
slideForm.bindToAdd(); slideForm.bindToAdd();
}); });
...@@ -112,10 +121,10 @@ $(function () { ...@@ -112,10 +121,10 @@ $(function () {
type: that.elt.querySelector('#type').value, type: that.elt.querySelector('#type').value,
content: that.elt.querySelector('#content').value content: that.elt.querySelector('#content').value
})); }));
blindForm();
this.reset(); this.reset();
e.preventDefault(); e.preventDefault();
}); });
$(this.elt).find("#cancel").click(closeForm);
} }
}; };
...@@ -123,9 +132,8 @@ $(function () { ...@@ -123,9 +132,8 @@ $(function () {
this.html = DOMElement; this.html = DOMElement;
slideForm = new SlideForm(); slideForm = new SlideForm();
this.slides = []; this.slides = [];
$("#add-slide").click(blindForm); $("#add-slide").click(openForm);
$(this.html).sortable({ $(this.html).sortable({
update: function (event, ui) { update: function (event, ui) {
presentation.updateOrder(ui.item); presentation.updateOrder(ui.item);
} }
......
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