tsai
/
grapesjs
mirror of https://github.com/artf/grapesjs.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
Browse Source

Update blocks and demo

pull/36/head
Artur Arseniev 10 years ago
parent
9e526aa0de
commit
0ef45a50cc
7 changed files with 202 additions and 160 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 2
      README.md
  2. 143
      index.html
  3. 2
      src/block_manager/main.js
  4. 124
      src/demo.js
  5. 10
      src/editor/config/config.js
  6. 47
      src/panels/config/config.js
  7. 34
      styles/fonts/main-fonts.svg

2
README.md
View File

@ -137,7 +137,7 @@ $ npm test
## TODOs before beta release
* **Breakpoint Manager** - Resize canvas according to breakpoints established by user (in simple terms, for responsive templates)
* **Stable-like, documented APIs** - Probably would be better redefined during beta
## Acknowledgements

143
index.html
View File

@ -11,8 +11,11 @@
body, html{ height: 100%; margin: 0;}
</style>
<body>
<div id="gjs" style="height:0px; overflow:hidden">
<style>
</style>
<header class="header-banner">
<div class="container-width">
<div class="logo-container">
@ -29,6 +32,7 @@
<div class="lead-btn">Hover me</div>
</div>
</header>
<section class="flex-sect">
<div class="container-width">
<div class="flex-title">Flex is the new black</div>
@ -146,6 +150,56 @@
</div>
</section>
<section class="bdg-sect">
<div class="container-width">
<h1 class="bdg-title">The team</h1>
<div class="badges">
<div class="badge">
<div class="badge-header"></div>
<img class="badge-avatar" src="img/team1.jpg">
<div class="badge-body">
<div class="badge-name">Adam Smith</div>
<div class="badge-role">CEO</div>
<div class="badge-desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore ipsum dolor sit</div>
</div>
<div class="badge-foot">
<span class="badge-link">f</span>
<span class="badge-link">t</span>
<span class="badge-link">ln</span>
</div>
</div>
<div class="badge">
<div class="badge-header"></div>
<img class="badge-avatar" src="img/team2.jpg">
<div class="badge-body">
<div class="badge-name">John Black</div>
<div class="badge-role">Software Engineer</div>
<div class="badge-desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore ipsum dolor sit</div>
</div>
<div class="badge-foot">
<span class="badge-link">f</span>
<span class="badge-link">t</span>
<span class="badge-link">ln</span>
</div>
</div>
<div class="badge">
<div class="badge-header"></div>
<img class="badge-avatar" src="img/team3.jpg">
<div class="badge-body">
<div class="badge-name">Jessica White</div>
<div class="badge-role">Web Designer</div>
<div class="badge-desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore ipsum dolor sit</div>
</div>
<div class="badge-foot">
<span class="badge-link">f</span>
<span class="badge-link">t</span>
<span class="badge-link">ln</span>
</div>
</div>
</div>
</div>
</section>
<footer class="footer-under">
<div class="container-width">
<div class="foot-lists">
@ -206,7 +260,7 @@
}
.container-width{
width: 100%;
max-width: 980px;
max-width: 1150px;
margin: 0 auto;
}
.logo-container{
@ -609,6 +663,93 @@
padding: 10px;
min-height: 75px;
}
.heading{padding: 10px;}
.paragraph{padding: 10px;}
.bdg-sect{
padding-top:100px;
padding-bottom:100px;
font-family: Helvetica, serif;
background-color: #fafafa;
}
.bdg-title{
text-align: center;
font-size: 2em;
margin-bottom: 55px;
color: #555555;
}
.badges{
padding:20px;
display: flex;
justify-content: space-around;
align-items: flex-start;
flex-wrap: wrap;
}
.badge{
width: 290px;
font-family: Helvetica, serif;
background-color: white;
margin-bottom:30px;
box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.2);
border-radius: 3px;
font-weight: 100;
overflow: hidden;
text-align: center;
}
.badge-header{
height: 115px;
background-image:url("./img/bg-gr-v.png"), url("./img/work-desk.jpg");
background-position:left top, center center;
background-attachment:scroll, fixed;
overflow: hidden;
}
.blurer{
filter: blur(5px);
}
.badge-name{
font-size: 1.4em;
margin-bottom: 5px;
}
.badge-role{
color: #777;
font-size: 1em;
margin-bottom: 25px;
}
.badge-desc{
font-size: 0.85rem;
line-height: 20px;
}
.badge-avatar{
width:100px;
height:100px;
border-radius: 100%;
border: 5px solid #fff;
box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.2);
margin-top: -75px;
position: relative;
}
.badge-body{
margin: 35px 10px;
}
.badge-foot{
color:#fff;
background-color:#a290a5;
padding-top:13px;
padding-bottom:13px;
display: flex;
justify-content: center;
}
.badge-link{
height: 35px;
width: 35px;
line-height: 35px;
font-weight: 700;
background-color: #fff;
color: #a290a5;
display: block;
border-radius: 100%;
margin: 0 10px;
}
pc-regular
</style>
</div>

