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

Update newsletter demo

pull/2301/head
Artur Arseniev 9 years ago
parent
5b236b8551
commit
30cfd69bc7
4 changed files with 176 additions and 140 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 119
      demo-newsletter-editor.html
  2. 92
      demo.html
  3. 13
      index.html
  4. 92
      stylesheets/demos.css

119
demo-newsletter-editor.html
View File

@ -3,11 +3,12 @@
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<title>GrapesJS Newsletter Editor</title> <title>GrapesJS Newsletter Editor</title>
<link rel="stylesheet" href="./stylesheets/grapes.min.css?v0.12.5"> <link rel="stylesheet" href="stylesheets/grapes.min.css?v0.12.5">
<link rel="stylesheet" href="./stylesheets/material.css"> <link rel="stylesheet" href="stylesheets/material.css">
<link rel="stylesheet" href="./stylesheets/tooltip.css"> <link rel="stylesheet" href="stylesheets/tooltip.css">
<link rel="stylesheet" href="./stylesheets/toastr.min.css"> <link rel="stylesheet" href="stylesheets/toastr.min.css">
<link rel="stylesheet" href="./stylesheets/grapesjs-preset-newsletter.css?v=0.2.15"> <link rel="stylesheet" href="stylesheets/grapesjs-preset-newsletter.css?v=0.2.15">
<link rel="stylesheet" href="stylesheets/demos.css">
<script src="//feather.aviary.com/imaging/v3/editor.js"></script> <script src="//feather.aviary.com/imaging/v3/editor.js"></script>
<script src="js/grapes.min.js?v0.12.5"></script> <script src="js/grapes.min.js?v0.12.5"></script>
@ -19,47 +20,20 @@
<script src="./js/ajaxable.min.js"></script> <script src="./js/ajaxable.min.js"></script>
</head> </head>
<style> <style>
body, html{
height: 100%;
margin: 0;
overflow: hidden;
}
iframe {
user-select: none;
-webkit-user-select: none;
}
.nl-link { .nl-link {
color: inherit; color: inherit;
} }
.info-link {
text-decoration: none;
}
#info-cont {
line-height: 17px;
}
.grapesjs-logo {
display: block;
height: 90px;
margin: 0 auto;
width: 90px;
}
.grapesjs-logo path{
stroke: #eee !important;
stroke-width: 8 !important;
}
#toast-container { .gjs-clm-tag {
font-size: 13px; color: white;
font-weight: lighter;
} }
#toast-container > div,
#toast-container > div:hover{ .gjs-four-color {
box-shadow: 0 0 12px rgba(0, 0, 0, 0.1); color: #35d7bb;
font-family: Helvetica, sans-serif;
} }
#toast-container > div{
opacity: 0.95; .gjs-logo-version {
background-color: #5a606d;
} }
</style> </style>
<body> <body>
@ -522,25 +496,39 @@
</form> </form>
<div id="info-cont" style="display:none"> <div id="info-panel" style="display:none">
<br/> <br/>
<svg class="grapesjs-logo" xmlns="http://www.w3.org/2000/svg" version="1"><g id="gjs-logo"><path d="M40 5l-12.9 7.4 -12.9 7.4c-1.4 0.8-2.7 2.3-3.7 3.9 -0.9 1.6-1.5 3.5-1.5 5.1v14.9 14.9c0 1.7 0.6 3.5 1.5 5.1 0.9 1.6 2.2 3.1 3.7 3.9l12.9 7.4 12.9 7.4c1.4 0.8 3.3 1.2 5.2 1.2 1.9 0 3.8-0.4 5.2-1.2l12.9-7.4 12.9-7.4c1.4-0.8 2.7-2.2 3.7-3.9 0.9-1.6 1.5-3.5 1.5-5.1v-14.9 -12.7c0-4.6-3.8-6-6.8-4.2l-28 16.2" style="fill:none;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;stroke-width:10;stroke:#fff"/></g></svg> <svg class="info-panel-logo" xmlns="http://www.w3.org/2000/svg" version="1"><g id="gjs-logo"><path d="M40 5l-12.9 7.4 -12.9 7.4c-1.4 0.8-2.7 2.3-3.7 3.9 -0.9 1.6-1.5 3.5-1.5 5.1v14.9 14.9c0 1.7 0.6 3.5 1.5 5.1 0.9 1.6 2.2 3.1 3.7 3.9l12.9 7.4 12.9 7.4c1.4 0.8 3.3 1.2 5.2 1.2 1.9 0 3.8-0.4 5.2-1.2l12.9-7.4 12.9-7.4c1.4-0.8 2.7-2.2 3.7-3.9 0.9-1.6 1.5-3.5 1.5-5.1v-14.9 -12.7c0-4.6-3.8-6-6.8-4.2l-28 16.2" style="fill:none;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;stroke-width:10;stroke:#fff"/></g></svg>
<br/> <br/>
<div class="gjs-import-label"> <div class="info-panel-label">
<b>GrapesJS Newsletter Builder</b> is a showcase of what/how is possible to build an editor using the <b>GrapesJS Newsletter Builder</b> is a showcase of what/how is possible to build an editor using the
<a class="info-link gjs-color-active" target="_blank" href="http://artf.github.io/grapesjs/">GrapesJS</a> <a class="info-panel-link gjs-four-color" target="_blank" href="http://artf.github.io/grapesjs/">GrapesJS</a>
core library. Is not intended to represent a complete builder solution. core library
<br/><br/> <br/><br/>
For any tip about this demo (or newsletters construction in general) check the For any tip about this demo (or newsletters construction in general) check the
<a class="info-link gjs-color-active" target="_blank" href="https://github.com/artf/grapesjs-preset-newsletter">Newsletter Preset repository</a> <a class="info-panel-link gjs-four-color" target="_blank" href="https://github.com/artf/grapesjs-preset-newsletter">Newsletter Preset repository</a>
and open an issue. For any problem with the builder itself, open an issue on the main and open an issue. For any problem with the builder itself, open an issue on the main
<a class="info-link gjs-color-active" target="_blank" href="https://github.com/artf/grapesjs">GrapesJS repository</a>. <a class="info-panel-link gjs-four-color" target="_blank" href="https://github.com/artf/grapesjs">GrapesJS repository</a>
<br/><br/> <br/><br/>
Being a free and open source project contributors and supporters are extremely welcome. Being a free and open source project contributors and supporters are extremely welcome.
If you like the project support it with a donation of your choice or become a backer/sponsor via
<a class="info-panel-link gjs-four-color" target="_blank" href="https://opencollective.com/grapesjs">Open Collective</a>
</div>
</div>
<div style="display: none">
<div class="gjs-logo-cont">
<a href="//grapesjs.com"><img class="gjs-logo" src="img/grapesjs-logo-cl.png"></a>
<div class="gjs-logo-version"></div>
</div> </div>
</div> </div>
<div class="ad-cont">
<div id="code-sponsor-widget"></div>
</div>
<script type="text/javascript"> <script type="text/javascript">
var host = 'http://artf.github.io/grapesjs/'; var host = 'http://artf.github.io/grapesjs/';
var images = [ var images = [
@ -663,7 +651,7 @@
*/ */
// Add info command // Add info command
var infoContainer = document.getElementById("info-cont"); var infoContainer = document.getElementById("info-panel");
cmdm.add('open-info', { cmdm.add('open-info', {
run(editor, sender) { run(editor, sender) {
sender.set('active', 0); sender.set('active', 0);
@ -679,10 +667,20 @@
}) })
} }
}); });
pnm.addButton('options', { pnm.addButton('options', [{
id: 'undo',
className: 'fa fa-undo',
attributes: {title: 'Undo'},
command: function(){ editor.runCommand('core:undo') }
},{
id: 'redo',
className: 'fa fa-repeat',
attributes: {title: 'Redo'},
command: function(){ editor.runCommand('core:redo') }
},{
id: 'clear-all', id: 'clear-all',
className: 'fa fa-trash icon-blank', className: 'fa fa-trash icon-blank',
attributes: {title: 'Empty canvas'}, attributes: {title: 'Clear canvas'},
command: { command: {
run: function(editor, sender) { run: function(editor, sender) {
sender && sender.set('active', false); sender && sender.set('active', false);
@ -694,8 +692,7 @@
} }
} }
} }
}); },{
pnm.addButton('options', {
id: 'view-info', id: 'view-info',
className: 'fa fa-question-circle', className: 'fa fa-question-circle',
command: 'open-info', command: 'open-info',
@ -703,7 +700,7 @@
'title': 'About', 'title': 'About',
'data-tooltip-pos': 'bottom', 'data-tooltip-pos': 'bottom',
}, },
}); }]);
// Simple warn notifier // Simple warn notifier
var origWarn = console.warn; var origWarn = console.warn;
@ -729,6 +726,21 @@
el.setAttribute('data-tooltip', title); el.setAttribute('data-tooltip', title);
el.setAttribute('title', ''); el.setAttribute('title', '');
} }
// Do stuff on load
editor.on('load', function() {
var $ = grapesjs.$;
// Show logo with the version
var logoCont = document.querySelector('.gjs-logo-cont');
document.querySelector('.gjs-logo-version').innerHTML = 'v' + grapesjs.version;
var logoPanel = document.querySelector('#gjs-pn-commands');
logoPanel.appendChild(logoCont);
// Move Ad
$('#gjs').append($('.ad-cont'));
});
</script> </script>
<script> <script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){ (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
@ -739,5 +751,6 @@
ga('create', 'UA-74284223-1', 'auto'); ga('create', 'UA-74284223-1', 'auto');
ga('send', 'pageview'); ga('send', 'pageview');
</script> </script>
<script type="text/javascript" src="https://app.codesponsor.io/scripts/OoCl1gjRd-YmpYfszYJ1Dg?theme=dark&width=100%25"></script>
</body> </body>
</html> </html>

92
demo.html
View File

@ -8,6 +8,8 @@
<link rel="stylesheet" href="stylesheets/grapesjs-preset-webpage.min.css"> <link rel="stylesheet" href="stylesheets/grapesjs-preset-webpage.min.css">
<link rel="stylesheet" href="stylesheets/tooltip.css"> <link rel="stylesheet" href="stylesheets/tooltip.css">
<link rel="stylesheet" href="stylesheets/grapesjs-plugin-filestack.css"> <link rel="stylesheet" href="stylesheets/grapesjs-plugin-filestack.css">
<link rel="stylesheet" href="stylesheets/demos.css">
<script src="//static.filestackapi.com/v3/filestack.js"></script> <script src="//static.filestackapi.com/v3/filestack.js"></script>
<script src="//feather.aviary.com/imaging/v3/editor.js"></script> <script src="//feather.aviary.com/imaging/v3/editor.js"></script>
<script src="js/toastr.min.js"></script> <script src="js/toastr.min.js"></script>
@ -16,13 +18,6 @@
<script src="js/grapesjs-preset-webpage.min.js"></script> <script src="js/grapesjs-preset-webpage.min.js"></script>
<style type="text/css"> <style type="text/css">
body,
html {
height: 100%;
margin: 0;
overflow: hidden;
}
.icon-add-comp::before, .icon-comp100::before,.icon-comp50::before,.icon-comp30::before,.icon-rm::before{ content: '';} .icon-add-comp::before, .icon-comp100::before,.icon-comp50::before,.icon-comp30::before,.icon-rm::before{ content: '';}
.icon-add-comp { .icon-add-comp {
background: url("./img/icon-sq-a.png") no-repeat center; background: url("./img/icon-sq-a.png") no-repeat center;
@ -86,21 +81,6 @@
background: url("./img/flex-al-center.png") no-repeat center; background: url("./img/flex-al-center.png") no-repeat center;
} }
#toast-container {
font-size: 13px;
font-weight: lighter;
}
#toast-container > div,
#toast-container > div:hover {
box-shadow: 0 0 12px rgba(0, 0, 0, 0.1);
font-family: Helvetica, sans-serif;
}
#toast-container > div {
opacity: 0.95;
}
[data-tooltip]::after { [data-tooltip]::after {
background: rgba(51, 51, 51, 0.9); background: rgba(51, 51, 51, 0.9);
} }
@ -110,8 +90,7 @@
} }
#gjs-sm-float, #gjs-sm-float,
#gjs-pn-views .fa-cog, #gjs-pn-views .fa-cog {
#gjs-pn-commands .gjs-pn-buttons {
display: none; display: none;
} }
@ -120,54 +99,9 @@
width: 100%; width: 100%;
} }
.gjs-logo { .gjs-logo-version {
height: 25px; background-color: #756467;
} }
.gjs-logo-cont {
position: relative;
display: inline-block;
top: 3px;
}
.gjs-logo-version {
position: absolute;
background-color: #756467;
font-size: 10px;
padding: 1px 7px;
border-radius: 15px;
bottom: 2px;
right: -43px;
}
.gjs-mdl-dialog-sm {
width: 300px;
}
#info-panel {
line-height: 17px;
}
.info-panel-logo {
display: block;
height: 90px;
margin: 0 auto;
width: 90px;
}
.info-panel-logo path {
stroke: #eee !important;
stroke-width: 8 !important;
}
.info-panel-label {
margin-bottom: 10px;
font-size: 13px;
}
.info-panel-link {
text-decoration: none;
}
.gjs-pn-panel#gjs-pn-views { .gjs-pn-panel#gjs-pn-views {
padding: 0; padding: 0;
@ -190,19 +124,6 @@
min-height: 450px; min-height: 450px;
margin-bottom: 8px; margin-bottom: 8px;
} }
.gjs-pn-panel#gjs-pn-views-container {
height: calc(100% - 150px);
}
.ad-cont {
position: absolute;
right: 0;
bottom: 0;
z-index: 2;
width: 15%;
height: 150px;
}
</style> </style>
</head> </head>
<body> <body>
@ -1472,6 +1393,7 @@
var openBlocksBtn = editor.Panels.getButton('views', 'open-blocks'); var openBlocksBtn = editor.Panels.getButton('views', 'open-blocks');
openBlocksBtn && openBlocksBtn.set('active', 1); openBlocksBtn && openBlocksBtn.set('active', 1);
// Move Ad
$('#gjs').append($('.ad-cont')); $('#gjs').append($('.ad-cont'));
}); });

