Commit ea9242ed authored by Michael Murtaugh's avatar Michael Murtaugh

using golden layout

parent 3dee7e4b
This diff is collapsed.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="gltest.js"></script>
</head>
<body>
<div id="layout"></div>
</body>
</html>
\ No newline at end of file
This source diff could not be displayed because it is too large. You can view the blob instead.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="index.js"></script>
<script>
var app = new cceditorapp.CCEditorApp({
notlayout: {
content: [{
type: 'row',
content: [{
type: 'component',
componentName: 'cceditor',
componentState: { href: '/index.md', target: "editor" }
}, {
type: 'column',
content:[{
type: 'component',
componentName: 'ccframe',
componentState: { href: '', target: "video" }
},{
type: 'stack',
content: [{
type: 'component',
componentName: 'ccframe',
componentState: { href: '', target: "link" }
},{
type: 'component',
componentName: 'ccframe',
componentState: { href: '', target: "scans" }
}]
}]
}]
}]
}
});
</script>
</head>
<body>
</body>
</html>
\ No newline at end of file
This diff is collapsed.
This diff is collapsed.
dist/cceditor.js: src/cceditor.js src/editor.css src/*.js
dist/index.js: src/*.js src/editor.css
node_modules/.bin/webpack
# dist/cceditor.js: src/cceditor.js src/editor.css src/*.js
# node_modules/.bin/webpack
dist/gltest.js: src/gltest.js
node_modules/.bin/webpack --config webpack.test.js
This diff is collapsed.
......@@ -7,7 +7,7 @@ function strip_fragment (url) {
}
function parse_fragment (url) {
console.log("parse_fragment", url);
// console.log("parse_fragment", url);
ret = {}
if (url.indexOf("#") >= 0) {
var p = url.split("#", 2);
......@@ -51,7 +51,7 @@ class CCFrame {
set src (url) {
var purl = parse_fragment(url),
previous_url = this.url ? parse_fragment(this.url) : null;
console.log("purl", purl, "previous", previous_url)
// console.log("purl", purl, "previous", previous_url)
var viewers = {
'video': {
pattern: /\.(mp4|webm)$/,
......@@ -87,7 +87,7 @@ class CCFrame {
var default_viewer = function () {
if (previous_url && previous_url.base == purl.base) {
// fragment change only
console.log("update hash", this.iframe.contentWindow)
// console.log("update hash", this.iframe.contentWindow)
this.iframe.contentWindow.location.hash = purl.fragment;
return;
}
......@@ -117,21 +117,21 @@ class CCFrame {
return this.url;
}
_load (e) {
console.log("iframe loaded", this, e);
// console.log("iframe loaded", this, e);
if (this.iframe.contentDocument) {
var video = this.iframe.contentDocument.querySelector("video");
if (video) {
console.log("iframe has video", video);
// console.log("iframe has video", video);
}
var pageNumber = this.iframe.contentDocument.querySelector("input#pageNumber");
this.pageNumberInput = pageNumber;
this.pageNumber = pageNumber && pageNumber.value;
if (pageNumber) {
console.log("iframe has pageNumber", pageNumber);
// console.log("iframe has pageNumber", pageNumber);
this.interval = function () {
if (this.pageNumberInput.value != this.pageNumber) {
this.pageNumber = this.pageNumberInput.value;
console.log("page changed", this.pageNumber);
// console.log("page changed", this.pageNumber);
}
};
window.setInterval(this.interval.bind(this), 1000);
......@@ -141,17 +141,17 @@ class CCFrame {
// }, false);
}
} else {
console.log("unable to access iframe.contentDocument");
// console.log("unable to access iframe.contentDocument");
}
if (this.iframe.contentWindow) {
var that = this;
console.log("watching iframe.contentWindow")
// console.log("watching iframe.contentWindow")
this.iframe.contentWindow.addEventListener("hashchange", function () {
console.log("iframe hashchange", that.iframe.contentWindow.location.hash);
// console.log("iframe hashchange", that.iframe.contentWindow.location.hash);
})
} else {
console.log("unable to access iframe.contentWindow")
// console.log("unable to access iframe.contentWindow")
}
}
_timeupdate (e) {
......
function classcycler (button, target, modes) {
var i = 0;
button.addEventListener("click", function () {console.log("cycle"+i, button, target); target.classList.replace(modes[i], modes[i = (i+1) % modes.length]); });
}
// classcycler(gebi("toggle"), gebi("content"), "splitscreen overlay".split(" "));
......@@ -4,45 +4,23 @@ body {
overflow: hidden;
}
/*.CodeMirror {
.cceditor {
width: 100%; height: 100%;
}
.CodeMirror {
position: absolute;
left: 0; right: 0;
width: 100%; height: 100%;
background: #EEE;
font-size: 12px;
}
*/
/* flex tiling */
.cceditor {
display: flex;
flex-direction: row;
flex-wrap: wrap-reverse;
.ccframe iframe {
border: none;
width: 100%;
height: 100%;
}
.cceditor div.cceditor_cell {
flex: 1 1 50%;
border: 5px solid red;
box-sizing: border-box;
}
div.cceditor_cell video {
width: 100%;
height: 100%;
min-width: 10px;
min-height: 10px;
max-width: 100%;
max-height: 100%;
}
div.cceditor_cell iframe {
border: 0;
.ccframe video {
width: 100%;
height: 100%;
min-width: 10px;
min-height: 10px;
max-width: 100%;
max-height: 100%;
height: 100%;
}
\ No newline at end of file
var GoldenLayout = require("golden-layout");
require("golden-layout/src/css/goldenlayout-base.css");
require("golden-layout/src/css/goldenlayout-light-theme.css");
var config = {
content: [{
type: 'row',
content:[{
type: 'component',
componentName: 'testComponent',
componentState: { label: 'A' }
},{
type: 'column',
content:[{
type: 'component',
componentName: 'testComponent',
componentState: { label: 'B' }
},{
type: 'component',
componentName: 'testComponent',
componentState: { label: 'C' }
}]
}]
}]
};
var myLayout = new GoldenLayout( config, document.getElementById("layout") );
console.log("myLayout", myLayout);
myLayout.registerComponent( 'testComponent', function( container, componentState ){
container.getElement().html( '<h2>' + componentState.label + '</h2>' );
});
myLayout.init();
\ No newline at end of file
var GoldenLayout = require("golden-layout"),
cceditor = require("./cceditor.js"),
CCFrame = require("./ccframe.js");
require("golden-layout/src/css/goldenlayout-base.css");
require("golden-layout/src/css/goldenlayout-light-theme.css");
// var DEFAULT_CONFIG = {
// content: [{
// type: 'row',
// content: [{
// type: 'component',
// componentName: 'cceditor',
// componentState: { href: '/docs/st01.md', target: "editor" }
// }]
// }]
// };
var DEFAULT_CONFIG = {
content: [{
type: 'row',
content: [{
type: 'stack',
id: 'editorstack',
content: [{
type: 'component',
componentName: 'cceditor',
componentState: { href: '/index.md', target: "editor" }
}]
}]
}]
};
// app.layout.root.contentItems
// use container.extendState/ setState to add hash to state
// Getting the state
//var state = JSON.stringify( myLayout.toConfig() );
class CCEditorApp {
constructor (opts) {
var that = this;
if (opts === undefined) { opts = {} };
var config = opts.layout || DEFAULT_CONFIG;
var frames_by_target = {};
this.frames_by_target = frames_by_target;
this.layout = new GoldenLayout( config, opts.elt );
this.layout.registerComponent( 'cceditor', function( container, componentState ){
var editor = new cceditor.CCEditor(container.getElement()[0], {
click: function (href, target) {
if (href.match(/\.md$/) && !target) {
// EDITOR LINK
// console.log("editor link");
var component = that.find_editor(href);
if (component) {
// console.log("found matching cceditor component", component);
component.parent.setActiveContentItem(component);
} else {
// var editstack = app.layout.root.getItemsById("editorstack")[0];
var editstack = that.get_editor_stack();
editstack.addChild({
'type': 'component',
componentName: 'cceditor',
componentState: { href: href, target: "editor" }
})
}
} else {
// OTHER LINKS
target = target || "link";
var linksstack = that.layout.root.getItemsById("linkstack");
if (linksstack.length > 0) {
linksstack = linksstack[0];
// console.log("got linksstack", linksstack);
// look for matching target
var t = that.find_frame_by_target(target);
if (t) {
var f = frames_by_target[target];
if (f) {
// console.log("cceditorapp: using ccframe", f);
f.src = href;
t.parent.setActiveContentItem(t);
} else {
console.log("cceditorapp: no ccframe in frames_by_target for target", target);
}
} else {
linksstack.addChild({
type: 'component',
componentName: 'ccframe',
componentState: { href: href, target: target}
});
}
// if
} else {
// Create the linkstack with a ccframe targeting this href
var root_row = that.layout.root.contentItems[0];
root_row.addChild({
type: 'column',
content: [{
type: 'stack',
id: 'linkstack',
content: [{
type: 'component',
componentName: 'ccframe',
componentState: { href: href, target: target}
}]
}]
});
}
// console.log("click", href, target);
// var p = frames_by_target[target];
// if (p) { p.src = href; }
}
}
});
container.setTitle(componentState.href);
frames_by_target[componentState.target] = editor;
// seems to need a little delay
window.setTimeout(function () {
// console.log("editor", editor);
// editor.editor.refresh();
editor.src = componentState.href;
}, 250)
});
this.layout.registerComponent( 'testComponent', function( container, componentState ){
container.getElement().html( '<h2>' + componentState.label + '</h2>' );
});
this.layout.registerComponent( 'ccframe', function( container, componentState ){
var elt = container.getElement()[0],
player = new CCFrame(elt);
elt.classList.add("ccframe");
// console.log("ccframe", player);
player.src = componentState.href;
container.setTitle(componentState.target);
frames_by_target[componentState.target] = player;
// window.setTimeout(function () {
// console.log("editor", editor);
// editor.editor.refresh();
// }, 250)
});
this.layout.init();
}
get_editor_stack (n) {
if (n === undefined) { n = this.layout.root };
if (n.type === "component" && n.componentName == "cceditor") {
if (n.parent && n.parent.type == "stack") {
return n.parent;
}
}
for (var i=0, l=n.contentItems.length; i<l; i++) {
var result = this.get_editor_stack(n.contentItems[i]);
if (result) { return result; }
}
}
find_editor (href, n) {
if (n === undefined) { n = this.layout.root };
if (n.type === "component" && n.componentName == "cceditor") {
if (n.config.componentState.href == href) { return n; }
}
for (var i=0, l=n.contentItems.length; i<l; i++) {
var result = this.find_editor(href, n.contentItems[i]);
if (result) { return result; }
}
}
find_frame_by_target (target, n) {
if (n === undefined) { n = this.layout.root };
if (n.type === "component" && n.componentName == "ccframe") {
if (n.config.componentState.target == target) { return n; }
}
for (var i=0, l=n.contentItems.length; i<l; i++) {
var result = this.find_frame_by_target(target, n.contentItems[i]);
if (result) { return result; }
}
}
}
module.exports = {
CCEditorApp: CCEditorApp,
CodeMirror: cceditor.CodeMirror,
CCEditor: cceditor.CCEditor
}
\ No newline at end of file
const path = require('path');
const UglifyJSPlugin = require('uglifyjs-webpack-plugin')
module.exports = {
entry: './src/cceditor.js',
entry: './src/index.js',
mode: 'development',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'cceditor.js',
library: 'cceditor'
filename: 'index.js',
library: 'cceditorapp'
},
module: {
rules: [
......
const path = require('path');
module.exports = {
entry: './src/gltest.js',
mode: 'development',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'gltest.js'
},
module: {
rules: [
{
test: /\.css$/,
use: [
{ loader: "style-loader" },
{ loader: "css-loader" }
]
}
]
}
};
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment