Skip to content

Instantly share code, notes, and snippets.

@sandor

sandor/prototype.html

Created June 27, 2017 11:39
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save sandor/f7802a91cb832d5d6768337ec53f5ddd to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save sandor/f7802a91cb832d5d6768337ec53f5ddd to your computer and use it in GitHub Desktop.
Download ZIP
Raw
prototype.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="node_modules/xel/stylesheets/macos.theme.css">
<link rel="import" href="node_modules/xel/xel.min.html">
<!--
<link rel="stylesheet" href="css/photon.css">-->
<link rel="stylesheet" href="css/app.css">
<!-- <link rel="stylesheet" href="css/text_menu.css">-->
<link rel="stylesheet" href="css/gridlex.min.css">
<link rel="stylesheet" href="css/pretty.min.css">
<!-- this are the css an js files from the angular project-->
<!-- <link rel='stylesheet prefetch' href='css/bootstrap.min.css'>-->
<link rel='stylesheet prefetch' href='css/font-awesome.min.css'>
<link rel="stylesheet" href="css/style.css">
<script src="css/ruler.css"></script>
<!-- Insert this line above script imports -->
<script>
if (typeof module === 'object') {
window.module = module;
module = undefined;
}
</script>
<script src='js/jquery.min.js'></script>
<script src='js/fabric.min.js'></script>
<script src='js/angular.min.js'></script>
<script src='assets/fabric.js'></script>
<script src='assets/fabricCanvas.js'></script>
<script src='assets/fabricConstants.js'></script>
<script src='assets/fabricDirective.js'></script>
<script src='assets/fabricDirtyStatus.js'></script>
<script src='assets/fabricUtilities.js'></script>
<script src='assets/fabricWindow.js'></script>
<!-- <script src='js/bootstrap.min.js'></script>-->
<script src="js/index.js"></script>
<!-- I am using this small script to inject HTML contents for the menus. Not needed if we use Angular.js-->
<script src="js/csi.min.js"></script>
<!-- just a dummy funtion for the tabs -->
<script>
function openTab(evt, tabName) {
var i, tabcontent, tablinks;
tabcontent = document.getElementsByClassName("tabcontent");
for (i = 0; i < tabcontent.length; i++) {
tabcontent[i].style.display = "none";
}
tablinks = document.getElementsByClassName("tablinks");
for (i = 0; i < tablinks.length; i++) {
tablinks[i].className = tablinks[i].className.replace(" active", "");
}
document.getElementById(tabName).style.display = "block";
evt.currentTarget.className += " active";
}
</script>
<!-- this is not working as it should: change canvas color -->
<script type="text/javascript">
function colorPicker() {
var x = document.getElementById("picker1").value;
var select = document.getElementById("select1");
select.value = x;
}
window.onload = colorPicker;
</script>
<!-- Insert this line after script imports -->
<script>
if (window.module) module = window.module;
</script>
</head>
<body style="-webkit-app-region: drag" ng-app='example' ng-controller="ExampleCtrl">
<div class="window">
<header class="toolbar toolbar-header">
<h1 class="title">Untitled</h1>
<div class="toolbar-actions">
<x-box class="middle">
<x-buttons tracking="1">
<x-button skin="iconic">
<x-box vertical>
<x-icon name="layers"></x-icon>
<x-label>Layers</x-label>
</x-box>
</x-button>
<x-button skin="iconic">
<x-box vertical>
<x-icon name="pages"></x-icon>
<x-label>Pages</x-label>
</x-box>
</x-button>
</x-buttons>
<x-buttons tracking="1">
<x-button skin="iconic" ng-click="fabric.addText()">
<x-box vertical>
<x-icon name="text" iconset="images/icons.svg"></x-icon>
<x-label>Add Text</x-label>
</x-box>
</x-button>
<x-button skin="iconic">
<x-box vertical>
<x-icon name="extension" ng-click="fabric.addRectangle()"></x-icon>
<x-label>Add Shape</x-label>
</x-box>
</x-button>
</x-buttons>
<x-buttons tracking="1">
<x-button skin="iconic">
<x-box vertical>
<x-icon name="edit"></x-icon>
<x-label>Page Editor</x-label>
</x-box>
</x-button>
<x-button skin="iconic" disabled>
<x-box vertical>
<x-icon name="actions" iconset="images/icons.svg"></x-icon>
<x-label>Actions Editor</x-label>
</x-box>
</x-button>
<x-button skin="iconic" disabled>
<x-box vertical>
<x-icon name="view-module"></x-icon>
<x-label>Page Flow</x-label>
</x-box>
</x-button>
</x-buttons>
<x-buttons tracking="1">
<x-button skin="iconic" disabled>
<x-box vertical>
<x-icon name="visibility"></x-icon>
<x-label>Project Preview</x-label>
</x-box>
</x-button>
<x-button skin="iconic" disabled>
<x-box vertical>
<x-icon name="code"></x-icon>
<x-label>Code View</x-label>
</x-box>
</x-button>
</x-buttons>
<x-buttons tracking="1">
<x-button skin="iconic">
<x-box vertical>
<x-icon name="settings"></x-icon>
<x-label>Inspector</x-label>
</x-box>
</x-button>
<x-button skin="iconic" disabled>
<x-box vertical>
<x-icon name="image"></x-icon>
<x-label>Asset Library</x-label>
</x-box>
</x-button>
<x-button skin="iconic" disabled>
<x-box vertical>
<x-icon name="get-app"></x-icon>
<x-label>Export</x-label>
</x-box>
</x-button>
</x-buttons>
</x-box>
</div>
</header>
<div class="window-content">
<div class="pane-group">
<div class="pane-sm sidebar">...</div>
<div class="pane content-empty image-builder-container">
<div id="wrapper" class='image-builder' parent-click="fabric.deactivateAll()">
<div class='fabric-container'>
<canvas fabric='fabric'></canvas>
</div>
</div>
</div>
<div class="pane-right sidebar">
<x-box>
<x-buttons tracking="1">
<x-button class="tablinks" disabled skin="tabnav" onclick="openTab(event, 'Project')">
<x-icon name="phonelink-setup"></x-icon>
</x-button>
<x-button class="tablinks" skin="tabnav" onclick="openTab(event, 'Page')">
<x-icon name="insert-drive-file"></x-icon>
</x-button>
<x-button class="tablinks" skin="tabnav" onclick="openTab(event, 'Layout')">
<x-icon name="perm-data-setting"></x-icon>
</x-button>
<x-button class="tablinks" skin="tabnav" onclick="openTab(event, 'Style')">
<x-icon name="style"></x-icon>
</x-button>
<x-button class="tablinks" skin="tabnav" onclick="openTab(event, 'Text')">
<x-icon name="text" iconset="images/icons.svg"></x-icon>
</x-button>
<x-button class="tablinks" disabled skin="tabnav" onclick="openTab(event, 'Actions')">
<x-icon name="actions" iconset="images/icons.svg"></x-icon>
</x-button>
</x-buttons>
</x-box>
<hr>
<div class="grid-middle-noGutter">
<div class="col-12">
<h1 class="title_left">Page Settings</h1>
<hr>
</div>
<div class="col-12">
<x-label class="discl_sm">Page Size</x-label>
</div>
<div class="spacer"></div>
<div class="col-3">
<x-label class="push-right pad"></x-label>
</div>
<div class="col-9">
<x-select skin="textured" style="width: 100%;">
<x-menu>
<x-menuitem value="no_bg" ng-click='fabric.setCanvasSize(size.width, size.height); fabric.setDirty(true)' ng-repeat='size in FabricConstants.presetSizes' selected="true">
<x-label>{{ size.name }}</x-label>
</x-menuitem>
</x-menu>
</x-select>
</div>
<div class="spacer"></div>
<div class="col-3 menu">
<x-label class="push-right pad">Size</x-label>
</div>
<div class="col-4">
<x-numberinput class="small form-control" skin="condensed" value="1024" suffix=" px" ng-model='canvas.width'>
<x-stepper></x-stepper>
</x-numberinput>
</div>
<div class="col-1">
</div>
<div class="col-4">
<x-numberinput class="small form-control" skin="condensed" value="768" suffix=" px" ng-model='canvas.height'>
<x-stepper></x-stepper>
</x-numberinput>
</div>
<div class="col-3"></div>
<div class="col-4 centered_sm">Width</div>
<div class="col-1"></div>
<div class="col-4 centered_sm">Height</div>
<div class="col-3"></div>
<div class="col-9">
<x-button skin="textured" style="width:197px;" ng-click='fabric.setCanvasSize(size.width, size.height); fabric.setDirty(true)'>
<x-box>
<x-label>Apply</x-label>
</x-box>
</x-button>
</div>
<div class="spacer"></div>
<hr>
<div class="col-12">
<x-label class="discl_sm">Background Color</x-label>
</div>
<div class="spacer"></div>
<div class="col-3">
<x-label class="push-right pad">Color</x-label>
</div>
<div class="col-5">
<x-colorselect id="picker1" class="small" value="#bada55" onchange="colorPicker()">
</x-colorselect>
</div>
<div class="col-4">
<x-input id="select1" class="small form-control" type="color" value="#bada55" ng-change='fabric.setDirty(true); fabric.stopContinuousRendering()' ng-model="fabric.canvasBackgroundColor">
<x-icon name="invert-colors"></x-icon>
</x-input>
</div>
<div class="spacer"></div>
<hr>
<div class="col-12">
<x-label class="discl_sm">Background Gradient</x-label>
</div>
<div class="spacer"></div>
<div class="col-3 menu">
<x-label class="push-right pad">Gradient</x-label>
</div>
<div class="col-5">
<x-colorselect class="small" value="#000000">
</x-colorselect>
</div>
<div class="col-4">
<x-colorselect class="small" value="#ffffff">
</x-colorselect>
</div>
<div class="col-3"></div>
<div class="col-4 centered_sm">Left</div>
<div class="col-1"></div>
<div class="col-4 centered_sm">Right</div>
<div class="col-3">
<x-label class="push-right pad"></x-label>
</div>
<div class="col-4">
<x-numberinput class="small" skin="condensed" value="90" suffix="°">
<x-stepper></x-stepper>
</x-numberinput>
</div>
<div class="col-1"></div>
<div class="col-4">
<x-buttons tracking="2">
<x-button skin="textured-condensed" class="halfsmall">
<x-icon name="swap-horiz"></x-icon>
</x-button>
<x-button skin="textured-condensed" class="halfsmall">
<x-icon name="swap-vert"></x-icon>
</x-button>
</x-buttons>
</div>
<div class="col-3"></div>
<div class="col-4 centered_sm">Direction</div>
<div class="col-1"></div>
<div class="col-4 centered_sm">Flip</div>
<div class="col-3"></div>
<div class="col-9">
<x-button skin="textured" style="width:197px;">
<x-box>
<x-label>Reset</x-label>
</x-box>
</x-button>
</div>
<div class="spacer"></div>
<hr>
<div class="col-12">
<x-label class="discl_sm">Background Image</x-label>
</div>
<div class="col-3 menu">
<x-label class="push-right pad">Image</x-label>
</div>
<div class="col-4">
<x-button class="imginput">
<x-icon name="insert-drive-file"></x-icon>
</x-button>
</div>
<div class="col-5">
<x-radios>
<x-box>
<x-radio id="first-radio" toggled></x-radio>
<x-label class="left_sm" for="first-radio" id="label-1">Size to fit</x-label>
</x-box>
<x-box>
<x-radio id="second-radio"></x-radio>
<x-label class="left_sm" for="second-radio" id="label-2">Repeat X/Y</x-label>
</x-box>
<x-box>
<x-radio id="third-radio"></x-radio>
<x-label class="left_sm" for="third-radio" id="label-3">Repeat X</x-label>
</x-box>
<x-box>
<x-radio id="fourth-radio"></x-radio>
<x-label class="left_sm" for="fourth-radio" id="label-4">Repeat Y</x-label>
</x-box>
</x-radios>
</div>
<div class="spacer"></div>
<div class="col-3"></div>
<div class="col-9">
<x-button skin="textured" style="width:197px;">
<x-box>
<x-label>Reset</x-label>
</x-box>
</x-button>
</div>
<div class="spacer"></div>
<hr>
<div class="col-12">
<x-label class="discl_sm">Transparency</x-label>
</div>
<div class="spacer"></div>
<div class="col-12" style="padding-left: 5px; padding-right: 5px;">
<x-slider value="100"></x-slider>
</div>
<div class="col-4" style="padding-left: 5px;">
<x-numberinput class="small" skin="condensed" value="100" suffix=" %">
<x-stepper min="0" max="100" value="100" skin="arrow"></x-stepper>
</x-numberinput>
</div>
<div class="col-1">
</div>
<div class="col-7">
<x-buttons tracking="1">
<x-button skin="recessed" toggled>
<x-label>Visible</x-label>
</x-button>
<x-button skin="recessed">
<x-label>Hidden</x-label>
</x-button>
</x-buttons>
</div>
<!-- <div class="col-4 centered_sm">y-origin</div>-->
<div class="col-3">...</div>
<div class="col-4">...</div>
<div class="col-1">...</div>
<div class="col-4">...</div>
</div>
<!-- <div id="Project" class="tabcontent" data-include="templates/project_menu.html"></div>
<div id="Page" class="tabcontent" data-include="templates/page_menu.html"></div>
<div id="Layout" class="tabcontent" data-include="templates/layout_menu.html"></div>
<div id="Style" class="tabcontent" data-include="templates/style_menu.html"></div>
<div id="Text" class="tabcontent" data-include="templates/text1_menu.html"></div>
<div id="Actions" class="tabcontent active" data-include="templates/actions_menu.html"></div>-->
</div>
</div>
</div>
<footer class="toolbar toolbar-footer">
<h1 class="title">Footer</h1>
</footer>
</div>
<!-- Ruler script here – https://github.com/MrFrankel/ruler -->
<script src="js/ruler/ruler.js"></script>
<script src="js/ruler/utils.js"></script>
<script src="js/ruler/rulerGuideLine.js"></script>
<script src="js/ruler/rulerConstructor.js"></script>
<script src="js/ruler_demo.js"></script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment