Created
July 30, 2020 00:10
-
-
Save reyaz/229d4f3b6792ce70e49d635c7d31c2c8 to your computer and use it in GitHub Desktop.
JS Bin // source https://jsbin.com/pipexig
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta charset="utf-8"> | |
| <meta name="viewport" content="width=device-width"> | |
| <title>JS Bin</title> | |
| <style id="jsbin-css"> | |
| * { | |
| box-sizing: border-box; | |
| } | |
| html, body { | |
| height: 100%; | |
| } | |
| body { | |
| background: #eee; | |
| border-top: 1px solid #ccc; | |
| margin: 0; | |
| position: relative; | |
| } | |
| .sidebar { | |
| background: #333; | |
| display: grid; | |
| grid-auto-rows: min-content; | |
| grid-gap: 7px; | |
| height: 100%; | |
| max-width: 50px; | |
| min-width: 50px; | |
| padding: 7px; | |
| position: absolute; | |
| transition: max-width 500ms; | |
| z-index: 0; | |
| } | |
| .sidebar::before { | |
| background: #333; | |
| bottom: 0; | |
| box-shadow: 0 4px 4px rgba(0,0,0,0.25); | |
| /* box-shadow: 0 4px 4px blue; */ | |
| content: ''; | |
| display: block; | |
| left: 0; | |
| /* opacity: 0; */ | |
| position: absolute; | |
| right: 0; | |
| top: 0; | |
| /* transition: opacity 1ms 500ms; */ | |
| z-index: 1; | |
| } | |
| /* .sidebar--has_open_dawer::before { | |
| opacity: 1; | |
| transition: opacity 0; | |
| } */ | |
| .sidebar--is_expanded { | |
| max-width: calc(100vw - 50px); | |
| } | |
| .sidebar-button { | |
| background: rgba(255,255,255,0.5); | |
| border: none; | |
| border-radius: 4px; | |
| color: #fff; | |
| cursor: pointer; | |
| display: block; | |
| height: 36px; | |
| min-width: 36px; | |
| padding: 0; | |
| position: relative; | |
| text-align: left; | |
| z-index: 2; | |
| } | |
| .sidebar-button:focus { | |
| outline: none; | |
| } | |
| .sidebar-button:hover { | |
| background: rgba(255,255,255,0.75); | |
| } | |
| .sidebar-button--is_selected { | |
| opacity: 50%; | |
| } | |
| .sidebar-button-icon { | |
| display: block; | |
| height: 36px; | |
| position: absolute; | |
| text-align: center; | |
| width: 36px; | |
| } | |
| .sidebar-button-text { | |
| display: block; | |
| max-width: 0; | |
| opacity: 0; | |
| overflow: hidden; | |
| padding-left: 36px; | |
| padding-right: 0; | |
| transition: all 500ms; | |
| } | |
| .sidebar-button-text--is_expanded { | |
| max-width: 100vw; | |
| opacity: 1; | |
| padding-right: 36px; | |
| } | |
| .sidebar-drawer { | |
| background: #fff; | |
| box-shadow: 0 4px 4px rgba(0,0,0,0.25); | |
| /* box-shadow: 0 4px 4px red; */ | |
| height: 100%; | |
| left: 100%; | |
| max-width: calc(100vw - 100% - 50px); | |
| overflow: hidden; | |
| position: absolute; | |
| transform: translateX(calc(-100% - 4px)); | |
| transition: transform 500ms; | |
| z-index: 0; | |
| width: 500px; | |
| } | |
| .sidebar-drawer--is_open { | |
| transform: translateX(0); | |
| } | |
| .sidebar-mousetrap { | |
| background: rgba(255,0,0,0); | |
| display: none; | |
| height: 100%; | |
| position: absolute; | |
| top: 0; | |
| width: 100%; | |
| z-index: 3; | |
| } | |
| .sidebar-mousetrap--is_active { | |
| display: block; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.9.2/d3.min.js"></script> | |
| <script id="jsbin-javascript"> | |
| const sidebar_selection = d3.select('body') | |
| .append('div') | |
| .datum({ | |
| keep_expanded: false, | |
| selected: null, | |
| selected_prev: null, | |
| }) | |
| .classed('sidebar', true) | |
| .on('mouseenter expand expandHard', function (d) { | |
| // console.group() | |
| // console.log(this.getBoundingClientRect()) | |
| // console.log(d3.event) | |
| // console.groupEnd() | |
| if (d3.event.type === 'expandHard') d.keep_expanded = true | |
| d3.select(this) | |
| .classed('sidebar--is_expanded', true) | |
| .selectAll('.sidebar-button') | |
| .classed('sidebar-button--is_expanded', true) | |
| .selectAll('.sidebar-button-text') | |
| .classed('sidebar-button-text--is_expanded', true) | |
| }) | |
| .on('mouseleave contract contractHard', function (d) { | |
| if (d3.event.type === 'contractHard') d.keep_expanded = false | |
| if (d.keep_expanded) return | |
| const is_expanded = d.keep_expanded | |
| d3.select(this) | |
| .classed('sidebar--is_expanded', is_expanded) | |
| .selectAll('.sidebar-button') | |
| .classed('sidebar-button--is_expanded', is_expanded) | |
| .selectAll('.sidebar-button-text') | |
| .classed('sidebar-button-text--is_expanded', is_expanded) | |
| }) | |
| .on('toggle', function (d) { | |
| d.selected_prev = d.selected | |
| const selected = d3.event.detail | |
| d.selected = selected || null | |
| const is_open = d.selected && d.selected !== d.selected_prev | |
| if (!is_open) d.selected = null | |
| const sidebar_selection = d3.select(this) | |
| .classed('sidebar--has_open_dawer', is_open) | |
| sidebar_selection | |
| .selectAll('.sidebar-button') | |
| .classed('sidebar-button--is_selected', d => is_open && d === selected) | |
| sidebar_selection | |
| .selectAll('.sidebar-drawer') | |
| .classed('sidebar-drawer--is_open', is_open) | |
| .text(selected && selected.key || null) | |
| }) | |
| .on('setMousetrap', function () { | |
| d3.select(this) | |
| .selectAll('.sidebar-mousetrap') | |
| .classed('sidebar-mousetrap--is_active', true) | |
| }) | |
| const button_selection = sidebar_selection | |
| .selectAll('button') | |
| .data([{ key: 'foo' }, { key: 'bar' }, { key: 'baz' }]) | |
| .join('button') | |
| .classed('sidebar-button', true) | |
| .on('click', function (d) { | |
| d3.select(this) | |
| .dispatch('toggle', { bubbles: true, detail: d }) | |
| }) | |
| button_selection | |
| .append('i') | |
| .classed('sidebar-button-icon', true) | |
| .text(d => d.key[0]) | |
| button_selection | |
| .append('span') | |
| .classed('sidebar-button-text', true) | |
| .text(d => d.key) | |
| sidebar_selection | |
| .append('div') | |
| .classed('sidebar-mousetrap', true) | |
| .on('mouseenter', function () { | |
| d3.select(this) | |
| .classed('sidebar-mousetrap--is_active', false) | |
| .dispatch('expand', { bubbles: true }) | |
| }) | |
| sidebar_selection | |
| .append('div') | |
| .classed('sidebar-drawer', true) | |
| .on('mouseenter', function () { | |
| d3.select(this) | |
| .dispatch('contract', { bubbles: true }) | |
| .dispatch('setMousetrap', { bubbles: true }) | |
| }) | |
| // .text('Lorem ipsum dolor sit amet consectetur adipisicing elit. Quibusdam, aut officia inventore fugit debitis sequi nisi suscipit placeat rem nam accusamus, asperiores saepe eaque iure quas minima. Vel, nisi laboriosam.') | |
| sidebar_selection | |
| .dispatch('expand') | |
| .dispatch('contract') | |
| </script> | |
| <script id="jsbin-source-css" type="text/css">* { | |
| box-sizing: border-box; | |
| } | |
| html, body { | |
| height: 100%; | |
| } | |
| body { | |
| background: #eee; | |
| border-top: 1px solid #ccc; | |
| margin: 0; | |
| position: relative; | |
| } | |
| .sidebar { | |
| background: #333; | |
| display: grid; | |
| grid-auto-rows: min-content; | |
| grid-gap: 7px; | |
| height: 100%; | |
| max-width: 50px; | |
| min-width: 50px; | |
| padding: 7px; | |
| position: absolute; | |
| transition: max-width 500ms; | |
| z-index: 0; | |
| } | |
| .sidebar::before { | |
| background: #333; | |
| bottom: 0; | |
| box-shadow: 0 4px 4px rgba(0,0,0,0.25); | |
| /* box-shadow: 0 4px 4px blue; */ | |
| content: ''; | |
| display: block; | |
| left: 0; | |
| /* opacity: 0; */ | |
| position: absolute; | |
| right: 0; | |
| top: 0; | |
| /* transition: opacity 1ms 500ms; */ | |
| z-index: 1; | |
| } | |
| /* .sidebar--has_open_dawer::before { | |
| opacity: 1; | |
| transition: opacity 0; | |
| } */ | |
| .sidebar--is_expanded { | |
| max-width: calc(100vw - 50px); | |
| } | |
| .sidebar-button { | |
| background: rgba(255,255,255,0.5); | |
| border: none; | |
| border-radius: 4px; | |
| color: #fff; | |
| cursor: pointer; | |
| display: block; | |
| height: 36px; | |
| min-width: 36px; | |
| padding: 0; | |
| position: relative; | |
| text-align: left; | |
| z-index: 2; | |
| } | |
| .sidebar-button:focus { | |
| outline: none; | |
| } | |
| .sidebar-button:hover { | |
| background: rgba(255,255,255,0.75); | |
| } | |
| .sidebar-button--is_selected { | |
| opacity: 50%; | |
| } | |
| .sidebar-button-icon { | |
| display: block; | |
| height: 36px; | |
| position: absolute; | |
| text-align: center; | |
| width: 36px; | |
| } | |
| .sidebar-button-text { | |
| display: block; | |
| max-width: 0; | |
| opacity: 0; | |
| overflow: hidden; | |
| padding-left: 36px; | |
| padding-right: 0; | |
| transition: all 500ms; | |
| } | |
| .sidebar-button-text--is_expanded { | |
| max-width: 100vw; | |
| opacity: 1; | |
| padding-right: 36px; | |
| } | |
| .sidebar-drawer { | |
| background: #fff; | |
| box-shadow: 0 4px 4px rgba(0,0,0,0.25); | |
| /* box-shadow: 0 4px 4px red; */ | |
| height: 100%; | |
| left: 100%; | |
| max-width: calc(100vw - 100% - 50px); | |
| overflow: hidden; | |
| position: absolute; | |
| transform: translateX(calc(-100% - 4px)); | |
| transition: transform 500ms; | |
| z-index: 0; | |
| width: 500px; | |
| } | |
| .sidebar-drawer--is_open { | |
| transform: translateX(0); | |
| } | |
| .sidebar-mousetrap { | |
| background: rgba(255,0,0,0); | |
| display: none; | |
| height: 100%; | |
| position: absolute; | |
| top: 0; | |
| width: 100%; | |
| z-index: 3; | |
| } | |
| .sidebar-mousetrap--is_active { | |
| display: block; | |
| } | |
| </script> | |
| <script id="jsbin-source-javascript" type="text/javascript">const sidebar_selection = d3.select('body') | |
| .append('div') | |
| .datum({ | |
| keep_expanded: false, | |
| selected: null, | |
| selected_prev: null, | |
| }) | |
| .classed('sidebar', true) | |
| .on('mouseenter expand expandHard', function (d) { | |
| // console.group() | |
| // console.log(this.getBoundingClientRect()) | |
| // console.log(d3.event) | |
| // console.groupEnd() | |
| if (d3.event.type === 'expandHard') d.keep_expanded = true | |
| d3.select(this) | |
| .classed('sidebar--is_expanded', true) | |
| .selectAll('.sidebar-button') | |
| .classed('sidebar-button--is_expanded', true) | |
| .selectAll('.sidebar-button-text') | |
| .classed('sidebar-button-text--is_expanded', true) | |
| }) | |
| .on('mouseleave contract contractHard', function (d) { | |
| if (d3.event.type === 'contractHard') d.keep_expanded = false | |
| if (d.keep_expanded) return | |
| const is_expanded = d.keep_expanded | |
| d3.select(this) | |
| .classed('sidebar--is_expanded', is_expanded) | |
| .selectAll('.sidebar-button') | |
| .classed('sidebar-button--is_expanded', is_expanded) | |
| .selectAll('.sidebar-button-text') | |
| .classed('sidebar-button-text--is_expanded', is_expanded) | |
| }) | |
| .on('toggle', function (d) { | |
| d.selected_prev = d.selected | |
| const selected = d3.event.detail | |
| d.selected = selected || null | |
| const is_open = d.selected && d.selected !== d.selected_prev | |
| if (!is_open) d.selected = null | |
| const sidebar_selection = d3.select(this) | |
| .classed('sidebar--has_open_dawer', is_open) | |
| sidebar_selection | |
| .selectAll('.sidebar-button') | |
| .classed('sidebar-button--is_selected', d => is_open && d === selected) | |
| sidebar_selection | |
| .selectAll('.sidebar-drawer') | |
| .classed('sidebar-drawer--is_open', is_open) | |
| .text(selected && selected.key || null) | |
| }) | |
| .on('setMousetrap', function () { | |
| d3.select(this) | |
| .selectAll('.sidebar-mousetrap') | |
| .classed('sidebar-mousetrap--is_active', true) | |
| }) | |
| const button_selection = sidebar_selection | |
| .selectAll('button') | |
| .data([{ key: 'foo' }, { key: 'bar' }, { key: 'baz' }]) | |
| .join('button') | |
| .classed('sidebar-button', true) | |
| .on('click', function (d) { | |
| d3.select(this) | |
| .dispatch('toggle', { bubbles: true, detail: d }) | |
| }) | |
| button_selection | |
| .append('i') | |
| .classed('sidebar-button-icon', true) | |
| .text(d => d.key[0]) | |
| button_selection | |
| .append('span') | |
| .classed('sidebar-button-text', true) | |
| .text(d => d.key) | |
| sidebar_selection | |
| .append('div') | |
| .classed('sidebar-mousetrap', true) | |
| .on('mouseenter', function () { | |
| d3.select(this) | |
| .classed('sidebar-mousetrap--is_active', false) | |
| .dispatch('expand', { bubbles: true }) | |
| }) | |
| sidebar_selection | |
| .append('div') | |
| .classed('sidebar-drawer', true) | |
| .on('mouseenter', function () { | |
| d3.select(this) | |
| .dispatch('contract', { bubbles: true }) | |
| .dispatch('setMousetrap', { bubbles: true }) | |
| }) | |
| // .text('Lorem ipsum dolor sit amet consectetur adipisicing elit. Quibusdam, aut officia inventore fugit debitis sequi nisi suscipit placeat rem nam accusamus, asperiores saepe eaque iure quas minima. Vel, nisi laboriosam.') | |
| sidebar_selection | |
| .dispatch('expand') | |
| .dispatch('contract') | |
| </script></body> | |
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| * { | |
| box-sizing: border-box; | |
| } | |
| html, body { | |
| height: 100%; | |
| } | |
| body { | |
| background: #eee; | |
| border-top: 1px solid #ccc; | |
| margin: 0; | |
| position: relative; | |
| } | |
| .sidebar { | |
| background: #333; | |
| display: grid; | |
| grid-auto-rows: min-content; | |
| grid-gap: 7px; | |
| height: 100%; | |
| max-width: 50px; | |
| min-width: 50px; | |
| padding: 7px; | |
| position: absolute; | |
| transition: max-width 500ms; | |
| z-index: 0; | |
| } | |
| .sidebar::before { | |
| background: #333; | |
| bottom: 0; | |
| box-shadow: 0 4px 4px rgba(0,0,0,0.25); | |
| /* box-shadow: 0 4px 4px blue; */ | |
| content: ''; | |
| display: block; | |
| left: 0; | |
| /* opacity: 0; */ | |
| position: absolute; | |
| right: 0; | |
| top: 0; | |
| /* transition: opacity 1ms 500ms; */ | |
| z-index: 1; | |
| } | |
| /* .sidebar--has_open_dawer::before { | |
| opacity: 1; | |
| transition: opacity 0; | |
| } */ | |
| .sidebar--is_expanded { | |
| max-width: calc(100vw - 50px); | |
| } | |
| .sidebar-button { | |
| background: rgba(255,255,255,0.5); | |
| border: none; | |
| border-radius: 4px; | |
| color: #fff; | |
| cursor: pointer; | |
| display: block; | |
| height: 36px; | |
| min-width: 36px; | |
| padding: 0; | |
| position: relative; | |
| text-align: left; | |
| z-index: 2; | |
| } | |
| .sidebar-button:focus { | |
| outline: none; | |
| } | |
| .sidebar-button:hover { | |
| background: rgba(255,255,255,0.75); | |
| } | |
| .sidebar-button--is_selected { | |
| opacity: 50%; | |
| } | |
| .sidebar-button-icon { | |
| display: block; | |
| height: 36px; | |
| position: absolute; | |
| text-align: center; | |
| width: 36px; | |
| } | |
| .sidebar-button-text { | |
| display: block; | |
| max-width: 0; | |
| opacity: 0; | |
| overflow: hidden; | |
| padding-left: 36px; | |
| padding-right: 0; | |
| transition: all 500ms; | |
| } | |
| .sidebar-button-text--is_expanded { | |
| max-width: 100vw; | |
| opacity: 1; | |
| padding-right: 36px; | |
| } | |
| .sidebar-drawer { | |
| background: #fff; | |
| box-shadow: 0 4px 4px rgba(0,0,0,0.25); | |
| /* box-shadow: 0 4px 4px red; */ | |
| height: 100%; | |
| left: 100%; | |
| max-width: calc(100vw - 100% - 50px); | |
| overflow: hidden; | |
| position: absolute; | |
| transform: translateX(calc(-100% - 4px)); | |
| transition: transform 500ms; | |
| z-index: 0; | |
| width: 500px; | |
| } | |
| .sidebar-drawer--is_open { | |
| transform: translateX(0); | |
| } | |
| .sidebar-mousetrap { | |
| background: rgba(255,0,0,0); | |
| display: none; | |
| height: 100%; | |
| position: absolute; | |
| top: 0; | |
| width: 100%; | |
| z-index: 3; | |
| } | |
| .sidebar-mousetrap--is_active { | |
| display: block; | |
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| const sidebar_selection = d3.select('body') | |
| .append('div') | |
| .datum({ | |
| keep_expanded: false, | |
| selected: null, | |
| selected_prev: null, | |
| }) | |
| .classed('sidebar', true) | |
| .on('mouseenter expand expandHard', function (d) { | |
| // console.group() | |
| // console.log(this.getBoundingClientRect()) | |
| // console.log(d3.event) | |
| // console.groupEnd() | |
| if (d3.event.type === 'expandHard') d.keep_expanded = true | |
| d3.select(this) | |
| .classed('sidebar--is_expanded', true) | |
| .selectAll('.sidebar-button') | |
| .classed('sidebar-button--is_expanded', true) | |
| .selectAll('.sidebar-button-text') | |
| .classed('sidebar-button-text--is_expanded', true) | |
| }) | |
| .on('mouseleave contract contractHard', function (d) { | |
| if (d3.event.type === 'contractHard') d.keep_expanded = false | |
| if (d.keep_expanded) return | |
| const is_expanded = d.keep_expanded | |
| d3.select(this) | |
| .classed('sidebar--is_expanded', is_expanded) | |
| .selectAll('.sidebar-button') | |
| .classed('sidebar-button--is_expanded', is_expanded) | |
| .selectAll('.sidebar-button-text') | |
| .classed('sidebar-button-text--is_expanded', is_expanded) | |
| }) | |
| .on('toggle', function (d) { | |
| d.selected_prev = d.selected | |
| const selected = d3.event.detail | |
| d.selected = selected || null | |
| const is_open = d.selected && d.selected !== d.selected_prev | |
| if (!is_open) d.selected = null | |
| const sidebar_selection = d3.select(this) | |
| .classed('sidebar--has_open_dawer', is_open) | |
| sidebar_selection | |
| .selectAll('.sidebar-button') | |
| .classed('sidebar-button--is_selected', d => is_open && d === selected) | |
| sidebar_selection | |
| .selectAll('.sidebar-drawer') | |
| .classed('sidebar-drawer--is_open', is_open) | |
| .text(selected && selected.key || null) | |
| }) | |
| .on('setMousetrap', function () { | |
| d3.select(this) | |
| .selectAll('.sidebar-mousetrap') | |
| .classed('sidebar-mousetrap--is_active', true) | |
| }) | |
| const button_selection = sidebar_selection | |
| .selectAll('button') | |
| .data([{ key: 'foo' }, { key: 'bar' }, { key: 'baz' }]) | |
| .join('button') | |
| .classed('sidebar-button', true) | |
| .on('click', function (d) { | |
| d3.select(this) | |
| .dispatch('toggle', { bubbles: true, detail: d }) | |
| }) | |
| button_selection | |
| .append('i') | |
| .classed('sidebar-button-icon', true) | |
| .text(d => d.key[0]) | |
| button_selection | |
| .append('span') | |
| .classed('sidebar-button-text', true) | |
| .text(d => d.key) | |
| sidebar_selection | |
| .append('div') | |
| .classed('sidebar-mousetrap', true) | |
| .on('mouseenter', function () { | |
| d3.select(this) | |
| .classed('sidebar-mousetrap--is_active', false) | |
| .dispatch('expand', { bubbles: true }) | |
| }) | |
| sidebar_selection | |
| .append('div') | |
| .classed('sidebar-drawer', true) | |
| .on('mouseenter', function () { | |
| d3.select(this) | |
| .dispatch('contract', { bubbles: true }) | |
| .dispatch('setMousetrap', { bubbles: true }) | |
| }) | |
| // .text('Lorem ipsum dolor sit amet consectetur adipisicing elit. Quibusdam, aut officia inventore fugit debitis sequi nisi suscipit placeat rem nam accusamus, asperiores saepe eaque iure quas minima. Vel, nisi laboriosam.') | |
| sidebar_selection | |
| .dispatch('expand') | |
| .dispatch('contract') |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment