GsuiGridSamples

Developer
Thomas Tortorini
Size
4,732 Kb
Views
4,048
  1. GsuiGridSamples Previews
  2. GsuiGridSamples HTML Codes
  3. GsuiGridSamples CSS Codes
  4. GsuiGridSamples JS Codes

How do I make an gsuigridsamples?

What is a gsuigridsamples? How do you make a gsuigridsamples? This script and codes were developed by Thomas Tortorini on 01 January 2023, Sunday.

GsuiGridSamples Previews
IQ Test

GsuiGridSamples - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>gsuiGridSamples</title> <link rel='stylesheet prefetch' href='css/gwjoje.css'>
<link rel='stylesheet prefetch' href='https://gridsound.github.io/gs-ui-components/gsuiTimeLine/gsuiTimeLine.css'>
<link rel='stylesheet prefetch' href='https://gridsound.github.io/gs-ui-components/gsuiBeatLines/gsuiBeatLines.css'>
<link rel='stylesheet prefetch' href='https://gridsound.github.io/gs-ui-components/gsuiKeys/gsuiKeys.css'>
<link rel='stylesheet prefetch' href='https://gridsound.github.io/gs-ui-components/gsuiTrackList/gsuiTrackList.css'>
<link rel='stylesheet prefetch' href='https://gridsound.github.io/gs-ui-components/gsuiTrack/gsuiTrack.css'>
<link rel='stylesheet prefetch' href='https://gridsound.github.io/gs-ui-components/gsuiToggle/gsuiToggle.css'>
<link rel='stylesheet prefetch' href='https://gridsound.github.io/gs-ui-components/gsuiSpanEditable/gsuiSpanEditable.css'>
<link rel='stylesheet prefetch' href='https://gridsound.github.io/gs-ui-components/gsuiAudioBlock/gsuiAudioBlock.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div id="main">	<div id="desc">	<div id="title">gsuiGridSamples (<b>work in progress</b>)</div>	<a id="main-link" href="https://github.com/gridsound/gs-ui-components/tree/master/gsuiGridSamples">gs-ui-components / <b>gsuiGridSamples</b></a>	</div>	<div id="cmp-wrapper" class="shadow"></div>	<div id="params">	<label><input type="radio" name="gridmode" value="loadTrackList"/>.loadTrackList()</label></br>	<label><input type="radio" name="gridmode" value="loadKeys" checked/>.loadKeys()</label></br>	<ul>	<li>alt + click on the grid => <b>move X/Y</b></li>	<li>shift + scroll => <b>move Y</b></li>	<li>ctrl + scroll on the grid => <b>zoom X</b></li>	<li>ctrl + scroll on the left panel => <b>zoom Y</b></li>	<li>click on the bottom of the timeline => <b>currentTime</b></li>	<li>dblClick on the top of the timeline => <b>loop</b></li>	<li>dblClick on "<i>Track N</i>" => <b>rename track</b></li>	</ul>	</div>
</div>
<template id="gsuiGridSamples">	<div class="gsuiGridSamples" tabindex="1">	<div class="gsuigs-panel">	<div class="gsuigs-extend"></div>	<div class="gsuigs-content"></div>	</div>	<div class="gsuigs-grid">	<div class="gsuigs-content"></div>	<div class="gsuigs-select hidden"></div>	</div>	</div>
</template>
<template id="gsuiTimeLine">	<div class="gsuiTimeLine">	<div class="gsui-loopLine"></div>	<div class="gsui-loop">	<div class="gsui-loopExt gsui-loopA"></div>	<div class="gsui-loopExt gsui-loopB"></div>	<div class="gsui-loopBrd gsui-loopBrdA"></div>	<div class="gsui-loopBrd gsui-loopBrdB"></div>	<div class="gsui-loopBg"></div>	</div>	<svg class="gsui-cursor" width="20" height="10">	<polygon points="2,2 10,8 18,2"/>	</svg>	<div class="gsui-currentTime">	<div class="gsui-cursorLine"></div>	</div>	</div>
</template>
<template id="gsuiKeys-octave"	><div class="gsuiKey" data-key="b" ><div data-key="b" class="gsui-row gsuiKey-row"><div></div></div></div	><div class="gsuiKey" data-key="a#"><div data-key="a#" class="gsui-row gsuiKey-row"><div></div></div></div	><div class="gsuiKey" data-key="a" ><div data-key="a" class="gsui-row gsuiKey-row"><div></div></div></div	><div class="gsuiKey" data-key="g#"><div data-key="g#" class="gsui-row gsuiKey-row"><div></div></div></div	><div class="gsuiKey" data-key="g" ><div data-key="g" class="gsui-row gsuiKey-row"><div></div></div></div	><div class="gsuiKey" data-key="f#"><div data-key="f#" class="gsui-row gsuiKey-row"><div></div></div></div	><div class="gsuiKey" data-key="f" ><div data-key="f" class="gsui-row gsuiKey-row"><div></div></div></div	><div class="gsuiKey" data-key="e" ><div data-key="e" class="gsui-row gsuiKey-row"><div></div></div></div	><div class="gsuiKey" data-key="d#"><div data-key="d#" class="gsui-row gsuiKey-row"><div></div></div></div	><div class="gsuiKey" data-key="d" ><div data-key="d" class="gsui-row gsuiKey-row"><div></div></div></div	><div class="gsuiKey" data-key="c#"><div data-key="c#" class="gsui-row gsuiKey-row"><div></div></div></div	><div class="gsuiKey" data-key="c" ><div data-key="c" class="gsui-row gsuiKey-row"><div></div></div></div
></template>
<template id="gsuiTrackList">	<div class="gsuiTrackList"></div>
</template>
<template id="gsuiTrack">	<div class="gsuiTrack">	<div class="gsui-row gsuiTrack-row"><div></div></div>	</div>
</template>
<template id="gsuiSpanEditable">	<div class="gsuiSpanEditable">	<span></span>	<input type="text"/>	</div>
</template>
<template id="gsuiToggle">	<div class="gsuiToggle">	<div class="gsui-circle"></div>	</div>
</template>
<template id="gsuiAudioBlock">	<div class="gsuiAudioBlock">	<div class="gsuiab-bg"></div>	<div class="gsuiab-head">	<span class="gsuiab-name"></span>	</div>	<div class="gsuiab-content"></div>	<div class="gsuiab-crop gsuiab-cropA"></div>	<div class="gsuiab-crop gsuiab-cropB"></div>	</div>
</template> <script src='https://gridsound.github.io/gs-ui-components/gsuiGridSamples/gsuiGridSamples.js'></script>
<script src='https://gridsound.github.io/gs-ui-components/gsuiTimeLine/gsuiTimeLine.js'></script>
<script src='https://gridsound.github.io/gs-ui-components/gsuiBeatLines/gsuiBeatLines.js'></script>
<script src='https://gridsound.github.io/gs-ui-components/gsuiKeys/gsuiKeys.js'></script>
<script src='https://gridsound.github.io/gs-ui-components/gsuiTrackList/gsuiTrackList.js'></script>
<script src='https://gridsound.github.io/gs-ui-components/gsuiTrack/gsuiTrack.js'></script>
<script src='https://gridsound.github.io/gs-ui-components/gsuiToggle/gsuiToggle.js'></script>
<script src='https://gridsound.github.io/gs-ui-components/gsuiSpanEditable/gsuiSpanEditable.js'></script>
<script src='https://gridsound.github.io/gs-ui-components/gsuiAudioBlock/gsuiAudioBlock.js'></script> <script src="js/index.js"></script>
</body>
</html>

