rayburgemeestre
/
cheerpweb
Tarkkaile 1
Äänestä 0
Fork 0
Koodi Ongelmat 0 Pull-pyynnöt 0 Julkaisut 0 Wiki Activity
Selaa lähdekoodia

Draft first version of the complete page layout

master
Ray Burgemeestre 6 vuotta sitten
vanhempi
69cdb8f343
commit
a662e02852
4 muutettua tiedostoa jossa 289 lisäystä ja 61 poistoa
Jaettu näkymä Näytä diff tilastot
  1. +8
    -43
      dist/index.html
  2. +134
    -3
      src/App.vue
  3. +115
    -15
      src/index.js
  4. +32
    -0
      src/mystyles.scss

+ 8
- 43
dist/index.html Näytä tiedosto

@@ -1,47 +1,12 @@
<!doctype html>
<html>
<head>
<title>Getting Started</title>
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="stylesheet" href="css/mystyles.css">
</head>
<body>
<div id="app"></div>
<div id="container" style="width:800px; height:600px;"></div>
<!-- for development commented out
<script src="main.js"></script>
-->

<div id="my-statusbar"></div>
<h1 class="title">
Bulma
</h1>

<p class="subtitle">
Modern CSS framework based on <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox">Flexbox</a>
</p>

<div class="field">
<div class="control">
<input class="input" type="text" placeholder="Input">
</div>
</div>

<div class="field">
<p class="control">
<span class="select">
<select>
<option>Select dropdown</option>
</select>
</span>
</p>
</div>

<div class="buttons">
<a class="button is-primary">Primary</a>
<a class="button is-link">Link</a>
</div>

</body>
<head>
<title>Getting Started</title>
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="stylesheet" href="css/mystyles.css">
<link href="css/mystyles.css" rel="stylesheet"></head>
<body>
<div id="app"></div>
<script type="text/javascript" src="main.js"></script></body>
</html>


+ 134
- 3
src/App.vue Näytä tiedosto

@@ -1,7 +1,138 @@
<template>
<div class="full-width center-content">
<hello-component name="World" />
</div>
<!--
<div class="full-width center-content">
<hello-component name="World" />
</div>
-->
<div class="columns is-fullheight">
<div class="column">
<nav class="navbar is-black" role="navigation" aria-label="main navigation">
<div class="navbar-brand">
<a class="navbar-item" href="https://bulma.io">
<img src="dist/cheerp.png" height="28">
</a>

<a role="button" class="navbar-burger burger" aria-label="menu" aria-expanded="false" data-target="navbarBasicExample">
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
</a>
</div>

<div id="navbarBasicExample" class="navbar-menu">
<div class="navbar-start">
<a class="navbar-item">
Home
</a>

<a class="navbar-item">
Documentation
</a>

<div class="navbar-item has-dropdown is-hoverable">
<a class="navbar-link">
More
</a>

<div class="navbar-dropdown">
<a class="navbar-item">
About
</a>
<a class="navbar-item">
Jobs
</a>
<a class="navbar-item">
Contact
</a>
<hr class="navbar-divider">
<a class="navbar-item">
Report an issue
</a>
</div>
</div>
</div>

<div class="navbar-end">
<div class="navbar-item">
<div class="buttons">
<a class="button is-primary">
<strong>Compile</strong>
</a>
<a class="button is-light">
Run
</a>
</div>
</div>
</div>
</div>
</nav>

<div class="columns is-fullheight">
<div class="column">
<div class="rows">
<div class="row">

<div class="tabs">
<ul>
<li class="is-active"><a>Code editor</a></li>
<li><a>Compiler</a></li>
</ul>
</div>
<div id="container_editor_cpp"></div>
<div class="tags has-addons">
<span class="tag">VIM</span>
<span class="tag is-primary" id="statusbar_editor_cpp"></span>
</div>


</div>
<div class="row">

<div class="tabs">
<ul>
<li class="is-active"><a>HTML</a></li>
</ul>
</div>
<div id="container_editor_html"></div>
<div class="tags has-addons">
<span class="tag">VIM</span>
<span class="tag is-primary" id="statusbar_editor_html"></span>
</div>

</div>
</div>

</div>
<div class="column">
<div class="rows">
<div class="row">
<div class="tabs">
<ul>
<li class="is-active"><a>Javascript</a></li>
</ul>
</div>
<div id="container_editor_javascript"></div>
<div class="tags has-addons">
<span class="tag">VIM</span>
<span class="tag is-primary" id="statusbar_editor_javascript"></span>
</div>
</div>
<div class="row">
<div class="tabs">
<ul>
<li class="is-active"><a>Compiler output</a></li>
<li><a>Run output</a></li>
</ul>
</div>
<textarea class="textarea" placeholder="Compiler output will be displayed here."></textarea>
</div>
</div>
</div>
</div>

<!-- for development commented out <script src="main.js"></script> -->
</div>
</div>
</template>

<script>

+ 115
- 15
src/index.js Näytä tiedosto

