Fixes #64 - Added title level in frame list

sozi-projects · May 31, 2018 · f28415d · f28415d
1 parent 275a977
commit f28415d
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 8 deletions.
diff --git a/js/model/Presentation.js b/js/model/Presentation.js
@@ -131,6 +131,7 @@ export const Frame = {
 
     // Default values for new frames
     title: "New frame",
+    titleLevel: 0,
     timeoutMs: 0,
     timeoutEnable: false,
     transitionDurationMs: 1000,
@@ -151,6 +152,7 @@ export const Frame = {
             this.frameId = other.presentation.makeFrameId();
         }
         this.title = other.title;
+        this.titleLevel = other.titleLevel;
         this.timeoutMs = other.timeoutMs;
         this.timeoutEnable = other.timeoutEnable;
         this.transitionDurationMs = other.transitionDurationMs;
@@ -182,6 +184,7 @@ export const Frame = {
         return {
             frameId: this.frameId,
             title: this.title,
+            titleLevel: this.titleLevel,
             timeoutMs: this.timeoutMs,
             timeoutEnable: this.timeoutEnable,
             transitionDurationMs: this.transitionDurationMs,
@@ -209,6 +212,7 @@ export const Frame = {
         return {
             frameId: this.frameId,
             title: this.title,
+            titleLevel: this.titleLevel,
             timeoutMs: this.timeoutMs,
             timeoutEnable: this.timeoutEnable,
             transitionDurationMs: this.transitionDurationMs,
@@ -222,6 +226,7 @@ export const Frame = {
     fromStorable(storable) {
         copyIfSet(this, storable, "frameId");
         copyIfSet(this, storable, "title");
+        copyIfSet(this, storable, "titleLevel");
         copyIfSet(this, storable, "timeoutMs");
         copyIfSet(this, storable, "timeoutEnable");
         copyIfSet(this, storable, "transitionDurationMs");

diff --git a/js/view/Properties.js b/js/view/Properties.js
@@ -78,6 +78,7 @@ Properties.renderPresentationProperties = function () {
     const c = this.controller;
 
     const timeoutMsDisabled = c.getFrameProperty("timeoutEnable").every(value => !value);
+    const showInFrameListDisabled = c.getFrameProperty("showInFrameList").every(value => !value);
     const outlineElementIdDisabled = c.getLayerProperty("outlineElementAuto").every(value => value);
 
     const layersToCopy = {
@@ -101,6 +102,9 @@ Properties.renderPresentationProperties = function () {
         h("label", {for: "field-title"}, _("Title")),
         this.renderTextField("title", false, c.getFrameProperty, c.setFrameProperty, true),
 
+        h("label", {for: "field-titleLevel"}, _("Title level in frame list")),
+        this.renderRangeField("titleLevel", showInFrameListDisabled, c.getFrameProperty, c.setFrameProperty, 0, 4, 1),
+
         h("label", {for: "field-frameId"}, _("Id")),
         this.renderTextField("frameId", false, c.getFrameProperty, c.setFrameProperty, false),
 
@@ -143,7 +147,7 @@ Properties.renderPresentationProperties = function () {
         this.renderTextField("outlineElementId", outlineElementIdDisabled, c.getLayerProperty, c.setLayerProperty, true),
 
         h("label", {for: "field-opacity"}, _("Layer opacity")),
-        this.renderRangeField("opacity", c.getCameraProperty, c.setCameraProperty, 0, 1, 0.1),
+        this.renderRangeField("opacity", false, c.getCameraProperty, c.setCameraProperty, 0, 1, 0.1),
 
         h("h1", _("Transition")),
 
@@ -209,7 +213,7 @@ Properties.renderTextField = function (property, disabled, getter, setter, accep
 
     const values = asArray(getter.call(c, property));
     const className = values.length > 1 ? "multiple" : undefined;
-    const value = values.length >= 1 ? values[0] : "";
+    const value = values.length >= 1 ? values[values.length - 1] : "";
 
     return h("input", {
         id: "field-" + property,
@@ -231,7 +235,7 @@ Properties.renderNumberField = function (property, disabled, getter, setter, sig
 
     const values = asArray(getter.call(c, property));
     const className = values.length > 1 ? "multiple" : undefined;
-    const value = values.length >= 1 ? values[0] / factor : 0; // TODO use default value
+    const value = values.length >= 1 ? values[values.length - 1] / factor : 0; // TODO use default value
 
     return h("input", {
         id: "field-" + property,
@@ -251,12 +255,12 @@ Properties.renderNumberField = function (property, disabled, getter, setter, sig
     });
 };
 
-Properties.renderRangeField = function (property, getter, setter, min, max, step) {
+Properties.renderRangeField = function (property, disabled, getter, setter, min, max, step) {
     const c = this.controller;
 
     const values = asArray(getter.call(c, property));
     const className = values.length > 1 ? "multiple" : undefined;
-    const value = values.length >= 1 ? values[0] : (min + max) / 2; // TODO use default value
+    const value = values.length >= 1 ? values[values.length - 1] : (min + max) / 2; // TODO use default value
 
     return h("input", {
         id: "field-" + property,
@@ -267,6 +271,7 @@ Properties.renderRangeField = function (property, getter, setter, min, max, step
         step,
         value,
         className,
+        disabled,
         onchange() {
             const value = parseFloat(this.value);
             if (!isNaN(value) && value >= min && value <= max) {
@@ -281,7 +286,7 @@ Properties.renderToggleField = function (label, title, property, getter, setter)
 
     const values = asArray(getter.call(c, property));
     let className = values.length > 1 ? "multiple" : "";
-    const value = values.length >= 1 ? values[0] : false; // TODO use default value
+    const value = values.length >= 1 ? values[values.length - 1] : false; // TODO use default value
     if (value) {
         className += " active";
     }
@@ -300,7 +305,7 @@ Properties.renderSelectField = function (property, getter, setter, options) {
 
     const values = asArray(getter.call(c, property));
     const className = values.length > 1 ? "multiple" : undefined;
-    const value = values.length >= 1 ? values[0] : options[0];
+    const value = values.length >= 1 ? values[values.length - 1] : options[0];
 
     return h("select", {
             id: "field-" + property,

diff --git a/templates/player.html b/templates/player.html
@@ -52,6 +52,11 @@
                 text-overflow: ellipsis;
             }
 
+            li.sozi-title-level-1:before { content: '. . ';             color: rgb(100, 100, 100); }
+            li.sozi-title-level-2:before { content: '. . . . ';         color: rgb(100, 100, 100); }
+            li.sozi-title-level-3:before { content: '. . . . . . ';     color: rgb(100, 100, 100); }
+            li.sozi-title-level-4:before { content: '. . . . . . . . '; color: rgb(100, 100, 100); }
+
             .sozi-frame-list a {
                 color: inherit;
                 text-decoration: none;
@@ -125,7 +130,7 @@
         <ol class="sozi-frame-list">
             {% for frame in pres.frames %}
                 {% if frame.showInFrameList %}
-                    <li value="{{ loop.index }}"><a href="#{{ frame.frameId }}" title="{{ frame.title }}">{{ frame.title }}</a></li>
+                    <li class="sozi-title-level-{{ frame.titleLevel }}" value="{{ loop.index }}"><a href="#{{ frame.frameId }}" title="{{ frame.title }}">{{ frame.title }}</a></li>
                 {% endif %}
             {% endfor %}
         </ol>