Skip to content

renderjs
renderjs
Commit 7cc4c15a authored by Thibaut Frain's avatar Thibaut Frain
Browse files
Options

Added css style

parent 99599cba
Hide whitespace changes
Inline Side-by-side
Showing with 103 additions and 52 deletions
examples/officejs/presentation-editor.html
View file @ 7cc4c15a
...@@ -3,22 +3,29 @@ ...@@ -3,22 +3,29 @@
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<title>Presentation editor</title> <title>Presentation editor</title>
<!-- Presentation editor -->
<script src="presentation-editor/lib/jquery.min.js"></script> <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-ui.min.js"></script>
<script src="presentation-editor/lib/jquery.mobile.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/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/rsvp.min.js"></script>
<script src="presentation-editor/lib/jschannel.js"></script> <script src="presentation-editor/lib/jschannel.js"></script>
<script src="presentation-editor/lib/renderjs.js"></script> <script src="presentation-editor/lib/renderjs.js"></script>
<script src="presentation-editor/presentation-editor.js"></script> <!-- IO definitions for presentation editor gadget-->
<script src="presentation-editor/gadget.js"></script>
<script src="presentation-editor.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-ui.min.css">
<link rel="stylesheet" href="presentation-editor/css/jquery.mobile.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"> <link rel="stylesheet" href="presentation-editor/css/presentation-editor.css">
</head> </head>
<body> <body>
...@@ -50,16 +57,14 @@ ...@@ -50,16 +57,14 @@
<div id="slide-list"></div> <div id="slide-list"></div>
<template id="slide-html"> <template id="slide-html">
<section> <section class="ui-shadow ui-corner-all">
<button class="edit ui-shadow ui-mini ui-corner-all ui-btn ui-btn-inline" <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">
Edit
</button> </button>
<button class="delete ui-shadow ui-mini ui-corner-all ui-btn ui-btn-inline" <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">
Delete
</button> </button>
<div class="slide ui-shadow ui-corner-all"> <div class="slide">
<h1></h1> <h1></h1>
<div class="content"></div> <div class="content"></div>
</div> </div>
......
examples/officejs/presentation-editor/.gitignore 0 → 100644
View file @ 7cc4c15a
.tern-port
bower_components
node_modules
\ No newline at end of file
examples/officejs/presentation-editor/css/presentation-editor.css
View file @ 7cc4c15a
body {
background-color: white;
}
#templates { #templates {
display: none; display: none;
} }
...@@ -13,12 +17,36 @@ ...@@ -13,12 +17,36 @@
position: relative; position: relative;
padding: 5px; padding: 5px;
cursor: pointer; cursor: pointer;
position: relative;
width: 200px;
height: 200px;
border: 2px solid grey;
background-color: #f7f7f7;
z-index: 10;
overflow: hidden;
}
#slide-list > section > button.edit {
position: absolute;
top: 169px;
right: -8px;
z-index: 20;
} }
section > button#edit-button { #slide-list > section > button.delete {
display: inline-block; position: absolute;
top: -6px;
right: -8px;
z-index: 20;
} }
section > h1 { #slide-list .slide > h1 {
text-align: center; text-align: center;
}
#slide-list > section > .slide * {
position: relative;
max-width: 190px;
max-height: 190px;
word-wrap: break-word;
} }
\ No newline at end of file
examples/officejs/presentation-editor/index.html
View file @ 7cc4c15a
...@@ -3,20 +3,29 @@ ...@@ -3,20 +3,29 @@
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<title>Presentation editor</title> <title>Presentation editor</title>
<!-- Presentation editor -->
<script src="lib/jquery.min.js"></script> <script src="lib/jquery.min.js"></script>
<script src="lib/jquery-ui.min.js"></script> <script src="lib/jquery-ui.min.js"></script>
<script src="lib/jquery.mobile.min.js"></script> <script src="lib/jquery.mobile.min.js"></script>
<script src="lib/beautify-html.js"></script> <script src="lib/beautify-html.js"></script>
<script src="lib/presentation-editor.js"></script>
<!-- Renderjs -->
<script src="lib/rsvp.min.js"></script> <script src="lib/rsvp.min.js"></script>
<script src="lib/jschannel.js"></script> <script src="lib/jschannel.js"></script>
<script src="lib/renderjs.js"></script> <script src="lib/renderjs.js"></script>
<script src="presentation-editor.js"></script> <!-- IO definitions for presentation editor gadget-->
<script src="gadget.js"></script>
<!-- Jquery ui and jquery-mobile stylesheet -->
<link rel="stylesheet" href="css/jquery-ui.min.css"> <link rel="stylesheet" href="css/jquery-ui.min.css">
<link rel="stylesheet" href="css/jquery.mobile.min.css"> <link rel="stylesheet" href="css/jquery.mobile.min.css">
<link rel="stylesheet" href="presentation-editor.css"> <!-- Presentation editor stylesheet -->
<link rel="stylesheet" href="css/presentation-editor.css">
</head> </head>
<body> <body>
...@@ -48,16 +57,14 @@ ...@@ -48,16 +57,14 @@
<div id="slide-list"></div> <div id="slide-list"></div>
<template id="slide-html"> <template id="slide-html">
<section> <section class="ui-shadow ui-corner-all">
<button class="edit ui-shadow ui-mini ui-corner-all ui-btn ui-btn-inline" <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">
Edit
</button> </button>
<button class="delete ui-shadow ui-mini ui-corner-all ui-btn ui-btn-inline" <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">
Delete
</button> </button>
<div class="slide ui-shadow ui-corner-all"> <div class="slide">
<h1></h1> <h1></h1>
<div class="content"></div> <div class="content"></div>
</div> </div>
......
examples/officejs/presentation-editor/lib/jquery.min.map 0 → 100644
View file @ 7cc4c15a
This source diff could not be displayed because it is too large. You can view the blob instead.
examples/officejs/presentation-editor/lib/jquery.mobile.min.map 0 → 100644
View file @ 7cc4c15a
This source diff could not be displayed because it is too large. You can view the blob instead.
examples/officejs/presentation-editor/presentation-editor.js → examples/officejs/presentation-editor/lib/presentation-editor.js
View file @ 7cc4c15a
/*globals window, document, $, html_beautify */ /*globals window, document, $, html_beautify */
/*jslint unparam: true */ /*jslint unparam: true */
$(function () { $(function () {
"use strict"; "use strict";
var presentation=null, slideForm; var presentation = null, slideForm;
function blindForm() { function blindForm() {
$('#slide-form').toggle("blind"); $('#slide-form').toggle("blind");
} }
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);
if (params.section) { if (params.section) {
this.update({ this.update({
title: params.section.querySelector('h1').textContent, title: params.section.querySelector('h1').textContent || "",
type: params.section.className, type: params.section.className || "",
content: params.section.childNodes[2].textContent content:
params
.section
.childNodes[2] ? (params.section.childNodes[2].textContent || "") : ""
}); });
}else{ } else {
this.update(params); this.update(params);
} }
$(this.htmlEditButton()).click(function (e) { $(this.htmlEditButton()).click(function (e) {
...@@ -31,12 +34,12 @@ $(function () { ...@@ -31,12 +34,12 @@ $(function () {
e.preventDefault(); e.preventDefault();
}); });
} }
Slide.prototype = { Slide.prototype = {
dataTemplate: document.querySelector('template#slide-data').content.firstElementChild, dataTemplate: document.querySelector('template#slide-data').content.firstElementChild,
htmlTemplate: document.querySelector('template#slide-html').content.firstElementChild, htmlTemplate: document.querySelector('template#slide-html').content.firstElementChild,
htmlEditButton: function () { htmlEditButton: function () {
return this.html.querySelector("button.edit"); return this.html.querySelector("button.edit");
}, },
...@@ -52,7 +55,7 @@ $(function () { ...@@ -52,7 +55,7 @@ $(function () {
htmlTitle: function () { htmlTitle: function () {
return this.html.querySelector("h1"); return this.html.querySelector("h1");
}, },
data: function () { data: function () {
var res = document.importNode(this.dataTemplate, true); var res = document.importNode(this.dataTemplate, true);
res.className = this.type; res.className = this.type;
...@@ -68,19 +71,19 @@ $(function () { ...@@ -68,19 +71,19 @@ $(function () {
} }
}; };
function SlideForm () { function SlideForm() {
this.elt = document.querySelector("#slide-form"); this.elt = document.querySelector("#slide-form");
this.bindToAdd(); this.bindToAdd();
} }
SlideForm.prototype = { SlideForm.prototype = {
reset: function() { reset: function () {
this.elt.querySelector('#title').value = ""; this.elt.querySelector('#title').value = "";
this.elt.querySelector('#type').value = ""; this.elt.querySelector('#type').value = "";
this.elt.querySelector('#content').value = ""; this.elt.querySelector('#content').value = "";
}, },
bindToEdit: function (slide) { bindToEdit: function (slide) {
var that = this; var that = this;
$(this.elt).off(); $(this.elt).off();
...@@ -98,7 +101,7 @@ $(function () { ...@@ -98,7 +101,7 @@ $(function () {
slideForm.bindToAdd(); slideForm.bindToAdd();
}); });
}, },
bindToAdd: function () { bindToAdd: function () {
var that = this; var that = this;
$(this.elt).off(); $(this.elt).off();
...@@ -115,14 +118,14 @@ $(function () { ...@@ -115,14 +118,14 @@ $(function () {
}); });
} }
}; };
function Presentation (DOMElement) { function Presentation(DOMElement) {
this.html = DOMElement; this.html = DOMElement;
slideForm = new SlideForm(); slideForm = new SlideForm();
this.slides = []; this.slides = [];
$("#add-slide").click(blindForm); $("#add-slide").click(blindForm);
$(this.html).sortable({ $(this.html).sortable({
update: function (event, ui) { update: function (event, ui) {
presentation.updateOrder(ui.item); presentation.updateOrder(ui.item);
} }
...@@ -130,7 +133,7 @@ $(function () { ...@@ -130,7 +133,7 @@ $(function () {
} }
Presentation.prototype = { Presentation.prototype = {
addSlide: function (slide) { addSlide: function (slide) {
this.slides.push(slide); this.slides.push(slide);
this.html.appendChild(slide.html); this.html.appendChild(slide.html);
...@@ -139,27 +142,29 @@ $(function () { ...@@ -139,27 +142,29 @@ $(function () {
deleteSlide: function (slide) { deleteSlide: function (slide) {
var index = this.slides.indexOf(slide); var index = this.slides.indexOf(slide);
this.slides.splice(index,1); this.slides.splice(index, 1);
slide.html.remove(); slide.html.remove();
return index; return index;
}, },
updateOrder: function (DOMElement) { updateOrder: function (DOMElement) {
var newIndex = $(this.html.children).index(DOMElement), var newIndex = $(this.html.children).index(DOMElement),
oldIndex, i, tmp; oldIndex,
for (i=0; i<this.slides.length; i++) { i,
tmp;
for (i = 0; i < this.slides.length; i++) {
if (this.slides[i].html === DOMElement[0]) { if (this.slides[i].html === DOMElement[0]) {
oldIndex = i; oldIndex = i;
break; break;
} }
} }
tmp = this.slides.splice(oldIndex,1)[0]; tmp = this.slides.splice(oldIndex, 1)[0];
this.slides.splice(newIndex,0,tmp); this.slides.splice(newIndex, 0, tmp);
}, },
getContent: function () { getContent: function () {
var i, container = document.createElement('div'); var i, container = document.createElement('div');
for (i=0; i<this.slides.length; i++) { for (i = 0; i < this.slides.length; i++) {
container.appendChild(this.slides[i].data()); container.appendChild(this.slides[i].data());
} }
return html_beautify(container.innerHTML); return html_beautify(container.innerHTML);
...@@ -169,17 +174,18 @@ $(function () { ...@@ -169,17 +174,18 @@ $(function () {
var i, sections, container = document.createElement('div'); var i, sections, container = document.createElement('div');
container.innerHTML = content; container.innerHTML = content;
sections = container.children; sections = container.children;
for (i=0; i<sections.length; i++) { for (i = 0; i < sections.length; i++) {
this.addSlide(new Slide({section: sections[i]})); this.addSlide(new Slide({section: sections[i]}));
} }
} }
}; };
$.fn.extend({ $.fn.extend({
presentation: function () { presentation: function () {
presentation = new Presentation(this[0]); presentation = new Presentation(this[0]);
window.prez = presentation;
return presentation; return presentation;
} }
}); });
}); });
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