2
src/block_manager/main.js
View File

@ -4,7 +4,7 @@
* * [getAll](#getall)
* * [render](#render)
*
* Block manager helps managing various, draggable, pieces of content that could be reused inside templates.
* Block manager helps managing various, draggable, piece of contents that could be easily reused inside templates.
*
* Before using methods you should get first the module from the editor instance, in this way:
*

124
src/demo.js
View File

@ -59,130 +59,6 @@ require(['config/require-config'], function() {
]
},
panels: {
defaults : [{
id : 'commands',
buttons : [/*{
id : 'selcomp',
className : 'fa fa fa-mouse-pointer',
command : 'select-comp',
active: 1,
},*/{
id : 'create',
className : 'fa fa-plus-square-o icon-add-comp',
command : 'create-comp',
stopDefaultCommand: 1,
},{
id : 'move-comp',
className : 'fa fa-arrows',
command : 'move-comp',
stopDefaultCommand: 1,
}]
},{
id : 'options',
buttons : [
{ id: 'visibility', className: 'fa fa-eye', command: 'sw-visibility', active: true, context: 'sw-visibility', attributes: { title: 'View components' }, },
{ id: 'export', className: 'fa fa-code', command: 'export-template', attributes: { title: 'View code' }, },
{ id: 'view-github', className: 'fa fa-github', command: 'open-github', attributes: { title: 'View on Github' }, },
],
},{
id : 'views',
buttons : [{ id: 'open-sm', className: 'fa fa-paint-brush', command: 'open-sm', active: true, attributes: { title: 'Open Style Manager' },},
{ id: 'open-layers', className: 'fa fa-bars', command: 'open-layers', attributes : { title: 'Open Layer Manager' }, },
{ id: 'open-blocks', className: 'fa fa-th-large', command: 'open-blocks', attributes : { title: 'Open Blocks' }, }],
}]},
/*
panels: {
defaults : [{
id : 'commands',
buttons : [{
id : 'selcomp',
className : 'fa fa fa-mouse-pointer',
command : 'select-comp',
},{
id: 'image-comp',
className: 'fa fa-picture-o',
dragDrop: 1,
options: {
content: '<div style="width:100%; padding:7px">'+
'<div class="redbg" style="width:33.333%; min-height:75px; padding:7px; float:left"></div>' +
'<div style="width:33.333%; min-height:75px; padding:7px; float:left"></div>' +
'<div style="width:33.333%; min-height:75px; padding:7px; float:left"></div>' +
'<div style="clear:both"></div>' +
'</div>'
},
},{
id: 'move-comp',
command: 'move-comp',
className: 'fa fa-arrows',
},{
id : 'create',
className : 'fa fa-plus-square-o icon-add-comp',
command : 'create-comp',
attributes : { title : 'Create element' },
buttons : [
{ id: 'create2', className: 'fa fa-plus-square-o icon-add-comp', command: 'create-comp', attributes: { title: 'Create element' },},
{ id: 'comp100', className: 'fa fa-square-o icon-comp100', attributes : { title : 'Create all-width element' },
command: 'insert-custom',
options: {
content: '<div style="width:100%; min-height:75px; padding:7px"></div>',
terminateAfterInsert: false,
},
},{ id: 'comp50', className: 'fa fa-square-o icon-comp50', command: 'insert-custom',
attributes : { title : 'Create 2 columns element' },
options: {
content: '<div style="width:100%; padding:7px">'+
'<div style="width:50%; min-height:75px; padding:7px; float:left"></div>' +
'<div style="width:50%; min-height:75px; padding:7px; float:left"></div>' +
'<div style="clear:both"></div>' +
'</div>',
},
},{ id: 'comp30', className: 'fa fa-square-o icon-comp30', command: 'insert-custom',
attributes : { title : 'Create 3 columns element' },
options: {
content: '<div style="width:100%; padding:7px">'+
'<div style="width:33.333%; min-height:75px; padding:7px; float:left"></div>' +
'<div style="width:33.333%; min-height:75px; padding:7px; float:left"></div>' +
'<div style="width:33.333%; min-height:75px; padding:7px; float:left"></div>' +
'<div style="clear:both"></div>' +
'</div>',
},
},
]
},
//{ id: 'remove', className: 'fa fa-trash-o icon-rm', command: 'delete-comp', attributes : { title: 'Remove element' }, },
//{ id: 'resize', className: 'fa fa-arrows-alt', command: 'resize-comp', attributes : { title: 'Resize' }, },
//{
//id: 'var', className: 'fa fa-hashtag', command: 'insert-custom',attributes : { title: 'Some variable' },
//options: { content: '{{ VAR11 }}', terminateAfterInsert: true, },
//},
],
},{
id : 'options',
buttons : [
{ id: 'visibility', className: 'fa fa-eye', command: 'sw-visibility', active: true, context: 'sw-visibility', attributes: { title: 'View components' }, },
{ id: 'export', className: 'fa fa-code', command: 'export-template', attributes: { title: 'View code' }, },
{ id: 'view-github', className: 'fa fa-github', command: 'open-github', attributes: { title: 'View on Github' }, },
],
},{
id : 'options2',
buttons : [
{ 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 : 'views',
buttons : [{ id: 'open-sm', className: 'fa fa-paint-brush', command: 'open-sm', active: true, attributes: { title: 'Open Style Manager' },},
{ id: 'open-layers', className: 'fa fa-bars', command: 'open-layers', attributes : { title: 'Open Layer Manager' }, },],
}],
},
*/
styleManager : {
sectors: [{

10
src/editor/config/config.js
View File

@ -121,12 +121,18 @@ define(function () {
},{
id: 'hero',
label: 'Hero section',
content: '<div>Hero here</div>',
content: '<header class="header-banner"> <div class="container-width">'+
'<div class="logo-container"><div class="logo">GrapesJS</div></div>'+
'<nav class="navbar">'+
'<div class="menu-item">BUILDER</div><div class="menu-item">TEMPLATE</div><div class="menu-item">WEB</div>'+
'</nav><div class="clearfix"></div>'+
'<div class="lead-title">Build your templates without coding</div>'+
'<div class="lead-btn">Try it now</div></div></header>',
attributes: {class:'wte-fonts wte-f-hero'}
},{
id: 'h1p',
label: 'Text section',
content: '<div>Text text text</div>',
content: '<h1 class="heading">Insert title here</h1><p class="paragraph">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua</p>',
attributes: {class:'wte-fonts wte-f-h1p'}
},{
id: '3ba',

47
src/panels/config/config.js
View File

@ -1,54 +1,54 @@
define(function () {
var slc = 'select-comp';
var crc = 'create-comp';
var mvc = 'move-comp';
var txc = 'text-comp';
var imc = 'image-comp';
var swv = 'sw-visibility';
var expt = 'export-template';
var osm = 'open-sm';
var ola = 'open-layers';
var obl = 'open-blocks';
var ful = 'fullscreen';
return {
stylePrefix: 'pn-',
// Default panels
// Default panels fa-sliders for features
defaults: [{
id: 'commands',
buttons: [{
id: slc,
command: slc,
className: 'fa fa-mouse-pointer',
attributes: { title : 'Select element' },
},{
id: crc,
command: crc,
className: 'fa fa-plus-square-o',
className: 'fa fa-pencil-square-o',
attributes: { title : 'Create element' },
stopDefaultCommand: 1,
},{
id: mvc,
command: mvc,
className: 'fa fa-arrows',
attributes: { title: 'Move elements' },
},{
id: txc,
command: txc,
className: 'fa fa-font',
attributes: { title: 'Create text element' },
},{
id: imc,
command: imc,
className: 'fa fa-picture-o',
attributes: { title: 'Create image element' },
stopDefaultCommand: 1,
}],
},{
id: 'options',
buttons: [{
active: true,
id: swv,
className: 'fa fa-eye',
className: 'fa fa-square-o',
command: swv,
context: swv,
attributes: { title: 'View components' },
},{
id: 'eye',
className: 'fa fa-eye',
command: 'eye',
context: 'eye',
stopDefaultCommand: 1,
attributes: { title: 'Preview' },
},{
id: ful,
className: 'fa fa-arrows-alt',
command: ful,
context: ful,
attributes: { title: 'Fullscreen' },
},{
id: expt,
className: 'fa fa-code',
@ -68,6 +68,11 @@ define(function () {
className: 'fa fa-bars',
command: ola,
attributes : { title: 'Open Layer Manager' },
},{
id: obl,
className: 'fa fa-th-large',
command: obl,
attributes : { title: 'Open Blocks' },
}],
}],

34
styles/fonts/main-fonts.svg
View File

@ -15,7 +15,7 @@
id="svg2"
version="1.1"
inkscape:version="0.91 r13725"
sodipodi:docname="grapesjs-fonts.svg">
sodipodi:docname="main-fonts.svg">
<defs
id="defs4">
<inkscape:perspective
@ -100,17 +100,17 @@
borderopacity="1.0"
inkscape:pageopacity="0.0"
inkscape:pageshadow="2"
inkscape:zoom="0.7071068"
inkscape:cx="121.1555"
inkscape:cy="709.44389"
inkscape:zoom="0.1767767"
inkscape:cx="334.86414"
inkscape:cy="521.53582"
inkscape:document-units="px"
inkscape:current-layer="layer1"
showgrid="true"
units="px"
inkscape:window-width="1440"
inkscape:window-height="800"
inkscape:window-x="393"
inkscape:window-y="224"
inkscape:window-x="268"
inkscape:window-y="79"
inkscape:window-maximized="0"
guidetolerance="10"
objecttolerance="10"
@ -143,7 +143,7 @@
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
<dc:title></dc:title>
<dc:title />
</cc:Work>
</rdf:RDF>
</metadata>
@ -202,7 +202,7 @@
height="150"
x="100"
y="400" /></flowRegion><flowPara
id="flowPara5137"></flowPara></flowRoot> <path
id="flowPara5137" /></flowRoot> <path
inkscape:connector-curvature="0"
id="path5152"
d="m -1647.8463,-177.55864 -7.4766,140.707027 17.7598,0 c 2.1811,-27.13864 9.0339,-48.67237 20.5625,-64.601557 11.5284,-15.92921 25.3954,-26.69607 41.5977,-32.30078 12.4631,-4.12981 33.4955,-6.19336 63.0957,-6.19336 l 76.1815,0 0,458.40625 c 0,33.6283 -3.4284,55.16201 -10.2831,64.60155 -11.2168,15.33923 -30.2236,23.00977 -57.0195,23.00977 l -22.4336,0 0,16.37109 268.7402,0 0,-16.37109 -21.9668,0 c -24.6149,0 -42.8416,-6.19462 -54.6816,-18.58398 -8.4127,-9.14455 -12.6211,-32.15418 -12.6211,-69.02734 l 0,-458.40625 89.2695,0 c 26.1728,0 47.2031,4.12909 63.0938,12.38867 16.2022,7.9646 29.132,20.50219 38.791,37.611327 5.92,10.61945 10.5941,28.31694 14.0215,53.0957 l 17.7597,0 -7.0097,-140.707027 -517.3809,0 z"
@ -218,7 +218,7 @@
height="650"
width="600"
id="rect5203" /></flowRegion><flowPara
id="flowPara5205"></flowPara></flowRoot> <path
id="flowPara5205" /></flowRoot> <path
style="color:#000000;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:40px;line-height:125%;font-family:'Yuppy TC';-inkscape-font-specification:'Yuppy TC';text-indent:0;text-align:start;text-decoration:none;text-decoration-line:none;text-decoration-style:solid;text-decoration-color:#000000;letter-spacing:0px;word-spacing:0px;text-transform:none;direction:ltr;block-progression:tb;writing-mode:lr-tb;baseline-shift:baseline;text-anchor:start;white-space:normal;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;opacity:1;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:20;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate"
d="m -1590.8717,-913.42067 0,10 0,252.15235 122.836,0 c 0.1985,1.5552 0.3594,3.0785 0.3594,4.44336 l 0,0.99024 0.1933,0.96875 c 0.5636,2.8203 0.9141,6.65611 0.9141,11.36719 0,49.69706 -10.3762,93.07559 -30.9571,130.7207 l -0.035,0.0645 -0.035,0.0645 c -19.5644,37.06412 -47.0205,57.46548 -84.8925,63.66797 l -8.3829,1.37305 0,124.18749 11.1954,-1.34961 c 82.407,-9.92779 145.4523,-49.82688 186.084,-118.11522 l 0.012,-0.0215 0.014,-0.0215 c 40.2656,-68.43358 60.2032,-151.05588 60.2032,-247.22273 l 0,-233.26954 -257.5079,0 z m 332.4258,0 0,10 0,252.15235 122.834,0 c 0.1995,1.55621 0.3613,3.07993 0.3613,4.44336 l 0,0.99024 0.1934,0.96875 c 0.5636,2.82026 0.9141,6.6561 0.9141,11.36719 0,49.69706 -10.3763,93.07559 -30.9571,130.7207 l -0.035,0.0645 -0.035,0.0645 c -19.5644,37.06412 -47.0205,57.46548 -84.8925,63.66797 l -8.3829,1.37305 0,124.18749 11.1954,-1.34961 c 82.407,-9.92779 145.4523,-49.82688 186.0839,-118.11522 l 0.012,-0.0215 0.014,-0.0215 c 40.2658,-68.43345 60.2032,-151.05588 60.2032,-247.22273 l 0,-233.26954 -257.5078,0 z m -312.4258,20 217.5079,0 0,213.26954 c 0,93.39687 -19.2734,172.19948 -57.4278,237.05664 -35.9438,60.39891 -88.4556,95.52831 -160.0801,106.85351 l 0,-84.86718 c 39.4317,-8.90932 70.4999,-33.48573 90.9258,-72.14453 22.3092,-40.83549 33.377,-87.77857 33.377,-140.24609 0,-5.3977 -0.3808,-10.20735 -1.209,-14.62305 -0.1288,-5.15097 -0.9439,-10.4327 -2.502,-15.89063 l -2.0703,-7.25586 -118.5215,0 0,-222.15235 z m 332.4258,0 217.5078,0 0,213.26954 c 0,93.39687 -19.2733,172.19948 -57.4277,237.05664 -35.9438,60.39891 -88.4555,95.52831 -160.0801,106.85351 l 0,-84.86718 c 39.4317,-8.90932 70.4998,-33.48573 90.9258,-72.14453 22.3092,-40.83549 33.377,-87.77857 33.377,-140.24609 0,-5.40154 -0.3814,-10.21455 -1.211,-14.63282 -0.1303,-5.15253 -0.9479,-10.43031 -2.5039,-15.88086 l -2.0703,-7.25586 -118.5176,0 0,-222.15235 z"
id="flowRoot5215"
@ -228,5 +228,19 @@
d="m -839.60268,-468.88663 c -12.0536,0 -22.0625,9.92827 -22.0625,21.88477 l 0,556.23243 c 0,11.9564 10.0089,21.8828 22.0625,21.8828 l 755.874954,0 c 12.0536,0 22.0625,-9.9266 22.0625,-21.8828 l 0,-556.23243 c 0,-11.9565 -10.0088,-21.88477 -22.0625,-21.88477 l -755.874954,0 z m 0,19.35547 755.874954,0 c 1.5814,0 2.5508,0.9606 2.5508,2.5293 l 0,556.23243 c 0,1.5685 -0.9694,2.5273 -2.5508,2.5273 l -755.874954,0 c -1.5813,0 -2.55078,-0.9588 -2.55078,-2.5273 l 0,-556.23243 c 0,-1.5687 0.96948,-2.5293 2.55078,-2.5293 z m 603.43745,37.64453 a 67.5,67.5 0 0 0 -67.5,67.5 67.5,67.5 0 0 0 67.5,67.5 67.5,67.5 0 0 0 67.5,-67.5 67.5,67.5 0 0 0 -67.5,-67.5 z m -327.33589,58.78516 -235.3789,426.322243 259.25586,0 -0.54883,0.9922 366.19137,0 -183.09571,-331.117183 -76.7148,138.73438 -129.70899,-234.93164 z"
id="path5156"
inkscape:connector-curvature="0" />
</g>
<flowRoot
xml:space="preserve"
id="flowRoot4167"
style="font-style:normal;font-weight:normal;font-size:40px;line-height:125%;font-family:Sans;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
transform="translate(0,86.303395)"><flowRegion
id="flowRegion4169"><rect
id="rect4171"
width="2000"
height="650"
x="-450"
y="-1300" /></flowRegion><flowPara
style="font-size:125px"
id="flowPara4175">Borders: 20px</flowPara><flowPara
style="font-size:125px"
id="flowPara4179">Canvas: 1000x1000px</flowPara></flowRoot> </g>
</svg>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 40 KiB

After

Width:  |  Height:  |  Size: 41 KiB

Write Preview
Loading…
Cancel
Save