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 {
background-color: white;
}
#templates {
display: none;
}
/* #slide-list { */
/* margin: 1%; */
/* } */
#slide-list {
margin: 50px;
}
#slide-list section {
display: block;
.block {
display: inline-block;
float: left;
margin: 2%;
margin: 1%;
position: relative;
padding: 5px;
padding: 2%;
cursor: pointer;
position: relative;
width: 200px;
height: 200px;
border: 2px solid grey;
background-color: #f7f7f7;
width: 7.9vw;
min-width: 150px;
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;
top: 169px;
right: -8px;
bottom: -2%;
right: -2%;
z-index: 20;
}
#slide-list > section > button.delete {
.block > button.delete {
position: absolute;
top: -6px;
right: -8px;
top: -2%;
right: -2%;
z-index: 20;
}
#slide-list .slide > h1 {
.block .slide > h1 {
text-align: center;
}
#slide-list > section > .slide * {
.block > .slide * {
position: relative;
max-width: 190px;
max-height: 190px;
word-wrap: break-word;
max-width: 98%;
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 @@
<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 id="form-panel" data-role="panel" data-display="push" data-position-fixed="true">
<div class="panel-content">
<form id="slide-form">
<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">
<input data-inline="true" type="button" id="cancel" value="Cancel" data-theme="b">
</form>
</div>
</div>
<div data-role="fieldcontain">
<label for="content">Content:</label>
<textarea name="content" id="content"></textarea>
<div role="main" class="ui-content">
<div id="slide-list">
</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">
<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"
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="dummy"></div>
<div class="slide">
<h1></h1>
<div class="content"></div>
......
examples/officejs/presentation-editor/lib/presentation-editor.js
View file @ 3b2e3f40
......@@ -3,12 +3,24 @@
$(function () {
"use strict";
var presentation = null, slideForm;
function blindForm() {
$('#slide-form').toggle("blind");
var presentation = null,
slideForm,
newSlideButton = $('#add-slide'),
formPanel = $('#form-panel');
formPanel.panel({ beforeclose: function () {
newSlideButton.show();
}});
function openForm() {
formPanel.panel("open");
newSlideButton.hide();
}
function closeForm() {
formPanel.panel("close");
}
function Slide(params) {
var that = this;
this.html = document.importNode(this.htmlTemplate, true);
......@@ -24,14 +36,12 @@ $(function () {
} else {
this.update(params);
}
$(this.htmlEditButton()).click(function (e) {
$(this.htmlEditButton()).click(function () {
slideForm.bindToEdit(that);
blindForm();
e.preventDefault();
openForm();
});
$(this.htmlDeleteButton()).click(function (e) {
$(this.htmlDeleteButton()).click(function () {
presentation.deleteSlide(that);
e.preventDefault();
});
}
......@@ -96,7 +106,6 @@ $(function () {
type: that.elt.querySelector('#type').value,
content: that.elt.querySelector('#content').value
});
blindForm();
e.preventDefault();
slideForm.bindToAdd();
});
......@@ -112,10 +121,10 @@ $(function () {
type: that.elt.querySelector('#type').value,
content: that.elt.querySelector('#content').value
}));
blindForm();
this.reset();
e.preventDefault();
});
$(this.elt).find("#cancel").click(closeForm);
}
};
......@@ -123,9 +132,8 @@ $(function () {
this.html = DOMElement;
slideForm = new SlideForm();
this.slides = [];
$("#add-slide").click(blindForm);
$("#add-slide").click(openForm);
$(this.html).sortable({
update: function (event, ui) {
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