13
index.html
View File

@ -282,9 +282,9 @@
<h1 class="section-title primary-title">Support us</h1> <h1 class="section-title primary-title">Support us</h1>
<div class="section-content"> <div class="section-content">
If you like the project you can help us get bigger. GrapesJS is an independent If you like the project you can help us get bigger. GrapesJS is an independent
project, made by developers in their free time with a common purpose, make the project, made by developers in their spare time with a common purpose, make the
web development accessible to everyone. We appreciate even the smallest contribution web development accessible to everyone. We appreciate even the smallest contribution
as it's a huge change from many aspects, but one in particular, the motivation to as it's a huge change from many aspects, but mostly, the motivation to
keep improving this tool keep improving this tool
</div> </div>
<div class="suppoer-banners" style="text-align: center"> <div class="suppoer-banners" style="text-align: center">
@ -292,12 +292,21 @@
<a href="https://opencollective.com/grapesjs/sponsors/0/website" target="_blank"><img src="https://opencollective.com/grapesjs/sponsors/0/avatar"></a> <a href="https://opencollective.com/grapesjs/sponsors/0/website" target="_blank"><img src="https://opencollective.com/grapesjs/sponsors/0/avatar"></a>
<a href="https://opencollective.com/grapesjs/sponsors/2/website" target="_blank"><img src="https://opencollective.com/grapesjs/sponsors/2/avatar"></a> <a href="https://opencollective.com/grapesjs/sponsors/2/website" target="_blank"><img src="https://opencollective.com/grapesjs/sponsors/2/avatar"></a>
<a href="https://opencollective.com/grapesjs/sponsors/3/website" target="_blank"><img src="https://opencollective.com/grapesjs/sponsors/3/avatar"></a> <a href="https://opencollective.com/grapesjs/sponsors/3/website" target="_blank"><img src="https://opencollective.com/grapesjs/sponsors/3/avatar"></a>
<a href="https://opencollective.com/grapesjs/sponsors/4/website" target="_blank"><img src="https://opencollective.com/grapesjs/sponsors/4/avatar"></a>
<a href="https://opencollective.com/grapesjs/sponsors/5/website" target="_blank"><img src="https://opencollective.com/grapesjs/sponsors/5/avatar"></a>
</div> </div>
<div class="backers"> <div class="backers">
<a href="https://opencollective.com/grapesjs/backers/0/website" target="_blank"><img src="https://opencollective.com/grapesjs/backers/0/avatar"></a> <a href="https://opencollective.com/grapesjs/backers/0/website" target="_blank"><img src="https://opencollective.com/grapesjs/backers/0/avatar"></a>
<a href="https://opencollective.com/grapesjs/backers/1/website" target="_blank"><img src="https://opencollective.com/grapesjs/backers/1/avatar"></a> <a href="https://opencollective.com/grapesjs/backers/1/website" target="_blank"><img src="https://opencollective.com/grapesjs/backers/1/avatar"></a>
<a href="https://opencollective.com/grapesjs/backers/2/website" target="_blank"><img src="https://opencollective.com/grapesjs/backers/2/avatar"></a> <a href="https://opencollective.com/grapesjs/backers/2/website" target="_blank"><img src="https://opencollective.com/grapesjs/backers/2/avatar"></a>
<a href="https://opencollective.com/grapesjs/backers/3/website" target="_blank"><img src="https://opencollective.com/grapesjs/backers/3/avatar"></a> <a href="https://opencollective.com/grapesjs/backers/3/website" target="_blank"><img src="https://opencollective.com/grapesjs/backers/3/avatar"></a>
<a href="https://opencollective.com/grapesjs/backers/4/website" target="_blank"><img src="https://opencollective.com/grapesjs/backers/4/avatar"></a>
<a href="https://opencollective.com/grapesjs/backers/5/website" target="_blank"><img src="https://opencollective.com/grapesjs/backers/5/avatar"></a>
<a href="https://opencollective.com/grapesjs/backers/6/website" target="_blank"><img src="https://opencollective.com/grapesjs/backers/6/avatar"></a>
<a href="https://opencollective.com/grapesjs/backers/7/website" target="_blank"><img src="https://opencollective.com/grapesjs/backers/7/avatar"></a>
<a href="https://opencollective.com/grapesjs/backers/8/website" target="_blank"><img src="https://opencollective.com/grapesjs/backers/8/avatar"></a>
<a href="https://opencollective.com/grapesjs/backers/9/website" target="_blank"><img src="https://opencollective.com/grapesjs/backers/9/avatar"></a>
<a href="https://opencollective.com/grapesjs/backers/10/website" target="_blank"><img src="https://opencollective.com/grapesjs/backers/10/avatar"></a>
</div> </div>
</div> </div>
</div> </div>

