Add toggle button for edge settings and dark mode.

source/viewer/domutils.js

@@ -164,6 +164,50 @@ OV.SelectRadioButton = function (radioButtons, selectedId)
     }
 };
 
+OV.AddToggle = function (parentElement, className)
+{
+    function UpdateStatus (toggle, status)
+    {
+        if (status) {
+            toggle.classList.add ('on');
+        } else {
+            toggle.classList.remove ('on');
+        }
+    }
+
+    let status = false;
+    let onChange = null;
+
+    let toggleClassName = 'ov_toggle';
+    if (className) {
+        toggleClassName += ' ' + className;
+    }
+    let toggle = OV.AddDiv (parentElement, toggleClassName);
+    OV.AddDiv (toggle, 'ov_toggle_slider');
+
+    toggle.addEventListener ('click', () => {
+        status = !status;
+        UpdateStatus (toggle, status);
+        if (onChange) {
+            onChange ();
+        }
+    });
+
+    return {
+        element : toggle,
+        GetStatus : () => {
+            return status;
+        },
+        SetStatus : (newStatus) => {
+            status = newStatus;
+            UpdateStatus (toggle, status);
+        },
+        OnChange : (onChangeHandler) => {
+            onChange = onChangeHandler;
+        }
+    };
+};
+
 OV.CreateDiv = function (className, innerHTML)
 {
     return OV.CreateDomElement ('div', className, innerHTML);

website/o3dv/css/controls.css

@@ -166,6 +166,38 @@ span.ov_slider_label
 	bottom: -4px;
 }
 
+div.ov_toggle
+{
+	width: 24px;
+	height: 8px;
+	padding: 2px;
+	transition: 0.4s;
+	border: 1px solid var(--ov_foreground_color);
+	border-radius: 10px;
+	cursor: pointer;
+}
+
+div.ov_toggle_slider
+{
+	width: 6px;
+	height: 6px;
+	transition: .4s;
+	border-radius: 8px;
+	border: 1px solid var(--ov_foreground_color);
+}
+
+div.ov_toggle.on
+{
+	background: var(--ov_foreground_color);
+}
+
+div.ov_toggle.on div.ov_toggle_slider
+{
+	background: var(--ov_background_color);
+	transform: translateX(16px);
+	border: 1px solid var(--ov_background_color);
+}
+
 @media (hover)
 {
 

website/o3dv/css/sidebar.css

@@ -27,6 +27,13 @@ div.ov_sidebar_subtitle
 	overflow: hidden;
 }
 