GsuiGridSamples - Script Codes CSS Codes

.gsuiGridSamples { --timeline-height: 32px; --panel-min-width: 24px; --panel-max-width: 320px; --grid-bg: #3a5158; --panel-bg: #3a3a3a; --border-color: #111; position: relative; width: 100%; height: 100%; cursor: default; user-select: none; -moz-user-select: none; -webkit-user-select: none; -ms-user-select: none;
}
.gsuiGridSamples .gsuigs-panel,
.gsuiGridSamples .gsuigs-grid { position: absolute; overflow: hidden; top: var(--timeline-height); bottom: 0;
}
.gsuiGridSamples .gsuigs-grid { right: 0; border-top: 1px solid var(--border-color);
}
.gsuiGridSamples .gsuigs-panel { box-sizing: border-box; min-width: var(--panel-min-width); max-width: var(--panel-max-width); border: 0 solid var(--border-color); border-width: 1px 1px 0 0; background-color: var(--panel-bg);
}
.gsuiGridSamples .gsuigs-extend { position: absolute; z-index: 1; top: 0; right: 0; width: 6px; height: 100%; transition: background-color .2s;
}
.gsuiGridSamples .gsuigs-extend:hover,
.gsuiGridSamples .gsuigs-extend.gsui-hover { background-color: rgba(128, 128, 128, 0.5);
}
.gsuiGridSamples .gsuiTimeLine { position: absolute; z-index: 1; height: var(--timeline-height); top: 0; right: 0; border-left: 1px solid var(--border-color);
}
.gsuiGridSamples .gsuiBeatLines { position: absolute; width: 100%; height: 100%; background-color: var(--grid-bg);
}
.gsuiGridSamples .gsuigs-content { position: relative;
}
.gsuiGridSamples .gsuigs-grid .gsuigs-content { position: absolute; right: 0;
}
.gsuiGridSamples .gsuigs-select { position: absolute; box-sizing: border-box; margin: -1px 0 0 -1px; border: 2px solid #f55; border-radius: 4px; background-color: rgba(216, 26, 26, 0.3); transition: .2s; transition-property: opacity, visibility;
}
.gsuiGridSamples .gsuigs-select.hidden { opacity: 0; visibility: hidden;
}
#cmp-wrapper { max-width: 512px; min-width: 512px; height: 300px; background: none;
}

