mirror of https://github.com/artf/grapesjs.git
Artur Arseniev
9 years ago
26 changed files with 6163 additions and 1228 deletions
@ -1,489 +0,0 @@ |
|||
<!doctype html> |
|||
<html lang="en"> |
|||
<head> |
|||
<meta charset="utf-8"> |
|||
<title>GrapesJS Newsletter Editor</title> |
|||
<link rel="stylesheet" href="./stylesheets/grapes.min.css"> |
|||
<link rel="stylesheet" href="./stylesheets/material.css"> |
|||
<link rel="stylesheet" href="./stylesheets/tooltip.css"> |
|||
<link rel="stylesheet" href="./stylesheets/grapesjs-preset-newsletter.css"> |
|||
|
|||
<script src="./js/jquery.js"></script> |
|||
<script src="./js/grapes.min.js"></script> |
|||
<script src="./js/grapesjs-preset-newsletter.min.js"></script> |
|||
<script src="./js/ajaxable.min.js"></script> |
|||
</head> |
|||
<style> |
|||
body, html{ height: 100%; margin: 0;} |
|||
</style> |
|||
<body> |
|||
|
|||
|
|||
<div id="gjs" style="height:0px; overflow:hidden"></div> |
|||
|
|||
|
|||
<form id="test-form" class="test-form" action="http://grapes.16mb.com/s" method="POST" style="display:none"> |
|||
<div class="putsmail-c"> |
|||
<a href="https://putsmail.com/" target="_blank"> |
|||
<img src="./img/putsmail.png" style="opacity:0.85; width:177px" /> |
|||
</a> |
|||
<div class="gjs-sm-property" style="font-size: 10px"> |
|||
Message delivering offered by PutsMail |
|||
<span class="form-status" style="opacity: 0"> |
|||
<i class="fa fa-refresh anim-spin" aria-hidden="true"></i> |
|||
</span> |
|||
</div> |
|||
</div> |
|||
<div class="gjs-sm-property"> |
|||
<div class="gjs-field"> |
|||
<span id="gjs-sm-input-holder"> |
|||
<input type="email" name="email" placeholder="Email" required> |
|||
</span> |
|||
</div> |
|||
</div> |
|||
|
|||
<div class="gjs-sm-property"> |
|||
<div class="gjs-field"> |
|||
<span id="gjs-sm-input-holder"> |
|||
<input type="text" name="subject" placeholder="Subject" required> |
|||
</span> |
|||
</div> |
|||
</div> |
|||
<input type="hidden" name="body"> |
|||
<button class="gjs-btn-prim gjs-btn-import" style="width: 100%">SEND</button> |
|||
</form> |
|||
|
|||
|
|||
<script type="text/javascript"> |
|||
// Custom template |
|||
var templateImport = ` |
|||
<table class="c654"> |
|||
<tr class="row"> |
|||
<td class="cell"> |
|||
<table class="container"> |
|||
<tr> |
|||
<td class="container-cell"> |
|||
<table class="table100 c1790"> |
|||
<tr> |
|||
<td class="top-cell" id="c1793"> |
|||
<u class="browser-link" id="c307">View in browser |
|||
</u> |
|||
</td> |
|||
</tr> |
|||
</table> |
|||
<table class="c1766"> |
|||
<tr> |
|||
<td class="cell c1769"> |
|||
<img class="c926" src="https://raw.githubusercontent.com/artf/grapesjs/gh-pages/img/grapesjs-logo.png" alt="GrapesJS."/> |
|||
</td> |
|||
<td class="cell c1776"> |
|||
<div class="c1144 darkerfont">GrapesJS Newsletter Editor |
|||
<br/> |
|||
</div> |
|||
</td> |
|||
</tr> |
|||
</table> |
|||
<table class="card"> |
|||
<tr> |
|||
<td class="card-cell"> |
|||
<img class="c1271" src="http://placehold.it/550x250/78c5d6/fff/" alt="Big image here"/> |
|||
<table class="table100 c1357"> |
|||
<tr> |
|||
<td class="card-content"> |
|||
<h1 class="card-title">Build your newsletters faster than ever |
|||
<br/> |
|||
</h1> |
|||
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua |
|||
</p> |
|||
<table class="c1542"> |
|||
<tr> |
|||
<td class="card-footer" id="c1545"> |
|||
<a class="button">Button here |
|||
</a> |
|||
</td> |
|||
</tr> |
|||
</table> |
|||
</td> |
|||
</tr> |
|||
</table> |
|||
</td> |
|||
</tr> |
|||
</table> |
|||
</td> |
|||
</tr> |
|||
</table> |
|||
</td> |
|||
</tr> |
|||
</table> |
|||
<style>.row{ |
|||
vertical-align:top; |
|||
} |
|||
.c654{ |
|||
min-height:150px; |
|||
padding-top:5px; |
|||
padding-right:5px; |
|||
padding-bottom:5px; |
|||
padding-left:5px; |
|||
margin-top:auto; |
|||
margin-right:auto; |
|||
margin-bottom:auto; |
|||
margin-left:auto; |
|||
width:100%; |
|||
height:100%; |
|||
background-color:rgb(234, 236, 237); |
|||
} |
|||
.cell{ |
|||
text-align:left; |
|||
font-size:12px; |
|||
font-family:Helvetica,serif; |
|||
font-weight:300; |
|||
color:rgb(111, 119, 125); |
|||
padding-top:0px; |
|||
padding-right:0px; |
|||
padding-bottom:0px; |
|||
padding-left:0px; |
|||
vertical-align:top; |
|||
margin-top:0px; |
|||
margin-right:0px; |
|||
margin-bottom:0px; |
|||
margin-left:0px; |
|||
} |
|||
.c926{ |
|||
color:rgb(158, 83, 129); |
|||
width:100%; |
|||
font-size:50px; |
|||
} |
|||
.cell.c849{ |
|||
width:11%; |
|||
} |
|||
.c1144{ |
|||
padding-top:10px; |
|||
padding-right:10px; |
|||
padding-bottom:10px; |
|||
padding-left:10px; |
|||
font-size:17px; |
|||
} |
|||
.card{ |
|||
min-height:150px; |
|||
padding-top:5px; |
|||
padding-right:5px; |
|||
padding-bottom:5px; |
|||
padding-left:5px; |
|||
margin-top:20px; |
|||
height:0px; |
|||
} |
|||
.card-cell{ |
|||
background-color:rgb(255, 255, 255); |
|||
overflow-x:hidden; |
|||
overflow-y:hidden; |
|||
border-top-left-radius:3px; |
|||
border-top-right-radius:3px; |
|||
border-bottom-right-radius:3px; |
|||
border-bottom-left-radius:3px; |
|||
padding-top:0px; |
|||
padding-right:0px; |
|||
padding-bottom:0px; |
|||
padding-left:0px; |
|||
text-align:center; |
|||
} |
|||
.card.sector{ |
|||
background-color:rgb(255, 255, 255); |
|||
border-top-left-radius:3px; |
|||
border-top-right-radius:3px; |
|||
border-bottom-right-radius:3px; |
|||
border-bottom-left-radius:3px; |
|||
border-collapse:separate; |
|||
} |
|||
.c1271{ |
|||
width:100%; |
|||
margin-top:0px; |
|||
margin-right:0px; |
|||
margin-bottom:15px; |
|||
margin-left:0px; |
|||
font-size:50px; |
|||
color:rgb(120, 197, 214); |
|||
line-height:250px; |
|||
text-align:center; |
|||
} |
|||
.table100{ |
|||
width:100%; |
|||
} |
|||
.c1357{ |
|||
min-height:150px; |
|||
padding-top:5px; |
|||
padding-right:5px; |
|||
padding-bottom:5px; |
|||
padding-left:5px; |
|||
margin-top:auto; |
|||
margin-right:auto; |
|||
margin-bottom:auto; |
|||
margin-left:auto; |
|||
height:0px; |
|||
} |
|||
.darkerfont{ |
|||
color:rgb(65, 69, 72); |
|||
} |
|||
.button{ |
|||
font-size:12px; |
|||
padding-top:10px; |
|||
padding-right:20px; |
|||
padding-bottom:10px; |
|||
padding-left:20px; |
|||
background-color:rgb(217, 131, 166); |
|||
color:rgb(255, 255, 255); |
|||
text-align:center; |
|||
border-top-left-radius:3px; |
|||
border-top-right-radius:3px; |
|||
border-bottom-right-radius:3px; |
|||
border-bottom-left-radius:3px; |
|||
font-weight:300; |
|||
} |
|||
.table100.c1437{ |
|||
text-align:left; |
|||
} |
|||
.cell.cell-bottom{ |
|||
text-align:center; |
|||
height:51px; |
|||
} |
|||
.card-title{ |
|||
font-size:25px; |
|||
font-weight:300; |
|||
color:rgb(68, 68, 68); |
|||
} |
|||
.card-content{ |
|||
font-size:13px; |
|||
line-height:20px; |
|||
color:rgb(111, 119, 125); |
|||
padding-top:10px; |
|||
padding-right:20px; |
|||
padding-bottom:0px; |
|||
padding-left:20px; |
|||
} |
|||
.container{ |
|||
min-height:150px; |
|||
padding-top:5px; |
|||
padding-right:5px; |
|||
padding-bottom:5px; |
|||
padding-left:5px; |
|||
margin-top:auto; |
|||
margin-right:auto; |
|||
margin-bottom:auto; |
|||
margin-left:auto; |
|||
height:0px; |
|||
width:90%; |
|||
max-width:550px; |
|||
} |
|||
.cell.c856{ |
|||
vertical-align:middle; |
|||
} |
|||
.container-cell{ |
|||
vertical-align:top; |
|||
font-size:medium; |
|||
padding-top:0px; |
|||
padding-right:0px; |
|||
padding-bottom:0px; |
|||
padding-left:0px; |
|||
} |
|||
.c1790{ |
|||
min-height:150px; |
|||
padding-top:5px; |
|||
padding-right:5px; |
|||
padding-bottom:5px; |
|||
padding-left:5px; |
|||
margin-top:auto; |
|||
margin-right:auto; |
|||
margin-bottom:auto; |
|||
margin-left:auto; |
|||
height:0px; |
|||
} |
|||
.table100.c1790{ |
|||
min-height:30px; |
|||
border-collapse:separate; |
|||
margin-top:0px; |
|||
margin-right:0px; |
|||
margin-bottom:10px; |
|||
margin-left:0px; |
|||
} |
|||
.browser-link{ |
|||
font-size:12px; |
|||
} |
|||
.top-cell{ |
|||
text-align:right; |
|||
color:rgb(152, 156, 165); |
|||
} |
|||
.table100.c1357{ |
|||
margin-top:0px; |
|||
margin-right:0px; |
|||
margin-bottom:0px; |
|||
margin-left:0px; |
|||
border-collapse:collapse; |
|||
} |
|||
.c1769{ |
|||
width:30%; |
|||
} |
|||
.c1776{ |
|||
width:70%; |
|||
} |
|||
.c1766{ |
|||
margin-top:0px; |
|||
margin-right:auto; |
|||
margin-bottom:10px; |
|||
margin-left:auto; |
|||
padding-top:5px; |
|||
padding-right:5px; |
|||
padding-bottom:5px; |
|||
padding-left:5px; |
|||
width:100%; |
|||
min-height:30px; |
|||
} |
|||
.cell.c1769{ |
|||
width:11%; |
|||
} |
|||
.cell.c1776{ |
|||
vertical-align:middle; |
|||
} |
|||
.c1542{ |
|||
margin-top:0px; |
|||
margin-right:auto; |
|||
margin-bottom:10px; |
|||
margin-left:auto; |
|||
padding-top:5px; |
|||
padding-right:5px; |
|||
padding-bottom:5px; |
|||
padding-left:5px; |
|||
width:100%; |
|||
} |
|||
.card-footer{ |
|||
padding:20px 0px 20px 0px; |
|||
text-align:center; |
|||
} |
|||
.quote { |
|||
color: #6a6a6a; |
|||
font-style: italic; |
|||
font-weight: 200; |
|||
} |
|||
</style> |
|||
`; |
|||
|
|||
// Set up GrapesJS editor with the Newsletter plugin |
|||
var editor = grapesjs.init({ |
|||
height: '100%', |
|||
noticeOnUnload: 0, |
|||
storageManager:{ |
|||
autoload: 0, |
|||
}, |
|||
assetManager: { |
|||
upload: 0, |
|||
uploadText: 'Uploading is not available in this demo', |
|||
}, |
|||
container : '#gjs', |
|||
plugins: ['gjs-preset-newsletter'], |
|||
pluginsOpts: { |
|||
'gjs-preset-newsletter': { |
|||
inlineCss: 0, |
|||
modalLabelImport: 'Paste all your code here below and click import', |
|||
modalLabelExport: 'Copy the code and use it wherever you want', |
|||
codeViewerTheme: 'material', |
|||
defaultTemplate: templateImport, |
|||
importPlaceholder: templateImport |
|||
} |
|||
} |
|||
}); |
|||
|
|||
|
|||
// Let's add in this demo the possibility to test our newsletters |
|||
var mdlClass = 'gjs-mdl-dialog-sm'; |
|||
var pnm = editor.Panels; |
|||
var cmdm = editor.Commands; |
|||
var testContainer = document.getElementById("test-form"); |
|||
var contentEl = testContainer.querySelector('input[name=body]'); |
|||
var md = editor.Modal; |
|||
cmdm.add('send-test', { |
|||
run(editor, sender) { |
|||
sender.set('active', 0); |
|||
var modalContent = md.getContentEl(); |
|||
var mdlDialog = document.querySelector('.gjs-mdl-dialog'); |
|||
var cmdGetCode = cmdm.get('gjs-get-inlined-html'); |
|||
contentEl.value = cmdGetCode && cmdGetCode.run(editor); |
|||
mdlDialog.className += ' ' + mdlClass; |
|||
testContainer.style.display = 'block'; |
|||
md.setTitle('Test your Newsletter'); |
|||
md.setContent(''); |
|||
md.setContent(testContainer); |
|||
md.open(); |
|||
md.getModel().once('change:open', function() { |
|||
mdlDialog.className = mdlDialog.className.replace(mdlClass, ''); |
|||
//clean status |
|||
}) |
|||
} |
|||
}); |
|||
pnm.addButton('options', { |
|||
id: 'send-test', |
|||
className: 'fa fa-paper-plane', |
|||
command: 'send-test', |
|||
attributes: { |
|||
'title': 'Test Newsletter', |
|||
'data-tooltip-pos': 'bottom', |
|||
}, |
|||
}); |
|||
|
|||
//fa fa-refresh |
|||
var statusFormElC = document.querySelector('.form-status'); |
|||
var statusFormEl = document.querySelector('.form-status i'); |
|||
var ajaxTest = ajaxable(testContainer). |
|||
onStart(function(){ |
|||
statusFormEl.className = 'fa fa-refresh anim-spin'; |
|||
statusFormElC.style.opacity = '1'; |
|||
statusFormElC.className = 'form-status'; |
|||
}) |
|||
.onResponse(function(res){ |
|||
if (res.data) { |
|||
statusFormElC.style.opacity = '0'; |
|||
statusFormEl.removeAttribute('data-tooltip'); |
|||
md.close(); |
|||
} else if(res.errors){ |
|||
statusFormEl.className = 'fa fa-exclamation-circle'; |
|||
statusFormEl.setAttribute('data-tooltip', res.errors); |
|||
statusFormElC.className = 'form-status text-danger'; |
|||
} |
|||
}); |
|||
|
|||
// Add a link to a github page |
|||
cmdm.add('open-github', { |
|||
run(editor, sender) { |
|||
sender.set('active',false); |
|||
window.open('https://github.com/artf/grapesjs','_blank'); |
|||
} |
|||
}); |
|||
pnm.addButton('options', { |
|||
id: 'view-github', |
|||
className: 'fa fa-github', |
|||
command: 'open-github' |
|||
}); |
|||
|
|||
$(document).ready(function () { |
|||
|
|||
// Beautify tooltips |
|||
$('*[title]').each(function () { |
|||
var el = $(this); |
|||
var title = el.attr('title').trim(); |
|||
if(!title) |
|||
return; |
|||
el.attr('data-tooltip', el.attr('title')); |
|||
el.attr('title', ''); |
|||
}); |
|||
|
|||
}); |
|||
</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> |
|||
@ -0,0 +1,689 @@ |
|||
<!doctype html> |
|||
<html lang="en"> |
|||
<head> |
|||
<meta charset="utf-8"> |
|||
<title>GrapesJS Newsletter Editor</title> |
|||
<link rel="stylesheet" href="./stylesheets/grapes.min.css"> |
|||
<link rel="stylesheet" href="./stylesheets/material.css"> |
|||
<link rel="stylesheet" href="./stylesheets/tooltip.css"> |
|||
<link rel="stylesheet" href="./stylesheets/toastr.min.css"> |
|||
<link rel="stylesheet" href="./stylesheets/grapesjs-preset-newsletter.css"> |
|||
|
|||
<script src="./js/jquery.js"></script> |
|||
<script src="./js/grapes.min.js"></script> |
|||
<script src="./js/grapesjs-preset-newsletter.min.js"></script> |
|||
<script src="./js/toastr.min.js"></script> |
|||
<script src="./js/ajaxable.min.js"></script> |
|||
</head> |
|||
<style> |
|||
body, html{ height: 100%; margin: 0;} |
|||
.nl-link { |
|||
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 { |
|||
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; |
|||
} |
|||
</style> |
|||
<body> |
|||
|
|||
|
|||
<div id="gjs" style="height:0px; overflow:hidden"> |
|||
|
|||
|
|||
<table class="main-body"> |
|||
<tr class="row"> |
|||
<td class="main-body-cell"> |
|||
<table class="container"> |
|||
<tr> |
|||
<td class="container-cell"> |
|||
<table class="table100 c1790"> |
|||
<tr> |
|||
<td class="top-cell" id="c1793"> |
|||
<u class="browser-link" id="c307">View in browser |
|||
</u> |
|||
</td> |
|||
</tr> |
|||
</table> |
|||
<table class="c1766"> |
|||
<tr> |
|||
<td class="cell c1769"> |
|||
<img class="c926" src="https://raw.githubusercontent.com/artf/grapesjs/gh-pages/img/grapesjs-logo.png" alt="GrapesJS."/> |
|||
</td> |
|||
<td class="cell c1776"> |
|||
<div class="c1144">GrapesJS Newsletter Builder |
|||
<br/> |
|||
</div> |
|||
</td> |
|||
</tr> |
|||
</table> |
|||
<table class="card"> |
|||
<tr> |
|||
<td class="card-cell"> |
|||
<img class="c1271" src="./img/tmp-header-txt.jpg" alt="Big image here"/> |
|||
<table class="table100 c1357"> |
|||
<tr> |
|||
<td class="card-content"> |
|||
<h1 class="card-title">Build your newsletters faster than ever |
|||
<br/> |
|||
</h1> |
|||
<p class="card-text">Import, build, test and export responsive newsletter templates faster than ever using the GrapesJS Newsletter Builder. |
|||
</p> |
|||
<table class="c1542"> |
|||
<tr> |
|||
<td class="card-footer" id="c1545"> |
|||
<a class="button" href="https://github.com/artf/grapesjs">Free and Open Source |
|||
</a> |
|||
</td> |
|||
</tr> |
|||
</table> |
|||
</td> |
|||
</tr> |
|||
</table> |
|||
</td> |
|||
</tr> |
|||
</table> |
|||
<table class="list-item"> |
|||
<tr> |
|||
<td class="list-item-cell"> |
|||
<table class="list-item-content"> |
|||
<tr class="list-item-row"> |
|||
<td class="list-cell-left"> |
|||
<img class="list-item-image" src="./img/tmp-blocks.jpg" alt="Image1"/> |
|||
</td> |
|||
<td class="list-cell-right"> |
|||
<h1 class="card-title">Built-in Blocks |
|||
</h1> |
|||
<p class="card-text">Drag and drop built-in blocks from the right panel and style them in a matter of seconds |
|||
</p> |
|||
</td> |
|||
</tr> |
|||
</table> |
|||
</td> |
|||
</tr> |
|||
</table> |
|||
<table class="list-item"> |
|||
<tr> |
|||
<td class="list-item-cell"> |
|||
<table class="list-item-content"> |
|||
<tr class="list-item-row"> |
|||
<td class="list-cell-left"> |
|||
<img class="list-item-image" src="./img/tmp-tgl-images.jpg" alt="Image2"/> |
|||
</td> |
|||
<td class="list-cell-right"> |
|||
<h1 class="card-title">Toggle images |
|||
</h1> |
|||
<p class="card-text">Build a good looking newsletter even without images enabled by the email clients |
|||
</p> |
|||
</td> |
|||
</tr> |
|||
</table> |
|||
</td> |
|||
</tr> |
|||
</table> |
|||
<table class="grid-item-row"> |
|||
<tr> |
|||
<td class="grid-item-cell2-l"> |
|||
<table class="grid-item-card"> |
|||
<tr> |
|||
<td class="grid-item-card-cell"> |
|||
<img class="grid-item-image" src="./img/tmp-send-test.jpg" alt="Image1"/> |
|||
<table class="grid-item-card-body"> |
|||
<tr> |
|||
<td class="grid-item-card-content"> |
|||
<h1 class="card-title">Test it |
|||
</h1> |
|||
<p class="card-text">You can send email tests directly from the editor and check how are looking on your email clients |
|||
</p> |
|||
</td> |
|||
</tr> |
|||
</table> |
|||
</td> |
|||
</tr> |
|||
</table> |
|||
</td> |
|||
<td class="grid-item-cell2-r"> |
|||
<table class="grid-item-card"> |
|||
<tr> |
|||
<td class="grid-item-card-cell"> |
|||
<img class="grid-item-image" src="./img/tmp-devices.jpg" alt="Image2"/> |
|||
<table class="grid-item-card-body"> |
|||
<tr> |
|||
<td class="grid-item-card-content"> |
|||
<h1 class="card-title">Responsive |
|||
</h1> |
|||
<p class="card-text">Using the device manager you'll always send a fully responsive contents |
|||
</p> |
|||
</td> |
|||
</tr> |
|||
</table> |
|||
</td> |
|||
</tr> |
|||
</table> |
|||
</td> |
|||
</tr> |
|||
</table> |
|||
<table class="footer"> |
|||
<tr> |
|||
<td class="footer-cell"> |
|||
<div class="c2577"> |
|||
<p class="footer-info">GrapesJS Newsletter Builder is a free and open source preset (plugin) used on top of the GrapesJS core library. |
|||
For more information about and how to integrate it inside your applications check<p> |
|||
<a class="link" href="https://github.com/artf/grapesjs-preset-newsletter">GrapesJS Newsletter Preset</a> |
|||
<br/> |
|||
</div> |
|||
<div class="c2421"> |
|||
MADE BY <a class="link" href="https://github.com/artf">ARTUR ARSENIEV</a> |
|||
<p> |
|||
</div> |
|||
</td> |
|||
</tr> |
|||
</table> |
|||
</td> |
|||
</tr> |
|||
</table> |
|||
</td> |
|||
</tr> |
|||
</table> |
|||
|
|||
|
|||
<style> |
|||
.link { |
|||
color: rgb(217, 131, 166); |
|||
} |
|||
.row{ |
|||
vertical-align:top; |
|||
} |
|||
.main-body{ |
|||
min-height:150px; |
|||
padding: 5px; |
|||
width:100%; |
|||
height:100%; |
|||
background-color:rgb(234, 236, 237); |
|||
} |
|||
.c926{ |
|||
color:rgb(158, 83, 129); |
|||
width:100%; |
|||
font-size:50px; |
|||
} |
|||
.cell.c849{ |
|||
width:11%; |
|||
} |
|||
.c1144{ |
|||
padding: 10px; |
|||
font-size:17px; |
|||
font-weight: 300; |
|||
} |
|||
.card{ |
|||
min-height:150px; |
|||
padding: 5px; |
|||
margin-bottom:20px; |
|||
height:0px; |
|||
} |
|||
.card-cell{ |
|||
background-color:rgb(255, 255, 255); |
|||
overflow:hidden; |
|||
border-radius: 3px; |
|||
padding: 0; |
|||
text-align:center; |
|||
} |
|||
.card.sector{ |
|||
background-color:rgb(255, 255, 255); |
|||
border-radius: 3px; |
|||
border-collapse:separate; |
|||
} |
|||
.c1271{ |
|||
width:100%; |
|||
margin: 0 0 15px 0; |
|||
font-size:50px; |
|||
color:rgb(120, 197, 214); |
|||
line-height:250px; |
|||
text-align:center; |
|||
} |
|||
.table100{ |
|||
width:100%; |
|||
} |
|||
.c1357{ |
|||
min-height:150px; |
|||
padding: 5px; |
|||
margin: auto; |
|||
height:0px; |
|||
} |
|||
.darkerfont{ |
|||
color:rgb(65, 69, 72); |
|||
} |
|||
.button{ |
|||
font-size:12px; |
|||
padding: 10px 20px; |
|||
background-color:rgb(217, 131, 166); |
|||
color:rgb(255, 255, 255); |
|||
text-align:center; |
|||
border-radius: 3px; |
|||
font-weight:300; |
|||
} |
|||
.table100.c1437{ |
|||
text-align:left; |
|||
} |
|||
.cell.cell-bottom{ |
|||
text-align:center; |
|||
height:51px; |
|||
} |
|||
.card-title{ |
|||
font-size:25px; |
|||
font-weight:300; |
|||
color:rgb(68, 68, 68); |
|||
} |
|||
.card-content{ |
|||
font-size:13px; |
|||
line-height:20px; |
|||
color:rgb(111, 119, 125); |
|||
padding: 10px 20px 0 20px; |
|||
vertical-align:top; |
|||
} |
|||
.container{ |
|||
font-family: Helvetica, serif; |
|||
min-height:150px; |
|||
padding: 5px; |
|||
margin:auto; |
|||
height:0px; |
|||
width:90%; |
|||
max-width:550px; |
|||
} |
|||
.cell.c856{ |
|||
vertical-align:middle; |
|||
} |
|||
.container-cell{ |
|||
vertical-align:top; |
|||
font-size:medium; |
|||
padding-bottom:50px; |
|||
} |
|||
.c1790{ |
|||
min-height:150px; |
|||
padding: 5px; |
|||
margin:auto; |
|||
height:0px; |
|||
} |
|||
.table100.c1790{ |
|||
min-height:30px; |
|||
border-collapse:separate; |
|||
margin: 0 0 10px 0; |
|||
} |
|||
.browser-link{ |
|||
font-size:12px; |
|||
} |
|||
.top-cell{ |
|||
text-align:right; |
|||
color:rgb(152, 156, 165); |
|||
} |
|||
.table100.c1357{ |
|||
margin: 0; |
|||
border-collapse:collapse; |
|||
} |
|||
.c1769{ |
|||
width:30%; |
|||
} |
|||
.c1776{ |
|||
width:70%; |
|||
} |
|||
.c1766{ |
|||
margin: 0 auto 10px 0; |
|||
padding: 5px; |
|||
width:100%; |
|||
min-height:30px; |
|||
} |
|||
.cell.c1769{ |
|||
width:11%; |
|||
} |
|||
.cell.c1776{ |
|||
vertical-align:middle; |
|||
} |
|||
.c1542{ |
|||
margin: 0 auto 10px auto; |
|||
padding:5px; |
|||
width:100%; |
|||
} |
|||
.card-footer{ |
|||
padding: 20px 0; |
|||
text-align:center; |
|||
} |
|||
.c2280{ |
|||
height:150px; |
|||
margin:0 auto 10px auto; |
|||
padding:5px 5px 5px 5px; |
|||
width:100%; |
|||
} |
|||
.c2421{ |
|||
padding:10px; |
|||
} |
|||
.c2577{ |
|||
padding:10px; |
|||
} |
|||
.footer{ |
|||
margin-top: 50px; |
|||
color:rgb(152, 156, 165); |
|||
text-align:center; |
|||
font-size:11px; |
|||
padding: 5px; |
|||
} |
|||
.quote { |
|||
font-style: italic; |
|||
} |
|||
|
|||
.list-item{ |
|||
height:auto; |
|||
width:100%; |
|||
margin: 0 auto 10px auto; |
|||
padding: 5px; |
|||
} |
|||
.list-item-cell{ |
|||
background-color:rgb(255, 255, 255); |
|||
border-radius: 3px; |
|||
overflow: hidden; |
|||
padding: 0; |
|||
} |
|||
.list-cell-left{ |
|||
width:30%; |
|||
padding: 0; |
|||
} |
|||
.list-cell-right{ |
|||
width:70%; |
|||
color:rgb(111, 119, 125); |
|||
font-size:13px; |
|||
line-height:20px; |
|||
padding: 10px 20px 0px 20px; |
|||
} |
|||
.list-item-content{ |
|||
border-collapse: collapse; |
|||
margin: 0 auto; |
|||
padding: 5px; |
|||
height:150px; |
|||
width:100%; |
|||
} |
|||
.list-item-image{ |
|||
color:rgb(217, 131, 166); |
|||
font-size:45px; |
|||
width: 100%; |
|||
} |
|||
|
|||
.grid-item-image{ |
|||
line-height:150px; |
|||
font-size:50px; |
|||
color:rgb(120, 197, 214); |
|||
margin-bottom:15px; |
|||
width:100%; |
|||
} |
|||
.grid-item-row { |
|||
margin: 0 auto 10px; |
|||
padding: 5px 0; |
|||
width: 100%; |
|||
} |
|||
.grid-item-card { |
|||
width:100%; |
|||
padding: 5px 0; |
|||
margin-bottom: 10px; |
|||
} |
|||
.grid-item-card-cell{ |
|||
background-color:rgb(255, 255, 255); |
|||
overflow: hidden; |
|||
border-radius: 3px; |
|||
text-align:center; |
|||
padding: 0; |
|||
} |
|||
.grid-item-card-content{ |
|||
font-size:13px; |
|||
color:rgb(111, 119, 125); |
|||
padding: 0 10px 20px 10px; |
|||
width:100%; |
|||
line-height:20px; |
|||
} |
|||
.grid-item-cell2-l{ |
|||
vertical-align:top; |
|||
padding-right:10px; |
|||
width:50%; |
|||
} |
|||
.grid-item-cell2-r{ |
|||
vertical-align:top; |
|||
padding-left:10px; |
|||
width:50%; |
|||
} |
|||
</style> |
|||
|
|||
|
|||
</div> |
|||
|
|||
|
|||
|
|||
<form id="test-form" class="test-form" action="http://grapes.16mb.com/s" method="POST" style="display:none"> |
|||
<div class="putsmail-c"> |
|||
<a href="https://putsmail.com/" target="_blank"> |
|||
<img src="./img/putsmail.png" style="opacity:0.85;" /> |
|||
</a> |
|||
<div class="gjs-sm-property" style="font-size: 10px"> |
|||
Test delivering offered by <a class="nl-link" href="https://litmus.com/" target="_blank">Litmus</a> with <a class="nl-link" href="https://putsmail.com/" target="_blank">Putsmail</a> |
|||
<span class="form-status" style="opacity: 0"> |
|||
<i class="fa fa-refresh anim-spin" aria-hidden="true"></i> |
|||
</span> |
|||
</div> |
|||
</div> |
|||
<div class="gjs-sm-property"> |
|||
<div class="gjs-field"> |
|||
<span id="gjs-sm-input-holder"> |
|||
<input type="email" name="email" placeholder="Email" required> |
|||
</span> |
|||
</div> |
|||
</div> |
|||
|
|||
<div class="gjs-sm-property"> |
|||
<div class="gjs-field"> |
|||
<span id="gjs-sm-input-holder"> |
|||
<input type="text" name="subject" placeholder="Subject" required> |
|||
</span> |
|||
</div> |
|||
</div> |
|||
<input type="hidden" name="body"> |
|||
<button class="gjs-btn-prim gjs-btn-import" style="width: 100%">SEND</button> |
|||
</form> |
|||
|
|||
|
|||
<div id="info-cont" style="display:none"> |
|||
<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> |
|||
<br/> |
|||
<div class="gjs-import-label"> |
|||
<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> |
|||
core library. Is not intended to represent a complete builder solution. |
|||
<br/><br/> |
|||
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> |
|||
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>. |
|||
<br/><br/> |
|||
Being a free and open source project contributors and supporters are extremely welcome. |
|||
</div> |
|||
</div> |
|||
|
|||
|
|||
<script type="text/javascript"> |
|||
|
|||
var images = [ |
|||
'http://grapesjs.com/img/grapesjs-logo.png', |
|||
'./img/tmp-blocks.jpg', |
|||
'./img/tmp-tgl-images.jpg', |
|||
'./img/tmp-send-test.jpg', |
|||
'./img/tmp-devices.jpg', |
|||
]; |
|||
|
|||
// Set up GrapesJS editor with the Newsletter plugin |
|||
var editor = grapesjs.init({ |
|||
height: '100%', |
|||
noticeOnUnload: 0, |
|||
storageManager:{ |
|||
autoload: 0, |
|||
}, |
|||
assetManager: { |
|||
upload: 0, |
|||
uploadText: 'Uploading is not available in this demo', |
|||
}, |
|||
container : '#gjs', |
|||
fromElement: true, |
|||
assetManager: {assets: images}, |
|||
plugins: ['gjs-preset-newsletter'], |
|||
pluginsOpts: { |
|||
'gjs-preset-newsletter': { |
|||
modalLabelImport: 'Paste all your code here below and click import', |
|||
modalLabelExport: 'Copy the code and use it wherever you want', |
|||
codeViewerTheme: 'material', |
|||
//defaultTemplate: templateImport, |
|||
importPlaceholder: '<table class="table"><tr><td class="cell">Hello world!</td></tr></table>', |
|||
cellStyle: { |
|||
'font-size': '12px', |
|||
'font-weight': 300, |
|||
'vertical-align': 'top', |
|||
color: 'rgb(111, 119, 125)', |
|||
margin: 0, |
|||
padding: 0, |
|||
} |
|||
} |
|||
} |
|||
}); |
|||
|
|||
|
|||
// Let's add in this demo the possibility to test our newsletters |
|||
var mdlClass = 'gjs-mdl-dialog-sm'; |
|||
var pnm = editor.Panels; |
|||
var cmdm = editor.Commands; |
|||
var testContainer = document.getElementById("test-form"); |
|||
var contentEl = testContainer.querySelector('input[name=body]'); |
|||
var md = editor.Modal; |
|||
cmdm.add('send-test', { |
|||
run(editor, sender) { |
|||
sender.set('active', 0); |
|||
var modalContent = md.getContentEl(); |
|||
var mdlDialog = document.querySelector('.gjs-mdl-dialog'); |
|||
var cmdGetCode = cmdm.get('gjs-get-inlined-html'); |
|||
contentEl.value = cmdGetCode && cmdGetCode.run(editor); |
|||
mdlDialog.className += ' ' + mdlClass; |
|||
testContainer.style.display = 'block'; |
|||
md.setTitle('Test your Newsletter'); |
|||
md.setContent(''); |
|||
md.setContent(testContainer); |
|||
md.open(); |
|||
md.getModel().once('change:open', function() { |
|||
mdlDialog.className = mdlDialog.className.replace(mdlClass, ''); |
|||
//clean status |
|||
}) |
|||
} |
|||
}); |
|||
pnm.addButton('options', { |
|||
id: 'send-test', |
|||
className: 'fa fa-paper-plane', |
|||
command: 'send-test', |
|||
attributes: { |
|||
'title': 'Test Newsletter', |
|||
'data-tooltip-pos': 'bottom', |
|||
}, |
|||
}); |
|||
|
|||
//fa fa-refresh |
|||
var statusFormElC = document.querySelector('.form-status'); |
|||
var statusFormEl = document.querySelector('.form-status i'); |
|||
var ajaxTest = ajaxable(testContainer). |
|||
onStart(function(){ |
|||
statusFormEl.className = 'fa fa-refresh anim-spin'; |
|||
statusFormElC.style.opacity = '1'; |
|||
statusFormElC.className = 'form-status'; |
|||
}) |
|||
.onResponse(function(res){ |
|||
if (res.data) { |
|||
statusFormElC.style.opacity = '0'; |
|||
statusFormEl.removeAttribute('data-tooltip'); |
|||
md.close(); |
|||
} else if(res.errors){ |
|||
statusFormEl.className = 'fa fa-exclamation-circle'; |
|||
statusFormEl.setAttribute('data-tooltip', res.errors); |
|||
statusFormElC.className = 'form-status text-danger'; |
|||
} |
|||
}); |
|||
|
|||
// Add info command |
|||
var infoContainer = document.getElementById("info-cont"); |
|||
cmdm.add('open-info', { |
|||
run(editor, sender) { |
|||
sender.set('active', 0); |
|||
var mdlDialog = document.querySelector('.gjs-mdl-dialog'); |
|||
mdlDialog.className += ' ' + mdlClass; |
|||
infoContainer.style.display = 'block'; |
|||
md.setTitle('About this demo'); |
|||
md.setContent(''); |
|||
md.setContent(infoContainer); |
|||
md.open(); |
|||
md.getModel().once('change:open', function() { |
|||
mdlDialog.className = mdlDialog.className.replace(mdlClass, ''); |
|||
}) |
|||
} |
|||
}); |
|||
pnm.addButton('options', { |
|||
id: 'view-info', |
|||
className: 'fa fa-question-circle', |
|||
command: 'open-info', |
|||
attributes: { |
|||
'title': 'About', |
|||
'data-tooltip-pos': 'bottom', |
|||
}, |
|||
}); |
|||
|
|||
// Simple warn notifier |
|||
var origWarn = console.warn; |
|||
toastr.options = { |
|||
closeButton: true, |
|||
preventDuplicates: true, |
|||
showDuration: 250, |
|||
hideDuration: 150 |
|||
}; |
|||
console.warn = function (msg) { |
|||
toastr.warning(msg); |
|||
origWarn(msg); |
|||
}; |
|||
|
|||
$(document).ready(function () { |
|||
|
|||
// Beautify tooltips |
|||
$('*[title]').each(function () { |
|||
var el = $(this); |
|||
var title = el.attr('title').trim(); |
|||
if(!title) |
|||
return; |
|||
el.attr('data-tooltip', el.attr('title')); |
|||
el.attr('title', ''); |
|||
}); |
|||
|
|||
}); |
|||
</script> |
|||
</body> |
|||
</html> |
|||
Binary file not shown.
Binary file not shown.
|
Before Width: | Height: | Size: 357 KiB After Width: | Height: | Size: 434 KiB |
Binary file not shown.
Binary file not shown.
Binary file not shown.
|
After Width: | Height: | Size: 155 KiB |
|
After Width: | Height: | Size: 1.7 KiB |
|
After Width: | Height: | Size: 4.7 KiB |
|
After Width: | Height: | Size: 6.3 KiB |
|
After Width: | Height: | Size: 79 KiB |
|
After Width: | Height: | Size: 3.3 KiB |
|
After Width: | Height: | Size: 3.5 KiB |
|
After Width: | Height: | Size: 2.8 KiB |
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
Loading…
Reference in new issue