diff --git a/css/darkmode.css b/css/darkmode.css new file mode 100644 index 0000000000..a85cb729a5 --- /dev/null +++ b/css/darkmode.css @@ -0,0 +1,71 @@ +/* Dark mode wheel nav slices for container #wheel */ +.wheelnav-wheel-slice-basic-0, +.wheelnav-wheel-slice-basic-1, +.wheelnav-wheel-slice-basic-2 { + fill: #222; + stroke: #444; + cursor: pointer; +} + +.wheelnav-wheel-slice-hover-0, +.wheelnav-wheel-slice-hover-1, +.wheelnav-wheel-slice-hover-2 { + fill: #555; + stroke: #666; + cursor: pointer; +} + +.wheelnav-wheel-slice-selected-0, +.wheelnav-wheel-slice-selected-1, +.wheelnav-wheel-slice-selected-2 { + fill: #888; + stroke: #aaa; + cursor: default; +} + +/* Dark mode titles for container #wheel */ +.wheelnav-wheel-title-basic-0, +.wheelnav-wheel-title-basic-1, +.wheelnav-wheel-title-basic-2 { + fill: #eee; + cursor: pointer; +} + +.wheelnav-wheel-title-hover-0, +.wheelnav-wheel-title-hover-1, +.wheelnav-wheel-title-hover-2 { + fill: #fff; + cursor: pointer; +} + +.wheelnav-wheel-title-selected-0, +.wheelnav-wheel-title-selected-1, +.wheelnav-wheel-title-selected-2 { + fill: #ccc; + cursor: default; +} + +/* Dark mode lines for container #wheel */ +.wheelnav-wheel-line-basic-0, +.wheelnav-wheel-line-basic-1, +.wheelnav-wheel-line-basic-2 { + stroke: #444; + stroke-width: 1; + cursor: pointer; +} + +.wheelnav-wheel-line-hover-0, +.wheelnav-wheel-line-hover-1, +.wheelnav-wheel-line-hover-2 { + stroke: #666; + stroke-width: 2; + cursor: pointer; +} + +.wheelnav-wheel-line-selected-0, +.wheelnav-wheel-line-selected-1, +.wheelnav-wheel-line-selected-2 { + stroke: #888; + stroke-width: 1; + cursor: default; +} diff --git a/css/themes.css b/css/themes.css index ac8aa0afdb..1f7764a932 100644 --- a/css/themes.css +++ b/css/themes.css @@ -140,4 +140,76 @@ color: #e2e2e2; } +/* Dark mode wheel nav slices for container #wheel */ +.wheelnav-wheel-slice-basic-0, +.wheelnav-wheel-slice-basic-1, +.wheelnav-wheel-slice-basic-2 { + fill: #222; + stroke: #444; + cursor: pointer; +} + +.wheelnav-wheel-slice-hover-0, +.wheelnav-wheel-slice-hover-1, +.wheelnav-wheel-slice-hover-2 { + fill: #555; + stroke: #666; + cursor: pointer; +} + +.wheelnav-wheel-slice-selected-0, +.wheelnav-wheel-slice-selected-1, +.wheelnav-wheel-slice-selected-2 { + fill: #888; + stroke: #aaa; + cursor: default; +} + +/* Dark mode titles for container #wheel */ +.wheelnav-wheel-title-basic-0, +.wheelnav-wheel-title-basic-1, +.wheelnav-wheel-title-basic-2 { + fill: #eee; + cursor: pointer; +} + +.wheelnav-wheel-title-hover-0, +.wheelnav-wheel-title-hover-1, +.wheelnav-wheel-title-hover-2 { + fill: #fff; + cursor: pointer; +} + +.wheelnav-wheel-title-selected-0, +.wheelnav-wheel-title-selected-1, +.wheelnav-wheel-title-selected-2 { + fill: #ccc; + cursor: default; +} + +/* Dark mode lines for container #wheel */ +.wheelnav-wheel-line-basic-0, +.wheelnav-wheel-line-basic-1, +.wheelnav-wheel-line-basic-2 { + stroke: #444; + stroke-width: 1; + cursor: pointer; +} + +.wheelnav-wheel-line-hover-0, +.wheelnav-wheel-line-hover-1, +.wheelnav-wheel-line-hover-2 { + stroke: #666; + stroke-width: 2; + cursor: pointer; +} + +.wheelnav-wheel-line-selected-0, +.wheelnav-wheel-line-selected-1, +.wheelnav-wheel-line-selected-2 { + stroke: #888; + stroke-width: 1; + cursor: default; +} + /* Your Custom Theme can go here if you don't want to modify the existing dark mode */ \ No newline at end of file diff --git a/index.html b/index.html index fb29c55cf0..959ba78096 100644 --- a/index.html +++ b/index.html @@ -1,35 +1,74 @@ - - - + + Music Blocks - - - - + + + + - - - + + + - - - - - - - - - - - - + + + + + + + + + + + @@ -53,11 +92,13 @@ - + @@ -66,738 +107,935 @@ - - - - + + + + + - + - + - +
-
-
-
-
- - - -
+
+
+
+ + + +
- - - -
-

Solfege Pitch Preview

- - - - + + + +
+

Solfege Pitch Preview

+ + + + +
+ + + + +
+ // Hide certain elements + hideElementById("Show/hide blocks"); + hideElementById("Expand/collapse blocks"); + hideElementById("Decrease block size"); + hideElementById("Increase block size"); + hideElementById("grid"); + hideElementById("palette"); + } else { + // Disable play-only mode + body.classList.remove("play-only"); + removePersistentNotification(); + + if (homeButton) homeButton.style = ""; + if (buttonContainer) buttonContainer.style = ""; + + showElementById("Show/hide blocks"); + showElementById("Expand/collapse blocks"); + showElementById("Decrease block size"); + showElementById("Increase block size"); + showElementById("grid"); + showElementById("palette"); + } + } - + togglePlayOnlyMode(); - \ No newline at end of file + window.addEventListener("resize", togglePlayOnlyMode); + }); + + + diff --git a/lib/wheelnav.js b/lib/wheelnav.js index 946e74e019..bdfac84e20 100644 --- a/lib/wheelnav.js +++ b/lib/wheelnav.js @@ -285,9 +285,110 @@ if(this.spreaderPathOutAttr===undefined||this.spreaderPathOutAttr===null){this.s if(this.spreaderTitleInAttr===undefined||this.spreaderTitleInAttr===null){this.spreaderTitleInAttr={fill:"#eee",stroke:"#444",cursor:'pointer'};} if(this.spreaderTitleOutAttr===undefined||this.spreaderTitleOutAttr===null){this.spreaderTitleOutAttr={fill:"#eee",stroke:"#444",cursor:'pointer'};} if(this.markerAttr===undefined||this.markerAttr===null){this.markerAttr={stroke:"#444","stroke-width":2};}} -else{this.spreaderPathInAttr={"class":this.getSpreaderCssClass("in")};this.spreaderPathOutAttr={"class":this.getSpreaderCssClass("out")};this.spreaderTitleInAttr={"class":this.getSpreaderTitleCssClass("in")};this.spreaderTitleOutAttr={"class":this.getSpreaderTitleCssClass("out")};this.markerAttr={"class":this.getMarkerCssClass()};}};wheelnavItem.prototype.styleNavItem=function(){if(!this.wheelnav.cssMode){this.slicePathAttr={stroke:"#333","stroke-width":0,cursor:'pointer',"fill-opacity":1};this.sliceHoverAttr={stroke:"#222","stroke-width":0,cursor:'pointer',"fill-opacity":0.77};this.sliceSelectedAttr={stroke:"#111","stroke-width":0,cursor:'default',"fill-opacity":1};this.titleAttr={font:this.titleFont,fill:"#333",stroke:"none",cursor:'pointer'};this.titleHoverAttr={font:this.titleFont,fill:"#222",cursor:'pointer',stroke:"none"};this.titleSelectedAttr={font:this.titleFont,fill:"#fff",cursor:'default'};this.linePathAttr={stroke:"#444","stroke-width":1,cursor:'pointer'};this.lineHoverAttr={stroke:"#222","stroke-width":2,cursor:'pointer'};this.lineSelectedAttr={stroke:"#444","stroke-width":1,cursor:'default'};} -else{this.slicePathAttr={"class":this.wheelnav.getSliceCssClass(this.wheelItemIndex,"basic")};this.sliceHoverAttr={"class":this.wheelnav.getSliceCssClass(this.wheelItemIndex,"hover")};this.sliceSelectedAttr={"class":this.wheelnav.getSliceCssClass(this.wheelItemIndex,"selected")};this.titleAttr={"class":this.wheelnav.getTitleCssClass(this.wheelItemIndex,"basic")};this.titleHoverAttr={"class":this.wheelnav.getTitleCssClass(this.wheelItemIndex,"hover")};this.titleSelectedAttr={"class":this.wheelnav.getTitleCssClass(this.wheelItemIndex,"selected")};this.linePathAttr={"class":this.wheelnav.getLineCssClass(this.wheelItemIndex,"basic")};this.lineHoverAttr={"class":this.wheelnav.getLineCssClass(this.wheelItemIndex,"hover")};this.lineSelectedAttr={"class":this.wheelnav.getLineCssClass(this.wheelItemIndex,"selected")};} -this.sliceClickablePathAttr={fill:"#FFF",stroke:"#FFF","stroke-width":0,cursor:'pointer',"fill-opacity":0.01};this.sliceClickableHoverAttr={stroke:"#FFF","stroke-width":0,cursor:'pointer'};this.sliceClickableSelectedAttr={stroke:"#FFF","stroke-width":0,cursor:'default'};} +else{this.spreaderPathInAttr={"class":this.getSpreaderCssClass("in")};this.spreaderPathOutAttr={"class":this.getSpreaderCssClass("out")};this.spreaderTitleInAttr={"class":this.getSpreaderTitleCssClass("in")};this.spreaderTitleOutAttr={"class":this.getSpreaderTitleCssClass("out")};this.markerAttr={"class":this.getMarkerCssClass()};}};wheelnavItem.prototype.styleNavItem = function() { + if(!this.wheelnav.cssMode) { + // Light mode with inline styles + this.slicePathAttr = { + stroke: "#333", + "stroke-width": 0, + cursor: 'pointer', + "fill-opacity": 1 + }; + this.sliceHoverAttr = { + stroke: "#222", + "stroke-width": 0, + cursor: 'pointer', + "fill-opacity": 0.77 + }; + this.sliceSelectedAttr = { + stroke: "#111", + "stroke-width": 0, + cursor: 'default', + "fill-opacity": 1 + }; + this.titleAttr = { + font: this.titleFont, + fill: "#333", + stroke: "none", + cursor: 'pointer' + }; + this.titleHoverAttr = { + font: this.titleFont, + fill: "#222", + cursor: 'pointer', + stroke: "none" + }; + this.titleSelectedAttr = { + font: this.titleFont, + fill: "#fff", + cursor: 'default' + }; + this.linePathAttr = { + stroke: "#444", + "stroke-width": 1, + cursor: 'pointer' + }; + this.lineHoverAttr = { + stroke: "#222", + "stroke-width": 2, + cursor: 'pointer' + }; + this.lineSelectedAttr = { + stroke: "#444", + "stroke-width": 1, + cursor: 'default' + }; + } else { + // Dark mode using CSS classes for fast rendering(Reduced time to render from 1500ms to 50ms ig) + this.slicePathAttr = { + "class": this.wheelnav.getSliceCssClass(this.wheelItemIndex, "basic") + }; + this.sliceHoverAttr = { + "class": this.wheelnav.getSliceCssClass(this.wheelItemIndex, "hover") + }; + this.sliceSelectedAttr = { + "class": this.wheelnav.getSliceCssClass(this.wheelItemIndex, "selected") + }; + this.titleAttr = { + "class": this.wheelnav.getTitleCssClass(this.wheelItemIndex, "basic") + }; + this.titleHoverAttr = { + "class": this.wheelnav.getTitleCssClass(this.wheelItemIndex, "hover") + }; + this.titleSelectedAttr = { + "class": this.wheelnav.getTitleCssClass(this.wheelItemIndex, "selected") + }; + this.linePathAttr = { + "class": this.wheelnav.getLineCssClass(this.wheelItemIndex, "basic") + }; + this.lineHoverAttr = { + "class": this.wheelnav.getLineCssClass(this.wheelItemIndex, "hover") + }; + this.lineSelectedAttr = { + "class": this.wheelnav.getLineCssClass(this.wheelItemIndex, "selected") + }; + } + + // Clickable slice styles - consistent for both modes + this.sliceClickablePathAttr = { + fill: "#FFF", + stroke: "#FFF", + "stroke-width": 0, + cursor: 'pointer', + "fill-opacity": 0.01 + }; + this.sliceClickableHoverAttr = { + stroke: "#FFF", + "stroke-width": 0, + cursor: 'pointer' + }; + this.sliceClickableSelectedAttr = { + stroke: "#FFF", + "stroke-width": 0, + cursor: 'default' + }; +}; + wheelnav.prototype.getSliceCssClass=function(index,subclass){return"wheelnav-"+this.holderId+"-slice-"+subclass+"-"+index;};wheelnav.prototype.getTitleCssClass=function(index,subclass){return"wheelnav-"+this.holderId+"-title-"+subclass+"-"+index;};wheelnav.prototype.getLineCssClass=function(index,subclass){return"wheelnav-"+this.holderId+"-line-"+subclass+"-"+index;};wheelnav.prototype.getSpreaderCssClass=function(state){return"wheelnav-"+this.holderId+"-spreader-"+state;};wheelnav.prototype.getSpreaderTitleCssClass=function(state){return"wheelnav-"+this.holderId+"-spreadertitle-"+state;};wheelnav.prototype.getMarkerCssClass=function(){return"wheelnav-"+this.holderId+"-marker";};var pathHelper=function(){this.sliceRadius=0;this.startAngle=0;this.middleAngle=0;this.endAngle=0;this.sliceAngle=0;this.startTheta=0;this.middleTheta=0;this.endTheta=0;this.titlePosX=0;this.titlePosY=0;this.titleRadius=0;this.titleTheta=0;this.custom=null;this.centerX=0;this.centerY=0;this.wheelRadius=0;this.itemIndex=0;this.navItemCount=0;this.navAngle=0;this.setBaseValue=function(percent,custom){if(custom===null){custom=new slicePathCustomization();} else{this.custom=custom;} this.sliceRadius=this.wheelRadius*percent*0.9;this.middleAngle=this.startAngle+this.sliceAngle/2;this.endAngle=this.startAngle+this.sliceAngle;this.startTheta=this.getTheta(this.startAngle);this.middleTheta=this.getTheta(this.middleAngle);this.endTheta=this.getTheta(this.endAngle);if(custom!==null){if(custom.titleRadiusPercent!==null){this.titleRadius=this.sliceRadius*custom.titleRadiusPercent;}