mirror of https://github.com/artf/grapesjs.git
9 changed files with 4609 additions and 9 deletions
@ -0,0 +1,771 @@ |
|||||
|
<!doctype html> |
||||
|
<html lang="en"> |
||||
|
<head> |
||||
|
<meta charset="utf-8"> |
||||
|
<title>GrapesJS Playground PDF Creator</title> |
||||
|
<link rel="stylesheet" type="text/css" href="stylesheets/stylesheet.css"> |
||||
|
<link rel="stylesheet" type="text/css" href="stylesheets/grapesjs-plg.css"> |
||||
|
<link rel="stylesheet" href="stylesheets/grapes.min.css"> |
||||
|
<script src="js/jquery.js"></script> |
||||
|
<script src="js/grapes.min.js"></script> |
||||
|
<script src="js/jspdf.min.js"></script> |
||||
|
<script src="js/html2canvas.js"></script> |
||||
|
<style type="text/css"> |
||||
|
body, html{ height: 100%; margin: 0; } |
||||
|
.width-gjs-plg { |
||||
|
margin: 0 auto; |
||||
|
max-width: none; |
||||
|
width: 90%; |
||||
|
} |
||||
|
|
||||
|
.gjs-plg-editor, .gjs-plg-output { |
||||
|
min-height: 300px; |
||||
|
width: 100%; |
||||
|
} |
||||
|
</style> |
||||
|
</head> |
||||
|
<body> |
||||
|
<section class="gjs-playground"> |
||||
|
<div class="width-gjs-plg"> |
||||
|
|
||||
|
<div class="logo-bann"> |
||||
|
<div class="logo-block"> |
||||
|
<div class="logo-c"> |
||||
|
<img class="logo" src="img/grapesjs-logo-plg.svg"> |
||||
|
</div> |
||||
|
<div class="logo-label"> |
||||
|
<div class="logo-name">rapesJS</div> |
||||
|
<div class="logo-plg">Playground</div> |
||||
|
</div> |
||||
|
<div class="clearfix"></div> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
<div class="gjs-plg"> |
||||
|
<div class="gjs-plg-editor"> |
||||
|
EDITOR |
||||
|
<div id="gjs" style="height:0px; overflow:hidden"></div> |
||||
|
</div> |
||||
|
<div class="gjs-plg-output"> |
||||
|
PDF |
||||
|
<iframe class="doc" width="396" height="352" frameborder="0" src="##"></iframe> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
</div> |
||||
|
</section> |
||||
|
<script type="text/javascript"> |
||||
|
var a4 = [ 595.28, 841.89]; |
||||
|
var docFrame = $('iframe.doc'); |
||||
|
var saveFilePls = function(fs){ |
||||
|
console.log('INSIDE RequestFS'); |
||||
|
|
||||
|
/* |
||||
|
fs.root.getFile("info.txt", {create: true}, function(file) { |
||||
|
file.createWriter(function(writer) { |
||||
|
var blob = new Blob(["Lorem Ipsum"], {type: "text/plain"}); |
||||
|
writer.write(blob); |
||||
|
}); |
||||
|
}); |
||||
|
*/ |
||||
|
|
||||
|
// Remove |
||||
|
// localstorage.root.getFile("info.txt", {create: false}, function(DatFile) { DatFile.remove(function() {}); }) |
||||
|
} |
||||
|
var generatePdf = function (el) { |
||||
|
getEditorCanvas(el).then(function(canvas){ |
||||
|
// img is a good png image 125kb |
||||
|
var img = canvas.toDataURL("image/png"), |
||||
|
doc = new jsPDF({ |
||||
|
unit:'px', |
||||
|
format:'a4' |
||||
|
}); |
||||
|
doc.addImage(img, 'image/png', 20, 20); |
||||
|
console.time('test'); |
||||
|
var string = doc.output('datauristring'); |
||||
|
console.timeEnd('test'); |
||||
|
|
||||
|
docFrame.attr('src', img); |
||||
|
|
||||
|
/* |
||||
|
window.webkitRequestFileSystem(window.TEMPORARY, 1024*1024, saveFilePls, function(err){ |
||||
|
console.log(err); |
||||
|
}); |
||||
|
*/ |
||||
|
|
||||
|
/* |
||||
|
window.webkitStorageInfo.requestQuota(window.PERSISTENT, 1024*1024, function(grantedBytes) { |
||||
|
window.webkitRequestFileSystem(window.PERSISTENT, grantedBytes, saveFilePls, function(err){ |
||||
|
console.log('Er2',err); |
||||
|
}); |
||||
|
}, function(err){ |
||||
|
console.log('Er1', err); |
||||
|
} ); |
||||
|
*/ |
||||
|
|
||||
|
//doc.save('test-pdf.pdf'); |
||||
|
//el.width(cache_width); |
||||
|
}); |
||||
|
} |
||||
|
|
||||
|
var getEditorCanvas = function(el) { |
||||
|
//form.width((a4[0]*1.33333) -80).css('max-width','none'); |
||||
|
return html2canvas(el, { |
||||
|
imageTimeout:2000, |
||||
|
removeContainer:true |
||||
|
}); |
||||
|
}; |
||||
|
|
||||
|
|
||||
|
var gr = grapesjs.init( |
||||
|
{ |
||||
|
noticeOnUnload: 0, |
||||
|
height: '100%', |
||||
|
container : '#gjs', |
||||
|
fromElement: true, |
||||
|
plugins: ['gjs-plugin-export'], |
||||
|
commands: { |
||||
|
defaults : [{ |
||||
|
id: 'open-github', |
||||
|
run: function(em, sender){ |
||||
|
generatePdf(em.Canvas.getBody()); |
||||
|
//sender.set('active',false); |
||||
|
//window.open('https://github.com/artf/grapesjs','_blank'); |
||||
|
}, |
||||
|
stop: function(){} |
||||
|
},{ |
||||
|
id: 'undo', |
||||
|
run: function(em, sender){ |
||||
|
sender.set('active',false); |
||||
|
em.UndoManager.undo(true); |
||||
|
}, |
||||
|
stop: function(){} |
||||
|
},{ |
||||
|
id: 'redo', |
||||
|
run: function(em, sender){ |
||||
|
sender.set('active',false); |
||||
|
em.UndoManager.redo(true); |
||||
|
}, |
||||
|
stop: function(){} |
||||
|
},{ |
||||
|
id: 'clean-all', |
||||
|
run: function(em, sender){ |
||||
|
sender.set('active',false); |
||||
|
if(confirm('Are you sure to clean the canvas?')){ |
||||
|
var comps = em.DomComponents.clear(); |
||||
|
} |
||||
|
}, |
||||
|
stop: function(){} |
||||
|
}], |
||||
|
}, |
||||
|
assetManager: { |
||||
|
storageType : '', |
||||
|
storeOnChange : true, |
||||
|
storeAfterUpload : true, |
||||
|
assets : [ |
||||
|
{ type: 'image', src : './img/team1.jpg',height:100, width:100}, |
||||
|
{ type: 'image', src : './img/team2.jpg',height:100, width:100}, |
||||
|
{ type: 'image', src : './img/team3.jpg',height:100, width:100}, |
||||
|
{ type: 'image', src : 'http://placehold.it/350x250/78c5d6/fff/image1.jpg',height:350, width:250}, |
||||
|
{ type: 'image', src : 'http://placehold.it/350x250/459ba8/fff/image2.jpg',height:350, width:250}, |
||||
|
{ type: 'image', src : 'http://placehold.it/350x250/79c267/fff/image3.jpg',height:350, width:250}, |
||||
|
{ type: 'image', src : 'http://placehold.it/350x250/c5d647/fff/image4.jpg',height:350, width:250}, |
||||
|
{ type: 'image', src : 'http://placehold.it/350x250/f28c33/fff/image5.jpg',height:350, width:250}, |
||||
|
{ type: 'image', src : 'http://placehold.it/350x250/e868a2/fff/image6.jpg',height:350, width:250}, |
||||
|
{ type: 'image', src : 'http://placehold.it/350x250/cc4360/fff/image7.jpg',height:350, width:250}, |
||||
|
{ type: 'image', src : './img/work-desk.jpg',height:1080, width:1728}, |
||||
|
{ type: 'image', src : './img/phone-app.png', date: '2015-02-01',height:650, width:320}, |
||||
|
{ type: 'image', src : './img/bg-gr-v.png', date: '2015-02-01',height:1, width:1728}, |
||||
|
] |
||||
|
}, |
||||
|
|
||||
|
styleManager : { |
||||
|
sectors: [{ |
||||
|
name: 'General', |
||||
|
buildProps: ['float', 'display', 'position', 'top', 'right', 'left', 'bottom'], |
||||
|
properties:[{ |
||||
|
name : 'Alignment', |
||||
|
property : 'float', |
||||
|
type : 'radio', |
||||
|
defaults : 'none', |
||||
|
list : [{ |
||||
|
value : 'none', |
||||
|
title : 'None', |
||||
|
className : 'fa fa-times', |
||||
|
},{ |
||||
|
value : 'left', |
||||
|
className : 'fa fa-align-left', |
||||
|
title : 'Float element to the left', |
||||
|
},{ |
||||
|
value : 'right', |
||||
|
className : 'fa fa-align-right', |
||||
|
title : 'Float element to the right', |
||||
|
}], |
||||
|
},{ |
||||
|
property : 'display', |
||||
|
type : 'radio', |
||||
|
list : [{ |
||||
|
value : 'block', |
||||
|
title : 'Block', |
||||
|
},{ |
||||
|
value : 'inline', |
||||
|
title : 'Inline', |
||||
|
},{ |
||||
|
value : 'inline-block', |
||||
|
title : 'Inline-block', |
||||
|
},{ |
||||
|
value : 'none', |
||||
|
title : 'None', |
||||
|
className : 'fa fa-eye-slash', |
||||
|
}], |
||||
|
}], |
||||
|
},{ |
||||
|
name: 'Dimension', |
||||
|
open: false, |
||||
|
buildProps: ['width', 'height', 'max-width', 'min-height', 'margin', 'padding'], |
||||
|
properties:[{ |
||||
|
name : 'Margin', |
||||
|
property : 'margin', |
||||
|
type : 'composite', |
||||
|
properties:[{ |
||||
|
name : 'Top', |
||||
|
property : 'margin-top', |
||||
|
type : 'integer', |
||||
|
units : ['px','%'], |
||||
|
defaults : 0, |
||||
|
},{ |
||||
|
name : 'Right', |
||||
|
property : 'margin-right', |
||||
|
type : 'integer', |
||||
|
units : ['px','%'], |
||||
|
defaults : 0, |
||||
|
},{ |
||||
|
name : 'Bottom', |
||||
|
property : 'margin-bottom', |
||||
|
type : 'integer', |
||||
|
units : ['px','%'], |
||||
|
defaults : 0, |
||||
|
},{ |
||||
|
name : 'Left', |
||||
|
property : 'margin-Left', |
||||
|
type : 'integer', |
||||
|
units : ['px','%'], |
||||
|
defaults : 0, |
||||
|
},], |
||||
|
},/*{ |
||||
|
name : 'Center block', |
||||
|
property : 'margin', |
||||
|
type : 'select', |
||||
|
defaults : '0', |
||||
|
list : [ |
||||
|
{ value: '0', name: 'Normal',}, |
||||
|
{ value: '0 auto', name: 'Center',} |
||||
|
], |
||||
|
},*/{ |
||||
|
name : 'Padding', |
||||
|
property : 'padding', |
||||
|
type : 'composite', |
||||
|
properties:[{ |
||||
|
name : 'Top', |
||||
|
property : 'padding-top', |
||||
|
type : 'integer', |
||||
|
units : ['px','%'], |
||||
|
defaults : 0, |
||||
|
min : 0, |
||||
|
},{ |
||||
|
name : 'Right', |
||||
|
property : 'padding-right', |
||||
|
type : 'integer', |
||||
|
units : ['px','%'], |
||||
|
defaults : 0, |
||||
|
min : 0, |
||||
|
},{ |
||||
|
name : 'Bottom', |
||||
|
property : 'padding-bottom', |
||||
|
type : 'integer', |
||||
|
units : ['px','%'], |
||||
|
defaults : 0, |
||||
|
min : 0, |
||||
|
},{ |
||||
|
name : 'Left', |
||||
|
property : 'padding-left', |
||||
|
type : 'integer', |
||||
|
units : ['px','%'], |
||||
|
defaults : 0, |
||||
|
min : 0, |
||||
|
},], |
||||
|
},], |
||||
|
},{ |
||||
|
name: 'Typography', |
||||
|
open: false, |
||||
|
buildProps: ['font-family', 'font-size', 'font-weight', 'letter-spacing', 'color', 'line-height', 'text-align', 'text-shadow'], |
||||
|
properties:[{ |
||||
|
name: 'Font', |
||||
|
property: 'font-family', |
||||
|
},{ |
||||
|
name: 'Weight', |
||||
|
property: 'font-weight', |
||||
|
},{ |
||||
|
name: 'Font color', |
||||
|
property: 'color', |
||||
|
},{ |
||||
|
name : 'Text align', |
||||
|
property : 'text-align', |
||||
|
type : 'radio', |
||||
|
defaults : 'left', |
||||
|
list : [{ value : 'left', name : 'Left', className: 'fa fa-align-left'}, |
||||
|
{ value : 'center', name : 'Center', className: 'fa fa-align-center' }, |
||||
|
{ value : 'right', name : 'Right', className: 'fa fa-align-right'}, |
||||
|
{ value : 'justify', name : 'Justify', className: 'fa fa-align-justify'},], |
||||
|
},{ |
||||
|
name : 'Text shadow', |
||||
|
property : 'text-shadow', |
||||
|
type : 'stack', |
||||
|
preview : true, |
||||
|
properties : [{ |
||||
|
name: 'X position', |
||||
|
property: 'h-shadow', |
||||
|
type: 'integer', |
||||
|
units: ['px','%'], |
||||
|
defaults : 0, |
||||
|
},{ |
||||
|
name: 'Y position', |
||||
|
property: 'v-shadow', |
||||
|
type: 'integer', |
||||
|
units: ['px','%'], |
||||
|
defaults : 0, |
||||
|
},{ |
||||
|
name: 'Blur', |
||||
|
property: 'blur-radius', |
||||
|
type: 'integer', |
||||
|
units: ['px'], |
||||
|
defaults : 0, |
||||
|
min: 0, |
||||
|
},{ |
||||
|
name: 'Color', |
||||
|
property: 'shadow-color', |
||||
|
type: 'color', |
||||
|
defaults: 'black', |
||||
|
},], |
||||
|
}], |
||||
|
},{ |
||||
|
name: 'Decorations', |
||||
|
open: false, |
||||
|
buildProps: [ 'background-color', 'border-radius', 'border', 'box-shadow', 'background'], |
||||
|
properties: [{ |
||||
|
name : 'Background', |
||||
|
property : 'background-color', |
||||
|
},{ |
||||
|
name : 'Border radius', |
||||
|
property : 'border-radius', |
||||
|
type : 'composite', |
||||
|
properties : [{ |
||||
|
name : 'Top', |
||||
|
property : 'border-top-left-radius', |
||||
|
type : 'integer', |
||||
|
units : ['px','%'], |
||||
|
defaults : 0, |
||||
|
min : 0, |
||||
|
},{ |
||||
|
name : 'Right', |
||||
|
property : 'border-top-right-radius', |
||||
|
type : 'integer', |
||||
|
units : ['px','%'], |
||||
|
min : 0, |
||||
|
defaults : 0, |
||||
|
},{ |
||||
|
name : 'Bottom', |
||||
|
property : 'border-bottom-left-radius', |
||||
|
type : 'integer', |
||||
|
units : ['px','%'], |
||||
|
min : 0, |
||||
|
defaults : 0, |
||||
|
},{ |
||||
|
name : 'Left', |
||||
|
property : 'border-bottom-right-radius', |
||||
|
type : 'integer', |
||||
|
units : ['px'], |
||||
|
min : 0, |
||||
|
defaults : 0, |
||||
|
},], |
||||
|
},{ |
||||
|
name : 'Box shadow', |
||||
|
property : 'box-shadow', |
||||
|
type : 'stack', |
||||
|
preview : true, |
||||
|
properties : [{ |
||||
|
name: 'X position', |
||||
|
property: 'shadow-x', |
||||
|
type: 'integer', |
||||
|
units: ['px','%'], |
||||
|
defaults : 0, |
||||
|
},{ |
||||
|
name: 'Y position', |
||||
|
property: 'shadow-y', |
||||
|
type: 'integer', |
||||
|
units: ['px','%'], |
||||
|
defaults : 0, |
||||
|
},{ |
||||
|
name: 'Blur', |
||||
|
property: 'shadow-blur', |
||||
|
type: 'integer', |
||||
|
units: ['px'], |
||||
|
defaults : 5, |
||||
|
min: 0, |
||||
|
},{ |
||||
|
name: 'Spread', |
||||
|
property: 'shadow-spread', |
||||
|
type: 'integer', |
||||
|
units: ['px'], |
||||
|
defaults : 0, |
||||
|
},{ |
||||
|
name: 'Color', |
||||
|
property: 'shadow-color', |
||||
|
type: 'color', |
||||
|
defaults: 'black', |
||||
|
},{ |
||||
|
name: 'Shadow type', |
||||
|
property: 'shadow-type', |
||||
|
type: 'select', |
||||
|
defaults: '', |
||||
|
list: [ { value : '', name : 'Outside', }, |
||||
|
{ value : 'inset', name : 'Inside', }], |
||||
|
}], |
||||
|
},{ |
||||
|
name : 'Background', |
||||
|
property : 'background', |
||||
|
type : 'stack', |
||||
|
preview : true, |
||||
|
detached: true, |
||||
|
properties : [{ |
||||
|
name: 'Image', |
||||
|
property: 'background-image', |
||||
|
type: 'file', |
||||
|
defaults: 'none', |
||||
|
}, |
||||
|
{ |
||||
|
name: 'Repeat', |
||||
|
property: 'background-repeat', |
||||
|
type: 'select', |
||||
|
defaults: 'repeat', |
||||
|
list: [{ value : 'repeat', name : 'Repeat', }, |
||||
|
{ value : 'repeat-x', name : 'Repeat X', }, |
||||
|
{ value : 'repeat-y', name : 'Repeat Y', }, |
||||
|
{ value : 'no-repeat', name : 'No repeat', }], |
||||
|
}, |
||||
|
{ |
||||
|
name: 'Position', |
||||
|
property: 'background-position', |
||||
|
type: 'select', |
||||
|
defaults: 'left top', |
||||
|
list: [ { value : 'left top',}, |
||||
|
{ value : 'left center',}, |
||||
|
{ value : 'left bottom',}, |
||||
|
{ value : 'right top',}, |
||||
|
{ value : 'right center'}, |
||||
|
{ value : 'right bottom'}, |
||||
|
{ value : 'center top'}, |
||||
|
{ value : 'center center'}, |
||||
|
{ value : 'center bottom'} |
||||
|
] |
||||
|
|
||||
|
},{ |
||||
|
name: 'Attachment', |
||||
|
property: 'background-attachment', |
||||
|
type: 'select', |
||||
|
defaults: 'scroll', |
||||
|
list: [{ value : 'scroll'}, |
||||
|
{ value : 'fixed'}, |
||||
|
{ value : 'local'}], |
||||
|
},{ |
||||
|
name: 'Size', |
||||
|
property: 'background-size', |
||||
|
type: 'select', |
||||
|
defaults: 'auto', |
||||
|
list: [{ value : 'auto'}, |
||||
|
{ value : 'cover'}, |
||||
|
{ value : 'contain'}], |
||||
|
}], |
||||
|
},], |
||||
|
},{ |
||||
|
name: 'Extra', |
||||
|
open: false, |
||||
|
buildProps: ['transition', 'perspective', 'transform'], |
||||
|
properties: [{ |
||||
|
name: 'Transition', |
||||
|
property: 'transition', |
||||
|
type: 'stack', |
||||
|
preview: false, |
||||
|
properties:[{ |
||||
|
name: 'Property', |
||||
|
property: 'transition-property', |
||||
|
type: 'select', |
||||
|
defaults: '', |
||||
|
list: [{ value : 'all', name : 'All', }, |
||||
|
{ value : 'width', name : 'Width', }, |
||||
|
{ value : 'height', name : 'Height', }, |
||||
|
{ value : 'background-color', name : 'Background', }, |
||||
|
{ value : 'transform', name : 'Transform', }, |
||||
|
{ value : 'box-shadow', name : 'Box shadow', }, |
||||
|
{ value : 'opacity', name : 'Opacity', }], |
||||
|
},{ |
||||
|
name: 'Duration', |
||||
|
property: 'transition-duration', |
||||
|
type: 'integer', |
||||
|
units: ['s'], |
||||
|
defaults : '2', |
||||
|
min: 0, |
||||
|
},{ |
||||
|
name: 'Easing', |
||||
|
property: 'transition-timing-function', |
||||
|
type: 'select', |
||||
|
defaults: 'ease', |
||||
|
list: [{ value : 'linear', name : 'Linear', }, |
||||
|
{ value : 'ease', name : 'Ease', }, |
||||
|
{ value : 'ease-in', name : 'Ease-in', }, |
||||
|
{ value : 'ease-out', name : 'Ease-out', }, |
||||
|
{ value : 'ease-in-out', name : 'Ease-in-out', }], |
||||
|
}], |
||||
|
},{ |
||||
|
name: 'Transform', |
||||
|
property: 'transform', |
||||
|
type: 'composite', |
||||
|
properties:[{ |
||||
|
name: 'Rotate X', |
||||
|
property: 'transform-rotate-x', |
||||
|
type: 'integer', |
||||
|
units: ['deg'], |
||||
|
defaults : '0', |
||||
|
functionName: 'rotateX', |
||||
|
},{ |
||||
|
name: 'Rotate Y', |
||||
|
property: 'transform-rotate-y', |
||||
|
type: 'integer', |
||||
|
units: ['deg'], |
||||
|
defaults : '0', |
||||
|
functionName: 'rotateY', |
||||
|
},{ |
||||
|
name: 'Rotate Z', |
||||
|
property: 'transform-rotate-z', |
||||
|
type: 'integer', |
||||
|
units: ['deg'], |
||||
|
defaults : '0', |
||||
|
functionName: 'rotateZ', |
||||
|
},{ |
||||
|
name: 'Scale X', |
||||
|
property: 'transform-scale-x', |
||||
|
type: 'integer', |
||||
|
defaults : '1', |
||||
|
functionName: 'scaleX', |
||||
|
},{ |
||||
|
name: 'Scale Y', |
||||
|
property: 'transform-scale-y', |
||||
|
type: 'integer', |
||||
|
defaults : '1', |
||||
|
functionName: 'scaleY', |
||||
|
},{ |
||||
|
name: 'Scale Z', |
||||
|
property: 'transform-scale-z', |
||||
|
type: 'integer', |
||||
|
defaults : '1', |
||||
|
functionName: 'scaleZ', |
||||
|
}], |
||||
|
}] |
||||
|
},{ |
||||
|
name: 'Flex', |
||||
|
open: false, |
||||
|
properties: [{ |
||||
|
name : 'Flex Container', |
||||
|
property : 'display', |
||||
|
type : 'select', |
||||
|
defaults : 'block', |
||||
|
list : [{ |
||||
|
value : 'block', |
||||
|
name : 'Disable', |
||||
|
},{ |
||||
|
value : 'flex', |
||||
|
name : 'Enable', |
||||
|
}], |
||||
|
},{ |
||||
|
name: 'Flex Parent', |
||||
|
property: 'label-parent-flex', |
||||
|
type: 'integer', |
||||
|
},{ |
||||
|
name : 'Direction', |
||||
|
property : 'flex-direction', |
||||
|
type : 'radio', |
||||
|
defaults : 'row', |
||||
|
list : [{ |
||||
|
value : 'row', |
||||
|
name : 'Row', |
||||
|
className : 'icons-flex icon-dir-row', |
||||
|
title : 'Row', |
||||
|
},{ |
||||
|
value : 'row-reverse', |
||||
|
name : 'Row reverse', |
||||
|
className : 'icons-flex icon-dir-row-rev', |
||||
|
title : 'Row reverse', |
||||
|
},{ |
||||
|
value : 'column', |
||||
|
name : 'Column', |
||||
|
title : 'Column', |
||||
|
className : 'icons-flex icon-dir-col', |
||||
|
},{ |
||||
|
value : 'column-reverse', |
||||
|
name : 'Column reverse', |
||||
|
title : 'Column reverse', |
||||
|
className : 'icons-flex icon-dir-col-rev', |
||||
|
}], |
||||
|
},{ |
||||
|
name : 'Justify', |
||||
|
property : 'justify-content', |
||||
|
type : 'radio', |
||||
|
defaults : 'flex-start', |
||||
|
list : [{ |
||||
|
value : 'flex-start', |
||||
|
className : 'icons-flex icon-just-start', |
||||
|
title : 'Start', |
||||
|
},{ |
||||
|
value : 'flex-end', |
||||
|
title : 'End', |
||||
|
className : 'icons-flex icon-just-end', |
||||
|
},{ |
||||
|
value : 'space-between', |
||||
|
title : 'Space between', |
||||
|
className : 'icons-flex icon-just-sp-bet', |
||||
|
},{ |
||||
|
value : 'space-around', |
||||
|
title : 'Space around', |
||||
|
className : 'icons-flex icon-just-sp-ar', |
||||
|
},{ |
||||
|
value : 'center', |
||||
|
title : 'Center', |
||||
|
className : 'icons-flex icon-just-sp-cent', |
||||
|
}], |
||||
|
},{ |
||||
|
name : 'Align', |
||||
|
property : 'align-items', |
||||
|
type : 'radio', |
||||
|
defaults : 'center', |
||||
|
list : [{ |
||||
|
value : 'flex-start', |
||||
|
title : 'Start', |
||||
|
className : 'icons-flex icon-al-start', |
||||
|
},{ |
||||
|
value : 'flex-end', |
||||
|
title : 'End', |
||||
|
className : 'icons-flex icon-al-end', |
||||
|
},{ |
||||
|
value : 'stretch', |
||||
|
title : 'Stretch', |
||||
|
className : 'icons-flex icon-al-str', |
||||
|
},{ |
||||
|
value : 'center', |
||||
|
title : 'Center', |
||||
|
className : 'icons-flex icon-al-center', |
||||
|
}], |
||||
|
},{ |
||||
|
name: 'Flex Children', |
||||
|
property: 'label-parent-flex', |
||||
|
type: 'integer', |
||||
|
},{ |
||||
|
name: 'Order', |
||||
|
property: 'order', |
||||
|
type: 'integer', |
||||
|
defaults : 0, |
||||
|
min: 0 |
||||
|
},{ |
||||
|
name : 'Flex', |
||||
|
property : 'flex', |
||||
|
type : 'composite', |
||||
|
properties : [{ |
||||
|
name: 'Grow', |
||||
|
property: 'flex-grow', |
||||
|
type: 'integer', |
||||
|
defaults : 0, |
||||
|
min: 0 |
||||
|
},{ |
||||
|
name: 'Shrink', |
||||
|
property: 'flex-shrink', |
||||
|
type: 'integer', |
||||
|
defaults : 0, |
||||
|
min: 0 |
||||
|
},{ |
||||
|
name: 'Basis', |
||||
|
property: 'flex-basis', |
||||
|
type: 'integer', |
||||
|
units: ['px','%',''], |
||||
|
unit: '', |
||||
|
defaults : 'auto', |
||||
|
}], |
||||
|
},{ |
||||
|
name : 'Align', |
||||
|
property : 'align-self', |
||||
|
type : 'radio', |
||||
|
defaults : 'auto', |
||||
|
list : [{ |
||||
|
value : 'auto', |
||||
|
name : 'Auto', |
||||
|
},{ |
||||
|
value : 'flex-start', |
||||
|
title : 'Start', |
||||
|
className : 'icons-flex icon-al-start', |
||||
|
},{ |
||||
|
value : 'flex-end', |
||||
|
title : 'End', |
||||
|
className : 'icons-flex icon-al-end', |
||||
|
},{ |
||||
|
value : 'stretch', |
||||
|
title : 'Stretch', |
||||
|
className : 'icons-flex icon-al-str', |
||||
|
},{ |
||||
|
value : 'center', |
||||
|
title : 'Center', |
||||
|
className : 'icons-flex icon-al-center', |
||||
|
}], |
||||
|
}] |
||||
|
} |
||||
|
], |
||||
|
}, |
||||
|
|
||||
|
} |
||||
|
|
||||
|
); |
||||
|
|
||||
|
// Add extra buttons |
||||
|
gr.Panels.addButton('options', [{ |
||||
|
id: 'undo', |
||||
|
className: 'fa fa-undo icon-undo', |
||||
|
command: 'undo', |
||||
|
attributes: { title: 'Undo (CTRL/CMD + Z)'} |
||||
|
},{ |
||||
|
id: 'redo', |
||||
|
className: 'fa fa-repeat icon-redo', |
||||
|
command: 'redo', |
||||
|
attributes: { title: 'Redo (CTRL/CMD + SHIFT + Z)' } |
||||
|
},{ |
||||
|
id: 'clean-all', |
||||
|
className: 'fa fa-trash icon-blank', |
||||
|
command: 'clean-all', |
||||
|
attributes: { title: 'Empty canvas' } |
||||
|
},{ |
||||
|
id: 'view-github', |
||||
|
className: 'fa fa-github', |
||||
|
command: 'open-github', |
||||
|
attributes: { title: 'View on Github' } |
||||
|
}]); |
||||
|
|
||||
|
|
||||
|
</script> |
||||
|
|
||||
|
<script> |
||||
|
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){ |
||||
|
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o), |
||||
|
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m) |
||||
|
})(window,document,'script','//www.google-analytics.com/analytics.js','ga'); |
||||
|
|
||||
|
ga('create', 'UA-74284223-1', 'auto'); |
||||
|
ga('send', 'pageview'); |
||||
|
</script> |
||||
|
</body> |
||||
|
</html> |
||||
|
After Width: | Height: | Size: 525 B |
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because it is too large
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@ -0,0 +1,49 @@ |
|||||
|
.logo{ |
||||
|
width: 90px; |
||||
|
height: 90px; |
||||
|
} |
||||
|
|
||||
|
.logo-block { |
||||
|
margin: 0 auto; |
||||
|
width: 255px; |
||||
|
} |
||||
|
|
||||
|
.logo-c, .logo-label { |
||||
|
float: left; |
||||
|
} |
||||
|
|
||||
|
.logo-label{ |
||||
|
cursor: default; |
||||
|
} |
||||
|
|
||||
|
.logo-c { |
||||
|
margin-right: 2px; |
||||
|
} |
||||
|
|
||||
|
.logo-name { |
||||
|
font-size: 2.5em; |
||||
|
height: 50px; |
||||
|
letter-spacing: 0.05em; |
||||
|
} |
||||
|
|
||||
|
.logo-plg { |
||||
|
letter-spacing: 0.5em; |
||||
|
text-align: left; |
||||
|
} |
||||
|
|
||||
|
.logo-bann { |
||||
|
padding: 30px; |
||||
|
} |
||||
|
|
||||
|
.gjs-playground{ |
||||
|
height: 100%; |
||||
|
overflow-y: auto; |
||||
|
} |
||||
|
|
||||
|
.gjs-plg { |
||||
|
display: flex; |
||||
|
} |
||||
|
.gjs-plg-editor, .gjs-plg-output { |
||||
|
width: 50%; |
||||
|
min-height: 300px; |
||||
|
} |
||||
Loading…
Reference in new issue