From 395713b4cd36d2b73a2d294ea9247353230dc09c Mon Sep 17 00:00:00 2001 From: Dominic Masters Date: Tue, 13 Mar 2018 05:17:39 +1100 Subject: [PATCH] Import W95 code from previously abandoned project --- public/components/w95/ContextButton.jsx | 88 +++++++++ public/components/w95/ContextMenu.jsx | 69 +++++++ public/components/w95/ContextMenuButton.jsx | 45 +++++ public/components/w95/Window95.jsx | 75 ++++++++ public/images/95/1x/95button.png | Bin 0 -> 189 bytes public/images/95/1x/95button_icons.png | Bin 0 -> 436 bytes public/images/95/1x/95button_inverted.png | Bin 0 -> 187 bytes public/images/95/1x/95frame.png | Bin 0 -> 188 bytes public/images/95/1x/95window.png | Bin 0 -> 187 bytes public/images/95/2x/95button.png | Bin 0 -> 187 bytes public/images/95/2x/95button_icons.png | Bin 0 -> 719 bytes public/images/95/2x/95button_inverted.png | Bin 0 -> 188 bytes public/images/95/2x/95frame.png | Bin 0 -> 196 bytes public/images/95/2x/95window.png | Bin 0 -> 203 bytes public/images/dotted_bg_yellow.png | Bin 0 -> 171 bytes public/styles/components/_w95.scss | 196 ++++++++++++++++++++ 16 files changed, 473 insertions(+) create mode 100644 public/components/w95/ContextButton.jsx create mode 100644 public/components/w95/ContextMenu.jsx create mode 100644 public/components/w95/ContextMenuButton.jsx create mode 100644 public/components/w95/Window95.jsx create mode 100644 public/images/95/1x/95button.png create mode 100644 public/images/95/1x/95button_icons.png create mode 100644 public/images/95/1x/95button_inverted.png create mode 100644 public/images/95/1x/95frame.png create mode 100644 public/images/95/1x/95window.png create mode 100644 public/images/95/2x/95button.png create mode 100644 public/images/95/2x/95button_icons.png create mode 100644 public/images/95/2x/95button_inverted.png create mode 100644 public/images/95/2x/95frame.png create mode 100644 public/images/95/2x/95window.png create mode 100644 public/images/dotted_bg_yellow.png create mode 100644 public/styles/components/_w95.scss diff --git a/public/components/w95/ContextButton.jsx b/public/components/w95/ContextButton.jsx new file mode 100644 index 0000000..aa2e1f2 --- /dev/null +++ b/public/components/w95/ContextButton.jsx @@ -0,0 +1,88 @@ +import React, { Component } from 'react'; +import { render } from 'react-dom'; + +import ContextMenuButton from './ContextMenuButton'; + +class ContextButton extends Component { + constructor(props) { + super(props); + + this.handleClick = function(e) { + if(this.isOpen()) { + //Already active, close menu. + this.props.menu.closeMenu(); + } else { + this.props.menu.openMenu(this.props.selfRef, this); + } + e.stopPropagation(); + }.bind(this); + + this.handleHover = function() { + this.props.menu.hoverMenu(this.props.selfRef, this); + }.bind(this); + } + + componentDidMount() { + let e = this.refs[this.props.selfRef]; + + e.addEventListener('click', this.handleClick); + e.addEventListener('mouseover', this.handleHover); + } + + componentWillUmount() { + let e = this.refs[this.props.selfRef]; + + e.removeEventListener('click', this.handleClick); + e.removeEventListener('mouseover', this.handleHover); + } + + open() { + if(this.isDisabled()) return this.hide(); + this.refs[this.props.selfRef].addClass("active"); + } + + isDisabled() {return this.refs[this.props.selfRef].hasClass("disabled");} + + hide() { + this.refs[this.props.selfRef].removeClass("active"); + } + + isOpen() { + return this.refs[this.props.selfRef].hasClass("active"); + } + + render() { + let cls = "btn"; + + let options = []; + if(this.props.data === "disabled") { + cls += " disabled"; + } else { + let opts = Object.keys(this.props.data); + for(let i = 0; i < opts.length; i++) { + let k = opts[i]; + let o = this.props.data[k]; + //options.push(
{k}
); + options.push(); + } + } + + let menu =
; + if(options.length > 0) { + menu = ( +
+ {options} +
+ ); + } + + return ( +
+ {this.props.title} + {menu} +
+ ) + } +} + +export default ContextButton; diff --git a/public/components/w95/ContextMenu.jsx b/public/components/w95/ContextMenu.jsx new file mode 100644 index 0000000..eede9fa --- /dev/null +++ b/public/components/w95/ContextMenu.jsx @@ -0,0 +1,69 @@ +import React, { Component } from 'react'; +import { render } from 'react-dom'; + +import ContextButton from './ContextButton'; +import ContextMenuButton from './ContextMenuButton'; + +class ContextMenu extends Component { + constructor(props) { + super(props); + + this.handleClickOutside = function(e) { + this.closeMenu(); + e.stopPropagation(); + }.bind(this); + } + + isOpen() { + return this.open; + } + + openMenu(ref, el) { + let keys = Object.keys(this.refs); + for(let i = 0; i < keys.length; i++) { + this.refs[keys[i]].hide(ref, el); + } + el.open(); + this.open = true; + } + + closeMenu() { + let keys = Object.keys(this.refs); + for(let i = 0; i < keys.length; i++) { + this.refs[keys[i]].hide(); + } + this.open = false; + } + + hoverMenu(ref, el) { + if(!this.isOpen()) return; + this.openMenu(ref, el); + } + + componentDidMount() { + document.addEventListener('click', this.handleClickOutside); + } + + componentWillUmount() { + document.removeEventListener('click', this.handleClickOutside); + } + + render() { + let contextButtons = []; + let btnKeys = Object.keys(this.props.menu); + for(let i = 0; i < btnKeys.length; i++) { + let key = btnKeys[i]; + var b = this.props.menu[key]; + if(b === false) continue; + contextButtons.push(); + } + + return ( +
+ {contextButtons} +
+ ); + } +} + +export default ContextMenu; diff --git a/public/components/w95/ContextMenuButton.jsx b/public/components/w95/ContextMenuButton.jsx new file mode 100644 index 0000000..98b9647 --- /dev/null +++ b/public/components/w95/ContextMenuButton.jsx @@ -0,0 +1,45 @@ +import React, { Component } from 'react'; +import { render } from 'react-dom'; + +class ContextMenuButton extends Component { + constructor(props) { + super(props); + + this.handleClick = function(e) { + e.stopPropagation(); + if(this.isDisabled()) return; + this.props.button.props.menu.closeMenu(); + this.clicked(); + }.bind(this); + } + + clicked() { + if(typeof this.props.data === 'function') { + this.props.data(); + } + } + + componentDidMount() { + this.refs.option.addEventListener('click', this.handleClick); + } + + componentWillUmount() { + this.refs.option.removeEventListener('click', this.handleClick); + } + + isDisabled() {return this.props.data === "disabled";} + + render() { + let cls = "menu-option"; + + if(this.isDisabled()) cls += " disabled"; + + return ( +
+ {this.props.title} +
+ ); + } +} + +export default ContextMenuButton; diff --git a/public/components/w95/Window95.jsx b/public/components/w95/Window95.jsx new file mode 100644 index 0000000..8f93936 --- /dev/null +++ b/public/components/w95/Window95.jsx @@ -0,0 +1,75 @@ +import React, { Component } from 'react'; + +import ContextMenuButton from './ContextMenuButton'; +import ContextButton from './ContextButton'; +import ContextMenu from './ContextMenu'; + +const defaultButtons = { + maximize: false, + minimize: "disabled", + close: true +}; + +const defaultMenus = { + "File": { + "New...": true, + "Open...": "disabled", + "Exit": true, + }, + + "Edit": "disabled", + "Help": { + "View Help...": true, + "About domsPlace();": true + } +}; + +class Window95 extends Component { + constructor(props) { + super(props); + + this.state = { + title: this.props.title ? this.props.title : "Untitled", + buttons: this.props.buttons ? this.props.buttons : defaultButtons, + menu: this.props.menu ? this.props.menu : defaultMenus + }; + } + + render() { + let btns = []; + let btnKeys = Object.keys(this.state.buttons); + for(let i = 0; i < btnKeys.length; i++) { + let key = btnKeys[i]; + var b = this.state.buttons[key]; + if(b === false) continue; + let cls = "btn " + btnKeys[i]; + if(b !== true && b !== false) cls += " " + b; + btns.push(
); + } + + let menu =
+ if(this.state.menu !== "false") { + menu = ; + } + + let clss = "window "; + if(this.props.className) clss += this.props.className; + + return ( +
+
+
+ {this.state.title} +
+ {btns} +
+
+ {menu} + + {this.props.children} +
+ ); + } +} + +export default Window95; diff --git a/public/images/95/1x/95button.png b/public/images/95/1x/95button.png new file mode 100644 index 0000000000000000000000000000000000000000..e2a2360756379b613ac23d5bf7a5243638292335 GIT binary patch literal 189 zcmeAS@N?(olHy`uVBq!ia0vp^Y#_`5A|IT2?*XJ3i-X*q7}lMWc?smOq&xaLGB9lH z=l+w(3gmMZctjR6Fz_7)VaDV6D^h@hk|nMYCBgY=CFO}lsSE{)nRz98d8s7|CVB>X zhGs6A>%RgO>3X_2hDd}b|LA8mFfjPT?tN!}y?mdvlvIFf1H+Lt1wW=Ej>i%>H5%I_ b|1mSf3B`HO5MF%}sFA_b)z4*}Q$iB}h1)dk literal 0 HcmV?d00001 diff --git a/public/images/95/1x/95button_icons.png b/public/images/95/1x/95button_icons.png new file mode 100644 index 0000000000000000000000000000000000000000..9a638924f14ac621a06bc196b457f634ce5ee3f7 GIT binary patch literal 436 zcmeAS@N?(olHy`uVBq!ia0vp^20$#r!3HEx+wWTrq!^2X+?^QKos)S9a~60+7BevL9R^{>x%ba4!caKAdavFoq_kMr-Be?PC`D+~}(U1u!e^P%skf2r}Y*rij} zS0vS2z43oAx9i^1_CGRbdCO|-j(&ghBKCg(zs}1u8=imGyvX;Zc|~&>XZzo-oO<^y z?0*%08C1^9u~)j)S|?C?LGST~@RVKo9c2sWA5nPuM|)BEBKfvg2d~PUERlF8xq4@F zoxt)Nhs^au3(i02TU7q{@P4Is$#=i?IDQLPEI+jSvU6SEGqxSGV$GZ1-@It_k4fR@ zo5-)amw$>>Jr}8IuaRi+MX}?a2-sHFL4_HNCEOoh|y&!wyT%L=1UnVom z{3XOM_cRD3(XPnBeZG1+*zVlCnR6QFEq(rW57YFGIo3X>SLX zhGs6A>%RgOX?wajhDd}bGc^6TFgX0bt&L5DhpB*5K)U7q{r&t&!itPS4T(Eg)PDSz ZXE>4-=RNHIe`T literal 0 HcmV?d00001 diff --git a/public/images/95/1x/95frame.png b/public/images/95/1x/95frame.png new file mode 100644 index 0000000000000000000000000000000000000000..f3a7c95983bc5e4eb061abdfd0cefe672796a745 GIT binary patch literal 188 zcmeAS@N?(olHy`uVBq!ia0vp^Y#_`5A|IT2?*XJ3i-X*q7}lMWc?smOq&xaLGB9lH z=l+w(3gmMZctjR6Fz_7)VaDV6D^h@hk|nMYCBgY=CFO}lsSE{)nRz98d8s7|CVB>X zhGs6A>%RgO>3F(0hDd}bXS{#$zrW9sLFeFs0}RL6`{p}LW!UIA!-7+QU9wsAfC}4> b|MCohMcLU;qB1W7^)Yz5`njxgN@xNA&`vkE literal 0 HcmV?d00001 diff --git a/public/images/95/1x/95window.png b/public/images/95/1x/95window.png new file mode 100644 index 0000000000000000000000000000000000000000..550dbc36bf97e179a32f43cf8d21752a200ebce7 GIT binary patch literal 187 zcmeAS@N?(olHy`uVBq!ia0vp^oFL4>1|%O$WD@{VEa{HEjtmSN`?>!lvVtTFJR*x3 z82Ao>Fr%o3R|8N`vcxr_Bsf2w9;@ouF>Tn6C<&P!|TC8 bp8t&7WgZzU*9?;fn!(`d>gTe~DWM4f^VK&) literal 0 HcmV?d00001 diff --git a/public/images/95/2x/95button.png b/public/images/95/2x/95button.png new file mode 100644 index 0000000000000000000000000000000000000000..acb58ef75e2620b80f6d776f6fc26eb9a95cc06d GIT binary patch literal 187 zcmeAS@N?(olHy`uVBq!ia0vp^JRr=$1|-8uW1a&kmUKs7M+SzC{oH>NS%G}c0*}aI z1_r)EAj~ML;ne^Xlq_+LC<)F_D=AMbN@XZW%*-p%%S$a$Fwry6GcllQ$imab zF+?Lc`G>zsLPA1Ag2sG>0~ZSZ|EpcIW8p%^o|VfPH9DBuCb7+6(ev5Iroy&SVzmO_ cnGf;|>H(e^UyUvRjbLE#boFyt=akR{0PQt4DgXcg literal 0 HcmV?d00001 diff --git a/public/images/95/2x/95button_icons.png b/public/images/95/2x/95button_icons.png new file mode 100644 index 0000000000000000000000000000000000000000..3fe10c03cca36e9e906c337f6a96167a085d52be GIT binary patch literal 719 zcmV;=0xN2bZe?^J zG%heMF*ZbLuk`=`0!&FnK~!i%?UBoF#4rp4_tW>!+e1lX!CKYJPK+W0@FHsj26-L8 zmy=VNb*tn!W+gv!3bSsNxMYRwKJh&7{c5yNH7;2pyH7mNd%qg(Q%x98^xi!@-+RBB zZjZE2!4kc956}1Bucq6h>{GO|n%(!Sbo-QjidI&$`+k*fpZ53gK>Luv?)zQ3z1rW! z1MNcwyYF}D_A2`nt*m0#-BomZm3@j~k?HWcMw0-SHA7yRU?OE=GmyzQwLPUZQ08m9D=X7VH+)J6@v9+)9pRRZ+d;CCbdL zdS-$8-Fc%bhJ)=VrP&(9Aa6s;)G z!ay6WzP}3XgK?O$Ptl43Eey25>ietEJ{X7T`oDgJg0(Wc?|0E&7>DWl&kvAZ7>6nQ z6s=&bjou}AzMXEbvQNt@8(?tcnD%&mmr?0KNy z0OK^!!$5PvdK;WO5A+*goCbOrXf9Z9^K`UW^QgHY~tZ7To(002ovPDHLkV1kY+ BSup?r literal 0 HcmV?d00001 diff --git a/public/images/95/2x/95button_inverted.png b/public/images/95/2x/95button_inverted.png new file mode 100644 index 0000000000000000000000000000000000000000..569ebb609748a744f35837c19831ecad4233ab53 GIT binary patch literal 188 zcmeAS@N?(olHy`uVBq!ia0vp^JRr=$1|-8uW1a&kmUKs7M+SzC{oH>NS%G}c0*}aI z1_r)EAj~ML;ne^Xlq_+LC<)F_D=AMbN@XZW%*-p%%S$a$Fwry6GcllQ$kNlr zF+?LcnW5>wO46F99|kQKFI;F4Kg{q{%7N*`gMWX2|96yNb4Y5AW%gmTYGeFlD!}b= d<->n_hEsn%Gh*ZZwgL@d@O1TaS?83{1OSqOIw$}D literal 0 HcmV?d00001 diff --git a/public/images/95/2x/95frame.png b/public/images/95/2x/95frame.png new file mode 100644 index 0000000000000000000000000000000000000000..91834b8635374a4bf221b48b11bb56f5b1c54a90 GIT binary patch literal 196 zcmeAS@N?(olHy`uVBq!ia0vp^JRr=$1|-8uW1a&k#^NA%Cx&(BWL^R}Ea{HEjtmSN z`?>!lvI6;>1s;*b3=DjSL74G){)!Z!pk#?_L`iUdT1k0gQ7S`0VrE{6US4X6f{C7i zo}rmb=K8NdMJApujv*Ss$rNS%G}c0*}aI z1_r)^Ak4U9V)k30pk#?_L`iUdT1k0gQ7S`0VrE{6US4X6f{C7io}rmb=K8NdMIN3m zjv*HQ$vf)*|Eu>hU}k1!NuI32nk?a>m64IbkbFzJPMFxL)nY@x%7qjuEHFG51 sl4hB#AR2sML4|Fp#A=1k84v9l62xW0o-9c*1)9m=>FVdQ&MBb@0Cajev;Y7A literal 0 HcmV?d00001 diff --git a/public/images/dotted_bg_yellow.png b/public/images/dotted_bg_yellow.png new file mode 100644 index 0000000000000000000000000000000000000000..7eecf05d91cf15da1e714fed2e44a51ba0427ad7 GIT binary patch literal 171 zcmeAS@N?(olHy`uVBq!ia0vp^0wB!61SBU+%rFB|Ea{HEjtmSN`?>!lvI6;>1s;*b z3=DjSK$uZf!>a)(C|TkfQ4*Y=R#Ki=l*&+$n3-3imzP?iV4`QBXK3b zV~B-+@{j-j`8+c;GAq7)VUSVm=2zw2aUtPK!|CE37ZzOp@Sl%i$-WEr3DyfrfO;4_ MUHx3vIVCg!0K=d&UH||9 literal 0 HcmV?d00001 diff --git a/public/styles/components/_w95.scss b/public/styles/components/_w95.scss new file mode 100644 index 0000000..2c1f4da --- /dev/null +++ b/public/styles/components/_w95.scss @@ -0,0 +1,196 @@ +$windowBG: #C0C0C0; +$highlight: #0000BF; +$disabled: #808080; + +$w95Font: 'MS PGothic', Verdana, Arial, Helvetica, sans-serif; +$imageScale: 1; + +@mixin border95($thickness) { + border: (3px * $thickness) solid black; + border-image-source: url('./../images/95/'+($thickness * $imageScale)+'x/95window.png'); + border-image-slice: 3 * $thickness; +} + +@mixin button95($thickness) { + border: (2px * $thickness) solid black; + border-image-source: url('./../images/95/'+($thickness * $imageScale)+'x/95button.png'); + border-image-slice: 2 * $thickness; + display: inline-block; + color: black; + background-image: url('./../images/95/'+($thickness * $imageScale)+'x/95button_icons.png'); + background-color: $windowBG; + background-position: 0px 0px; + background-size: 48px*$thickness 20px*$thickness; + + &:active { + border-image-source: url('./../images/95/'+($thickness * $imageScale)+'x/95button_inverted.png'); + } + + &.disabled { + background-position-y: 10px*$thickness; + &:active { + border-image-source: url('./../images/95/'+($thickness * $imageScale)+'x/95button.png'); + } + } +} + +@mixin frame95($thickness) { + border: (2px * $thickness) solid black; + border-image-source: url('./../images/95/'+($thickness * $imageScale)+'x/95frame.png'); + border-image-slice: 2 * $thickness; +} + +@mixin window95($scale) { + @extend %no-select; + @include border95($scale); + background: $windowBG; + font-family: $w95Font; + font-size: 12px*$scale; + display: inline-block; + + > .load_me_stuff { + position: fixed; + left: -1000vmax; + top: -1000vmax; + border-image-source: url('./../images/95/'+($scale * $imageScale)+'x/95button_inverted.png'); + } + + > .title { + width: 100%; + color: white; + background: #000080; + padding: 2px * $scale; + font-weight: bold; + margin-bottom: 1px * $scale; + + > .icon { + + } + + > .buttons { + height: 100%; + float: right; + font-size: 0; + + > .btn { + @include button95($scale); + width: 16px*$scale; + height: 14px*$scale; + font-size: 12px*$scale; + + &.close { + margin-left: 2px*$scale; + background-position-x: 0px*$scale; + } + + &.help { + background-position-x: 36px*$scale; + } + + &.minimize { + background-position-x: 24px*$scale; + } + + &.maximize { + background-position-x: 12px*$scale; + } + } + } + } + + > .context-menu { + width: 100%; + overflow: visible; + + > .btn { + padding: (1px*$scale) (5px*$scale); + border: 1px*$scale solid transparent; + display: inline-block; + position: relative; + + &::first-letter { + text-decoration: underline; + } + + &:hover { + border-bottom-color: #868686; + border-right-color: #868686; + border-top-color: #FFFFFF; + border-left-color: #FFFFFF; + } + + &.active { + border-right-color: #FFFFFF; + border-bottom-color: #FFFFFF; + border-top-color: #868686; + border-left-color: #868686; + + > .menu { + display: block; + } + } + + &.disabled { + color: $disabled; + &:hover,.active { + border-right-color: transparent; + border-bottom-color: transparent; + border-top-color: transparent; + border-left-color: transparent; + } + } + + > .menu { + @include border95($scale); + border-top-width: 2px*$scale; + position: absolute; + display: none; + background: $windowBG; + left: -1px*$scale; + margin-top: 2px*$scale; + width: auto; + + > .menu-option { + padding-left: 22px*$scale; + padding-right: 22px*$scale; + padding-bottom: 3px*$scale; + padding-top: 1px*$scale; + white-space: nowrap; + + &:hover { + background: $highlight; + color: white; + } + + &:first-child {font-weight: bold;} + + &::first-letter { + text-decoration: underline; + } + + &.disabled { + color: $disabled; + &:hover {background: inherit;color: $disabled;} + } + } + } + } + } + + &.inactive { + > .title { + background-color: $disabled; + } + } + + > .textarea { + @include frame95($scale); + background: white; + color: black; + cursor: text; + } +} + +.window { + @include window95(2); +}