Content...
'; - $currentSort = $this->getCurrentSort($slide->sectionId); - if ($currentSort === false) { - $nextSort = 0; - } else { - $nextSort = $currentSort + 1; - } - $slide->sorting = $nextSort; - return $slide; + // Remove all slides comes from Showlist + $vars = $request->getRequestVars(); + $showId = intval($vars['Slide']); + + if (!$this->deleteAllImages($request)) + echo("an error has occured\n"); + + $sql = 'DELETE from ss_slide WHERE showId=:showId;'; + $db = Database::getDB(); + $pdo = $db->getPDO(); + $q = $pdo->prepare($sql); + return $q->execute(array('showId' => $showId)); } - public function save(Resource $slide) + /** + * Deletes an image given a deletion request with slideId + * @return boolean true if deletion was successful + */ + public function deleteImage(Request $request) { - self::saveResource($slide); - return $slide->id; + $resourceId = $request->pullDeleteVar('slideId'); + $resource = $this->load($resourceId); + $media = json_decode($resource->media); + if ($this->removeUpload($resourceId, $media->imgUrl)) { + $resource->media = ""; + $this->saveResource($resource); + return true; + } + return false; } - public function delete($slideId) + /** + * Deletes all images within a specific slideshow given a deletion request with slideId + * @return boolean true if deletion was successful + */ + public function deleteAllImages(Request $request) { - $slide = $this->load($slideId); - self::deleteResource($slide); - $sortable = new \phpws2\Sortable('ss_slide', 'sorting'); - $sortable->startAtZero(); - $sortable->setAnchor('sectionId', $slide->sectionId); - $sortable->reorder(); - $this->deleteImageDirectory($slide); - } + $vars = $request->getRequestVars(); + $showId = intval($vars['Slide']); - public function deleteImageDirectory($slide) - { - $path = $slide->getImagePath(); - \phpws\PHPWS_File::rmdir($path); + $sql = 'SELECT id, media from ss_slide WHERE showId=:showId;'; + $db = Database::getDB(); + $pdo = $db->getPDO(); + $q = $pdo->prepare($sql); + $q->execute(array('showId' => $showId)); + if (!$q) + return false; + $res = $q->fetchAll(); + $flag = false; + foreach ($res as $r) { + $media = json_decode($r['media']); + if ($media != null && !empty($media->imgUrl)) { + $flag = $this->removeUpload($r['id'], $media->imgUrl); + if (!$flag) + echo("an error has occured"); // An error occured + } + $this->deleteSlideDir($r['id']); + } + return true; } - public function createImageDirectory($slide) + private function deleteSlideDir($resourceId) { - $path = $slide->getImagePath(); - if (!is_dir($path)) { - mkdir($path); + $dir = SLIDESHOW_MEDIA_DIRECTORY . $resourceId; + if (is_dir($dir)) { + // If directory exists then we dump it + system('rm -rf ' . escapeshellarg($dir), $ret); + if ($ret != 0) + throw new Exception('Directory Removal Error: ' . $ret); + } else { + echo("directory already removed"); } } - public function clearBackgroundImage($slideId) + /** + * Returns the slide of the show corresponding to the showId + * @var integer showId + * @return array of slides + */ + private function getSlides(int $showId, $includeInactive = false) { - /* @var $slide \slideshow\Resource\SlideResource */ - $slide = $this->load($slideId); - if (is_file($slide->backgroundImage)) { - unlink($slide->backgroundImage); + $sql = 'SELECT * FROM ss_slide WHERE showId=:showId ORDER BY ss_slide.slideIndex;'; + $db = Database::getDB(); + $tbl = $db->addTable('ss_slide'); + $tbl->addFieldConditional('showId', $showId); + if (!$includeInactive) { + $tbl2 = $db->addTable('ss_show', null, false); + $tbl2->addFieldConditional('active', 1); + $tbl->addFieldConditional('showId', $tbl2->getField('id')); } - $slide->backgroundImage = null; - $this->save($slide); + $pdo = $db->getPDO(); + $q = $pdo->prepare($sql); + $q->execute(array('showId' => $showId)); + $slides = $q->fetchAll(); + return $slides; } - public function patch($id, $param, $value) + private function Oldupload($file, $path, $slideId) { - static $allowed_params = array('delay', 'sorting', 'title', 'content', 'backgroundImage'); + # TODO: handle upload of background + # My idea is that I leave the upload process to the path + # and depending on the path, I will upload respectivly + $target = SLIDESHOW_MEDIA_DIRECTORY . $path; + $dir = PHPWS_HOME_DIR . $target; - if (!in_array($param, $allowed_params)) { - throw new \Exception('Parameter may not be patched'); + if (!is_dir($dir)) { + mkdir($dir, 0755, true); } - $slide = $this->load($id); - $slide->$param = $value; - $this->save($slide); - return true; + + if (gettype($file) === 'array') { + $dest = $dir . basename($file['name']); + if (move_uploaded_file($file['tmp_name'], $dest)) { + return './' . $target . basename($file['name']); + } else { + echo("not uploaded and error occured"); + var_dump($file); + var_dump($target); + } + return null; + } else if (gettype($file) === 'string') { // file is a thumbnail or a background img + $dir .= 'thumb/'; + if (is_dir($dir)) { + // If directory exists then we dump it + system('rm -rf ' . escapeshellarg($dir), $ret); + if ($ret != 0) + throw new Exception('Directory Removal Error: ' . $ret); + } + mkdir($dir, 0755, true); + // image will be named based on timestamp + $time = time(); + $filename = $time . '.png'; + $dest = $dir . $filename; + $status = file_put_contents($dest, $file); + if (!$status) { + // error has occured + return null; + } + return './' . $target . 'thumb/' . $filename; + } + return null; } - public function getDecisions(Resource $slide) + /** + * Uploads a file to a given path + * @var mixed - of type array or file string data + * @var string - if path doesn't exist it will recursivly created also it will get dumped if it does exist. + * @return string - filepath of new file + */ + private function upload($file, $path) { - $dFactory = new DecisionFactory; - return $dFactory->listing($slide->id); + $slideshow_path = SLIDESHOW_MEDIA_DIRECTORY . $path; + $canopy_path = PHPWS_HOME_DIR . $slideshow_path; + + if (!is_dir($canopy_path)) { + mkdir($canopy_path, 0755, true); + } else { + system('rm -rf ' . escapeshellarg($canopy_path), $ret); + if ($ret != 0) + throw new Exception('Directory Removal Error: ' . $ret); + mkdir($canopy_path, 0755, true); + } + + if (gettype($file) === 'array') { + $dest = $canopy_path . basename($file['name']); + if (move_uploaded_file($file['tmp_name'], $dest)) { + return './' . $slideshow_path . basename($file['name']); + } // If returns false then error occurred. + echo("not uploaded and error occured"); + //var_dump($file); + var_dump($target); + return null; + } else if (gettype($file) === 'string') { + // We will name the file based on timestamp + $time = time(); + $filename = $time . '.png'; + $dest = $canopy_path . $filename; + //var_dump($dest); + $status = file_put_contents($dest, $file); + if (!$status) { + // error has occured + throw new Exception('Slideshow: File failed to upload'); + return null; + } + return './' . $slideshow_path . $filename; + } } - - public function sort($slide, $new_position) + + private function removeUpload($slideId, $path) { - $sortable = new \phpws2\Sortable('ss_slide', 'sorting'); - $sortable->startAtZero(); - $sortable->setAnchor('sectionId', $slide->sectionId); - $sortable->moveTo($slide->getId(), $new_position); + if (empty($path)) { + return false; + } + try { + unlink($path); + $dir = SLIDESHOW_MEDIA_DIRECTORY . $slideId . '/'; + return true; + } catch (\Exception $e) { + echo("A fatal error has occured: " . $e); + // uncomment to show stacktrace as an array + // var_dump($e); + } + return false; } } diff --git a/class/Resource/BaseResource.php b/class/Resource/BaseAbstract.php similarity index 94% rename from class/Resource/BaseResource.php rename to class/Resource/BaseAbstract.php index 0369574..1c25153 100644 --- a/class/Resource/BaseResource.php +++ b/class/Resource/BaseAbstract.php @@ -9,7 +9,7 @@ use \phpws2\Database; -class BaseResource extends \phpws2\Resource +class BaseAbstract extends \phpws2\Resource { public function __set($name, $value) diff --git a/class/Resource/DecisionResource.php b/class/Resource/DecisionResource.php deleted file mode 100644 index 00c34d4..0000000 --- a/class/Resource/DecisionResource.php +++ /dev/null @@ -1,75 +0,0 @@ - - * - * @license http://opensource.org/licenses/lgpl-3.0.html - */ - -namespace slideshow\Resource; - -class DecisionResource extends BaseResource -{ - static $allowedTags = array( - 'strong', 's', 'b', 'a', 'i', 'u', 'ul', 'ol', 'li', 'table', 'tr', - 'td', 'tbody', 'dd', 'dt', 'dl', 'p', 'br', 'div', 'span', 'blockquote', - 'th', 'tt', 'img', 'pre', 'hr', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', - 'fieldset', 'legend', 'code', 'em', 'iframe', 'embed', 'audio', 'video', - 'source', 'object', 'sup', 'sub', 'param', 'strike', 'del', 'abbr', - 'small'); - - /** - * Option listed on the button - * @var \phpws2\Variable\StringVar - */ - protected $title; - - /** - * Message shown when decision made - * @var \phpws2\Variable\StringVar - */ - protected $message; - - /** - * User can continue after picking this decision - * @var \phpws2\Variable\BooleanVar - */ - protected $next; - - /** - * Slide this decision is associated with - * @var \phpws2\Variable\IntegerVar - */ - protected $slideId; - - /** - * Display order of slide - * @var \phpws2\Variable\SmallInteger - */ - protected $sorting; - protected $table = 'ss_decision'; - - public function __construct() - { - parent::__construct(); - $this->title = new \phpws2\Variable\StringVar(null, 'title'); - $this->title->setLimit(50); - $this->message = new \phpws2\Variable\StringVar(null, 'message'); - $this->message->allowEmpty(); - $this->message->addAllowedTags(self::$allowedTags); - $this->next = new \phpws2\Variable\BooleanVar(true, 'next'); - $this->slideId = new \phpws2\Variable\IntegerVar(null, 'slideId'); - $this->sorting = new \phpws2\Variable\SmallInteger(0, 'sorting'); - } - -} diff --git a/class/Resource/QuizResource.php b/class/Resource/QuizResource.php new file mode 100644 index 0000000..9798acd --- /dev/null +++ b/class/Resource/QuizResource.php @@ -0,0 +1,74 @@ +. + * Connor plunkett
-
- {empty(this.props.checked) ? null :
- }
-
- {this.props.label}
-
- )
- }
-}
-
-BigCheckbox.propTypes = {
- label: PropTypes.string,
- checked: PropTypes.oneOfType([PropTypes.bool,PropTypes.string,PropTypes.number]),
- handle: PropTypes.func.isRequired
-}
-
-BigCheckbox.defaultProps = {
- checked: false
-}
diff --git a/javascript/AddOn/Form/InputField.jsx b/javascript/AddOn/Form/InputField.jsx
deleted file mode 100644
index 1d7ddf6..0000000
--- a/javascript/AddOn/Form/InputField.jsx
+++ /dev/null
@@ -1,179 +0,0 @@
-'use strict'
-import React, {Component} from 'react'
-import PropTypes from 'prop-types'
-
-/**
- * When using errorMessage with required, be sure to clear
- * the errorMessage prop on successful input
- */
-
-export default class InputField extends Component {
- constructor(props) {
- super(props)
-
- this.state = {
- empty: false
- }
-
- this.focus = this.focus.bind(this)
- this.handleBlur = this.handleBlur.bind(this)
- this.handleChange = this.handleChange.bind(this)
- }
-
- handleBlur(e) {
- const value = e.target.value
- if (value.length === 0) {
- this.setState({empty: true})
- if (this.props.onEmpty) {
- this.props.onEmpty()
- }
- } else {
- this.setState({empty: false})
- }
- if (this.props.blur) {
- this.props.blur()
- }
- }
-
- componentDidMount() {
- if (this.props.focus === true) {
- this.focus()
- }
- }
-
- focus() {
- this.textInput.focus()
- }
-
- emptyMessage() {
- if (this.props.label.length > 0) {
- return this.props.label + ' may not be empty'
- } else {
- return 'Field may not be empty'
- }
- }
-
- select(event) {
- event.target.select()
- }
-
- handleChange(e) {
- const value = e.target.value
- if (value.length > 0) {
- this.setState({empty: false})
- }
- this.props.change(e)
- }
-
- render() {
- let inputClass
- if ((this.props.errorMessage !== null && this.props.errorMessage !== '') || (this.state.empty && this.props.required && this.props.disableRequireCheck === false)) {
- inputClass = 'form-control error-highlight'
- } else {
- inputClass = 'form-control'
- }
- let required = this.props.required
- ?
- {this.props.label.length > 0
- ?
- : undefined}
- {input}
- {errorMessage
- ?
- )
- }
-}
-
-InputField.defaultProps = {
- label: '',
- type: 'text',
- name: '',
- value: '',
- change: null,
- blur: null,
- required: false,
- id: null,
- autocomplete: false,
- placeholder: null,
- errorMessage: '',
- disabled: false,
- size: null,
- maxLength: null,
- selectOnClick: false,
- wrap: null,
- onEmpty: null,
- flagEmpty: true,
- disableRequireCheck: false,
- focus : false,
- styles: null,
-}
-
-InputField.propTypes = {
- name: PropTypes.string,
- label: PropTypes.string,
- type: PropTypes.string,
- value: PropTypes.oneOfType([PropTypes.string, PropTypes.number,]),
- change: PropTypes.func.isRequired,
- blur: PropTypes.func,
- placeholder: PropTypes.string,
- errorMessage: PropTypes.string,
- iid: PropTypes.string,
- autocomplete: PropTypes.bool,
- required: PropTypes.bool,
- disabled: PropTypes.bool,
- size: PropTypes.number,
- maxLength: PropTypes.number,
- wrap: PropTypes.func,
- selectOnClick: PropTypes.bool,
- onEmpty: PropTypes.func,
- flagEmpty: PropTypes.bool,
- disableRequireCheck: PropTypes.bool,
- focus: PropTypes.bool,
- styles: PropTypes.object,
-}
-
-export const RequiredIcon = () => {
- return
-}
diff --git a/javascript/AddOn/Html/Modal.jsx b/javascript/AddOn/Html/Modal.jsx
deleted file mode 100644
index dce8695..0000000
--- a/javascript/AddOn/Html/Modal.jsx
+++ /dev/null
@@ -1,57 +0,0 @@
-'use strict'
-import React, {Component} from 'react'
-import PropTypes from 'prop-types'
-import ReactModal from 'react-modal'
-
-export default class Modal extends Component {
- constructor(props) {
- super(props)
- this.state = {}
- }
-
- render() {
- const styles = {
- overlay: {
- backgroundColor: 'rgba(0,0,0,.7)'
- },
- content: {
- height: this.props.height,
- width: this.props.width,
- margin: '0 auto',
- padding: '0px 3px 3px 3px',
- borderRadius: '8px',
- },
- }
-
- const modalContent = {
- padding: '6px'
- }
- return (
- {errorMessage}
- : null}
-
-
-
-
-
-
-
-
- {this.props.children}
-
-
-
- )
- }
-}
-
-Overlay.propTypes = {
- children: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
- close: PropTypes.func.isRequired,
- title: PropTypes.string
-}
diff --git a/javascript/AddOn/Html/Waiting.jsx b/javascript/AddOn/Html/Waiting.jsx
deleted file mode 100644
index 9ae783e..0000000
--- a/javascript/AddOn/Html/Waiting.jsx
+++ /dev/null
@@ -1,34 +0,0 @@
-import React, {Component} from 'react'
-import PropTypes from 'prop-types'
-
-class Waiting extends Component {
- render() {
- let message
- if (this.props.message.length === 0) {
- message = Loading {this.props.label}...
- } else {
- message = this.props.message
- }
- return (
-
-
-
-
-
- {this.props.title}
-
- {this.props.children}
-
-
- {message}
-
- )
- }
-}
-
-Waiting.defaultProps = {
- label : ''
-}
-
-Waiting.propTypes = {
- label: PropTypes.string,
- message : PropTypes.string
-}
-
-Waiting.defaultProps = {
- message: '',
- label: 'data'
-}
-
-export default Waiting
diff --git a/javascript/AddOn/Mixin/Abstract.jsx b/javascript/AddOn/Mixin/Abstract.jsx
deleted file mode 100644
index 2360121..0000000
--- a/javascript/AddOn/Mixin/Abstract.jsx
+++ /dev/null
@@ -1,61 +0,0 @@
-'use strict'
-import React, {Component} from 'react'
-import empty from '../Empty.js'
-
-/* global $ */
-
-export default class Abstract extends Component {
- constructor(props) {
- super(props)
- this.resourceName = null
- this.state = {
- resource: {},
- }
- this.setValue = this.setValue.bind(this)
- this.patchValue = this.patchValue.bind(this)
- }
-
- setValue(varname, value) {
- if (typeof value === 'object' && value.target !== undefined) {
- value = value.target.value
- }
- let resource = this.state.resource
- resource[varname] = value
- this.setState({resource})
- }
-
- patchValue(varname, updateOnEmpty = true) {
- if (this.resourceName === null) {
- throw 'No resourceName set'
- }
- if (this.state.resource.id === undefined) {
- throw('Resource is missing id')
- }
-
- const resourceValue = this.state.resource[varname]
-
- if (!updateOnEmpty && empty(resourceValue)) {
- return
- }
-
- $.ajax({
- url: `./slideshow/${this.resourceName}/${this.state.resource.id}`,
- data: {
- varname: varname,
- value: resourceValue
- },
- dataType: 'json',
- type: 'patch',
- success: function () {}.bind(this),
- error: function () {}.bind(this)
- })
- }
-
- render() {
- return (
-
- )
- }
-}
-
-Abstract.propTypes = {}
diff --git a/javascript/Config/Summernote.js b/javascript/Config/Summernote.js
deleted file mode 100644
index ceb68e5..0000000
--- a/javascript/Config/Summernote.js
+++ /dev/null
@@ -1,44 +0,0 @@
-const toolbar = [
- [
- 'style', ['style'],
- ],
- [
- 'font',
- [
- 'bold', 'italic', 'clear',
- ],
- ],
- [
- 'color', ['color'],
- ],
- [
- 'fontname', ['fontsize'],
- ],
- [
- 'para',
- [
- 'ul', 'ol', 'paragraph',
- ],
- ],
- [
- 'table', ['table'],
- ],
- [
- 'insert',
- [
- 'link', 'picture', 'video',
- ],
- ],
- [
- 'view',
- [
- 'fullscreen', 'codeview',
- ],
- ],
-]
-
-export const options = {
- minHeight: 400,
- dialogsInBody: true,
- toolbar: toolbar,
-}
diff --git a/javascript/DecisionButtons.js b/javascript/DecisionButtons.js
deleted file mode 100644
index 0a20bf1..0000000
--- a/javascript/DecisionButtons.js
+++ /dev/null
@@ -1,13 +0,0 @@
-const makeActive = function() {
- let slideTimeout = setTimeout(function(){
- $('.controls').addClass('active')
- window.clearTimeout(slideTimeout)
- }, 3000)
-}
-
-makeActive()
-
-Reveal.addEventListener('slidechanged', function(event){
- $('.controls').removeClass('active')
- makeActive();
-})
diff --git a/javascript/Decisions/Decisions.jsx b/javascript/Decisions/Decisions.jsx
deleted file mode 100644
index 637396f..0000000
--- a/javascript/Decisions/Decisions.jsx
+++ /dev/null
@@ -1,18 +0,0 @@
-'use strict'
-import React, {Component} from 'react'
-import PropTypes from 'prop-types'
-
-export default class Decisions extends Component {
- constructor(props) {
- super(props)
- this.state = {}
- }
-
- render() {
- return (
-
- )
- }
-}
-
-Decisions.propTypes = {}
diff --git a/javascript/Edit/AddOn/AnimateDropdown.jsx b/javascript/Edit/AddOn/AnimateDropdown.jsx
new file mode 100644
index 0000000..e0da052
--- /dev/null
+++ b/javascript/Edit/AddOn/AnimateDropdown.jsx
@@ -0,0 +1,33 @@
+import React, {useState, useEffect} from 'react'
+import {Dropdown} from 'react-bootstrap'
+
+export default function AnimateDropdown(props) {
+ function setAnimation(a) {
+ $.ajax({
+ url: './slideshow/Show/' + props.id,
+ type: 'PATCH',
+ dataType: 'json',
+ data: {animation: a},
+ success: () => console.log("animation changed to ", a),
+ error: (req, res) => console.log(res)
+ })
+ props.setAnimation(a)
+ }
+
+ return (
+ Color
+ +
+
+
+
+ )
+
+ const imgStyle = {
+ height: this.props.height,
+ width: this.props.width,
+ bjectFit: 'scale-down',
+ }
+
+ return (
+
+
+ 
+
+
+
+ )
+ }
+}
+
+ImageColumn.propTypes = {
+ remove: PropTypes.func,
+ align: PropTypes.func,
+ mediaAlign: PropTypes.string,
+ height: PropTypes.string,
+ width: PropTypes.string,
+ src: PropTypes.string,
+}
diff --git a/javascript/Edit/DraftEditor.jsx b/javascript/Edit/DraftEditor.jsx
new file mode 100644
index 0000000..ce1ddc9
--- /dev/null
+++ b/javascript/Edit/DraftEditor.jsx
@@ -0,0 +1,199 @@
+import React, {useEffect, useState} from 'react'
+import {
+ Editor,
+ EditorState,
+ ContentState,
+ RichUtils,
+ KeyBindingUtil,
+ convertToRaw,
+ convertFromRaw,
+} from 'draft-js'
+import CustomBlockFn from '../Resources/Draft/CustomBlockFn'
+import CustomStyleMap from '../Resources/Draft/CustomStyleMap'
+import decorator from '../Resources/Draft/LinkDecorator'
+
+import Toolbar from './Toolbar/Toolbar'
+import ImageC from './AddOn/ImageColumn'
+import PropTypes from 'prop-types'
+
+//const {hasCommandModifier} = KeyBindingUtil
+
+/** Props:
+ * readOnly : boolean // Ensures the editor is non-ediable and the toolbar doesn't appear
+ * content : Object
+ {props.readOnly ? undefined : (
+ setEditorState(eState)}
+ getEditorState={() => editorState}
+ saveMedia={props.saveMedia}
+ saveBackground={props.saveBackground}
+ insertMedia={props.insertMedia}
+ validate={props.validate}
+ mediaView={props.mediaView}
+ mediaCancel={props.mediaCancel}
+ mediaOpen={props.mediaOpen}
+ />
+ )}
+
+
+ )
+}
+
+DraftEditor.propTypes = {
+ currentSlide: PropTypes.number,
+ content: PropTypes.object,
+ readOnly: PropTypes.bool,
+ saveContentState: PropTypes.func,
+ removeMedia: PropTypes.func,
+ saveMedia: PropTypes.func,
+ saveBackground: PropTypes.func,
+ validate: PropTypes.func,
+ mediaView: PropTypes.bool,
+ mediaCancel: PropTypes.func,
+ mediaOpen: PropTypes.func
+}
diff --git a/javascript/Edit/Edit.jsx b/javascript/Edit/Edit.jsx
new file mode 100644
index 0000000..3701302
--- /dev/null
+++ b/javascript/Edit/Edit.jsx
@@ -0,0 +1,464 @@
+'use strict'
+import React, {Component} from 'react'
+import EditView from './EditView.jsx'
+import NavBar from './NavBar.jsx'
+import NavCards from './NavCards.jsx'
+import {Button, InputGroup, FormControl} from 'react-bootstrap'
+import {getPageId} from '../api/getPageId'
+import {fetchQuiz, postQuiz} from '../api/quiz'
+import domtoimage from '../Resources/dom-to-image'
+import Skeleton from '../Resources/Components/Skeleton.jsx'
+
+/* global $ */
+
+export default class Edit extends Component {
+ constructor() {
+ super()
+
+ let showId = getPageId()
+
+ this.state = {
+ currentSlide: 0,
+ id: showId,
+ showTitle: 'Edit:',
+ editTitleView: false,
+ content: [
+ {
+ saveContent: undefined,
+ quizContent: undefined,
+ isQuiz: false,
+ background: '#E5E7E9',
+ media: {imgUrl: '', align: ''},
+ slideId: 0,
+ thumb: undefined,
+ },
+ ],
+ slideTimer: 2,
+ loaded: false,
+ animation: 'None',
+ }
+
+ this.save = this.save.bind(this)
+ this.load = this.load.bind(this)
+ this.loadQuiz = fetchQuiz.bind(this)
+ this.saveDomScreen = this.saveDomScreen.bind(this)
+ this.setCurrentSlide = this.setCurrentSlide.bind(this)
+ this.addNewSlide = this.addNewSlide.bind(this)
+ this.addNewQuiz = this.addNewQuiz.bind(this)
+ this.pushNewSlide = this.pushNewSlide.bind(this)
+ this.deleteCurrentSlide = this.deleteCurrentSlide.bind(this)
+ this.moveSlide = this.moveSlide.bind(this)
+ this.saveTitle = this.saveTitle.bind(this)
+ this.saveContentState = this.saveContentState.bind(this)
+ this.saveQuizContent = this.saveQuizContent.bind(this)
+ this.saveMedia = this.saveMedia.bind(this)
+ this.removeMedia = this.removeMedia.bind(this)
+ this.saveBackground = this.saveBackground.bind(this)
+ }
+
+ componentDidMount() {
+ this.load()
+ }
+
+ async save() {
+ this.saveDomScreen()
+ await $.ajax({
+ url: './slideshow/Slide/' + window.sessionStorage.getItem('id'),
+ data: {
+ slides: [...this.state.content],
+ },
+ type: 'put',
+ dataType: 'json',
+ success: (slideIds) => {
+ // Update slideIds
+ let c = [...this.state.content]
+ slideIds.map((id, i) => {
+ c[i].slideId = id
+ })
+ this.setState({content: c}, () => {
+ window.sessionStorage.setItem(
+ 'slideId',
+ this.state.content[this.state.currentSlide].slideId
+ )
+ })
+ },
+ error: (req, err) => {
+ alert('Failed to save show ' + window.sessionStorage.getItem('id'))
+ document.write(req.responseJSON.backtrace[0].args[1].xdebug_message)
+ console.error(req, err.toString())
+ },
+ })
+ }
+
+ async load() {
+ $.ajax({
+ url: './slideshow/Slide/edit/?id=' + window.sessionStorage.getItem('id'),
+ type: 'GET',
+ dataType: 'json',
+ success: async function (data) {
+ let loaded = data['slides']
+ if (loaded[0] != undefined) {
+ window.sessionStorage.setItem('slideId', loaded[0].id)
+ let showContent = []
+ for (let i = 0; i < loaded.length; i++) {
+ let saveC = undefined
+ let quizC = null
+ let qId = -1
+ // We may not need a quizConv anymore...
+ let isQ = this.quizConv(loaded[i].isQuiz)
+ if (!isQ) {
+ saveC = loaded[i].content
+ } else {
+ qId = Number(loaded[i].quizId)
+ quizC = await this.loadQuiz(qId)
+ }
+ showContent.push({
+ isQuiz: isQ,
+ saveContent: saveC,
+ quizContent: quizC,
+ background: loaded[i].background,
+ thumb: JSON.parse(loaded[i].thumb || '{}'), // Ensure that this isn't undefined
+ slideId: Number(loaded[i].id),
+ media: JSON.parse(loaded[i].media || '{}'),
+ quizId: qId,
+ })
+ }
+ this.setState({
+ content: showContent,
+ id: loaded[0].showId,
+ loaded: true,
+ })
+ } else {
+ this.save()
+ this.setState({loaded: true})
+ }
+ }.bind(this),
+ error: function (req, err) {
+ alert('Failed to load data.')
+ console.error(req, err.toString())
+ }.bind(this),
+ })
+
+ $.ajax({
+ url:
+ './slideshow/Show/present/?id=' + window.sessionStorage.getItem('id'),
+ type: 'GET',
+ dataType: 'json',
+ success: (data) => {
+ this.setState({
+ slideTimer: Number(data[0].slideTimer),
+ showTitle: data[0].title,
+ animation: data[0].animation,
+ })
+ },
+ error: (request, response) => {
+ console.log(request)
+ console.error(response)
+ },
+ })
+ }
+
+ saveDomScreen(domNode, index) {
+ if (domNode === undefined) {
+ domNode = document.getElementById('editor')
+ }
+ if (domNode != null) {
+ index = domNode.getAttribute('data-key')
+ } else {
+ return
+ }
+ if (domNode.getAttribute('data-key') == index) {
+ domtoimage
+ .toPng(domNode)
+ .then((dataUrl) => {
+ let img = new Image()
+ img.src = dataUrl
+ img.width = 200
+ img.height = 100
+ let fData = new FormData()
+ fData.append('thumb', img.src)
+ fData.append('slideId', this.state.content[index].slideId)
+ $.post({
+ url:
+ './slideshow/Slide/thumb/' + window.sessionStorage.getItem('id'),
+ type: 'POST',
+ data: fData,
+ processData: false,
+ contentType: false,
+ success: (path) => {
+ let c = [...this.state.content]
+ c[index].thumb = JSON.parse(path)
+ this.setState({content: c})
+ },
+ error: (req, res) => {
+ console.log(req)
+ console.error(res)
+ },
+ })
+ })
+ .catch(function (error) {
+ console.error(error)
+ })
+ }
+ }
+
+ setCurrentSlide(val) {
+ this.setState({currentSlide: val}, () => this.save())
+ }
+
+ addNewSlide(quizId) {
+ if (typeof quizId != 'number') quizId = -1 // an event is bindinded on some calls which causes errors
+ /* This function adds to the stack of slides held within state.content */
+ const index = this.state.currentSlide + 1
+ const newSlide = {
+ saveContent: undefined,
+ quizContent: undefined,
+ isQuiz: quizId !== -1,
+ background: '#E5E7E9',
+ quizId: quizId,
+ }
+ let copy = [...this.state.content]
+ copy.splice(index, 0, newSlide)
+ this.setState(
+ {
+ //currentSlide: index,
+ content: copy,
+ },
+ () => {
+ this.save()
+ this.setCurrentSlide(index)
+ }
+ )
+ }
+
+ async addNewQuiz() {
+ const id = await postQuiz()
+ sessionStorage.setItem('quizId', id)
+ this.addNewSlide(id)
+ }
+
+ // addNewSlide to the end
+ pushNewSlide() {
+ const index = this.state.content.length
+ const newSlide = {
+ saveContent: undefined,
+ quizContent: undefined,
+ isQuiz: false,
+ background: '#E5E7E9',
+ }
+ let copy = [...this.state.content]
+ copy.push(newSlide)
+ this.setState(
+ {
+ //currentSlide: index,
+ content: copy,
+ },
+ () => this.setCurrentSlide(index)
+ )
+ }
+
+ deleteCurrentSlide() {
+ let copy = [...this.state.content]
+ let isQuiz = copy[this.state.currentSlide].isQuiz
+ if (isQuiz) {
+ let quizId = copy[this.state.currentSlide].quizId
+ $.ajax({
+ url: `./slideshow/Quiz/${quizId}`,
+ type: 'delete',
+ success: () => {
+ console.log('quiz deleted!!!')
+ },
+ error: (req, res) => {
+ console.error(res)
+ },
+ })
+ }
+ let newIndex = this.state.currentSlide
+ // splice one slide at the current index
+ copy.splice(this.state.currentSlide, 1)
+ // Current slide is the first slide and there are no other slides
+ if (this.state.currentSlide === 0 && this.state.content.length == 1) {
+ // set the array to an empty slide
+ copy = [{saveContent: undefined, isQuiz: false, background: '#E5E7E9'}]
+ }
+ // If we are deleting the last slide
+ if (this.state.currentSlide == copy.length) {
+ newIndex = this.state.currentSlide - 1
+ }
+
+ $.ajax({
+ url: './slideshow/Slide/' + window.sessionStorage.getItem('id'),
+ type: 'delete',
+ data: {
+ slideId: this.state.content[this.state.currentSlide].slideId,
+ type: 'slide',
+ },
+ error: (req, res) => {
+ console.error(req, res.toString())
+ },
+ })
+
+ this.setState(
+ {
+ content: copy,
+ currentSlide: newIndex,
+ } /*() => this.setCurrentSlide(newIndex)*/
+ )
+ }
+
+ moveSlide(fromIndex, toIndex) {
+ let c = [...this.state.content]
+ let slide = c[fromIndex]
+ c.splice(fromIndex, 1)
+ c.splice(toIndex, 0, slide)
+ this.setState({content: c})
+ }
+
+ saveTitle() {
+ $.ajax({
+ url: './slideshow/Show/' + window.sessionStorage.getItem('id'),
+ data: {title: this.state.showTitle},
+ type: 'put',
+ dataType: 'json',
+ success: function () {
+ this.setState({editTitleView: false})
+ }.bind(this),
+ error: function (req, err) {
+ alert('Failed to save data.')
+ console.error(req, err.toString())
+ }.bind(this),
+ })
+ }
+
+ saveContentState(saveContent) {
+ if (saveContent != undefined) {
+ let c = [...this.state.content]
+ c[this.state.currentSlide].saveContent = saveContent
+ this.setState({content: c})
+ }
+ }
+
+ saveQuizContent(quizContent) {
+ let c = [...this.state.content]
+ c[this.state.currentSlide].quizContent = quizContent
+ this.setState({content: c})
+ }
+
+ saveMedia(imgUrl, align) {
+ let c = [...this.state.content]
+ c[this.state.currentSlide].media = {imgUrl: imgUrl, align: align}
+ this.setState({content: c}, () => this.save())
+ }
+
+ removeMedia() {
+ $.ajax({
+ url: './slideshow/Slide/' + window.sessionStorage.getItem('id'),
+ method: 'delete',
+ data: {
+ type: 'image',
+ slideId: this.state.content[this.state.currentSlide].slideId,
+ },
+ error: (req, res) => {
+ console.log(res.toString())
+ },
+ })
+ let c = [...this.state.content]
+ c[this.state.currentSlide].media = ''
+ this.setState({content: c})
+ }
+
+ saveBackground(newBackground) {
+ let c = [...this.state.content]
+ c[this.state.currentSlide].background = newBackground
+ this.setState({content: c}, () => this.save())
+ }
+
+ quizConv(quizT) {
+ // When we load from the data base the isQuiz boolean
+ // is loaded in as a string or a number
+ // We need to handle that and bring it back to a boolean
+ if (quizT == undefined) return false // initial load
+ if (typeof JSON.parse(quizT) === 'number') return JSON.parse(quizT) != 0
+ return typeof JSON.parse(quizT) === 'boolean' ? quizT : JSON.parse(quizT)
+ }
+
+ render() {
+ if (!this.state.loaded) return +
+
+
+ {imgAlign === 'left' ? imgC : undefined}
+
+
+
+ {imgAlign === 'right' ? imgC : undefined}
+
+ this.setState({ hasFocus: true })}
+ //onBlur={() => this.setState({ hasFocus: false })}
+ customStyleMap={styles}
+ blockStyleFn={CustomBlockFn}
+ spellCheck={true}
+ readOnly={props.readOnly}
+ />
+
+
+ {this.state.showTitle}
+ this.setState({editTitleView: true})}
+ style={{paddingLeft: '10px', cursor: 'pointer'}}>
+
+
+
+ )
+ }
+
+ return (
+
+ this.setState({animation: a})}
+ />
+
+ )
+ }
+}
diff --git a/javascript/Edit/EditView.jsx b/javascript/Edit/EditView.jsx
new file mode 100644
index 0000000..ff508f2
--- /dev/null
+++ b/javascript/Edit/EditView.jsx
@@ -0,0 +1,199 @@
+import React, { useState } from 'react'
+import PropTypes from 'prop-types'
+
+import QuizEdit from './Quiz/QuizEdit.jsx'
+import QuizView from './Quiz/QuizView.jsx'
+import Editor from './DraftEditor'
+import ToolbarQ from './Toolbar/QuizToolbar.jsx'
+import { Modal } from 'react-bootstrap'
+import Dropzone from 'react-dropzone-uploader'
+import ImageC from './AddOn/ImageColumn'
+
+
+const EditView = ({
+ content,
+ currentSlide,
+ saveContentState,
+ saveMedia,
+ removeMedia,
+ saveBackground,
+ saveQuizContent,
+ load,
+}) => {
+ const [editView, setEditView] = useState(false)
+ const [mediaView, setMediaView] = useState(false)
+ //const [mediaAlign, setMediaAlign] = useState('right')
+ const mediaAlign = 'right'
+
+
+ function mediaOpen() {
+ setMediaView(true)
+ }
+
+ function mediaCancel() {
+ setMediaView(false)
+ }
+
+ function validate({ meta }) {
+ if (meta.status === 'rejected_file_type') {
+ alert('Sorry, this file type is not supported')
+ }
+ }
+
+ function insertMedia(fileWithMeta) {
+ let showId = Number(window.sessionStorage.getItem('id'))
+ let slideId = Number(window.sessionStorage.getItem('slideId'))
+ // Handle AJAX
+ let fMeta = fileWithMeta[0]
+ let formData = new FormData()
+ formData.append('media', fMeta.file)
+ formData.append('slideId', slideId)
+ formData.append('id', showId)
+
+ $.ajax({
+ url: './slideshow/Slide/image/' + window.sessionStorage.getItem('id'),
+ type: 'post',
+ data: formData,
+ processData: false,
+ contentType: false,
+ success: (imageUrl) => {
+ saveMedia(JSON.parse(imageUrl), 'right')
+ if (content.isQuiz) {
+ alert("Image has been Saved")
+ }
+ },
+ error: (req, res) => {
+ console.log(req)
+ console.error(res)
+ alert(
+ 'An error has occured with this image. Please try a different image.'
+ )
+ },
+ })
+ setMediaView(false)
+ }
+
+
+ let imgC = undefined
+ let imgAlign = undefined
+ if (content.media != undefined) {
+ imgC = (
+ {cardTitle}
+
+
+
+ setEditView(!editView)}
+ view={editView}
+ />
+
+ setEditView(false)}
+ load={load}
+ validate={validate}
+ insertMedia={insertMedia}
+ changeBackground={saveBackground}
+ mediaView={mediaView}
+ mediaCancel={mediaCancel}
+ mediaOpen={mediaOpen}
+ />
+
+ )
+ }
+ return (
+
+
+ )
+}
+
+EditView.propTypes = {
+ content: PropTypes.object,
+ currentSlide: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+ saveMedia: PropTypes.func,
+ removeMedia: PropTypes.func,
+ saveContentState: PropTypes.func,
+ saveBackground: PropTypes.func,
+ saveQuizContent: PropTypes.func,
+ load: PropTypes.func,
+ insertMedia: PropTypes.func,
+ validate: PropTypes.func,
+ mediaView: PropTypes.bool,
+ mediaCancel: PropTypes.func,
+ mediaOpen: PropTypes.func
+}
+
+export default EditView
diff --git a/javascript/Edit/NavBar.jsx b/javascript/Edit/NavBar.jsx
new file mode 100644
index 0000000..7353c45
--- /dev/null
+++ b/javascript/Edit/NavBar.jsx
@@ -0,0 +1,97 @@
+'use strict'
+import React, {Component} from 'react'
+import PropTypes from 'prop-types'
+import {
+ Button,
+ ButtonGroup,
+ ButtonToolbar,
+ Dropdown,
+ DropdownButton,
+} from 'react-bootstrap'
+
+import Settings from './Settings.jsx'
+
+export default class NavBar extends Component {
+ constructor() {
+ super()
+
+ this.returnToShowList = this.returnToShowList.bind(this)
+ this.handlePresent = this.handlePresent.bind(this)
+ }
+
+ async returnToShowList() {
+ await this.props.saveDB()
+ window.location.href = './slideshow/Show/list'
+ }
+
+ async handlePresent() {
+ if (this.props.id == -1) {
+ alert(
+ "A problem has occurred with your browser's session. This is most likely caused by an attempt to present an empty show."
+ )
+ //window.location.href = './slideshow/Show/list'
+ } else {
+ await this.props.saveDB()
+ window.sessionStorage.setItem('id', this.props.id)
+ window.location.href = './slideshow/Slide/Present/?id=' + this.props.id
+ }
+ }
+
+ render() {
+ return (
+
+ setEditView(!editView)}
+ view={editView}
+ />
+
+
+
+
+
+ {imgAlign === 'left' ? imgC : undefined}
+
+
+ setEditView(true)}
+ />
+
+ {imgAlign === 'right' ? imgC : undefined}
+
+
+
+
+
+
+
+
+
+ Insert Slide
+
+
+ Insert Quiz
+
+
+ Delete Slide
+
+
+
+
+
+
+ )
+ }
+}
+
+NavBar.propTypes = {
+ insertSlide: PropTypes.func,
+ insertQuiz: PropTypes.func,
+ deleteSlide: PropTypes.func,
+ currentSlide: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+ saveDB: PropTypes.func,
+ id: PropTypes.number,
+ saveBackground: PropTypes.func,
+ currentColor: PropTypes.string,
+ slideTimer: PropTypes.number,
+}
diff --git a/javascript/Edit/NavCards.jsx b/javascript/Edit/NavCards.jsx
new file mode 100644
index 0000000..488fd8a
--- /dev/null
+++ b/javascript/Edit/NavCards.jsx
@@ -0,0 +1,186 @@
+'use strict'
+import React, {Component} from 'react'
+import PropTypes from 'prop-types'
+import './'
+
+export default class NavCards extends Component {
+ constructor(props) {
+ super(props)
+ this.state = {
+ currentSlide: this.props.currentSlide,
+ dragItem: -1,
+ dragLineIndex: -1,
+ addSlideHover: false,
+ }
+ this.handleSlide = this.handleSlide.bind(this)
+ this.handleNewSlide = this.handleNewSlide.bind(this)
+ }
+
+ componentDidMount() {
+ document.addEventListener(
+ 'dragenter',
+ (event) => {
+ if (
+ event.target.className === 'thumb' &&
+ Number(event.target.id) >= 0
+ ) {
+ this.setState({dragLineIndex: Number(event.target.id)})
+ }
+ },
+ false
+ )
+
+ document.addEventListener(
+ 'dragstart',
+ (event) => {
+ let img = event.target.cloneNode(true)
+ // TODO: insert custom image or logo
+ // right now i pass the slide and make it render off screen
+ event.dataTransfer.setDragImage(img, -5000, 100)
+ this.setState({
+ dragLineIndex: this.props.currentSlide,
+ dragItem: event.target.id,
+ })
+ },
+ false
+ )
+
+ document.addEventListener(
+ 'dragend',
+ (event) => {
+ //event.target.style.display = "initial"
+ this.props.moveSlide(this.state.dragItem, this.state.dragLineIndex)
+ this.props.setCurrentSlide(this.state.dragLineIndex)
+ this.setState({dragLineIndex: -1})
+ },
+ false
+ )
+ }
+
+ componentWillUnmount() {
+ document.removeEventListener('dragenter')
+ document.removeEventListener('dragstart')
+ document.removeEventListener('dragend')
+ }
+
+ handleSlide(event) {
+ this.props.setCurrentSlide(event.target.value - 1)
+ }
+
+ handleNewSlide() {
+ this.props.addNewSlide()
+ }
+
+ render() {
+ let data = this.props.content.map((slide, i) => {
+ let key =
+ Math.random().toString(36).substring(2, 15) +
+ Math.random().toString(36).substring(2, 15) //#1E90FF
+ let highlight =
+ this.props.currentSlide == i
+ ? {border: 'solid 3px #337ab7', borderRadius: 3, zIndex: -1}
+ : {padding: '3px'}
+ let top = this.state.dragItem >= this.state.dragLineIndex
+ let bar =
+ this.state.dragLineIndex != -1 && i == this.state.dragLineIndex
+ ? {border: 'solid 1px #337ab7'}
+ : {border: 'solid 1px white'}
+ const imgSrc =
+ typeof slide.thumb == 'string'
+ ? slide.thumb
+ : 'mod/slideshow/img/loading_placeholder.png'
+ return (
+
+ {top ? : undefined}
+ this.props.setCurrentSlide(i)}
+ key={i}>
+ 
+
+ {!top ? : undefined}
+
+ )
+ })
+
+ return (
+ this.props.saveDomScreen()}>
+ {data}
+
+ )
+ }
+}
+
+const cardStyle = {
+ width: 175,
+ height: 100,
+ marginBottom: 5,
+ marginTop: 5,
+}
+
+const addSlideStyle = {
+ border: 'dashed 1px ',
+ width: 175,
+ height: 100,
+ textAlign: 'center',
+ justifyContent: 'center',
+ color: '#337ab7',
+ marginBottom: 20,
+ marginTop: 10,
+}
+
+const addSlideHover = {
+ border: 'solid 3px',
+ color: '007bff',
+ width: 175,
+ height: 100,
+ textAlign: 'center',
+ justifyContent: 'center',
+ marginBottom: 20,
+ marginTop: 10,
+ cursor: 'pointer',
+}
+
+const containerStyle = {
+ overflowY: 'scroll',
+ height: 600,
+ maxWidth: 210,
+ marginTop: 75,
+ scrollbarWidth: 'thin',
+ marginBottom: 10,
+}
+
+NavCards.propTypes = {
+ slides: PropTypes.array,
+ currentSlide: PropTypes.number,
+ setCurrentSlide: PropTypes.func,
+ addNewSlide: PropTypes.func,
+ moveSlide: PropTypes.func,
+}
diff --git a/javascript/Edit/OldEditView.jsx b/javascript/Edit/OldEditView.jsx
new file mode 100644
index 0000000..e85358d
--- /dev/null
+++ b/javascript/Edit/OldEditView.jsx
@@ -0,0 +1,139 @@
+'use strict'
+import React, { Component } from 'react'
+import PropTypes from 'prop-types'
+
+import QuizEdit from './Quiz/QuizEdit.jsx'
+import QuizView from './Quiz/QuizView.jsx'
+
+import Editor from './DraftEditor'
+import ToolbarC from './Toolbar/Toolbar.jsx'
+import ToolbarQ from './Toolbar/QuizToolbar.jsx'
+import ImageC from './AddOn/ImageColumn.jsx'
+
+
+
+import 'animate.css'
+
+export default class EditView extends Component {
+
+ constructor(props) {
+ super(props)
+ this.state = {
+ quizEditView: true,
+ imgUrl: props.content.media.imgUrl,
+ mediaAlign: ''
+ }
+
+ this.saveQuizContent = this.saveQuizContent.bind(this)
+ this.toggleQuizEdit = this.toggleQuizEdit.bind(this)
+ this.alignMedia = this.alignMedia.bind(this)
+ }
+
+ componentDidUpdate(prevProps, prevState) {
+
+ // handle of non-quiz slides
+ if (this.props.content != undefined && !this.props.content.isQuiz) {
+ if (this.props.currentSlide != prevProps.currentSlide || this.props.content.saveContent != prevProps.content.saveContent) {
+ // catch the load from the database and the changing of slides
+ if (this.props.content.media != undefined) {
+ this.setState({imgUrl: this.props.content.media.imgUrl, mediaAlign: this.props.content.media.align})
+ }
+ this.loadEditorState()
+ }
+ else if (this.state.updated) {
+ // current component updated
+ this.saveEditorState()
+ this.setState({ updated: false })
+ }
+ }
+
+ // If quiz component updated and the data is there then we switch to view mode else we switch to edit mode.
+ if (prevProps.content.quizContent != this.props.content.quizContent) {
+ // Yes i understand this would be a good spot to use a ternary operator, but we use that too much. :P
+ if (this.props.content.quizContent != null /*&& this.props.content.quizContent != null*/) {
+ this.setState({ quizEditView: false })
+ }
+ else {
+ this.setState({ quizEditView: true })
+ }
+ }
+
+ let newImgUrl = (this.props.content.media == undefined) ? "" : this.props.content.media.imgUrl
+ let newAlign = (this.props.content.media == undefined) ? "" : this.props.content.media.align
+ if (this.state.imgUrl != newImgUrl) {
+ this.setState({imgUrl: newImgUrl, mediaAlign: newAlign})
+ }
+ }
+
+
+
+ saveQuizContent(quizContent) {
+ this.toggleQuizEdit()
+ this.props.saveQuizContent(quizContent)
+ }
+
+ async toggleQuizEdit() {
+ this.setState({
+ quizEditView: !this.state.quizEditView
+ })
+ }
+
+ alignMedia() {
+ let align = (this.state.mediaAlign === 'right') ? 'left' : 'right'
+ this.setState({mediaAlign: align})
+ this.props.saveMedia(this.state.imgUrl, align)
+ }
+
+ render() {
+
+
+ let quizView = (this.state.quizEditView) ?
+ this.setState({addSlideHover: true})}
+ onMouseLeave={() => this.setState({addSlideHover: false})}>
+ Add New Slide
+
+ +
+ + +
+
+
+ )
+ }
+}
+
+
+EditView.propTypes = {
+ currentSlide: PropTypes.number,
+ content: PropTypes.object,
+ saveContentState: PropTypes.func,
+ saveQuizContent: PropTypes.func,
+ saveDB: PropTypes.func,
+ load: PropTypes.func,
+ saveMedia: PropTypes.func,
+ removeMedia: PropTypes.func,
+ saveThumb: PropTypes.func
+}
diff --git a/javascript/Edit/Quiz/AnswerBlock.jsx b/javascript/Edit/Quiz/AnswerBlock.jsx
new file mode 100644
index 0000000..6aade8b
--- /dev/null
+++ b/javascript/Edit/Quiz/AnswerBlock.jsx
@@ -0,0 +1,94 @@
+'use strict'
+import React, { useState, useEffect } from 'react'
+import PropTypes from 'prop-types'
+import {
+ Form
+} from 'react-bootstrap'
+import Tippy from '@tippyjs/react';
+import './quiz.css'
+
+const {Row, Group, Check , Control} = Form
+
+// prop.types may equal 'choice' or 'select'
+export default function AnswerBlock(props) {
+
+ const [fb, setFb] = useState('')
+
+ useEffect(() => {
+ const feed = [...props.feedback] // This will represent ['local' | 'global, globalField1, globalField2, ...arrayOfLocalFeedback]
+ setFb(feed[props.id+3])
+ }, [])
+
+ useEffect(() => {
+ let feed = [...props.feedback]
+ feed[props.id + 3] = fb
+ if (props.custom) {
+ feed[0] = 'local'
+ }
+ props.setFeedback(feed)
+ }, [fb])
+
+ function _delete() {
+ props.remove(props.id)
+ }
+
+ const customAnswerRow = (
+
+ {toolbar}
+
+ { + // This code is a little-let's not kid ourselves, it's quite a bit messy. Basicly, I need a different view for quizEdit then the other three views + (this.state.quizEditView && this.props.content.isQuiz) ? quizView : + ( +
+ + { + // This code is a little-let's not kid ourselves, it's quite a bit messy. Basicly, I need a different view for quizEdit then the other three views + (this.state.quizEditView && this.props.content.isQuiz) ? quizView : + ( +
+
)
+ }
+
+ {(this.state.mediaAlign === 'left') ? imgRender : undefined}
+
+
+ {editRender}
+
+ {(this.state.mediaAlign === 'right') ? imgRender : undefined}
+
+ Allows for custom feedback to be displayed to the user when submititing an answer.
+
+ If they choose the correct answer the on-correct message will appear and vice-versa +
+ These will not appear if the local custom answer responses are enabled and filled out +
+ )
+
+ return (
+ + If they choose the correct answer the on-correct message will appear and vice-versa +
+ These will not appear if the local custom answer responses are enabled and filled out +
Answer Settings
+
+ Generic Answer Responses
+
+
+ Generic Answer Responses
+
+
+
+
+ +
+
+
+
+ On Correct
} arrow={true}>
+
+
+
+
+
+
+
+
+
+
+ On Incorrect
} arrow={true}>
+
+
+
+
+
+ )
+ }
+}
+
+AnswerTypeCards.propTypes = {
+ openAnswer: PropTypes.func,
+ multipleChoice: PropTypes.func,
+ multipleSelect: PropTypes.func
+}
diff --git a/javascript/Edit/Quiz/OpenAnswerBlock.jsx b/javascript/Edit/Quiz/OpenAnswerBlock.jsx
new file mode 100644
index 0000000..41123d9
--- /dev/null
+++ b/javascript/Edit/Quiz/OpenAnswerBlock.jsx
@@ -0,0 +1,79 @@
+'use strict'
+import React, { Component } from 'react'
+import PropTypes from 'prop-types'
+import {
+ Form,
+ Button,
+ ButtonToolbar,
+ ButtonGroup,
+ Row,
+ Col,
+ Card,
+ InputGroup,
+ FormControl
+} from 'react-bootstrap'
+
+import Tippy from '@tippyjs/react'
+
+export default class OpenAnswerBlock extends Component {
+ constructor(props) {
+ super(props)
+ this.state = {
+ placeholder: null,
+ id: props.id,
+ value: props.value
+ }
+ this.onChangeValue = this.onChangeValue.bind(this)
+ }
+
+ componentDidMount() {
+ let place = this.props.placeholder
+ if (place == null) {
+ place = "Students will put their answer here. If their answer should be graded on correctness, then select the checkbox on the right."
+ }
+ this.setState({
+ placeholder: place
+ })
+
+ }
+
+ onChangeValue(event) {
+ this.setState({
+ value: event.target.value
+ })
+ this.props.onChange(event)
+ }
+
+ render() {
+ return (
+
+
+
+ {/* Open Answer
+
+
+ Multiple Choice
+
+
+ Multiple choice options with one possible correct answer
+ +
+
+ */}
+
+
+ Open Answer
+
+
+ +
+ Open answer field for user's open response
++ +
+
+
+
+ Multiple Select
+
+
+ Multiple choice options with one or more possible correct answer(s)
+ +
+
+ )
+ }
+}
+
+
+const formControlStyle = {
+ textAlign: 'center',
+ marginLeft: 'auto',
+ marginRight: 'auto',
+ width: '60%'
+}
diff --git a/javascript/Edit/Quiz/QuizEdit.jsx b/javascript/Edit/Quiz/QuizEdit.jsx
new file mode 100644
index 0000000..a0c57f7
--- /dev/null
+++ b/javascript/Edit/Quiz/QuizEdit.jsx
@@ -0,0 +1,365 @@
+import React, { useEffect, useState } from 'react'
+
+import AnswerTypeCards from './AnswerTypeCards.jsx'
+import QuestionTitle from './QuestionTitleBlock.jsx'
+import AnswerBlock from './AnswerBlock.jsx'
+import SettingsModal from './AnswerSettings'
+
+import './quiz.css'
+import { saveQuiz } from '../../api/quiz.js'
+
+import 'animate.css'
+import Tippy from '@tippyjs/react'
+import { Form, Modal } from 'react-bootstrap'
+import Dropzone from 'react-dropzone-uploader'
+import { propTypes } from 'react-bootstrap/esm/Image'
+import PropTypes from "prop-types"
+const { Row, Group, Check } = Form
+
+export default function QuizEdit(props) {
+
+ const [question, setQuestion] = useState('')
+ const [answers, setAnswers] = useState(['', '']) // : string[]
+ const [correct, setCorrect] = useState([]) // : number[]
+ const [type, setType] = useState('showTypes')
+ const [feedback, setFeedback] = useState(['global', 'Correct!', 'Please try again']) // : string[]
+ const [id, setId] = useState(-1)
+ const [imageUrl, setImageUrl] = useState('')
+
+ const [showModal, setShowModal] = useState(false)
+ const [showCustom, setShowCustom] = useState(false)
+ const [feedCheck, setFeedCheck] = useState(false)
+
+ const [animationType, setAnimation] = useState('animated slideInRight faster')
+
+
+ useEffect(() => {
+ let initQuestion = ''
+ let initAnswers = ['', '']
+ let initCorrect = []
+ let initType = 'showTypes'
+ let initFeedback = ['global', 'Correct!', 'Please try again']
+ let initId = window.sessionStorage.getItem('quizId')
+
+ let initFeedCheck = false
+ // This will only be true if the slide is empty
+ if (props.quizContent != null && props.quizContent.correct != null) {
+ // Hooks are not allowed to be called in conditonals which is why there is this horrible code structure here
+ initQuestion = props.quizContent.question
+ initAnswers = props.quizContent.answers
+ initCorrect = props.quizContent.correct
+ initType = props.quizContent.type
+ initFeedback = props.quizContent.feedback
+ initId = props.quizContent.quizId
+ initFeedCheck = (initFeedback[0] === 'local')
+ }
+ setQuestion(initQuestion)
+ setAnswers(initAnswers)
+ setCorrect(initCorrect)
+ setType(initType)
+ setFeedback(initFeedback)
+ setId(initId)
+ setFeedCheck(initFeedCheck)
+ setShowCustom(initFeedCheck)
+ }, [])
+
+
+ async function save() {
+ if (correct.length === 0) {
+ alert("Please select a correct answer.")
+ return
+ } else if (type === 'choice' && feedCheck) {
+ // Checks to make sure all of feeback is filled out
+ for (let i = 2; i < feedback.length; i++) {
+ if (feedback[i] == undefined || feedback[i] == "") {
+ alert("Please ensure that all custom answers are filled out.")
+ return
+ }
+ }
+ }
+
+ let quizContent = {
+ 'quizId': id,
+ 'question': question,
+ 'answers': answers,
+ 'correct': correct,
+ 'type': type,
+ 'feedback': feedback,
+ 'imageUrl': imageUrl
+ }
+ const saved = await saveQuiz(id, quizContent)
+
+ if (saved) {
+ props.saveQuizContent(quizContent)
+ await props.load()
+ } else {
+ alert("an error has occurred when saving")
+ }
+
+ props.toggle()
+ }
+
+ function handleAnswerChange(e) {
+ const ids = e.target.id.split('-')
+ const type = ids[0]
+ const i = Number(ids[1])
+ let a = [...answers]
+ let c = [...correct]
+ if (type == 'text') {
+ a[ids[1]] = e.target.value
+ }
+ else if (type === 'choice') {
+ // This is multiple choice and there is only one correct answer
+ c[0] = i
+ }
+ else if (type === 'select') {
+ // handle change
+ // if the is is in the array we need to remove it, if the id is not we add it
+ console.log(ids)
+ if (c.includes(i) || c.includes(i.toString())) {
+ // remove current choice from correct
+ let item = c.findIndex(index => { return index == i })
+ c.splice(item, 1)
+ }
+ else {
+ // Add new choice to correct
+ c.push(i)
+ }
+ }
+
+ setAnswers(a)
+ setCorrect(c)
+ }
+
+ function switchView(e) {
+ setType(e.target.id)
+ }
+
+ function addAnswer() {
+ let a = [...answers]
+ a.push('')
+ setAnswers(a)
+ }
+
+ function removeAnswer(id) {
+
+ let a = [...answers]
+ let c = [...correct]
+ let f = [...feedback]
+
+ if (c.includes(id.toString())) {
+ const index = c.indexOf(id.toString())
+ c.splice(index, 1)
+ }
+ a.splice(id, 1)
+ f.splice(id + 3, 1)
+ setAnswers(a)
+ setCorrect(c)
+ setFeedback(f)
+ }
+
+ function toggleFeedCheck() {
+ let f = [...feedback]
+ let fc = (f[0] === 'local')
+ if (type === 'select') {
+ // This shouldn't get triggered since I remove the ui option but I will leave it here in case
+ alert("Custom Local Feedback is not supported for multiple select")
+ fc = true
+ }
+ f[0] = (fc) ? 'global' : 'local'
+ setFeedback(f)
+ setFeedCheck(!fc)
+ setShowCustom(!fc)
+ }
+
+ function changeBackground(fileWithMeta) {
+ let formData = new FormData()
+ const showId = Number(window.sessionStorage.getItem('id'))
+ const slideId = Number(window.sessionStorage.getItem('slideId'))
+ let fMeta = fileWithMeta[0]
+ formData.append('backgroundMedia', fMeta.file)
+ formData.append('slideId', slideId)
+ formData.append('id', showId)
+
+ $.ajax({
+ url: './slideshow/Slide/background/' + slideId,
+ type: 'post',
+ data: formData,
+ processData: false,
+ contentType: false,
+ success: (imageUrl) => {
+ props.changeBackground(imageUrl)
+ setImageUrl(imageUrl)
+ alert('Background Image has been Inserted!')
+ },
+ error: (req, res) => {
+ console.error(res)
+ alert(
+ 'An error has occured with this image. Please try a different image.'
+ )
+ },
+ })
+ }
+
+ function buildAnswerBlock(type) {
+ if (type !== 'choice' && type != 'select') return undefined
+ let i = -1
+ let choices = answers.map((choice) => {
+ i++
+ let checked = correct.includes(i.toString()) || correct.includes(i)
+ return Question
+ + setShowCustom(!showCustom)}>
+
+
+ Insert Image
+
+
+ Upload
+
+
+ Insert background Image
+
+ setShowModal(false)}
+ setFeedback={(f) => setFeedback(f)}
+ feedback={feedback}
+ toggleGlobal={toggleFeedCheck}
+ />
+
+ )
+}
+
+const containerStyle = {
+ padding: '20px',
+ backgroundColor: '#E5E7E9',
+ borderRadius: 3
+}
+
+QuizEdit.propTypes = {
+ validate: PropTypes.func,
+ insertMedia: PropTypes.func,
+ mediaView: PropTypes.bool,
+ mediaCancel: PropTypes.func,
+ mediaOpen: PropTypes.func
+}
\ No newline at end of file
diff --git a/javascript/Edit/Quiz/QuizView.jsx b/javascript/Edit/Quiz/QuizView.jsx
new file mode 100644
index 0000000..ff1dfd2
--- /dev/null
+++ b/javascript/Edit/Quiz/QuizView.jsx
@@ -0,0 +1,68 @@
+'use strict'
+import React, {Component} from 'react'
+import PropTypes from 'prop-types'
+
+export default class QuizView extends Component {
+ constructor(props) {
+ super(props)
+ }
+
+ render() {
+ let answers = undefined
+ if (this.props.quizContent.answers != null) {
+ //console.log(this.props.quizContent)
+ // TODO: fix bug with icon not changing when correct does. We need to force a rerender
+ let type = this.props.quizContent.type === 'select' ? 'square' : 'circle'
+ answers = this.props.quizContent.answers.map(
+ function (question, i) {
+ // random key to ensure that the icons get rerendered each time
+ const k =
+ Math.random().toString(36).substring(2, 15) +
+ Math.random().toString(36).substring(2, 15)
+ let check = (
+
+ )
+ if (this.props.quizContent.correct != undefined) {
+ if (this.props.quizContent.correct.includes(i.toString())) {
+ check = (
+
+ )
+ }
+ }
+ return (
+ Edit Quiz
+
+ setQuestion(e.currentTarget.value)} id={0} />
+
+ {quizBuild} + {imgModal} + {imageBlock} + {answerTypeBlock} + {showAddElement} +
+ + {quizBuild} + {imgModal} + {imageBlock} + {answerTypeBlock} + {showAddElement} +
+
+ )
+ }.bind(this)
+ )
+ } else {
+ answers = (
+ + {check} {question} +
+
+
+ )
+ }
+ // TODO: rework this to be more pretty
+ // Also need to handle open answers
+ let title =
+ !this.props.quizContent.question.length > 0
+ ? 'No data loaded'
+ : this.props.quizContent.question
+ return (
+ This slide may have been corrupted. We apolgize for the error.
+
+
+ )
+ }
+}
+
+QuizView.propTypes = {
+ quizContent: PropTypes.object,
+ toggle: PropTypes.func,
+}
diff --git a/javascript/Edit/Quiz/quiz.css b/javascript/Edit/Quiz/quiz.css
new file mode 100644
index 0000000..1263c49
--- /dev/null
+++ b/javascript/Edit/Quiz/quiz.css
@@ -0,0 +1,41 @@
+.custRow15 {
+ margin-left: 15%;
+}
+
+.custRow10 {
+ margin-left: 10%;
+}
+
+.flexbox {
+ /*border: 1px solid;*/
+ display: flex;
+ flex: 1;
+ justify-content: flex-start;
+ align-items: end;
+}
+
+.flexbox-mid {
+ display: flex;
+ flex: 1;
+ justify-content: flex-end;
+ align-items: center;
+}
+
+.custResponse {
+ width: 80%;
+ margin-right: 1rem;
+}
+
+.ans {
+ width: 60%;
+ margin-right: 1rem;
+}
+
+.ss-danger {
+ color: #d9534f;
+}
+
+.dg-small {
+ color: dimgray;
+ font-size: 18px;
+}
\ No newline at end of file
diff --git a/javascript/Edit/Settings.jsx b/javascript/Edit/Settings.jsx
new file mode 100644
index 0000000..149c42f
--- /dev/null
+++ b/javascript/Edit/Settings.jsx
@@ -0,0 +1,228 @@
+'use strict'
+import React, {Component} from 'react'
+import PropTypes from 'prop-types'
+import {
+ Button,
+ ButtonGroup,
+ Modal,
+ Form,
+ Row,
+ Col,
+ OverlayTrigger,
+ Popover,
+} from 'react-bootstrap'
+import {CirclePicker, SketchPicker} from 'react-color'
+import AnimateDropdown from './AddOn/AnimateDropdown'
+import './custom.css'
+/* global $ */
+
+export default class Settings extends Component {
+ constructor(props) {
+ super(props)
+ this.state = {
+ settings: false,
+ slideTimer: '2s',
+ displaySketchPicker: false,
+ }
+
+ this.toggleSettings = this.toggleSettings.bind(this)
+ this.handleColorChange = this.handleColorChange.bind(this)
+ this.changeTime = this.changeTime.bind(this)
+ this.handleSketchPicker = this.handleSketchPicker.bind(this)
+ }
+
+ componentDidUpdate(prevProps) {
+ if (prevProps.slideTimer != this.props.slideTimer) {
+ this.setState({
+ slideTimer: String(this.props.slideTimer) + 's',
+ })
+ }
+ }
+
+ toggleSettings() {
+ this.setState({settings: !this.state.settings})
+ }
+
+ handleColorChange(color) {
+ this.props.saveBackground(color.hex)
+ }
+
+ changeTime(event) {
+ // converts to number
+ this.setState({slideTimer: event.target.value})
+ const time = parseInt(event.target.value, 10)
+ $.ajax({
+ url: './slideshow/Show/' + this.props.id,
+ data: {slideTimer: time},
+ type: 'put',
+ error: (req, res) => {
+ console.error(req, res.toString())
+ },
+ })
+ }
+
+ handleSketchPicker() {
+ this.setState({displaySketchPicker: !this.state.displaySketchPicker})
+ }
+
+ render() {
+ let colorPick
+ if (this.state.displaySketchPicker == true) {
+ colorPick = (
+ {title}
+ {answers} +
+
+ )
+ }
+ let colorPickStyle = this.state.hover
+ ? {borderColor: this.props.currentColor}
+ : {color: this.props.currentColor}
+ return (
+
+
+ Settings
+
+
+
+
+ Slide Timer
+
+
+ Select required wait time for each slide before
+ continuing to the next slide. (Does not apply to
+ quizzes)
+
+ }>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Click to enter custom color
+
+ }>
+
+
+
+ {colorPick}
+
+
+
+
+
+
+
+ +
+
+
+ )
+ }
+
+}
+
+SlidesView.propTypes = {
+ slides: PropTypes.array,
+ currentSlide: PropTypes.number,
+ setCurrentSlide: PropTypes.func,
+ addNewSlide: PropTypes.func,
+}
diff --git a/javascript/Edit/Toolbar/Background.jsx b/javascript/Edit/Toolbar/Background.jsx
new file mode 100644
index 0000000..ef19e28
--- /dev/null
+++ b/javascript/Edit/Toolbar/Background.jsx
@@ -0,0 +1,96 @@
+import React, {useState} from 'react'
+import Tippy from '@tippyjs/react'
+import 'tippy.js/themes/light-border.css'
+import {Modal, Row, Col} from 'react-bootstrap'
+//import {CirclePicker} from 'react-color'
+import ColorSelect from '../AddOn/ColorSelect'
+import Dropzone from 'react-dropzone-uploader'
+import PropTypes from 'prop-types'
+
+/* global $ */
+
+const {Header, Body} = Modal
+
+export default function Background(props) {
+ const [modalView, setModal] = useState(false)
+
+ function insertMedia(fileWithMeta) {
+ let formData = new FormData()
+ const showId = Number(window.sessionStorage.getItem('id'))
+ const slideId = Number(window.sessionStorage.getItem('slideId'))
+ let fMeta = fileWithMeta[0]
+ formData.append('backgroundMedia', fMeta.file)
+ formData.append('slideId', slideId)
+ formData.append('id', showId)
+
+ $.ajax({
+ url: './slideshow/Slide/background/' + slideId,
+ type: 'post',
+ data: formData,
+ processData: false,
+ contentType: false,
+ success: (imageUrl) => {
+ props.changeBackground(imageUrl)
+ },
+ error: (req, res) => {
+ console.error(res)
+ alert(
+ 'An error has occured with this image. Please try a different image.'
+ )
+ },
+ })
+ }
+
+ function validate({meta}) {
+ if (meta.status === 'rejected_file_type') {
+ alert('Sorry, this file type is not supported')
+ }
+ }
+
+ const modalRender = (
+
+ {data}
+
+
+ Change Background
+Image
+ +
+
+
+ Upload
+
+
+
+ )
+
+ return (
+
+ Insert a url
+ Selected Text +
+
+
+
+
+
+
+
+ Insert Image
+
+
+ Upload
+
+ {props.view ? cancel : edit}
+
+ )
+}
\ No newline at end of file
diff --git a/javascript/Edit/Toolbar/TextColor.jsx b/javascript/Edit/Toolbar/TextColor.jsx
new file mode 100644
index 0000000..56d2137
--- /dev/null
+++ b/javascript/Edit/Toolbar/TextColor.jsx
@@ -0,0 +1,150 @@
+'use strict'
+import React, {Component} from 'react'
+import Tippy from '@tippyjs/react'
+import TextColorMap from '../../Resources/Draft/TextColorMap'
+import PropTypes from 'prop-types'
+import {EditorState, RichUtils, Modifier, SelectionState} from 'draft-js'
+import {CirclePicker, ChromePicker} from 'react-color'
+
+import './toolbar.css'
+import 'tippy.js/themes/light-border.css'
+
+export default class TextColor extends Component {
+ constructor(props) {
+ super(props)
+
+ this.state = {
+ color: 'black',
+ selection: SelectionState.createEmpty(),
+ anchorKey: undefined,
+ showAdvanced: false,
+ }
+
+ this.changeColor = this.changeColor.bind(this)
+ this.toggleColor = this._toggleColor.bind(this)
+ }
+
+ changeColor(color) {
+ this.setState({color: color.hex})
+ this.toggleColor(color.hex)
+ }
+
+ _toggleColor(toggledColor) {
+ const editorState = this.props.getEditorState()
+ let selection = editorState.getSelection()
+ let anchorKey = selection.getAnchorKey()
+
+ if (
+ this.state.anchorKey != undefined &&
+ anchorKey != this.state.anchorKey
+ ) {
+ // dump cache bc slides/or content block was changed
+ anchorKey = this.state.anchorKey
+ }
+
+ if (selection.isCollapsed()) {
+ // Nothing is selected so we use the previous selection
+ selection = this.state.selection
+ if (selection.isCollapsed()) {
+ alert('Please select some text to apply this color')
+ }
+ }
+ // Cache Selection and its Key
+ this.setState({selection: selection, anchorKey: anchorKey})
+
+ // Advanced Color
+ const color = editorState.getCurrentInlineStyle().keys().next().value
+ const styleAddon = '{"' + color + '":{"color":"' + color + '"}}'
+ const styles = Object.assign(JSON.parse(styleAddon), TextColorMap)
+
+ // remove other colors first
+ let mapping = Object.keys(styles).map((style) => {
+ if (style.startsWith('#')) return style
+ })
+ let newContentState = mapping.reduce((contentState, color) => {
+ return Modifier.removeInlineStyle(contentState, selection, color)
+ }, editorState.getCurrentContent())
+
+ let newEditorState = EditorState.push(
+ editorState,
+ newContentState,
+ 'change-inline-style'
+ )
+
+ const currStyle = editorState.getCurrentInlineStyle()
+
+ // If nothing is currently selected
+
+ if (!currStyle.has(toggledColor)) {
+ newEditorState = RichUtils.toggleInlineStyle(newEditorState, toggledColor)
+ }
+
+ this.props.setEditorState(EditorState.moveFocusToEnd(newEditorState))
+ }
+
+ render() {
+ let advancedColor = this.state.showAdvanced ? (
+
+
+ ) : undefined
+
+ let colorPopover = (
+
+
+
+ )
+
+ return (
+
+ Adjust Text Color
++
+
+ {advancedColor}
+
+
+
+ )
+}
+
+Toolbar.propTypes = {
+ getEditorState: PropTypes.func,
+ setEditorState: PropTypes.func,
+ saveBackground: PropTypes.func,
+ saveMedia: PropTypes.func,
+ insertMedia: PropTypes.func,
+ validate: PropTypes.func,
+ mediaView: PropTypes.bool,
+ mediaCancel: PropTypes.func,
+ mediaOpen: PropTypes.func
+}
diff --git a/javascript/Edit/Toolbar/toolbar.css b/javascript/Edit/Toolbar/toolbar.css
new file mode 100644
index 0000000..e47a0ac
--- /dev/null
+++ b/javascript/Edit/Toolbar/toolbar.css
@@ -0,0 +1,50 @@
+.tool {
+ width: 100%;
+ border: 1px solid #ddd;
+ background: #fff;
+ border-radius: 2px;
+ box-shadow: 0px 1px 3px 0px rgba(220,220,220,1);
+ z-index: 2;
+ box-sizing: border-box;
+}
+
+.separator {
+ border-left: 1px solid #ddd;
+ border-right: 1px solid #ddd;
+ height: 35px;
+ position: absolute;
+ /*
+ If we want the separator to float center
+ top: 19px;
+ height: 30px;*/
+}
+
+/* Button Styles */
+button.toolbar {
+ background: #fbfbfb;
+ color: #888;
+ font-size: 18px;
+ border: 0;
+ padding-top: 0px;
+ vertical-align: bottom;
+ height: 34px;
+ width: 36px;
+}
+
+button.toolbar:hover, button.toolbar:focus {
+ background: #f3f3f3;
+ outline: 0; /* reset for :focus */
+}
+
+i {
+ fill: #888;
+}
+
+.drop
+{
+ width: 90%;
+ margin-left:auto;
+ margin-right:auto;
+}
+
+
diff --git a/javascript/Edit/custom.css b/javascript/Edit/custom.css
new file mode 100644
index 0000000..c337e27
--- /dev/null
+++ b/javascript/Edit/custom.css
@@ -0,0 +1,45 @@
+.cust-col-11 {
+ flex: 0 0 96.66667%;
+ max-width: 96.66667%;
+}
+
+.cust-col-1 {
+ flex: 0 0 3.33333%;
+ max-width: 3.33333%;
+}
+
+.settings-options {
+ font-size: 20px;
+}
+
+.linkDecorator {
+ text-decoration-line: underline !important;
+ text-decoration-color: royalblue;
+}
+
+.ColorPicker {
+ margin-top: 35px;
+ margin-left: 23px;
+ border-radius: 20px;
+ height: 40px;
+ width: 40px;
+ background-color: transparent;
+ border: 1px solid transparent;
+}
+
+.ColorPicker:hover {
+ border: 5px solid;
+}
+
+.SketchPicker {
+ padding: 0rem;
+}
+
+.align-right {
+ float: none;
+ text-align: right;
+}
+.align-center {
+ float: none;
+ text-align: center;
+}
diff --git a/javascript/ShowForm/index.jsx b/javascript/Edit/index.jsx
similarity index 52%
rename from javascript/ShowForm/index.jsx
rename to javascript/Edit/index.jsx
index 1d53d7c..4fc4929 100644
--- a/javascript/ShowForm/index.jsx
+++ b/javascript/Edit/index.jsx
@@ -1,7 +1,7 @@
'use strict'
import React from 'react'
import ReactDOM from 'react-dom'
-import Show from './Show.jsx'
+import Edit from './Edit.jsx'
ReactDOM.render(
-
+
+ )
+}
+
+export const NavButton = (props) => {
+ let type = 'secondary'
+ if (props.type != undefined) type = props.type
+ return (
+
+
+
+
+
+
+
+ )
+}
+
+export const Finish = (props) => {
+ let visible = true
+ if (props.visible != undefined) visible = props.visible
+ if (!visible) return null
+ return (
+
+
+
+ +
+ )
+ // One Tippy is onHover, the other is onClick
+ return (
+ Change Slide
+{closeButtonG}
+ +
Return to
+
+
+
+
+
+
+
+
+ + +
+
+ )
+}
+
+const buttonGroup = {
+ justifyContent: 'center',
+ display: 'flex',
+ marginBottom: '1rem',
+}
diff --git a/javascript/Present/Present.jsx b/javascript/Present/Present.jsx
new file mode 100644
index 0000000..0ded463
--- /dev/null
+++ b/javascript/Present/Present.jsx
@@ -0,0 +1,203 @@
+import React, {useState, useEffect} from 'react'
+
+// Resources for loading from db
+import {
+ fetchShow,
+ fetchSlides,
+ fetchSession,
+ updateSession,
+ slidesResource,
+} from '../api/present'
+
+import {getPageId} from '../api/getPageId'
+
+import PresentView from './PresentView'
+
+import {Progress, Navigation, Finish, SlidesNav} from './Navbar'
+import Skeleton from '../Resources/Components/Skeleton'
+import PropTypes from 'prop-types'
+
+import 'animate.css'
+
+export default function Present({isAdmin}) {
+ const [showTitle, setShowTitle] = useState('Present: ')
+ const [showTimer, setShowTimer] = useState(0)
+ const [showAnimation, setShowAnimation] = useState('None')
+ const [noShow, setNoShow] = useState(true)
+
+ const [content, setContent] = useState(slidesResource.content)
+
+ const [currentSlide, setCurrentSlide] = useState(0)
+ const [highestSlide, setHighestSlide] = useState(0)
+
+ const [prevDisable, setPrevDisable] = useState(true) // previous button disabled?
+ const [nextDisable, setNextDisable] = useState(true) // next button disabled?
+
+ const [loaded, setLoaded] = useState(false) // use to avoid running logic before db calls return
+ const [finished, setFinished] = useState(false)
+ const showId = getPageId()
+
+ /** Component did mount */
+ useEffect(() => {
+ load()
+ }, [])
+
+ useEffect(() => {
+ // "Touple" as array of the values
+ // of [prevDisable, nextDisable, highestSlide]
+ const state = evaluateState()
+ setNextDisable(state[1])
+ setPrevDisable(state[0])
+ const high = state[2]
+ setHighestSlide(high)
+ //TODO: Update session with new highestSlide / currentSlide (maybe?)
+ const finish = high == content.length - 1
+ updateSession(window.sessionStorage.getItem('id'), high, finish)
+ }, [currentSlide])
+
+ useEffect(() => {
+ // This will run before the data loads from db this eliminates that run
+ if (!loaded) return
+ const visited = currentSlide < highestSlide
+ const isQuiz = content[currentSlide].isQuiz
+ const final = currentSlide === content.length - 1
+ if (nextDisable && loaded && !visited && !isQuiz) {
+ window.setTimeout(() => {
+ setNextDisable(final)
+ setFinished(final)
+ }, showTimer)
+ }
+ }, [nextDisable])
+
+ async function load() {
+ const show = await fetchShow(showId)
+ if (show.length > 0) {
+ const content = await fetchSlides(showId)
+ const session = await fetchSession(showId)
+
+ let current = Number(session.highest)
+ if (session.complete) {
+ current = 0
+ }
+ setNoShow(false)
+ setShowTitle(show.showTitle)
+ setShowTimer(show.showTimer)
+ setShowAnimation(show.animation)
+ setContent(content)
+ setCurrentSlide(current)
+ setHighestSlide(Number(session.highest))
+ setLoaded(true)
+ setFinished(session.complete)
+ setNextDisable(!session.complete)
+ window.setTimeout(() => {
+ setNextDisable(false)
+ }, show.showTimer)
+ } else {
+ setLoaded(true)
+ }
+ }
+
+ function evaluateState() {
+ // Handle behavior for next and prev disables
+ let next = true
+ let prev = false
+ let high = highestSlide
+ if (high < currentSlide) high = currentSlide
+ const visited = currentSlide < highestSlide
+ if (finished || visited) {
+ next = false
+ }
+
+ // Final global check that will exist despite finished
+ if (currentSlide == 0) {
+ // First slide
+ prev = true
+ } else if (currentSlide == content.length - 1) {
+ // Last slide
+ next = true
+ }
+ return [prev, next, high]
+ }
+
+ function validate() {
+ // This will be called from subcompents to revalidate the current component
+ let final = false
+ if (currentSlide === content.length - 1) final = true
+ setNextDisable(final)
+ }
+
+ function _next() {
+ let next = currentSlide + 1
+ if (next == content.length) next = currentSlide // set disable
+ setCurrentSlide(next)
+ }
+
+ function _prev() {
+ let prev = currentSlide - 1
+ if (prev < 0) prev = 0 // set state to disable
+ setCurrentSlide(prev)
+ }
+ if (!loaded) return
+ {props.value}
+
+
+
+ )
+ }
+ return (
+ Sorry
+This show is not available.
+
+
+ setCurrentSlide(slide)}
+ />
+
+ )
+}
+
+Present.propTypes = {
+ isAdmin: PropTypes.string,
+}
diff --git a/javascript/Present/PresentView.jsx b/javascript/Present/PresentView.jsx
new file mode 100644
index 0000000..0228305
--- /dev/null
+++ b/javascript/Present/PresentView.jsx
@@ -0,0 +1,44 @@
+'use strict'
+import React, { Component } from 'react'
+import PropTypes from 'prop-types'
+import Viewspace from './Viewspace.jsx'
+import QuizViewspace from './Quiz/QuizViewspace.jsx'
+
+export default class PresentView extends Component {
+ constructor(props) {
+ super(props)
+ }
+
+ render() {
+ if (this.props.content != undefined) {
+ let viewspace = (this.props.content.isQuiz) ?
+ ({showTitle}
++
+
+
+
+
+ Edit
+
+
+ ) : null}
+
+ {viewspace}
+
+ )
+ }
+ return null
+ }
+}
+
+PresentView.propTypes = {
+ content: PropTypes.object,
+ currentSlide: PropTypes.number,
+ high: PropTypes.number,
+ validate: PropTypes.func,
+}
diff --git a/javascript/Present/Quiz/AnswerComponent.jsx b/javascript/Present/Quiz/AnswerComponent.jsx
new file mode 100644
index 0000000..bd52c5b
--- /dev/null
+++ b/javascript/Present/Quiz/AnswerComponent.jsx
@@ -0,0 +1,38 @@
+import React from 'react'
+
+import { Form, Button } from 'react-bootstrap'
+
+const { Check } = Form
+
+export default function AnswerComponent(props) {
+ if (props.quizContent != undefined) {
+ let a = props.quizContent.answers.map((answer, i) => {
+ // Shows a check if the answer has been correctly answered before
+ const c = props.quizContent.correct
+ let ans = ((props.currentSlide < props.highestSlide || props.finished) && (c.includes(i) || c.includes(i.toString()))) ?
+ ({answer} ) : answer
+ return (
+
+
)
+ })
+
+ const selectButton = (
+
+ )
+ return (
+
+ )
+ }
+ return null
+ }
\ No newline at end of file
diff --git a/javascript/Present/Quiz/QuizAlert.jsx b/javascript/Present/Quiz/QuizAlert.jsx
new file mode 100644
index 0000000..863dabd
--- /dev/null
+++ b/javascript/Present/Quiz/QuizAlert.jsx
@@ -0,0 +1,36 @@
+import React from 'react'
+import { Alert } from 'react-bootstrap'
+export default function QuizAlert(props) {
+ let alert = undefined
+
+ const select_index = props.selected[0] + 3
+ const right_message = (props.feedback[0] === 'global' || props.qType === 'select')
+ ? props.feedback[1] : props.feedback[select_index]
+ const wrong_message = (props.feedback[0] === 'global' || props.qType === 'select')
+ ? props.feedback[2] : props.feedback[select_index]
+ switch (props.state) {
+ case 'correct':
+ alert = (
+
)
+ }
+ else {
+ answersComponent = This quiz slide has not been filled with data
+If you are a student, contact the one responsible for making you take this
+If you are an admin, fill out this slide with data
+
+ 
+
+ )
+ align = props.content.media.align
+ }
+
+ return (
+
+
+ {(align === 'left') ? image : undefined}
+
+ )
+}
\ No newline at end of file
diff --git a/javascript/Present/Viewspace.jsx b/javascript/Present/Viewspace.jsx
new file mode 100644
index 0000000..e3aebf5
--- /dev/null
+++ b/javascript/Present/Viewspace.jsx
@@ -0,0 +1,78 @@
+'use strict'
+import React, { Component } from 'react'
+import PropTypes from 'prop-types'
+import {Editor, EditorState, convertFromRaw} from 'draft-js'
+
+import decorator from '../Resources/Draft/LinkDecorator.js'
+import CustomStyleMap from '../Resources/Draft/CustomStyleMap.js'
+import CustomBlockFn from '../Resources/Draft/CustomBlockFn.js';
+
+import '../Edit/custom.css'
+
+export default class Viewspace extends Component {
+ constructor(props) {
+ super(props)
+ this.state = {
+ editorState: EditorState.createEmpty(decorator)
+ }
+ this.loadEditorState = this.loadEditorState.bind(this)
+ }
+
+ componentDidMount() {
+ // decode the Editor state from the content field.
+ if (this.props.content.saveContent != undefined) {
+ this.loadEditorState(this.props.content)
+ }
+ }
+
+ componentDidUpdate(prevProps) {
+ if (prevProps.content.saveContent != this.props.content.saveContent) {
+ this.loadEditorState()
+ }
+ }
+
+ loadEditorState(content) {
+ let contentState = convertFromRaw(JSON.parse(this.props.content.saveContent))
+
+ this.setState({
+ editorState: EditorState.createWithContent(contentState, decorator)
+ })
+ }
+
+ render() {
+ let styles = CustomStyleMap
+
+ if (this.state.editorState != undefined) {
+ // Custom text color
+ const color = this.state.editorState.getCurrentInlineStyle().keys().next().value
+ if (color != undefined) {
+ const styleObj = JSON.parse('{"' + color + '":{"color":"' + color + '"}}')
+ styles = Object.assign(styleObj, CustomStyleMap)
+ }
+ }
+ let image = undefined
+ let align = undefined
+ if (this.props.content.media != undefined) {
+ image = (
+
+
+ {(align === 'right') ? image : undefined}
+ {titleComponent}
+ {answersComponent} + +
+ 
+
+ )
+ align = this.props.content.media.align
+ }
+ return (
+
+
+ {(align === 'left') ? image : undefined}
+
+
+ )
+ }
+}
+
+Viewspace.propTypes = {
+ content: PropTypes.object,
+}
diff --git a/javascript/Present/custom.css b/javascript/Present/custom.css
new file mode 100644
index 0000000..8f9913d
--- /dev/null
+++ b/javascript/Present/custom.css
@@ -0,0 +1,14 @@
+.progress {
+ margin: auto;
+ max-width: 800px;
+ margin-bottom: 20px !important;
+}
+.dropdown-menu {
+ max-height: 150px;
+ overflow: auto;
+}
+
+.tipp-butt {
+ margin: 5px;
+ text-align: 'center';
+}
\ No newline at end of file
diff --git a/javascript/Present/index.jsx b/javascript/Present/index.jsx
new file mode 100644
index 0000000..882d215
--- /dev/null
+++ b/javascript/Present/index.jsx
@@ -0,0 +1,10 @@
+'use strict'
+import React from 'react'
+import ReactDOM from 'react-dom'
+import Present from './Present.jsx'
+
+/* global isAdmin */
+ReactDOM.render(
+
+
+ {(align === 'right') ? image : undefined}
+
+
+ )
+}
+
+const spinner = {
+ marginRight: 'auto',
+ marginLeft: 'auto',
+ marginTop: '10rem',
+}
\ No newline at end of file
diff --git a/javascript/Resources/Decision.js b/javascript/Resources/Decision.js
deleted file mode 100644
index 9dcadda..0000000
--- a/javascript/Resources/Decision.js
+++ /dev/null
@@ -1,10 +0,0 @@
-export default class DecisionResource {
- constructor() {
- this.id = 0
- this.title = ''
- this.message = ''
- this.next = true
- this.slideId = 0
- this.sorting = 0
- }
-}
diff --git a/javascript/Resources/Draft/CustomBlockFn.js b/javascript/Resources/Draft/CustomBlockFn.js
new file mode 100644
index 0000000..8c115e9
--- /dev/null
+++ b/javascript/Resources/Draft/CustomBlockFn.js
@@ -0,0 +1,10 @@
+export default function(block) {
+ // Adds alignment property to the class name of a block
+ let className = block.getType()
+ if (block.getData().get('align') != undefined) {
+ if (block.getType() !== 'unordered-list-item' && block.getType() !== 'ordered-list-item') {
+ className += " " + block.getData().get('align')
+ }
+ }
+ return className
+}
\ No newline at end of file
diff --git a/javascript/Resources/Draft/CustomStyleMap.js b/javascript/Resources/Draft/CustomStyleMap.js
new file mode 100644
index 0000000..6da03c2
--- /dev/null
+++ b/javascript/Resources/Draft/CustomStyleMap.js
@@ -0,0 +1,28 @@
+const CustomStyleMap = {
+ "#f44336": {color: '#f44336'},
+ "#e91e63": {color: '#e91e63'},
+ "#9c27b0": {color: '#9c27b0'},
+ "#673ab7": {color: '#673ab7'},
+ "#3f51b5": {color: '#3f51b5'},
+ "#2196f3": {color: '#2196f3'},
+ "#03a9f4": {color: '#03a9f4'},
+ "#00bcd4": {color: '#00bcd4'},
+ "#009688": {color: '#009688'},
+ "#4caf50": {color: '#4caf50'},
+ "#8bc34a": {color: '#8bc34a'},
+ "#cddc39": {color: '#cddc39'},
+ "#ffeb3b": {color: '#ffeb3b'},
+ "#ffc107": {color: '#ffc107'},
+ "#ff9800": {color: '#ff9800'},
+ "#ff5722": {color: '#ff5722'},
+ "#795548": {color: '#795548'},
+ "#607d8b": {color: '#607d8b'},
+ "align-right" : {textAlign: 'right', display: 'inline-block', width: '100%'},
+ "align-center" : {textAlign: 'center', display: 'inline-block', width: '100%'},
+ "align-left" : {textAlign: 'left', display: 'inline-block', width: '100%'},
+ "underline" : {textDecoration: 'underline'},
+ "BOLD" : {fontWeight: 'bold'},
+ "ITALIC": {fontStyle: 'italic'}
+}
+
+export default CustomStyleMap
\ No newline at end of file
diff --git a/javascript/Resources/Draft/LinkDecorator.js b/javascript/Resources/Draft/LinkDecorator.js
new file mode 100644
index 0000000..4c2d272
--- /dev/null
+++ b/javascript/Resources/Draft/LinkDecorator.js
@@ -0,0 +1,53 @@
+// Link Decorator
+import React from 'react'
+import { CompositeDecorator } from 'draft-js'
+import Tippy from '@tippyjs/react'
+import 'tippy.js/themes/material.css'
+
+function findLinkEntities(contentBlock, callback, contentState) {
+ contentBlock.findEntityRanges(
+ (character) => {
+ const entityKey = character.getEntity();
+ return (
+ entityKey !== null &&
+ contentState.getEntity(entityKey).getType() === 'LINK'
+ );
+ },
+ callback
+ );
+}
+const Link = (props) => {
+ let {url} = props.contentState.getEntity(props.entityKey).getData();
+ const urlA = url.split("//")
+ if (urlA[0] != "https:" && urlA[0] != "http:") {
+ url = "http://" + url
+ }
+ return (
+ {title}
+
+ Loading...
+
+ Content here...
' - this.backgroundImage = '' - this.decisions = [] - } -} diff --git a/javascript/Resources/dom-to-image.js b/javascript/Resources/dom-to-image.js new file mode 100644 index 0000000..a2e6f8d --- /dev/null +++ b/javascript/Resources/dom-to-image.js @@ -0,0 +1,770 @@ +(function (global) { + 'use strict'; + + var util = newUtil(); + var inliner = newInliner(); + var fontFaces = newFontFaces(); + var images = newImages(); + + // Default impl options + var defaultOptions = { + // Default is to fail on error, no placeholder + imagePlaceholder: undefined, + // Default cache bust is false, it will use the cache + cacheBust: false + }; + + var domtoimage = { + toSvg: toSvg, + toPng: toPng, + toJpeg: toJpeg, + toBlob: toBlob, + toPixelData: toPixelData, + impl: { + fontFaces: fontFaces, + images: images, + util: util, + inliner: inliner, + options: {} + } + }; + + if (typeof module !== 'undefined') + module.exports = domtoimage; + else + global.domtoimage = domtoimage; + + + /** + * @param {Node} node - The DOM Node object to render + * @param {Object} options - Rendering options + * @param {Function} options.filter - Should return true if passed node should be included in the output + * (excluding node means excluding it's children as well). Not called on the root node. + * @param {String} options.bgcolor - color for the background, any valid CSS color value. + * @param {Number} options.width - width to be applied to node before rendering. + * @param {Number} options.height - height to be applied to node before rendering. + * @param {Object} options.style - an object whose properties to be copied to node's style before rendering. + * @param {Number} options.quality - a Number between 0 and 1 indicating image quality (applicable to JPEG only), + defaults to 1.0. + * @param {String} options.imagePlaceholder - dataURL to use as a placeholder for failed images, default behaviour is to fail fast on images we can't fetch + * @param {Boolean} options.cacheBust - set to true to cache bust by appending the time to the request url + * @return {Promise} - A promise that is fulfilled with a SVG image data URL + * */ + function toSvg(node, options) { + options = options || {}; + copyOptions(options); + return Promise.resolve(node) + .then(function (node) { + return cloneNode(node, options.filter, true); + }) + .then(embedFonts) + .then(inlineImages) + .then(applyOptions) + .then(function (clone) { + return makeSvgDataUri(clone, + options.width || util.width(node), + options.height || util.height(node) + ); + }); + + function applyOptions(clone) { + if (options.bgcolor) clone.style.backgroundColor = options.bgcolor; + + if (options.width) clone.style.width = options.width + 'px'; + if (options.height) clone.style.height = options.height + 'px'; + + if (options.style) + Object.keys(options.style).forEach(function (property) { + clone.style[property] = options.style[property]; + }); + + return clone; + } + } + + /** + * @param {Node} node - The DOM Node object to render + * @param {Object} options - Rendering options, @see {@link toSvg} + * @return {Promise} - A promise that is fulfilled with a Uint8Array containing RGBA pixel data. + * */ + function toPixelData(node, options) { + return draw(node, options || {}) + .then(function (canvas) { + return canvas.getContext('2d').getImageData( + 0, + 0, + util.width(node), + util.height(node) + ).data; + }); + } + + /** + * @param {Node} node - The DOM Node object to render + * @param {Object} options - Rendering options, @see {@link toSvg} + * @return {Promise} - A promise that is fulfilled with a PNG image data URL + * */ + function toPng(node, options) { + return draw(node, options || {}) + .then(function (canvas) { + return canvas.toDataURL(); + }); + } + + /** + * @param {Node} node - The DOM Node object to render + * @param {Object} options - Rendering options, @see {@link toSvg} + * @return {Promise} - A promise that is fulfilled with a JPEG image data URL + * */ + function toJpeg(node, options) { + options = options || {}; + return draw(node, options) + .then(function (canvas) { + return canvas.toDataURL('image/jpeg', options.quality || 1.0); + }); + } + + /** + * @param {Node} node - The DOM Node object to render + * @param {Object} options - Rendering options, @see {@link toSvg} + * @return {Promise} - A promise that is fulfilled with a PNG image blob + * */ + function toBlob(node, options) { + return draw(node, options || {}) + .then(util.canvasToBlob); + } + + function copyOptions(options) { + // Copy options to impl options for use in impl + if(typeof(options.imagePlaceholder) === 'undefined') { + domtoimage.impl.options.imagePlaceholder = defaultOptions.imagePlaceholder; + } else { + domtoimage.impl.options.imagePlaceholder = options.imagePlaceholder; + } + + if(typeof(options.cacheBust) === 'undefined') { + domtoimage.impl.options.cacheBust = defaultOptions.cacheBust; + } else { + domtoimage.impl.options.cacheBust = options.cacheBust; + } + } + + function draw(domNode, options) { + return toSvg(domNode, options) + .then(util.makeImage) + .then(util.delay(100)) + .then(function (image) { + var canvas = newCanvas(domNode); + canvas.getContext('2d').drawImage(image, 0, 0); + return canvas; + }); + + function newCanvas(domNode) { + var canvas = document.createElement('canvas'); + canvas.width = options.width || util.width(domNode); + canvas.height = options.height || util.height(domNode); + + if (options.bgcolor) { + var ctx = canvas.getContext('2d'); + ctx.fillStyle = options.bgcolor; + ctx.fillRect(0, 0, canvas.width, canvas.height); + } + + return canvas; + } + } + + function cloneNode(node, filter, root) { + if (!root && filter && !filter(node)) return Promise.resolve(); + + return Promise.resolve(node) + .then(makeNodeCopy) + .then(function (clone) { + return cloneChildren(node, clone, filter); + }) + .then(function (clone) { + return processClone(node, clone); + }); + + function makeNodeCopy(node) { + if (node instanceof HTMLCanvasElement) return util.makeImage(node.toDataURL()); + return node.cloneNode(false); + } + + function cloneChildren(original, clone, filter) { + var children = original.childNodes; + if (children.length === 0) return Promise.resolve(clone); + + return cloneChildrenInOrder(clone, util.asArray(children), filter) + .then(function () { + return clone; + }); + + function cloneChildrenInOrder(parent, children, filter) { + var done = Promise.resolve(); + children.forEach(function (child) { + done = done + .then(function () { + return cloneNode(child, filter); + }) + .then(function (childClone) { + if (childClone) parent.appendChild(childClone); + }); + }); + return done; + } + } + + function processClone(original, clone) { + if (!(clone instanceof Element)) return clone; + + return Promise.resolve() + .then(cloneStyle) + .then(clonePseudoElements) + .then(copyUserInput) + .then(fixSvg) + .then(function () { + return clone; + }); + + function cloneStyle() { + copyStyle(window.getComputedStyle(original), clone.style); + + function copyStyle(source, target) { + if (source.cssText) target.cssText = source.cssText; + else copyProperties(source, target); + + function copyProperties(source, target) { + util.asArray(source).forEach(function (name) { + target.setProperty( + name, + source.getPropertyValue(name), + source.getPropertyPriority(name) + ); + }); + } + } + } + + function clonePseudoElements() { + [':before', ':after'].forEach(function (element) { + clonePseudoElement(element); + }); + + function clonePseudoElement(element) { + var style = window.getComputedStyle(original, element); + var content = style.getPropertyValue('content'); + + if (content === '' || content === 'none') return; + + var className = util.uid(); + clone.className = clone.className + ' ' + className; + var styleElement = document.createElement('style'); + styleElement.appendChild(formatPseudoElementStyle(className, element, style)); + clone.appendChild(styleElement); + + function formatPseudoElementStyle(className, element, style) { + var selector = '.' + className + ':' + element; + var cssText = style.cssText ? formatCssText(style) : formatCssProperties(style); + return document.createTextNode(selector + '{' + cssText + '}'); + + function formatCssText(style) { + var content = style.getPropertyValue('content'); + return style.cssText + ' content: ' + content + ';'; + } + + function formatCssProperties(style) { + + return util.asArray(style) + .map(formatProperty) + .join('; ') + ';'; + + function formatProperty(name) { + return name + ': ' + + style.getPropertyValue(name) + + (style.getPropertyPriority(name) ? ' !important' : ''); + } + } + } + } + } + + function copyUserInput() { + if (original instanceof HTMLTextAreaElement) clone.innerHTML = original.value; + if (original instanceof HTMLInputElement) clone.setAttribute("value", original.value); + } + + function fixSvg() { + if (!(clone instanceof SVGElement)) return; + clone.setAttribute('xmlns', 'http://www.w3.org/2000/svg'); + + if (!(clone instanceof SVGRectElement)) return; + ['width', 'height'].forEach(function (attribute) { + var value = clone.getAttribute(attribute); + if (!value) return; + + clone.style.setProperty(attribute, value); + }); + } + } + } + + function embedFonts(node) { + return fontFaces.resolveAll() + .then(function (cssText) { + var styleNode = document.createElement('style'); + node.appendChild(styleNode); + styleNode.appendChild(document.createTextNode(cssText)); + return node; + }); + } + + function inlineImages(node) { + return images.inlineAll(node) + .then(function () { + return node; + }); + } + + function makeSvgDataUri(node, width, height) { + return Promise.resolve(node) + .then(function (node) { + node.setAttribute('xmlns', 'http://www.w3.org/1999/xhtml'); + return new XMLSerializer().serializeToString(node); + }) + .then(util.escapeXhtml) + .then(function (xhtml) { + return '
-
-
- )
- }
-}
-
-Listing.propTypes = {
- slides: PropTypes.array,
- deleteSlide: PropTypes.func,
- load: PropTypes.func,
- sectionId: PropTypes.number,
-}
diff --git a/javascript/Section/Section.jsx b/javascript/Section/Section.jsx
deleted file mode 100644
index 93a3baa..0000000
--- a/javascript/Section/Section.jsx
+++ /dev/null
@@ -1,80 +0,0 @@
-'use strict'
-import React, {Component} from 'react'
-import Waiting from '../AddOn/Html/Waiting.jsx'
-import Listing from './Listing.jsx'
-
-/* global $, sectionId, slide */
-
-export default class Slides extends Component {
- constructor() {
- super()
- this.state = {
- loading: false,
- slides: [],
- }
-
- this.load = this.load.bind(this)
- this.deleteSlide = this.deleteSlide.bind(this)
- }
-
- componentDidMount() {
- this.load()
- this.initializeSlideLink()
- }
-
- initializeSlideLink() {
- $('#add-slide').click(function () {
- const response = this.createSlideAjax()
- response.success(function () {
- this.load()
- }.bind(this))
- }.bind(this))
- }
-
- load() {
- this.setState({loading: true})
- $.getJSON('./slideshow/Section/' + sectionId).done(function (data) {
- this.setState({loading: false, slides: data,})
- }.bind(this))
- }
-
- createSlideAjax() {
- return $.ajax({
- url: 'slideshow/Slide',
- data: {
- sectionId: sectionId
- },
- dataType: 'json',
- type: 'post',
- })
- }
-
- deleteSlide(slideKey) {
- const slide = this.state.slides[slideKey]
- $.ajax({
- url: 'slideshow/Slide/' + slide.id,
- dataType: 'json',
- type: 'delete',
- success: function () {
- this.load()
- }.bind(this),
- error: function () {}.bind(this)
- })
- }
-
- listSlides() {
- if (this.state.loading) {
- return
- {this.listSlides()}
-
- )
- }
-}
diff --git a/javascript/Section/SlideRow.jsx b/javascript/Section/SlideRow.jsx
deleted file mode 100644
index 7346522..0000000
--- a/javascript/Section/SlideRow.jsx
+++ /dev/null
@@ -1,42 +0,0 @@
-'use strict'
-import React, {Component} from 'react'
-import PropTypes from 'prop-types'
-import {SortableHandle} from 'react-sortable-hoc'
-
-export default class SlideRow extends Component {
- constructor(props) {
- super(props)
- this.state = {}
- }
-
- render() {
- const {slideKey, value, deleteSlide} = this.props
- const DragHandle = SortableHandle(() => DragTag())
- return (
-
-
-
-
-
-
- -
- {slides}
-
-
-
- )
- }
-}
-
-SectionForm.propTypes = {
- success: PropTypes.func.isRequired
-}
diff --git a/javascript/SectionForm/Section.jsx b/javascript/SectionForm/Section.jsx
deleted file mode 100644
index 9c5632d..0000000
--- a/javascript/SectionForm/Section.jsx
+++ /dev/null
@@ -1,42 +0,0 @@
-'use strict'
-import React, {Component} from 'react'
-import Modal from '../AddOn/Html/Modal.jsx'
-import Form from './Form.jsx'
-
-/* global $, openStatus, slide, showId */
-
-export default class Section extends Component {
- constructor(props) {
- super(props)
- this.state = {showForm:false}
- this.initializeSectionLink()
- this.showForm = this.showForm.bind(this)
- this.hideForm = this.hideForm.bind(this)
- }
-
- initializeSectionLink() {
- $('#add-section').click(function () {
- this.showForm()
- }.bind(this))
- }
-
- sectionSaved() {
- window.location.href = './slideshow/Show/' + showId
- }
-
- showForm() {
- this.setState({showForm: true})
- openStatus = false
- slide()
- }
-
- hideForm() {
- this.setState({showForm: false})
- }
-
- render() {
- return (
-
+
+ Not started
+
+
+
+ Complete
+
+
+
+ In progress
+
+
+
+
+
+
+ )
+ }
+}
diff --git a/javascript/Session/custom.css b/javascript/Session/custom.css
new file mode 100644
index 0000000..df17756
--- /dev/null
+++ b/javascript/Session/custom.css
@@ -0,0 +1,3 @@
+.status-arrows {
+ cursor: pointer;
+}
diff --git a/javascript/Session/index.jsx b/javascript/Session/index.jsx
new file mode 100644
index 0000000..e2225e7
--- /dev/null
+++ b/javascript/Session/index.jsx
@@ -0,0 +1,6 @@
+'use strict'
+import React from 'react'
+import ReactDOM from 'react-dom'
+import SessionTable from './SessionTable.jsx'
+
+ReactDOM.render(+ {window.sessionStorage.getItem('title')} +
+|
+
+ Username
+
+ |
+
+
+ Status
+
+ |
+
|---|
+
+
+
+
+ }
+ visible={deleteAlert}
+ interactive={true}>
+ Show Preview Image
+ +
+ {
+ insertMedia(fileWithMeta)
+ setModalView(false)
+ }}
+ submitButtonContent={'Insert'}
+ inputContent={''}
+ classNames={{
+ submitButton: 'btn btn-secondary btn-block drop',
+ dropzone: 'drop',
+ }}
+ />
+
+ Upload New Preview
+ +
+
+
+
+
+
+
+ )
+ } else {
+ cardTitle = (
+
+
+
+
+ {this.state.title}
+
+
+
+
+ )
+ }
+
+ let activeLabel = this.state.active !== 0 ? 'Active' : 'Inactive'
+ let activeBtnType =
+ this.state.active !== 0
+ ? 'btn btn-outline-success'
+ : 'btn btn-outline-danger'
+
+ if (this.props.disabled) return null
+ return (
+
+
+
+ )
+ }
+}
+
+ShowCard.propTypes = {
+ id: PropTypes.number,
+ title: PropTypes.string,
+ active: PropTypes.number,
+ img: PropTypes.oneOfType([PropTypes.object, PropTypes.string]),
+ load: PropTypes.func,
+ disabled: PropTypes.bool,
+}
diff --git a/javascript/Show/ShowView.jsx b/javascript/Show/ShowView.jsx
new file mode 100644
index 0000000..d23ebcc
--- /dev/null
+++ b/javascript/Show/ShowView.jsx
@@ -0,0 +1,357 @@
+'use strict'
+import React, {Component} from 'react'
+import ShowCard from './ShowCard.jsx'
+import Show from '../Resources/Show.js'
+import './custom.css'
+import {Modal} from 'react-bootstrap'
+import {fuzzySearch} from '../Resources/Search.js'
+
+/* global $ */
+
+export default class ShowView extends Component {
+ constructor() {
+ super()
+ this.state = {
+ resource: Show,
+ showData: null,
+ modalOpen: false,
+ newShowFocus: false,
+ alphaFilter: true,
+ activeFilter: false,
+ newFilter: false,
+ inv: ['a-z', ''], //last modified is the first spot, second index is last click
+ loaded: false,
+ }
+
+ this.getData = this.getData.bind(this)
+ this.saveNewShow = this.saveNewShow.bind(this)
+ this.toggleNewSlide = this.toggleNewSlide.bind(this)
+ this.updateTitle = this.updateTitle.bind(this)
+ this.handleKeyDown = this._handleKeyDown.bind(this)
+ this.sortShow = this.sortShow.bind(this)
+ this.handleActive = this.handleActive.bind(this)
+ this.handleAlpha = this.handleAlpha.bind(this)
+ this.handleNew = this.handleNew.bind(this)
+ this.searchTitle = this.searchTitle.bind(this)
+ }
+
+ componentDidMount() {
+ this.getData()
+ }
+
+ componentDidUpdate() {
+ if (this.state.inv[1] != '') {
+ this.sortShow()
+ }
+ }
+
+ saveNewShow() {
+ if (this.state.resource.title != undefined) {
+ // new show
+ $.ajax({
+ url: './slideshow/Show',
+ data: this.state.resource,
+ type: 'post',
+ dataType: 'json',
+ success: function (showId) {
+ window.sessionStorage.setItem('id', showId)
+ window.location.href = './slideshow/Slide/Edit/' + showId
+ }.bind(this),
+ error: function (req, err) {
+ alert('Failed to save data.')
+ console.error(req, err.toString())
+ }.bind(this),
+ })
+ } else {
+ alert('Title cannot be empty')
+ }
+ }
+
+ toggleNewSlide() {
+ this.setState({modalOpen: !this.state.modalOpen})
+ }
+
+ updateTitle(event) {
+ let r = this.state.resource
+ r.title = event.target.value
+ this.setState({
+ resource: r,
+ })
+ }
+
+ /**
+ * Pulls all the shows from the back-end
+ */
+ getData() {
+ $.ajax({
+ url: './slideshow/Show',
+ type: 'GET',
+ dataType: 'json',
+ success: function (data) {
+ let inver = this.state.loaded ? 'active' : 'a-z'
+ if (this.state.loaded) {
+ if (this.state.inv[0] === 'active') {
+ inver = 'active'
+ } else if (this.state.inv[0] === 'inactive') {
+ inver = 'inactive'
+ }
+ }
+ this.setState(
+ {showData: data['listing'], loaded: true, inv: [inver, '']},
+ () => this.sortShow()
+ )
+ }.bind(this),
+ error: function (req, err) {
+ alert('Failed to grab data')
+ console.error(req, err.toString())
+ }.bind(this),
+ })
+ }
+
+ _handleKeyDown(event) {
+ if (event.key === 'Enter') {
+ this.saveNewShow()
+ }
+ }
+
+ sortShow() {
+ let showD = [...this.state.showData]
+ if (this.state.inv[0] !== this.state.inv[1]) {
+ if (this.state.inv[1] === 'newest') {
+ showD.sort((a, b) => b.id - a.id)
+ } else if (this.state.inv[1] === 'a-z') {
+ showD.sort((a, b) => a.title.localeCompare(b.title))
+ } else if (
+ this.state.inv[1] === 'active' ||
+ this.state.inv[0] === 'active'
+ ) {
+ showD.sort((a, b) => b.active - a.active)
+ } else if (this.state.inv[0] === 'inactive') {
+ showD.sort((a, b) => a.active - b.active)
+ }
+ this.setState({inv: [this.state.inv[1], '']})
+ } else {
+ if (this.state.inv[0] === 'oldest') {
+ showD.sort((a, b) => a.id - b.id)
+ } else if (this.state.inv[0] === 'z-a') {
+ showD.sort((a, b) => b.title.localeCompare(a.title))
+ } else if (this.state.inv[0] === 'inactive') {
+ showD.sort((a, b) => a.active - b.active)
+ }
+ this.setState({
+ newFilter: false,
+ activeFilter: false,
+ alphaFilter: false,
+ inv: [this.state.inv[0], ''],
+ })
+ }
+ this.setState({showData: showD})
+ }
+
+ handleAlpha(event) {
+ if (event.target.id !== 'a-z') {
+ this.setState({
+ alphaFilter: true,
+ newFilter: false,
+ activeFilter: false,
+ inv: [this.state.inv[0], 'a-z'],
+ })
+ } else {
+ this.setState({
+ alphaFilter: true,
+ newFilter: false,
+ activeFilter: false,
+ inv: ['z-a', 'z-a'],
+ })
+ }
+ }
+
+ handleActive(event) {
+ if (event.target.id === 'inactive') {
+ this.setState({
+ alphaFilter: false,
+ newFilter: false,
+ activeFilter: true,
+ inv: [this.state.inv[0], 'active'],
+ })
+ } else {
+ this.setState({
+ alphaFilter: false,
+ newFilter: false,
+ activeFilter: true,
+ inv: ['inactive', 'inactive'],
+ })
+ }
+ }
+
+ handleNew(event) {
+ if (event.target.id !== 'newest') {
+ this.setState({
+ alphaFilter: false,
+ newFilter: true,
+ activeFilter: false,
+ inv: [this.state.inv[0], 'newest'],
+ })
+ } else {
+ this.setState({
+ alphaFilter: false,
+ newFilter: true,
+ activeFilter: false,
+ inv: ['oldest', 'oldest'],
+ })
+ }
+ }
+
+ searchTitle(event) {
+ let showD = [...this.state.showData]
+ //a is user typed search value
+ let a = event.target.value.toUpperCase()
+ for (let f = 0; f < showD.length; f++) {
+ showD[f].disabled = true
+ let b = showD[f].title.toUpperCase()
+
+ const weight = fuzzySearch(a, b)
+ if (weight != null && weight.score >= -60) {
+ showD[f].disabled = false
+ } else if (a.length == 0) {
+ showD[f].disabled = false
+ } else if (a.length == 1 && weight != null && weight.score >= -70) {
+ showD[f].disabled = false
+ }
+ }
+ this.setState({showData: showD})
+ }
+
+ render() {
+ const modal = (
+
+
+
+ 
+
+
+
+
+
+
+
+
+ + {cardTitle} +
+
+
+ +
+
+ Activate for students
}
+ theme="light-border"
+ arrow={false}
+ placement="bottom">
+
+
+
+ + +
+
+
+
+
+ )
+ let cardStyle = {border: 'solid 3px white', color: 'dimgrey'}
+ if (this.state.newShowFocus) {
+ cardStyle = {
+ border: 'solid 3px #337ab7',
+ color: '#337ab7',
+ cursor: 'pointer',
+ }
+ }
+ return (
+
+
+ )
+ }
+ }
+}
diff --git a/javascript/Show/custom.css b/javascript/Show/custom.css
new file mode 100644
index 0000000..78174a7
--- /dev/null
+++ b/javascript/Show/custom.css
@@ -0,0 +1,70 @@
+.card-img-caption {
+ border-top-left-radius: calc(.25rem - 1px);
+ border-top-right-radius: calc(.25rem - 1px);
+}
+
+.card-img-top {
+ z-index: 0;
+ max-width: 300px;
+ max-height: 250px;
+ min-width: 300px;
+ min-height: 250px;
+}
+
+.card-img-caption .card-text {
+ position: absolute;
+ top: 0px;
+ right: 5px;
+ height: 5px;
+ cursor: pointer;
+}
+
+.alert-delete {
+ margin-left: 1rem;
+ margin-right: 1rem;
+}
+
+.card-user {
+ position: absolute;
+ top: 2px;
+ left: 5px;
+ height: 20px;
+ color: grey;
+ cursor: pointer;
+}
+
+.tool {
+ background: white;
+ color: #888;
+ font-size: 18px;
+ border: 0;
+ padding-top: 0px;
+ vertical-align: bottom;
+}
+
+.trash:hover {
+ background: white;
+ color: #d9534f;
+ font-size: 18px;
+ border: 0;
+ padding-top: 0px;
+ vertical-align: bottom;
+}
+
+button.drop {
+ width: 90%;
+ margin-left:auto;
+ margin-right:auto;
+}
+
+.remove {
+ margin-top: 1rem;
+}
+
+.sortCards {
+ margin-top: 1%;
+ margin-right: 1%;
+ position:absolute;
+ top:0;
+ right:0;
+}
diff --git a/javascript/SectionForm/index.jsx b/javascript/Show/index.jsx
similarity index 50%
rename from javascript/SectionForm/index.jsx
rename to javascript/Show/index.jsx
index b4369e3..02953af 100644
--- a/javascript/SectionForm/index.jsx
+++ b/javascript/Show/index.jsx
@@ -1,7 +1,7 @@
'use strict'
import React from 'react'
import ReactDOM from 'react-dom'
-import Section from './Section.jsx'
+import ShowView from './ShowView.jsx'
ReactDOM.render(
- , document.getElementById('sectionform'))
+ Shows
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {dropDownItems}
+
+
+
+
+ {modal}
+
+ {cards}
+
+ +
+
+ this.setState({newShowFocus: true})}
+ onMouseLeave={() => this.setState({newShowFocus: false})}
+ style={cardStyle}>
+
+
+
+ Create New Show
+ +
-
- )
- }
-}
-
-ShowForm.propTypes = {
- success: PropTypes.func.isRequired
-}
diff --git a/javascript/ShowForm/Show.jsx b/javascript/ShowForm/Show.jsx
deleted file mode 100644
index 45f6206..0000000
--- a/javascript/ShowForm/Show.jsx
+++ /dev/null
@@ -1,46 +0,0 @@
-'use strict'
-import React, {Component} from 'react'
-import Modal from '../AddOn/Html/Modal.jsx'
-import Form from './Form.jsx'
-
-/* global $, openStatus, slide */
-
-export default class Section extends Component {
- constructor(props) {
- super(props)
- this.state = {showForm:false}
- this.initializeShowLink()
- this.showForm = this.showForm.bind(this)
- this.hideForm = this.hideForm.bind(this)
- }
-
- initializeShowLink() {
- $('#add-show').click(function () {
- this.showForm()
- }.bind(this))
- }
-
- showSaved() {
- this.hideForm()
- }
-
- showForm() {
- this.setState({showForm: true})
- openStatus = false
- slide()
- }
-
- hideForm() {
- this.setState({showForm: false})
- }
-
- backToShow() {
- window.location.href = './slideshow/Show/list'
- }
-
- render() {
- return (
-
-
-
- )
- }
-}
-
-Decision.propTypes = {
- listing: PropTypes.array,
- add: PropTypes.func,
- showForm: PropTypes.func,
-}
diff --git a/javascript/Slide/DecisionForm.js b/javascript/Slide/DecisionForm.js
deleted file mode 100644
index 7504fc8..0000000
--- a/javascript/Slide/DecisionForm.js
+++ /dev/null
@@ -1,52 +0,0 @@
-'use strict'
-import React from 'react'
-import PropTypes from 'prop-types'
-
-const DecisionForm = ({decision, update, save, deleteDecision,}) => {
-
- const updateTitle = (e) => {
- decision.title = e.target.value
- update(decision)
- }
-
- const updateMessage = (e) => {
- decision.message = e.target.value
- update(decision)
- }
-
- const updateNext = () => {
- decision.next = decision.next == '1' ? '0' : '1'
- update(decision)
- }
-
- return (
-
-
-
-
-
-
-
-
-```
-
-#### External Markdown
-
-You can write your content as a separate file and have reveal.js load it at runtime. Note the separator arguments which determine how slides are delimited in the external file: the `data-separator` attribute defines a regular expression for horizontal slides (defaults to `^\r?\n---\r?\n$`, a newline-bounded horizontal rule) and `data-separator-vertical` defines vertical slides (disabled by default). The `data-separator-notes` attribute is a regular expression for specifying the beginning of the current slide's speaker notes (defaults to `note:`). The `data-charset` attribute is optional and specifies which charset to use when loading the external file.
-
-When used locally, this feature requires that reveal.js [runs from a local web server](#full-setup). The following example customises all available options:
-
-```html
-
-
-```
-
-#### Element Attributes
-
-Special syntax (in html comment) is available for adding attributes to Markdown elements. This is useful for fragments, amongst other things.
-
-```html
-
-
-
-```
-
-#### Slide Attributes
-
-Special syntax (in html comment) is available for adding attributes to the slide `` elements generated by your Markdown.
-
-```html
-
-
-
-```
-
-#### Configuring *marked*
-
-We use [marked](https://github.com/chjj/marked) to parse Markdown. To customise marked's rendering, you can pass in options when [configuring Reveal](#configuration):
-
-```javascript
-Reveal.initialize({
- // Options which are passed into marked
- // See https://github.com/chjj/marked#options-1
- markdown: {
- smartypants: true
- }
-});
-```
-
-### Configuration
-
-At the end of your page you need to initialize reveal by running the following code. Note that all config values are optional and will default as specified below.
-
-```javascript
-Reveal.initialize({
-
- // Display controls in the bottom right corner
- controls: true,
-
- // Display a presentation progress bar
- progress: true,
-
- // Set default timing of 2 minutes per slide
- defaultTiming: 120,
-
- // Display the page number of the current slide
- slideNumber: false,
-
- // Push each slide change to the browser history
- history: false,
-
- // Enable keyboard shortcuts for navigation
- keyboard: true,
-
- // Enable the slide overview mode
- overview: true,
-
- // Vertical centering of slides
- center: true,
-
- // Enables touch navigation on devices with touch input
- touch: true,
-
- // Loop the presentation
- loop: false,
-
- // Change the presentation direction to be RTL
- rtl: false,
-
- // Randomizes the order of slides each time the presentation loads
- shuffle: false,
-
- // Turns fragments on and off globally
- fragments: true,
-
- // Flags if the presentation is running in an embedded mode,
- // i.e. contained within a limited portion of the screen
- embedded: false,
-
- // Flags if we should show a help overlay when the questionmark
- // key is pressed
- help: true,
-
- // Flags if speaker notes should be visible to all viewers
- showNotes: false,
-
- // Global override for autolaying embedded media (video/audio/iframe)
- // - null: Media will only autoplay if data-autoplay is present
- // - true: All media will autoplay, regardless of individual setting
- // - false: No media will autoplay, regardless of individual setting
- autoPlayMedia: null,
-
- // Number of milliseconds between automatically proceeding to the
- // next slide, disabled when set to 0, this value can be overwritten
- // by using a data-autoslide attribute on your slides
- autoSlide: 0,
-
- // Stop auto-sliding after user input
- autoSlideStoppable: true,
-
- // Use this method for navigation when auto-sliding
- autoSlideMethod: Reveal.navigateNext,
-
- // Enable slide navigation via mouse wheel
- mouseWheel: false,
-
- // Hides the address bar on mobile devices
- hideAddressBar: true,
-
- // Opens links in an iframe preview overlay
- previewLinks: false,
-
- // Transition style
- transition: 'slide', // none/fade/slide/convex/concave/zoom
-
- // Transition speed
- transitionSpeed: 'default', // default/fast/slow
-
- // Transition style for full page slide backgrounds
- backgroundTransition: 'fade', // none/fade/slide/convex/concave/zoom
-
- // Number of slides away from the current that are visible
- viewDistance: 3,
-
- // Parallax background image
- parallaxBackgroundImage: '', // e.g. "'https://s3.amazonaws.com/hakim-static/reveal-js/reveal-parallax-1.jpg'"
-
- // Parallax background size
- parallaxBackgroundSize: '', // CSS syntax, e.g. "2100px 900px"
-
- // Number of pixels to move the parallax background per slide
- // - Calculated automatically unless specified
- // - Set to 0 to disable movement along an axis
- parallaxBackgroundHorizontal: null,
- parallaxBackgroundVertical: null,
-
- // The display mode that will be used to show slides
- display: 'block'
-
-});
-```
-
-
-The configuration can be updated after initialization using the ```configure``` method:
-
-```javascript
-// Turn autoSlide off
-Reveal.configure({ autoSlide: 0 });
-
-// Start auto-sliding every 5s
-Reveal.configure({ autoSlide: 5000 });
-```
-
-
-### Presentation Size
-
-All presentations have a normal size, that is the resolution at which they are authored. The framework will automatically scale presentations uniformly based on this size to ensure that everything fits on any given display or viewport.
-
-See below for a list of configuration options related to sizing, including default values:
-
-```javascript
-Reveal.initialize({
-
- ...
-
- // The "normal" size of the presentation, aspect ratio will be preserved
- // when the presentation is scaled to fit different resolutions. Can be
- // specified using percentage units.
- width: 960,
- height: 700,
-
- // Factor of the display size that should remain empty around the content
- margin: 0.1,
-
- // Bounds for smallest/largest possible scale to apply to content
- minScale: 0.2,
- maxScale: 1.5
-
-});
-```
-
-If you wish to disable this behavior and do your own scaling (e.g. using media queries), try these settings:
-
-```javascript
-Reveal.initialize({
-
- ...
-
- width: "100%",
- height: "100%",
- margin: 0,
- minScale: 1,
- maxScale: 1
-});
-```
-
-### Dependencies
-
-Reveal.js doesn't _rely_ on any third party scripts to work but a few optional libraries are included by default. These libraries are loaded as dependencies in the order they appear, for example:
-
-```javascript
-Reveal.initialize({
- dependencies: [
- // Cross-browser shim that fully implements classList - https://github.com/eligrey/classList.js/
- { src: 'lib/js/classList.js', condition: function() { return !document.body.classList; } },
-
- // Interpret Markdown in elements
- { src: 'plugin/markdown/marked.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } },
- { src: 'plugin/markdown/markdown.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } },
-
- // Syntax highlight for
diff --git a/templates/index.html b/templates/index.html
new file mode 100644
index 0000000..dd9d9c9
--- /dev/null
+++ b/templates/index.html
@@ -0,0 +1,55 @@
+ elements
- { src: 'plugin/highlight/highlight.js', async: true, callback: function() { hljs.initHighlightingOnLoad(); } },
-
- // Zoom in and out with Alt+click
- { src: 'plugin/zoom-js/zoom.js', async: true },
-
- // Speaker notes
- { src: 'plugin/notes/notes.js', async: true },
-
- // MathJax
- { src: 'plugin/math/math.js', async: true }
- ]
-});
-```
-
-You can add your own extensions using the same syntax. The following properties are available for each dependency object:
-- **src**: Path to the script to load
-- **async**: [optional] Flags if the script should load after reveal.js has started, defaults to false
-- **callback**: [optional] Function to execute when the script has loaded
-- **condition**: [optional] Function which must return true for the script to be loaded
-
-To load these dependencies, reveal.js requires [head.js](http://headjs.com/) *(a script loading library)* to be loaded before reveal.js.
-
-### Ready Event
-
-A 'ready' event is fired when reveal.js has loaded all non-async dependencies and is ready to start navigating. To check if reveal.js is already 'ready' you can call `Reveal.isReady()`.
-
-```javascript
-Reveal.addEventListener( 'ready', function( event ) {
- // event.currentSlide, event.indexh, event.indexv
-} );
-```
-
-Note that we also add a `.ready` class to the `.reveal` element so that you can hook into this with CSS.
-
-### Auto-sliding
-
-Presentations can be configured to progress through slides automatically, without any user input. To enable this you will need to tell the framework how many milliseconds it should wait between slides:
-
-```javascript
-// Slide every five seconds
-Reveal.configure({
- autoSlide: 5000
-});
-```
-When this is turned on a control element will appear that enables users to pause and resume auto-sliding. Alternatively, sliding can be paused or resumed by pressing »a« on the keyboard. Sliding is paused automatically as soon as the user starts navigating. You can disable these controls by specifying ```autoSlideStoppable: false``` in your reveal.js config.
-
-You can also override the slide duration for individual slides and fragments by using the ```data-autoslide``` attribute:
-
-```html
-
- After 2 seconds the first fragment will be shown.
- After 10 seconds the next fragment will be shown.
- Now, the fragment is displayed for 2 seconds before the next slide is shown.
-
-```
-
-To override the method used for navigation when auto-sliding, you can specify the ```autoSlideMethod``` setting. To only navigate along the top layer and ignore vertical slides, set this to ```Reveal.navigateRight```.
-
-Whenever the auto-slide mode is resumed or paused the ```autoslideresumed``` and ```autoslidepaused``` events are fired.
-
-
-### Keyboard Bindings
-
-If you're unhappy with any of the default keyboard bindings you can override them using the ```keyboard``` config option:
-
-```javascript
-Reveal.configure({
- keyboard: {
- 13: 'next', // go to the next slide when the ENTER key is pressed
- 27: function() {}, // do something custom when ESC is pressed
- 32: null // don't do anything when SPACE is pressed (i.e. disable a reveal.js default binding)
- }
-});
-```
-
-### Touch Navigation
-
-You can swipe to navigate through a presentation on any touch-enabled device. Horizontal swipes change between horizontal slides, vertical swipes change between vertical slides. If you wish to disable this you can set the `touch` config option to false when initializing reveal.js.
-
-If there's some part of your content that needs to remain accessible to touch events you'll need to highlight this by adding a `data-prevent-swipe` attribute to the element. One common example where this is useful is elements that need to be scrolled.
-
-
-### Lazy Loading
-
-When working on presentation with a lot of media or iframe content it's important to load lazily. Lazy loading means that reveal.js will only load content for the few slides nearest to the current slide. The number of slides that are preloaded is determined by the `viewDistance` configuration option.
-
-To enable lazy loading all you need to do is change your "src" attributes to "data-src" as shown below. This is supported for image, video, audio and iframe elements. Lazy loaded iframes will also unload when the containing slide is no longer visible.
-
-```html
-
- ![]()
-
-
-
-```
-
-
-### API
-
-The ``Reveal`` object exposes a JavaScript API for controlling navigation and reading state:
-
-```javascript
-// Navigation
-Reveal.slide( indexh, indexv, indexf );
-Reveal.left();
-Reveal.right();
-Reveal.up();
-Reveal.down();
-Reveal.prev();
-Reveal.next();
-Reveal.prevFragment();
-Reveal.nextFragment();
-
-// Randomize the order of slides
-Reveal.shuffle();
-
-// Toggle presentation states, optionally pass true/false to force on/off
-Reveal.toggleOverview();
-Reveal.togglePause();
-Reveal.toggleAutoSlide();
-
-// Shows a help overlay with keyboard shortcuts, optionally pass true/false
-// to force on/off
-Reveal.toggleHelp();
-
-// Change a config value at runtime
-Reveal.configure({ controls: true });
-
-// Returns the present configuration options
-Reveal.getConfig();
-
-// Fetch the current scale of the presentation
-Reveal.getScale();
-
-// Retrieves the previous and current slide elements
-Reveal.getPreviousSlide();
-Reveal.getCurrentSlide();
-
-Reveal.getIndices(); // { h: 0, v: 0 } }
-Reveal.getPastSlideCount();
-Reveal.getProgress(); // (0 == first slide, 1 == last slide)
-Reveal.getSlides(); // Array of all slides
-Reveal.getTotalSlides(); // total number of slides
-
-// Returns the speaker notes for the current slide
-Reveal.getSlideNotes();
-
-// State checks
-Reveal.isFirstSlide();
-Reveal.isLastSlide();
-Reveal.isOverview();
-Reveal.isPaused();
-Reveal.isAutoSliding();
-```
-
-### Slide Changed Event
-
-A 'slidechanged' event is fired each time the slide is changed (regardless of state). The event object holds the index values of the current slide as well as a reference to the previous and current slide HTML nodes.
-
-Some libraries, like MathJax (see [#226](https://github.com/hakimel/reveal.js/issues/226#issuecomment-10261609)), get confused by the transforms and display states of slides. Often times, this can be fixed by calling their update or render function from this callback.
-
-```javascript
-Reveal.addEventListener( 'slidechanged', function( event ) {
- // event.previousSlide, event.currentSlide, event.indexh, event.indexv
-} );
-```
-
-### Presentation State
-
-The presentation's current state can be fetched by using the `getState` method. A state object contains all of the information required to put the presentation back as it was when `getState` was first called. Sort of like a snapshot. It's a simple object that can easily be stringified and persisted or sent over the wire.
-
-```javascript
-Reveal.slide( 1 );
-// we're on slide 1
-
-var state = Reveal.getState();
-
-Reveal.slide( 3 );
-// we're on slide 3
-
-Reveal.setState( state );
-// we're back on slide 1
-```
-
-### Slide States
-
-If you set ``data-state="somestate"`` on a slide ````, "somestate" will be applied as a class on the document element when that slide is opened. This allows you to apply broad style changes to the page based on the active slide.
-
-Furthermore you can also listen to these changes in state via JavaScript:
-
-```javascript
-Reveal.addEventListener( 'somestate', function() {
- // TODO: Sprinkle magic
-}, false );
-```
-
-### Slide Backgrounds
-
-Slides are contained within a limited portion of the screen by default to allow them to fit any display and scale uniformly. You can apply full page backgrounds outside of the slide area by adding a ```data-background``` attribute to your `````` elements. Four different types of backgrounds are supported: color, image, video and iframe.
-
-#### Color Backgrounds
-All CSS color formats are supported, like rgba() or hsl().
-```html
-
- Color
-
-```
-
-#### Image Backgrounds
-By default, background images are resized to cover the full page. Available options:
-
-| Attribute | Default | Description |
-| :--------------------------- | :--------- | :---------- |
-| data-background-image | | URL of the image to show. GIFs restart when the slide opens. |
-| data-background-size | cover | See [background-size](https://developer.mozilla.org/docs/Web/CSS/background-size) on MDN. |
-| data-background-position | center | See [background-position](https://developer.mozilla.org/docs/Web/CSS/background-position) on MDN. |
-| data-background-repeat | no-repeat | See [background-repeat](https://developer.mozilla.org/docs/Web/CSS/background-repeat) on MDN. |
-```html
-
- Image
-
-
- This background image will be sized to 100px and repeated
-
-```
-
-#### Video Backgrounds
-Automatically plays a full size video behind the slide.
-
-| Attribute | Default | Description |
-| :--------------------------- | :------ | :---------- |
-| data-background-video | | A single video source, or a comma separated list of video sources. |
-| data-background-video-loop | false | Flags if the video should play repeatedly. |
-| data-background-video-muted | false | Flags if the audio should be muted. |
-| data-background-size | cover | Use `cover` for full screen and some cropping or `contain` for letterboxing. |
-
-```html
-
- Video
-
-```
-
-#### Iframe Backgrounds
-Embeds a web page as a slide background that covers 100% of the reveal.js width and height. The iframe is in the background layer, behind your slides, and as such it's not possible to interact with it by default. To make your background interactive, you can add the `data-background-interactive` attribute.
-```html
-
- Iframe
-
-```
-
-#### Background Transitions
-Backgrounds transition using a fade animation by default. This can be changed to a linear sliding transition by passing ```backgroundTransition: 'slide'``` to the ```Reveal.initialize()``` call. Alternatively you can set ```data-background-transition``` on any section with a background to override that specific transition.
-
-
-### Parallax Background
-
-If you want to use a parallax scrolling background, set the first two config properties below when initializing reveal.js (the other two are optional).
-
-```javascript
-Reveal.initialize({
-
- // Parallax background image
- parallaxBackgroundImage: '', // e.g. "https://s3.amazonaws.com/hakim-static/reveal-js/reveal-parallax-1.jpg"
-
- // Parallax background size
- parallaxBackgroundSize: '', // CSS syntax, e.g. "2100px 900px" - currently only pixels are supported (don't use % or auto)
-
- // Number of pixels to move the parallax background per slide
- // - Calculated automatically unless specified
- // - Set to 0 to disable movement along an axis
- parallaxBackgroundHorizontal: 200,
- parallaxBackgroundVertical: 50
-
-});
-```
-
-Make sure that the background size is much bigger than screen size to allow for some scrolling. [View example](http://lab.hakim.se/reveal-js/?parallaxBackgroundImage=https%3A%2F%2Fs3.amazonaws.com%2Fhakim-static%2Freveal-js%2Freveal-parallax-1.jpg¶llaxBackgroundSize=2100px%20900px).
-
-
-
-### Slide Transitions
-The global presentation transition is set using the ```transition``` config value. You can override the global transition for a specific slide by using the ```data-transition``` attribute:
-
-```html
-
- This slide will override the presentation transition and zoom!
-
-
-
- Choose from three transition speeds: default, fast or slow!
-
-```
-
-You can also use different in and out transitions for the same slide:
-
-```html
-
- The train goes on …
-
-
- and on …
-
-
- and stops.
-
-
- (Passengers entering and leaving)
-
-
- And it starts again.
-
-```
-
-
-### Internal links
-
-It's easy to link between slides. The first example below targets the index of another slide whereas the second targets a slide with an ID attribute (``````):
-
-```html
-Link
-Link
-```
-
-You can also add relative navigation links, similar to the built in reveal.js controls, by appending one of the following classes on any element. Note that each element is automatically given an ```enabled``` class when it's a valid navigation route based on the current slide.
-
-```html
-
-
-
-
-
-
-```
-
-
-### Fragments
-Fragments are used to highlight individual elements on a slide. Every element with the class ```fragment``` will be stepped through before moving on to the next slide. Here's an example: http://lab.hakim.se/reveal-js/#/fragments
-
-The default fragment style is to start out invisible and fade in. This style can be changed by appending a different class to the fragment:
-
-```html
-
- grow
- shrink
- fade-out
- fade-up (also down, left and right!)
- visible only once
- blue only once
- highlight-red
- highlight-green
- highlight-blue
-
-```
-
-Multiple fragments can be applied to the same element sequentially by wrapping it, this will fade in the text on the first step and fade it back out on the second.
-
-```html
-
-
- I'll fade in, then out
-
-
-```
-
-The display order of fragments can be controlled using the ```data-fragment-index``` attribute.
-
-```html
-
- Appears last
- Appears first
- Appears second
-
-```
-
-### Fragment events
-
-When a slide fragment is either shown or hidden reveal.js will dispatch an event.
-
-Some libraries, like MathJax (see #505), get confused by the initially hidden fragment elements. Often times this can be fixed by calling their update or render function from this callback.
-
-```javascript
-Reveal.addEventListener( 'fragmentshown', function( event ) {
- // event.fragment = the fragment DOM element
-} );
-Reveal.addEventListener( 'fragmenthidden', function( event ) {
- // event.fragment = the fragment DOM element
-} );
-```
-
-### Code syntax highlighting
-
-By default, Reveal is configured with [highlight.js](https://highlightjs.org/) for code syntax highlighting. Below is an example with clojure code that will be syntax highlighted. When the `data-trim` attribute is present, surrounding whitespace is automatically removed. HTML will be escaped by default. To avoid this, for example if you are using `` to call out a line of code, add the `data-noescape` attribute to the `` element.
-
-```html
-
-
-(def lazy-fib
- (concat
- [0 1]
- ((fn rfib [a b]
- (lazy-cons (+ a b) (rfib b (+ a b)))) 0 1)))
-
-
-```
-
-### Slide number
-If you would like to display the page number of the current slide you can do so using the ```slideNumber``` and ```showSlideNumber``` configuration values.
-
-```javascript
-// Shows the slide number using default formatting
-Reveal.configure({ slideNumber: true });
-
-// Slide number formatting can be configured using these variables:
-// "h.v": horizontal . vertical slide number (default)
-// "h/v": horizontal / vertical slide number
-// "c": flattened slide number
-// "c/t": flattened slide number / total slides
-Reveal.configure({ slideNumber: 'c/t' });
-
-// Control which views the slide number displays on using the "showSlideNumber" value:
-// "all": show on all views (default)
-// "speaker": only show slide numbers on speaker notes view
-// "print": only show slide numbers when printing to PDF
-Reveal.configure({ showSlideNumber: 'speaker' });
-
-```
-
-
-### Overview mode
-
-Press "Esc" or "o" keys to toggle the overview mode on and off. While you're in this mode, you can still navigate between slides,
-as if you were at 1,000 feet above your presentation. The overview mode comes with a few API hooks:
-
-```javascript
-Reveal.addEventListener( 'overviewshown', function( event ) { /* ... */ } );
-Reveal.addEventListener( 'overviewhidden', function( event ) { /* ... */ } );
-
-// Toggle the overview mode programmatically
-Reveal.toggleOverview();
-```
-
-
-### Fullscreen mode
-Just press »F« on your keyboard to show your presentation in fullscreen mode. Press the »ESC« key to exit fullscreen mode.
-
-
-### Embedded media
-Add `data-autoplay` to your media element if you want it to automatically start playing when the slide is shown:
-
-```html
-
-```
-
-If you want to enable or disable autoplay globally, for all embedded media, you can use the `autoPlayMedia` configuration option. If you set this to `true` ALL media will autoplay regardless of individual `data-autoplay` attributes. If you initialize with `autoPlayMedia: false` NO media will autoplay.
-
-Note that embedded HTML5 ` 
-
-
-
+
+Welcome to Slideshow
+
+
+
+
\ No newline at end of file
diff --git a/templates/navbar.html b/templates/navbar.html
index 5d18943..04c8057 100644
--- a/templates/navbar.html
+++ b/templates/navbar.html
@@ -1,31 +1,23 @@
-
+
+
+ Learn
++ Navigate slideshows on topics dealing with the health and wellness department. +
+
+
+
+ Practice
++ Take quiz slides that reinforce topics learned. +
+
+
+
+Succeed
++ Achieve knowledge by succesfully completing slideshows. +
+