92
stylesheets/demos.css
View File

@ -0,0 +1,92 @@
body,
html {
height: 100%;
margin: 0;
overflow: hidden;
}
#toast-container {
font-size: 13px;
font-weight: lighter;
}
#toast-container > div,
#toast-container > div:hover {
box-shadow: 0 0 12px rgba(0, 0, 0, 0.1);
font-family: Helvetica, sans-serif;
}
#toast-container > div {
opacity: 0.95;
}
/* LOGO VERSION */
#gjs-pn-commands .gjs-pn-buttons {
display: none;
}
.gjs-logo {
height: 25px;
}
.gjs-logo-cont {
position: relative;
display: inline-block;
top: 3px;
}
.gjs-logo-version {
position: absolute;
font-size: 10px;
padding: 1px 7px;
border-radius: 15px;
bottom: 2px;
right: -43px;
}
/* INFO PANEL */
.gjs-mdl-dialog-sm {
width: 300px;
}
#info-panel {
line-height: 17px;
}
.info-panel-logo {
display: block;
height: 90px;
margin: 0 auto;
width: 90px;
}
.info-panel-logo path {
stroke: #eee !important;
stroke-width: 8 !important;
}
.info-panel-label {
margin-bottom: 10px;
font-size: 13px;
}
.info-panel-link {
text-decoration: none;
}
/* ADS */
.gjs-pn-panel#gjs-pn-views-container {
height: calc(100% - 150px);
}
.ad-cont {
position: absolute;
right: 0;
bottom: 0;
z-index: 2;
width: 15%;
height: 150px;
}
Write Preview
Loading…
Cancel
Save