GsuiGridSamples - Script Codes JS Codes

"use strict";
function lg( a ) { return console.log.apply( console, arguments ), a; }
var gridSamples = new gsuiGridSamples();
gsuiGridSamples.getNewId = function() {	return Math.random().toString( 36 ).substr( 2 );
};
document.querySelector( "#cmp-wrapper" ).append( gridSamples.rootElement );
document.querySelectorAll( "input[type='radio']" ).forEach( function( cbox ) {	cbox.onchange = function() {	if ( this.value === "loadKeys" ) {	gridSamples.loadKeys( 4, 3 );	} else {	gridSamples.loadTrackList();	gridSamples.change( {	tracks: {	"idOne": { order: 0 },	"idTwo": { order: 1, name: "Kick" },	"idTh3": { order: 2, name: "Snare" },	"idFr4": { order: 3, toggle: false },	"idFiv": { order: 4, toggle: false },	"idSix": { order: 5 },	"idSe7": { order: 6, name: "Hihat", toggle: false },	}	} );	}	};
} );
gridSamples.resized();
// gridSamples.setFontSize( 15 );
gridSamples.currentTime( 2.5 );
gridSamples.offset( .5, 80 );
gridSamples.onchange = function( obj ) {	console.log( obj );
};
document.querySelector( "input[checked]" ).onchange();
GsuiGridSamples - Script Codes
GsuiGridSamples - Script Codes
Home Page Home
Developer Thomas Tortorini
Username mr21
Uploaded January 01, 2023
Rating 3
Size 4,732 Kb
Views 4,048
Do you need developer help for GsuiGridSamples?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Thomas Tortorini (mr21) Script Codes
Name
GsuiSpanEditable
GsuiTimeLine
GsuiPanels
GsuiAudioBlock
A Pen by Thomas Tortorini
GswaGroup
GsuiToggle
GsuiKeys
GswaBuffer
GsuiTrackList
Create amazing captions with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!