Skip to content

R
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 @@
<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>
<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.mobile.min.css">
<!-- Presentation editor stylesheet -->
<link rel="stylesheet" href="presentation-editor/css/presentation-editor.css">
</head>
<body>
......@@ -50,16 +57,14 @@
<div id="slide-list"></div>
<template id="slide-html">
<section>
<button class="edit ui-shadow ui-mini ui-corner-all ui-btn ui-btn-inline"
<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">
Edit
</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">
Delete
</button>
<div class="slide ui-shadow ui-corner-all">
<div class="slide">
<h1></h1>
<div class="content"></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 {
display: none;
}
......@@ -13,12 +17,36 @@
position: relative;
padding: 5px;
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 {
display: inline-block;
#slide-list > section > button.delete {
position: absolute;
top: -6px;
right: -8px;
z-index: 20;
}
section > h1 {
#slide-list .slide > h1 {
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 @@
<head>
<meta charset="utf-8">
<title>Presentation editor</title>
<!-- Presentation editor -->
<script src="lib/jquery.min.js"></script>
<script src="lib/jquery-ui.min.js"></script>
<script src="lib/jquery.mobile.min.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/jschannel.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.mobile.min.css">
<link rel="stylesheet" href="presentation-editor.css">
<!-- Presentation editor stylesheet -->
<link rel="stylesheet" href="css/presentation-editor.css">
</head>
<body>
......@@ -48,16 +57,14 @@
<div id="slide-list"></div>
<template id="slide-html">
<section>
<button class="edit ui-shadow ui-mini ui-corner-all ui-btn ui-btn-inline"
<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">
Edit
</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">
Delete
</button>
<div class="slide ui-shadow ui-corner-all">
<div class="slide">
<h1></h1>
<div class="content"></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 */
$(function () {
"use strict";
var presentation=null, slideForm;
var presentation = null, slideForm;
function blindForm() {
$('#slide-form').toggle("blind");
}
function Slide (params) {
function Slide(params) {
var that = this;
this.html = document.importNode(this.htmlTemplate, true);
if (params.section) {
this.update({
title: params.section.querySelector('h1').textContent,
type: params.section.className,
content: params.section.childNodes[2].textContent
title: params.section.querySelector('h1').textContent || "",
type: params.section.className || "",
content:
params
.section
.childNodes[2] ? (params.section.childNodes[2].textContent || "") : ""
});
}else{
} else {
this.update(params);
}
$(this.htmlEditButton()).click(function (e) {
......@@ -31,12 +34,12 @@ $(function () {
e.preventDefault();
});
}
Slide.prototype = {
dataTemplate: document.querySelector('template#slide-data').content.firstElementChild,
htmlTemplate: document.querySelector('template#slide-html').content.firstElementChild,
htmlEditButton: function () {
return this.html.querySelector("button.edit");
},
......@@ -52,7 +55,7 @@ $(function () {
htmlTitle: function () {
return this.html.querySelector("h1");
},
data: function () {
var res = document.importNode(this.dataTemplate, true);
res.className = this.type;
......@@ -68,19 +71,19 @@ $(function () {
}
};
function SlideForm () {
function SlideForm() {
this.elt = document.querySelector("#slide-form");
this.bindToAdd();
}
SlideForm.prototype = {
reset: function() {
reset: function () {
this.elt.querySelector('#title').value = "";
this.elt.querySelector('#type').value = "";
this.elt.querySelector('#content').value = "";
},
bindToEdit: function (slide) {
var that = this;
$(this.elt).off();
......@@ -98,7 +101,7 @@ $(function () {
slideForm.bindToAdd();
});
},
bindToAdd: function () {
var that = this;
$(this.elt).off();
......@@ -115,14 +118,14 @@ $(function () {
});
}
};
function Presentation (DOMElement) {
function Presentation(DOMElement) {
this.html = DOMElement;
slideForm = new SlideForm();
this.slides = [];
$("#add-slide").click(blindForm);
$(this.html).sortable({
update: function (event, ui) {
presentation.updateOrder(ui.item);
}
......@@ -130,7 +133,7 @@ $(function () {
}
Presentation.prototype = {
addSlide: function (slide) {
this.slides.push(slide);
this.html.appendChild(slide.html);
......@@ -139,27 +142,29 @@ $(function () {
deleteSlide: function (slide) {
var index = this.slides.indexOf(slide);
this.slides.splice(index,1);
this.slides.splice(index, 1);
slide.html.remove();
return index;
},
updateOrder: function (DOMElement) {
var newIndex = $(this.html.children).index(DOMElement),
oldIndex, i, tmp;
for (i=0; i<this.slides.length; i++) {
oldIndex,
i,
tmp;
for (i = 0; i < this.slides.length; i++) {
if (this.slides[i].html === DOMElement[0]) {
oldIndex = i;
break;
}
}
tmp = this.slides.splice(oldIndex,1)[0];
this.slides.splice(newIndex,0,tmp);
tmp = this.slides.splice(oldIndex, 1)[0];
this.slides.splice(newIndex, 0, tmp);
},
getContent: function () {
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());
}
return html_beautify(container.innerHTML);
......@@ -169,17 +174,18 @@ $(function () {
var i, sections, container = document.createElement('div');
container.innerHTML = content;
sections = container.children;
for (i=0; i<sections.length; i++) {
for (i = 0; i < sections.length; i++) {
this.addSlide(new Slide({section: sections[i]}));
}
}
};
$.fn.extend({
presentation: function () {
presentation = new Presentation(this[0]);
window.prez = 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