+div.ov_sidebar_subtitle div.ov_sidebar_subtitle_toggle
+{
+	margin-right: 10px;
+	margin-top: 3px;
+	float: left;
+}
+
 div.ov_sidebar_subtitle div.ov_sidebar_subtitle_icon
 {
 	width: 30px;

website/o3dv/js/sidebarsettingspanel.js

@@ -83,7 +83,7 @@ OV.SettingsEdgeDisplaySection = class
     constructor (parentDiv)
     {
         this.parentDiv = parentDiv;
-        this.buttons = null;
+        this.edgeDisplayToggle = null;
         this.pickr = null;
         this.thresholdSlider = null;
         this.thresholdSliderValue = null;
@@ -92,19 +92,17 @@ OV.SettingsEdgeDisplaySection = class
 
     Init (showEdges, edgeColor, edgeThreshold, callbacks)
     {
-        function AddRadioButton (contentDiv, id, text, onChange)
-        {
-            let row = OV.AddDiv (contentDiv, 'ov_sidebar_settings_row');
-            return OV.AddRadioButton (row, 'edge_display', id, text, onChange);
-        }
-
         let contentDiv = OV.AddDiv (this.parentDiv, 'ov_sidebar_settings_content');
         let titleDiv = OV.AddDiv (contentDiv, 'ov_sidebar_subtitle');
-        OV.AddSvgIconElement (titleDiv, 'edges', 'ov_sidebar_subtitle_icon');
-        OV.AddDiv (titleDiv, 'ov_sidebar_subtitle_text', 'Edge Display');
 
-        let buttonsDiv = OV.AddDiv (contentDiv, 'ov_sidebar_settings_padded');
+        this.edgeDisplayToggle = OV.AddToggle (titleDiv, 'ov_sidebar_subtitle_toggle');
+        OV.AddDiv (titleDiv, 'ov_sidebar_subtitle_text', 'Show Edges');
+
         this.edgeSettingsDiv = OV.AddDiv (contentDiv, 'ov_sidebar_settings_padded');
+        this.edgeDisplayToggle.OnChange (() => {
+            OV.ShowDomElement (this.edgeSettingsDiv, this.edgeDisplayToggle.GetStatus ());
+            callbacks.onShowEdgesChange (this.edgeDisplayToggle.GetStatus () ? true : false);
+        });
 
         let edgeColorRow = OV.AddDiv (this.edgeSettingsDiv, 'ov_sidebar_settings_row');
         let predefinedEdgeColors = ['#ffffff', '#e3e3e3', '#c9c9c9', '#898989', '#5f5f5f', '#494949', '#383838', '#0f0f0f'];
@@ -128,29 +126,19 @@ OV.SettingsEdgeDisplaySection = class
         this.thresholdSlider.value = edgeThreshold;
         this.thresholdSliderValue.innerHTML = edgeThreshold;
 
-        this.buttons = [];
+        this.edgeDisplayToggle.SetStatus (showEdges);
-        let offButton = AddRadioButton (buttonsDiv, 'off', 'Don\'t Show Edges', () => {
-            OV.ShowDomElement (this.edgeSettingsDiv, false);
-            callbacks.onShowEdgesChange (false);
-        });
-        let onButton = AddRadioButton (buttonsDiv, 'on', 'Show Edges', () => {
-            OV.ShowDomElement (this.edgeSettingsDiv, true);
-            callbacks.onShowEdgesChange (true);
-        });
-        this.buttons.push (offButton);
-        this.buttons.push (onButton);
-
-        OV.SelectRadioButton (this.buttons, showEdges ? 'on' : 'off');
         this.ShowEdgeSettings (showEdges);
     }
 
     Update (showEdges, edgeColor, edgeThreshold)
     {
-        if (this.buttons === null) {
+        if (this.edgeDisplayToggle === null) {
             return;
         }
-        OV.SelectRadioButton (this.buttons, showEdges ? 'on' : 'off');
+
+        this.edgeDisplayToggle.SetStatus (showEdges);
         this.ShowEdgeSettings (showEdges);
+
         this.pickr.setColor ('#' + OV.ColorToHexString (edgeColor));
         this.thresholdSlider.value = edgeThreshold;
         this.thresholdSliderValue.innerHTML = edgeThreshold;
@@ -175,42 +163,31 @@ OV.SettingsThemeSection = class
     constructor (parentDiv)
     {
         this.parentDiv = parentDiv;
-        this.buttons = null;
+        this.darkModeToggle = null;
     }
 
     Init (themeId, onChange)
     {
-        function AddRadioButton (contentDiv, themeId, themeName, onChange)
-        {
-            let row = OV.AddDiv (contentDiv, 'ov_sidebar_settings_row');
-            return OV.AddRadioButton (row, 'theme', themeId.toString (), themeName, onChange);
-        }
-
         let contentDiv = OV.AddDiv (this.parentDiv, 'ov_sidebar_settings_content');
         let titleDiv = OV.AddDiv (contentDiv, 'ov_sidebar_subtitle');
-        OV.AddSvgIconElement (titleDiv, 'theme', 'ov_sidebar_subtitle_icon');
-        OV.AddDiv (titleDiv, 'ov_sidebar_subtitle_text', 'Appearance');
 
-        let buttonsDiv = OV.AddDiv (contentDiv, 'ov_sidebar_settings_padded');
+        this.darkModeToggle = OV.AddToggle (titleDiv, 'ov_sidebar_subtitle_toggle');
-        this.buttons = [];
+        this.darkModeToggle.OnChange (() => {
-        let lightButton = AddRadioButton (buttonsDiv, OV.Theme.Light, 'Light', () => {
+            onChange (this.darkModeToggle.GetStatus () ? OV.Theme.Dark : OV.Theme.Light);
-            onChange (OV.Theme.Light);
         });
-        let darkButton = AddRadioButton (buttonsDiv, OV.Theme.Dark, 'Dark', () => {
+        OV.AddDiv (titleDiv, 'ov_sidebar_subtitle_text', 'Dark Mode');
-            onChange (OV.Theme.Dark);
-        });
-        this.buttons.push (lightButton);
-        this.buttons.push (darkButton);
 
-        OV.SelectRadioButton (this.buttons, themeId.toString ());
+        let isDarkMode = (themeId === OV.Theme.Dark);
+        this.darkModeToggle.SetStatus (isDarkMode);
     }
 
     Update (themeId)
     {
-        if (this.buttons === null) {
+        if (this.darkModeToggle === null) {
             return;
         }
-        OV.SelectRadioButton (this.buttons, themeId.toString ());
+        let isDarkMode = (themeId === OV.Theme.Dark);
+        this.darkModeToggle.SetStatus (isDarkMode);
     }
 };