@@ -4,27 +4,127 @@ import { initVimMode } from 'monaco-vim';
import Vue from 'vue'
import App from './App.vue'

new Vue({
el: '#app',
render: h => h(App)
})

require('./mystyles.scss');
if (!window.included) {
window.included = true;
new Vue({
el: '#app',
render: h => h(App)
})

function component() {
let element = document.createElement('div');
require('./mystyles.scss');

element.innerHTML = _.join(['Hello', 'webpack'], ' ');
/*
function component() {
let element = document.createElement('div');

return element;
element.innerHTML = _.join(['Hello', 'webpack'], ' ');

return element;
}

document.body.appendChild(component());
*/

const editor_cpp = monaco.editor.create(document.getElementById('container_editor_cpp'), {
value: `#include <cheerp/client.h>
#include <cheerp/clientlib.h>

// We need to extend the client namespace to declare our
// custom JavaScript function
namespace client
{
// The name should be the same as the JavaScript one
// The parameters needs to be a const client::String reference
// so that implicit conversion from const char* is supported
void changeTitle(const String& str);
}

using namespace client;

void webMain()
{
Element* titleElement=document.getElementById("pagetitle");
String* oldText=titleElement->get_textContent();
changeTitle("Literal C++ string");
}`,
language: 'cpp',
automaticLayout: true
});

const editor_html = monaco.editor.create(document.getElementById('container_editor_html'), {
value: `<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Cheerp test</title>
<script defer src="example.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script>
// Use jQuery to make a (trivial) change to the page
function changeTitle(str)
{
$("#pagetitle").text(str);
}
</script>
</head>
<body>
<h1 id="pagetitle">Boring static text</h1>
</body>
</html>`,
language: 'cpp',
automaticLayout: true
});


const editor_javascript = monaco.editor.create(document.getElementById('container_editor_javascript'), {
value: `
"use strict";
/*Compiled using Cheerp (R) by Leaning Technologies Ltd*/
var aSlot=null;var oSlot=0;var nullArray=[null];var nullObj={d:nullArray,o:0};
function __Z7webMainv(){
var LretConstructor=null;
LretConstructor="pagetitle";
LretConstructor=document.getElementById(LretConstructor);
LretConstructor.textContent;
LretConstructor="Literal C++ string";
changeTitle(LretConstructor);
return;
}
function _cheerpCreate_ZN6client6StringC2EPKc(Larg0,Marg0){
var tmp0=0,Lgeptoindexphi=0,LretConstructor$pi=null,tmp3=null;
LretConstructor$pi=String();
tmp0=Larg0[Marg0]|0;
if((tmp0&255)===0){
return String(LretConstructor$pi);
}else{
Lgeptoindexphi=0;
}
while(1){
tmp3=String.fromCharCode(tmp0<<24>>24);
LretConstructor$pi=LretConstructor$pi.concat(tmp3);
Lgeptoindexphi=Lgeptoindexphi+1|0;
tmp0=Larg0[Marg0+Lgeptoindexphi|0]|0;
if((tmp0&255)===0){
break;
}
}
return String(LretConstructor$pi);
}
var _$pstr=new Uint8Array([112,97,103,101,116,105,116,108,101,0]);
var _$pstr1=new Uint8Array([76,105,116,101,114,97,108,32,67,43,43,32,115,116,114,105,110,103,0]);
__Z7webMainv();
`,
language: 'javascript',
automaticLayout: true
});

document.body.appendChild(component());
const vimMode_1 = initVimMode(editor_cpp, document.getElementById('statusbar_editor_cpp'))
const vimMode_2 = initVimMode(editor_html, document.getElementById('statusbar_editor_html'))
const vimMode_3 = initVimMode(editor_javascript, document.getElementById('statusbar_editor_javascript'))

const editor = monaco.editor.create(document.getElementById('container'), {
value: 'int main() {} ',
language: 'cpp'
});
//vimMode_1.dispose();

const vimMode = initVimMode(editor, document.getElementById('my-statusbar'))
//console.log(editor);

}

+ 32
- 0
src/mystyles.scss Näytä tiedosto

@@ -1,2 +1,34 @@
@charset "utf-8";
@import "~bulma/bulma";

.is-fullheight.columns {
height: calc(100vh - ( 3.25rem - .75rem ) );
}
#container_editor_cpp, #container_editor_html, #container_editor_javascript {
width: calc(100vh - ( 6rem) );
}
#container_editor_cpp {
height: calc(70vh - ( 8rem) );
}
#container_editor_html {
height: calc(30vh - ( 8rem) );
}
#container_editor_javascript {
height: calc(70vh - ( 8rem) );
}
textarea.textarea {
width: calc(100vh - ( 6rem) );
min-width: calc(100vh - ( 6rem) );
height: calc(30vh - ( 8rem) );
}

.tags {
margin-left: 10px;
margin-top: 10px;
}
.tag span {
margin: 0;
padding: 0;
position:relative;
top:2px;
}

Write Preview
Loading…
Peruuta
Tallenna