Commit 7cc4c15a authored by Thibaut Frain's avatar Thibaut Frain

Added css style

parent 99599cba
......@@ -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>
......
.tern-port
bower_components
node_modules
\ No newline at end of file
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
......@@ -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>
......
This source diff could not be displayed because it is too large. You can view the blob instead.
This source diff could not be displayed because it is too large. You can view the blob instead.
/*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