testing new style..
This commit is contained in:
parent
0f68a377da
commit
1d918d74ea
8 changed files with 162 additions and 306 deletions
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
|
|
@ -20,66 +20,137 @@
|
|||
<!-- code -->
|
||||
<script type="text/paperscript" src="./index.js" canvas="screen"></script>
|
||||
<style>
|
||||
canvas {
|
||||
/* eliminating the gap between 2 canvases --> https://stackoverflow.com/a/8600771 */
|
||||
display: block;
|
||||
html,
|
||||
body {
|
||||
/* height: 100%; */
|
||||
}
|
||||
|
||||
body {
|
||||
/* https://stackoverflow.com/a/47709903 */
|
||||
/* overscroll-behavior: contain; */
|
||||
}
|
||||
|
||||
body {
|
||||
/* https://stackoverflow.com/a/41480220 */
|
||||
/* https://github.com/hammerjs/hammer.js/issues/1050#issuecomment-267595556 */
|
||||
position: fixed;
|
||||
/* Scale canvas with resize attribute to full size */
|
||||
canvas[resize] {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
/* touch-action: none !important; */
|
||||
}
|
||||
|
||||
canvas#screen {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
/* buttermilk */
|
||||
background-color: #3333ff;
|
||||
#wrapper {
|
||||
height: 57vh;
|
||||
}
|
||||
|
||||
.objstring {
|
||||
position: fixed;
|
||||
top: 2.5em;
|
||||
left: 4em;
|
||||
/* non-clickable element (pass-through) */
|
||||
pointer-events:none;
|
||||
}
|
||||
|
||||
/* #objstring {
|
||||
overflow-wrap: break-word;
|
||||
word-wrap: break-word;
|
||||
hyphens: none;
|
||||
} */
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body class="">
|
||||
<!-- full page layout : page loading screen -->
|
||||
<div class="vh-100 w-100 absolute top-0 left-0 bg-light-blue" id="page-loading" style="z-index:2">
|
||||
<div class="cf w-100 top-0">
|
||||
<div class="dt vh-100 w-100 absolute top-0 left-0 animationStripes">
|
||||
<div class="dtc v-mid tc white monaco">
|
||||
<h1 class="f3 f1-ns">
|
||||
Loading..........!?
|
||||
</h1>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<body class="pa3">
|
||||
|
||||
<div id="wrapper" class="w-100 center">
|
||||
<canvas id="screen" resize></canvas>
|
||||
</div>
|
||||
|
||||
<canvas id="screen" resize style="z-index:0"></canvas>
|
||||
<div>
|
||||
<p>
|
||||
<!-- ####### YAY, I AM THE SOURCE EDITOR! #########-->
|
||||
<h1 style="color: #5e9ca0;">You can edit <span style="color: #2b2301;">this demo</span> text!</h1>
|
||||
<h2 style="color: #2e6c80;">How to use the editor:</h2>
|
||||
<p>Paste your documents in the visual editor on the left or your HTML code in the source editor in the right. <br />Edit any of the two areas and see the other changing in real time. </p>
|
||||
<p>Click the <span style="background-color: #2b2301; color: #fff; display: inline-block; padding: 3px 10px; font-weight: bold; border-radius: 5px;">Clean</span> button to clean your source code.</p>
|
||||
<h2 style="color: #2e6c80;">Some useful features:</h2>
|
||||
<ol style="list-style: none; font-size: 14px; line-height: 32px; font-weight: bold;">
|
||||
<li style="clear: both;"><img style="float: left;" src="https://html-online.com/img/01-interactive-connection.png" alt="interactive connection" width="45" /> Interactive source editor</li>
|
||||
<li style="clear: both;"><img style="float: left;" src="https://html-online.com/img/02-html-clean.png" alt="html cleaner" width="45" /> HTML Cleaning</li>
|
||||
<li style="clear: both;"><img style="float: left;" src="https://html-online.com/img/03-docs-to-html.png" alt="Word to html" width="45" /> Word to HTML conversion</li>
|
||||
<li style="clear: both;"><img style="float: left;" src="https://html-online.com/img/04-replace.png" alt="replace text" width="45" /> Find and Replace</li>
|
||||
<li style="clear: both;"><img style="float: left;" src="https://html-online.com/img/05-gibberish.png" alt="gibberish" width="45" /> Lorem-Ipsum generator</li>
|
||||
<li style="clear: both;"><img style="float: left;" src="https://html-online.com/img/6-table-div-html.png" alt="html table div" width="45" /> Table to DIV conversion</li>
|
||||
</ol>
|
||||
<p> </p>
|
||||
<h2 style="color: #2e6c80;">Cleaning options:</h2>
|
||||
<table class="editorDemoTable">
|
||||
<thead>
|
||||
<tr>
|
||||
<td>Name of the feature</td>
|
||||
<td>Example</td>
|
||||
<td>Default</td>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Remove tag attributes</td>
|
||||
<td><img style="margin: 1px 15px;" src="images/smiley.png" alt="laughing" width="40" height="16" /> (except <strong>img</strong>-<em>src</em> and <strong>a</strong>-<em>href</em>)</td>
|
||||
<td> </td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Remove inline styles</td>
|
||||
<td><span style="color: green; font-size: 13px;">You <strong style="color: blue; text-decoration: underline;">should never</strong> use inline styles!</span></td>
|
||||
<td><strong style="font-size: 17px; color: #2b2301;">x</strong></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Remove classes and IDs</td>
|
||||
<td><span id="demoId">Use classes to <strong class="demoClass">style everything</strong>.</span></td>
|
||||
<td><strong style="font-size: 17px; color: #2b2301;">x</strong></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Remove all tags</td>
|
||||
<td>This leaves <strong style="color: blue;">only the plain</strong> <em>text</em>. <img style="margin: 1px;" src="images/smiley.png" alt="laughing" width="16" height="16" /></td>
|
||||
<td> </td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Remove successive &nbsp;s</td>
|
||||
<td>Never use non-breaking spaces to set margins.</td>
|
||||
<td><strong style="font-size: 17px; color: #2b2301;">x</strong></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Remove empty tags</td>
|
||||
<td>Empty tags should go!</td>
|
||||
<td> </td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Remove tags with one &nbsp;</td>
|
||||
<td>This makes no sense!</td>
|
||||
<td><strong style="font-size: 17px; color: #2b2301;">x</strong></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Remove span tags</td>
|
||||
<td>Span tags with <span style="color: green; font-size: 13px;">all styles</span></td>
|
||||
<td><strong style="font-size: 17px; color: #2b2301;">x</strong></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Remove images</td>
|
||||
<td>I am an image: <img src="images/smiley.png" alt="laughing" /></td>
|
||||
<td> </td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Remove links</td>
|
||||
<td><a href="https://html-online.com">This is</a> a link.</td>
|
||||
<td> </td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Remove tables</td>
|
||||
<td>Takes everything out of the table.</td>
|
||||
<td> </td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Replace table tags with structured divs</td>
|
||||
<td>This text is inside a table.</td>
|
||||
<td> </td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Remove comments</td>
|
||||
<td>This is only visible in the source editor <!-- HELLO! --></td>
|
||||
<td><strong style="font-size: 17px; color: #2b2301;">x</strong></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Encode special characters</td>
|
||||
<td><span style="color: red; font-size: 17px;">♥</span> <strong style="font-size: 20px;">☺ ★</strong> ><</td>
|
||||
<td><strong style="font-size: 17px; color: #2b2301;">x</strong></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Set new lines and text indents</td>
|
||||
<td>Organize the tags in a nice tree view.</td>
|
||||
<td> </td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<p><strong> </strong></p>
|
||||
<p><strong>Save this link into your bookmarks and share it with your friends. It is all FREE! </strong><br /><strong>Enjoy!</strong></p>
|
||||
<p><strong> </strong></p> </p>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -4,9 +4,6 @@
|
|||
|
||||
$(document).ready(function() {
|
||||
|
||||
//networking - socket.io
|
||||
var socket = io('https://sound-mix.herokuapp.com');
|
||||
|
||||
//metrics related to 'view size'
|
||||
// 'coarse'
|
||||
var vs = view.size;
|
||||
|
|
@ -82,83 +79,12 @@ $(document).ready(function() {
|
|||
'07': [],
|
||||
};
|
||||
|
||||
//screen changer
|
||||
var nscreen = 3;
|
||||
var screens = [];
|
||||
var screen_names = {};
|
||||
screen_names['start'] = 1;
|
||||
screen_names['check'] = 2;
|
||||
screen_names['sound'] = 3;
|
||||
var curscreen;
|
||||
for (var idx = 0; idx < nscreen; idx++) {
|
||||
screens.push(new Layer());
|
||||
}
|
||||
|
||||
function changeScreen(page) {
|
||||
//pagination buttons
|
||||
aprev._activate();
|
||||
anext._activate();
|
||||
//
|
||||
if (page < 1) page = 1;
|
||||
if (page > nscreen) page = nscreen;
|
||||
curscreen = page;
|
||||
for (var idx = 0; idx < nscreen; idx++) {
|
||||
//
|
||||
if (idx == page - 1) {
|
||||
screens[idx].bringToFront();
|
||||
top.bringToFront();
|
||||
//
|
||||
screens[idx].activate();
|
||||
} else {
|
||||
screens[idx].sendToBack();
|
||||
}
|
||||
}
|
||||
//pagination buttons
|
||||
if (curscreen == 1) {
|
||||
aprev._deactivate();
|
||||
}
|
||||
if (curscreen == nscreen) {
|
||||
anext._deactivate();
|
||||
}
|
||||
}
|
||||
|
||||
function nextScreen() {
|
||||
if (curscreen + 1 <= nscreen) {
|
||||
curscreen++;
|
||||
changeScreen(curscreen);
|
||||
}
|
||||
}
|
||||
|
||||
function prevScreen() {
|
||||
if (curscreen - 1 > 0) {
|
||||
curscreen--;
|
||||
changeScreen(curscreen);
|
||||
}
|
||||
}
|
||||
|
||||
function changeScreenByName(pagename) {
|
||||
changeScreen(screen_names[pagename]);
|
||||
}
|
||||
|
||||
function getScreenNameNext() {
|
||||
if (curscreen + 1 <= nscreen) {
|
||||
return Object.keys(screen_names)[curscreen + 1 - 1];
|
||||
} else {
|
||||
return Object.keys(screen_names)[curscreen - 1];
|
||||
}
|
||||
}
|
||||
|
||||
function getScreenNamePrev() {
|
||||
if (curscreen - 1 > 0) {
|
||||
return Object.keys(screen_names)[curscreen - 1 - 1];
|
||||
} else {
|
||||
return Object.keys(screen_names)[curscreen - 1];
|
||||
}
|
||||
}
|
||||
|
||||
//top layer
|
||||
var top = new Layer(); // new Layer() will be automatically activated at the moment.
|
||||
|
||||
//networking - socket.io
|
||||
var socket = io(window.location.protocol + "//" + window.location.host);
|
||||
|
||||
//net. connection marker
|
||||
var netstat = new Path.Circle({
|
||||
center: view.bounds.topRight + [-vssw / 2, +vssw / 2],
|
||||
|
|
@ -185,147 +111,11 @@ $(document).ready(function() {
|
|||
});
|
||||
});
|
||||
|
||||
//page change - prev. page
|
||||
aprev.addTo(project);
|
||||
aprev.scale(vssw * 1.5);
|
||||
aprev.position = [0, 0]; //reset position, before relative positioning !!
|
||||
aprev.translate([vssw, vssw * 1.8]);
|
||||
aprev.fillColor = '#FFE40A';
|
||||
aprev._socket = socket;
|
||||
aprev._isactive = false;
|
||||
aprev._activate = function() {
|
||||
this._isactive = true;
|
||||
this.opacity = 1;
|
||||
}
|
||||
aprev._deactivate = function() {
|
||||
this._isactive = false;
|
||||
this.opacity = 0.3;
|
||||
}
|
||||
aprev.onClick = function() {
|
||||
if (this._isactive == true) {
|
||||
prevScreen();
|
||||
}
|
||||
};
|
||||
|
||||
//page change - next. page
|
||||
anext.addTo(project);
|
||||
anext.scale(vssw * 1.5);
|
||||
anext.position = [0, 0]; //reset position, before relative positioning !!
|
||||
anext.translate([vssw * 9, vssw * 1.8]);
|
||||
anext.fillColor = '#FFE40A';
|
||||
anext._socket = socket;
|
||||
anext._isactive = false;
|
||||
anext._activate = function() {
|
||||
this._isactive = true;
|
||||
this.opacity = 1;
|
||||
}
|
||||
anext._deactivate = function() {
|
||||
this._isactive = false;
|
||||
this.opacity = 0.3;
|
||||
}
|
||||
anext.onClick = function() {
|
||||
if (this._isactive == true) {
|
||||
nextScreen();
|
||||
}
|
||||
};
|
||||
|
||||
//title background
|
||||
var titlebox = new Path.Rectangle({
|
||||
point: [vssw * 2, vssw * 1],
|
||||
size: [vssw * 6, vssw * 1.5],
|
||||
fillColor: 'white',
|
||||
radius: vssw * 0.8,
|
||||
opacity: 0.3,
|
||||
});
|
||||
|
||||
//screen #1 - 'home'
|
||||
changeScreen(1);
|
||||
new Path.Rectangle([0, 0], vs).fillColor = '#999';
|
||||
|
||||
//title - text
|
||||
new PointText({
|
||||
point: titlebox.bounds.center,
|
||||
content: '✧*｡٩(ˊᗜˋ*)و✧*｡',
|
||||
fillColor: 'white',
|
||||
fontFamily: 'AppleGothic, Sans-serif',
|
||||
fontWeight: 'bold',
|
||||
fontSize: '3em',
|
||||
}).fitBounds(titlebox.bounds);
|
||||
//✧*｡٩(ˊᗜˋ*)و✧*｡
|
||||
|
||||
//hello, screen.
|
||||
logo.addTo(project);
|
||||
logo.scale(vsw / 1.5);
|
||||
logo.position = view.center;
|
||||
//logo.position.y -= vssh;
|
||||
|
||||
//screen #2 - check
|
||||
changeScreen(2);
|
||||
new Path.Rectangle([0, 0], vs).fillColor = '#05C183';
|
||||
|
||||
//title - text
|
||||
new PointText({
|
||||
point: [vssw * 2, vssw * 1],
|
||||
content: ' 연결 확인 ',
|
||||
fillColor: 'white',
|
||||
fontFamily: 'AppleGothic, Sans-serif',
|
||||
fontWeight: 'bold',
|
||||
fontSize: '3em'
|
||||
}).fitBounds(titlebox.bounds);
|
||||
|
||||
//TODO: info text.
|
||||
new PointText({
|
||||
content: "네트워크 테스트!",
|
||||
point: view.center + [-vssw * 3, -vssw * 2],
|
||||
fontWeight: 'bold',
|
||||
fontSize: vssw * 1.0,
|
||||
fillColor: 'gold'
|
||||
});
|
||||
new PointText({
|
||||
content: "사운드 테스트!",
|
||||
point: view.center + [-vssw * 3, vssw * 0],
|
||||
fontWeight: 'bold',
|
||||
fontSize: vssw * 1.0,
|
||||
fillColor: 'pink'
|
||||
});
|
||||
new PointText({
|
||||
content: "동그라미 터치!",
|
||||
point: view.center + [-vssw * 3, vssw * 2],
|
||||
fontWeight: 'bold',
|
||||
fontSize: vssw * 1.0,
|
||||
fillColor: 'red'
|
||||
});
|
||||
new Path.Circle({
|
||||
center: view.center,
|
||||
radius: vsw / 4,
|
||||
fillColor: 'white',
|
||||
opacity: 0.5,
|
||||
onClick: function() {
|
||||
clap.play();
|
||||
}
|
||||
});
|
||||
|
||||
//global panning variable
|
||||
//NOTE: this DOES NOT sync between web-clients! <-- TBD, yet NOT-IMPLEMENTED !
|
||||
var pan_width_pool = [1000, 2000, 3000, 4000, 8000, 80000];
|
||||
var pan_speed_pool = [0, 10, 30, 50, 80, 200, 400, 1200];
|
||||
var cur_pan_width_idx = pan_width_pool.length - 1;
|
||||
var cur_pan_speed_idx = 0;
|
||||
var cur_pan_width = 0;
|
||||
var cur_pan_speed = 0;
|
||||
|
||||
//screen #3 - sound page
|
||||
changeScreen(3);
|
||||
new Path.Rectangle([0, 0], vs).fillColor = '#555';
|
||||
|
||||
//title - text
|
||||
new PointText({
|
||||
point: [vssw * 2, vssw * 1],
|
||||
content: ' 믹스 #1 ',
|
||||
fillColor: 'white',
|
||||
fontFamily: 'AppleGothic, Sans-serif',
|
||||
fontWeight: 'bold',
|
||||
fontSize: '3em'
|
||||
}).fitBounds(titlebox.bounds);
|
||||
new Path.Rectangle([0, 0], vs).fillColor = new Color(1, 0.95, 0.71, 0.5); // buttermilk
|
||||
|
||||
//
|
||||
for (var row = 0; row < 7; row++) {
|
||||
|
|
@ -340,7 +130,7 @@ $(document).ready(function() {
|
|||
name: 'play_btn',
|
||||
children: [
|
||||
new Path.Rectangle({
|
||||
point: [vssw * 0.8, row * vssw * 1.4 + vssw * 3.5],
|
||||
point: [vssw * 0.8, row * vssw * 1.4 + vssw * 1.2],
|
||||
radius: vssw * 0.4,
|
||||
size: [vssw * 1.5, vssw * 0.7],
|
||||
fillColor: new Color({
|
||||
|
|
@ -368,14 +158,14 @@ $(document).ready(function() {
|
|||
//playcounterbox
|
||||
new Path.Rectangle({
|
||||
name: 'playcounterbox',
|
||||
point: [vssw * 2.3, row * vssw * 1.4 + vssw * 3.5],
|
||||
point: [vssw * 2.3, row * vssw * 1.4 + vssw * 1.2],
|
||||
size: [vssw * 0.6, vssw * 0.8],
|
||||
}),
|
||||
//playcounter
|
||||
new PointText({
|
||||
name: 'playcounter',
|
||||
content: '' + 0,
|
||||
fillColor: 'white',
|
||||
fillColor: 'black',
|
||||
fontSize: '2em',
|
||||
fontWeight: 'bold'
|
||||
}),
|
||||
|
|
@ -384,7 +174,7 @@ $(document).ready(function() {
|
|||
name: 'stop_btn',
|
||||
children: [
|
||||
new Path.Rectangle({
|
||||
point: [vssw * 2.9, row * vssw * 1.4 + vssw * 3.5],
|
||||
point: [vssw * 2.9, row * vssw * 1.4 + vssw * 1.2],
|
||||
radius: vssw * 0.4,
|
||||
size: [vssw * 1.6, vssw * 0.7],
|
||||
fillColor: new Color({
|
||||
|
|
@ -418,7 +208,7 @@ $(document).ready(function() {
|
|||
name: 'faster_btn',
|
||||
children: [
|
||||
new Path.Rectangle({
|
||||
point: [vssw * 5.0, row * vssw * 1.4 + vssw * 3.5],
|
||||
point: [vssw * 5.0, row * vssw * 1.4 + vssw * 1.2],
|
||||
radius: vssw * 0.4,
|
||||
size: [vssw * 1.6, vssw * 0.7],
|
||||
strokeColor: new Color({
|
||||
|
|
@ -427,7 +217,7 @@ $(document).ready(function() {
|
|||
brightness: 1
|
||||
}),
|
||||
strokeWidth: vssw * 0.03,
|
||||
fillColor: "#555"
|
||||
fillColor: new Color(1, 1, 1, 0.5)
|
||||
}),
|
||||
faster.clone()
|
||||
],
|
||||
|
|
@ -448,14 +238,14 @@ $(document).ready(function() {
|
|||
//speedcounterbox
|
||||
new Path.Rectangle({
|
||||
name: 'speedcounterbox',
|
||||
point: [vssw * 6.6, row * vssw * 1.4 + vssw * 3.5],
|
||||
point: [vssw * 6.6, row * vssw * 1.4 + vssw * 1.2],
|
||||
size: [vssw * 0.6, vssw * 0.8],
|
||||
}),
|
||||
//speedcounter
|
||||
new PointText({
|
||||
name: 'speedcounter',
|
||||
content: '' + 0,
|
||||
fillColor: 'white',
|
||||
fillColor: 'black',
|
||||
fontSize: '2em',
|
||||
fontWeight: 'bold'
|
||||
}),
|
||||
|
|
@ -464,7 +254,7 @@ $(document).ready(function() {
|
|||
name: 'slower_btn',
|
||||
children: [
|
||||
new Path.Rectangle({
|
||||
point: [vssw * 7.8, row * vssw * 1.4 + vssw * 3.5],
|
||||
point: [vssw * 7.8, row * vssw * 1.4 + vssw * 1.2],
|
||||
radius: vssw * 0.4,
|
||||
size: [vssw * 1.6, vssw * 0.7],
|
||||
strokeColor: new Color({
|
||||
|
|
@ -473,7 +263,7 @@ $(document).ready(function() {
|
|||
brightness: 1
|
||||
}),
|
||||
strokeWidth: vssw * 0.03,
|
||||
fillColor: "#555"
|
||||
fillColor: new Color(1, 1, 1, 0.5)
|
||||
}),
|
||||
slower.clone()
|
||||
],
|
||||
|
|
@ -505,9 +295,7 @@ $(document).ready(function() {
|
|||
this._player.retrigger = true;
|
||||
// set icons
|
||||
this.children.play_btn.children[1].fitBounds(this.children.play_btn.children[0].bounds);
|
||||
this.children.play_btn.children[1].fillColor = "#555";
|
||||
this.children.stop_btn.children[1].fitBounds(this.children.stop_btn.children[0].bounds);
|
||||
this.children.stop_btn.children[1].fillColor = "#555";
|
||||
this.children.faster_btn.children[1].fitBounds(this.children.faster_btn.children[0].bounds);
|
||||
this.children.faster_btn.children[1].fillColor = "orange";
|
||||
this.children.slower_btn.children[1].fitBounds(this.children.slower_btn.children[0].bounds);
|
||||
|
|
@ -559,14 +347,11 @@ $(document).ready(function() {
|
|||
content: Object.keys(sounds)[idx],
|
||||
fontSize: vssw * 0.55,
|
||||
fontWeight: 'bold',
|
||||
fillColor: 'white'
|
||||
fillColor: 'black'
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
//home
|
||||
changeScreen(1);
|
||||
|
||||
//reveal the curtain.
|
||||
$('#page-loading').css('z-index', -1);
|
||||
|
||||
|
|
|
|||
Loading…
Reference in a new issue