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

Added css style

parent 99599cba
...@@ -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>
......
.tern-port
bower_components
node_modules
\ No newline at end of file
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
...@@ -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>
......
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.
...@@ -3,22 +3,25 @@ ...@@ -3,22 +3,25 @@
$(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) {
...@@ -68,14 +71,14 @@ $(function () { ...@@ -68,14 +71,14 @@ $(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 = "";
...@@ -116,7 +119,7 @@ $(function () { ...@@ -116,7 +119,7 @@ $(function () {
} }
}; };
function Presentation (DOMElement) { function Presentation(DOMElement) {
this.html = DOMElement; this.html = DOMElement;
slideForm = new SlideForm(); slideForm = new SlideForm();
this.slides = []; this.slides = [];
...@@ -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,7 +174,7 @@ $(function () { ...@@ -169,7 +174,7 @@ $(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]}));
} }
} }
...@@ -178,6 +183,7 @@ $(function () { ...@@ -178,6 +183,7 @@ $(function () {
$.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