@@ -313,28 +313,230 @@ export default [
`
+ },
+ {
+ id:'section-contact',
+ label:'Contact',
+ category:'Sections',
+ attributes:{
+ class:'fa fa-envelope'
+ },
+ content:`
+ `
+ },
+ {
+ id:'section-parallax',
+ label:'Parallax',
+ category:'Sections',
+ attributes:{
+ class:"fa fa-copy"
+ },
+ content:`
+ `
+ },
+ {
+ id:'section-team',
+ label:'Team',
+ category:'Sections',
+ attributes:{
+ class:'fa fa-th'
+ },
+ content:`
- 
Google
+Google
-
Nike
+Nike
- 
Apple
+Apple
- 
IBM
+IBM
- 
Uber
+Uber
- 
Window
+Window
+
+
+
+
+
+
+
+ We love to hear from you
+ +HUTCHINSON
+4663 Sunny Day Drive
+714-778-6685
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Title text
+Lorem ipsum, dolor sit amet consectetur adipisicing elit. Vitae repellendus maiores enim dolore nesciunt!
+
+ \n \n "
}, {
@@ -735,7 +738,31 @@ __webpack_require__.r(__webpack_exports__);
attributes: {
"class": 'fa fa-ellipsis-h'
},
- content: "\n "
+ content: "\n "
+}, {
+ id: 'section-contact',
+ label: 'Contact',
+ category: 'Sections',
+ attributes: {
+ "class": 'fa fa-envelope'
+ },
+ content: "\n "
+}, {
+ id: 'section-parallax',
+ label: 'Parallax',
+ category: 'Sections',
+ attributes: {
+ "class": "fa fa-copy"
+ },
+ content: "\n "
+}, {
+ id: 'section-team',
+ label: 'Team',
+ category: 'Sections',
+ attributes: {
+ "class": 'fa fa-th'
+ },
+ content: "
+
+
+
+ OUR AMAZING TEAM
+
+
`
},
{
id: 'section-footer',
diff --git a/gramateria/develop/js/gramateria.js b/gramateria/develop/js/gramateria.js
index 51d54b5..1a6863d 100755
--- a/gramateria/develop/js/gramateria.js
+++ b/gramateria/develop/js/gramateria.js
@@ -13,6 +13,18 @@ let sectionDependencies = [
{
name:'testimonial',
dependencies:['splidejs']
+ },
+ {
+ name:'contact',
+ dependencies:['contactjs']
+ }
+]
+
+const dependencyScripts = [
+ {
+ name:'splidejs',
+ css:'https://cdn.jsdelivr.net/npm/@splidejs/splide@latest/dist/css/splide.min.css',
+ js:'https://cdn.jsdelivr.net/npm/@splidejs/splide@latest/dist/js/splide.min.js'
}
]
@@ -287,29 +299,33 @@ class Gramateria {
return new Promise((resolve,reject)=>{
let dependencies = getLocal('gram-dependencies');
- let isExit = dependencies.filter(d=>d.name === dependency);
+ let isDependencyExit = dependencies.filter(d=>d.name === dependency);
- if(isExit.length !== 0){
+ if(isDependencyExit.length !== 0){
resolve(dependency);
return;
}
- const link = document.createElement("link");
- link.rel = 'stylesheet';
- link.className = 'splidejs-script';
- link.href = 'https://cdn.jsdelivr.net/npm/@splidejs/splide@latest/dist/css/splide.min.css';
- doc.head.appendChild(link)
-
- const script = document.createElement("script");
- script.src = 'https://cdn.jsdelivr.net/npm/@splidejs/splide@latest/dist/js/splide.min.js';
- script.className = 'splidejs-script';
- doc.body.appendChild(script);
+ let ds = dependencyScripts.find(d => d.name === dependency );
+
+ if(!ds){
+ resolve('done');
+ return;
+ }
+
+ const link = document.createElement("link");
+ link.rel = 'stylesheet';
+ link.className = ds.name+'-script';
+ link.href = ds.css;
+ doc.head.appendChild(link)
+
+ const script = document.createElement("script");
+ script.src = ds.js;
+ script.className = ds.name+'-script';
+ doc.body.appendChild(script);
+
+ dependencies.push(ds)
- dependencies.push({
- name:'splidejs',
- js:script.src,
- css:link.href
- })
addLocal('gram-dependencies',dependencies)
@@ -320,6 +336,15 @@ class Gramateria {
appendDependency().then((dep)=>{
if(dep === dependency) return;
+
+
+ let cScripts = getLocal('gjs-scripts');
+ let isCustomScriptExit = cScripts.filter(d=>d.name === dependency);
+
+ if(isCustomScriptExit.length !== 0){
+ return;
+ }
+
setTimeout(()=>{
const customScript = document.createElement("script");
customScript.innerHTML = customScripts(dependency);
@@ -345,8 +370,19 @@ class Gramateria {
}
removeDependency (dependency){
-
let doc = this.editor.Canvas.getDocument();
+
+ let customScript = getLocal('gjs-scripts');
+ // Custom scripts
+ for(let custom of customScript){
+ let allCustomScripts = doc.querySelectorAll(`.${custom.name}-script`);
+ allCustomScripts.forEach(e=>e.outerHTML = '')
+ }
+ customScript = customScript.filter(c=>c.name !== dependency);
+ addLocal('gjs-scripts',customScript);
+
+
+ // Dependencies / plugins
let dependencies = getLocal('gram-dependencies');
if(dependencies.length == 0) return;
@@ -357,10 +393,7 @@ class Gramateria {
dependencies = dependencies.filter(d=>d.name !== dependency);
addLocal('gram-dependencies',dependencies);
-
- let customScript = getLocal('gjs-scripts');
- customScript = customScript.filter(c=>c.name !== dependency);
- addLocal('gjs-scripts',customScript);
+
}
listenAddDependencies = () =>{
diff --git a/gramateria/dist/gram.min.js b/gramateria/dist/gram.min.js
index 0bb9677..ab8e23c 100644
--- a/gramateria/dist/gram.min.js
+++ b/gramateria/dist/gram.min.js
@@ -646,7 +646,10 @@ __webpack_require__.r(__webpack_exports__);
/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (function (dependency) {
var scriptArr = [{
name: 'splidejs',
- script: "new Splide('#splide', {\n type : 'loop',\n perPage: 3,\n focus : 'center',\n pagination: false,\n breakpoints: {\n 768: {\n perPage: 2,\n },\n 576:{\n perPage:1\n }\n }\n }).mount();"
+ script: "(()=>{\n new Splide('#splide', {\n type : 'loop',\n perPage: 3,\n focus : 'center',\n pagination: false,\n breakpoints: {\n 768: {\n perPage: 2,\n },\n 576:{\n perPage:1\n }\n }\n }).mount();\n })();"
+ }, {
+ name: 'contactjs',
+ script: "(()=>{\n const contactForm = document.querySelector(\"#contactForm\");\n if(!contactForm) return;\n contactForm.addEventListener('submit', function (e) {\n const isPassed = document.querySelector(\"#contactForm\").checkValidity();\n e.preventDefault();\n if (!isPassed) {\n e.preventDefault()\n e.stopPropagation()\n }\n \n contactForm.classList.add('was-validated')\n }, false)\n })();\n "
}];
var dep = scriptArr.filter(function (e) {
return e.name === dependency;
@@ -725,7 +728,7 @@ __webpack_require__.r(__webpack_exports__);
label: 'Testimonial',
category: 'Sections',
attributes: {
- "class": 'fa fa-th'
+ "class": 'fa fa-sitemap'
},
content: "
+
+
+
+
+
+
+
+
+ 
+
+
+
+
+ Peter J. Lamy
+Software Developer
+Lorem ipsum dolor sit amet, consectetur adipiscing tristique hendrerit laoreet.
+ +
+
+
+
+
+
+
+
+
+ 
+
+
+
+
+ June D. Smith
+Product Manager
+Lorem ipsum dolor sit amet, consectetur adipiscing tristique hendrerit laoreet.
+ +
+
+
+
+
+
+
+
+
+ 
+
+
+
+
+ Dianna C. Avila
+Graphic Designer
+Lorem ipsum dolor sit amet, consectetur adipiscing tristique hendrerit laoreet.
+ +
+
+
+
+
+
+
+
+
+ 
+
+
+
+
+ Robert C. Young
+Web Designer
+Lorem ipsum dolor sit amet, consectetur adipiscing tristique hendrerit laoreet.
+ +\n
\n Testimonials
\n\n \n
\n \n
\n \n \n
\n - \n
- \n \n\n \n
![\"\"](\"https://randomuser.me/api/portraits/men/32.jpg\")
\n John Doe
\n
Backend developer\nLorem ipsum dolor sit amet consectetur, adipisicing elit. Accusantium voluptates ut ad laudantium.
\n \n - \n \n\n \n\n
Steve
\n
Co-founder of company\nLorem ipsum dolor sit amet consectetur, adipisicing elit. Accusantium voluptates ut ad laudantium.
\n \n - \n \n\n \n
![\"\"](\"https://randomuser.me/api/portraits/women/31.jpg\")
\n Jessica
\n
Product Manager\nLorem ipsum dolor sit amet consectetur, adipisicing elit. Accusantium voluptates ut ad laudantium.
\n \n
\n
\n \n
\n \n ![\"Google\"](\"https://cdn.statically.io/gh/ronaldaug/gramateria/refactor/gramateria/develop/svg/brands/google.svg\")
Google
\n
\n \n
\n Nike
\n\n ![\"Apple\"](\"https://cdn.statically.io/gh/ronaldaug/gramateria/refactor/gramateria/develop/svg/brands/apple.svg\")
\n Apple
\n\n ![\"IBM\"](\"https://cdn.statically.io/gh/ronaldaug/gramateria/refactor/gramateria/develop/svg/brands/ibm.svg\")
\n IBM
\n\n ![\"Uber\"](\"https://cdn.statically.io/gh/ronaldaug/gramateria/refactor/gramateria/develop/svg/brands/uber.svg\")
\n Uber
\n\n ![\"Window\"](\"https://cdn.statically.io/gh/ronaldaug/gramateria/refactor/gramateria/develop/svg/brands/window.svg\")
\n Window
\n\n
\n \n
\n \n Google
\n
\n \n \n \n
\n Nike
\n \n \n
\n Apple
\n \n \n
\n IBM
\n \n \n
\n Uber
\n \n \n
\n Window
\n \n
\n \n
\n \n
\n \n
\n We love to hear from you
\n \nHUTCHINSON
\n\t4663 Sunny Day Drive
\n714-778-6685
\n\n
\n \n \n
\n \n
\n \n
\n \n
\n \n \n \n
\n Title text
\nLorem ipsum, dolor sit amet consectetur adipisicing elit. Vitae repellendus maiores enim dolore nesciunt!
\n\n Gramateria
-
-
-
-
-
-
-
-
-
\n
\n \n
\n OUR AMAZING TEAM
\n\n
"
}, {
id: 'section-footer',
label: 'Footer',
@@ -1191,6 +1218,14 @@ function _defineProperty(obj, key, value) { if (key in obj) { Object.definePrope
var sectionDependencies = [{
name: 'testimonial',
dependencies: ['splidejs']
+}, {
+ name: 'contact',
+ dependencies: ['contactjs']
+}];
+var dependencyScripts = [{
+ name: 'splidejs',
+ css: 'https://cdn.jsdelivr.net/npm/@splidejs/splide@latest/dist/css/splide.min.css',
+ js: 'https://cdn.jsdelivr.net/npm/@splidejs/splide@latest/dist/js/splide.min.js'
}];
var Gramateria = /*#__PURE__*/function () {
@@ -1247,29 +1282,34 @@ var Gramateria = /*#__PURE__*/function () {
var appendDependency = function appendDependency() {
return new Promise(function (resolve, reject) {
var dependencies = (0,_helpers_index__WEBPACK_IMPORTED_MODULE_3__.getLocal)('gram-dependencies');
- var isExit = dependencies.filter(function (d) {
+ var isDependencyExit = dependencies.filter(function (d) {
return d.name === dependency;
});
- if (isExit.length !== 0) {
+ if (isDependencyExit.length !== 0) {
resolve(dependency);
return;
}
+ var ds = dependencyScripts.find(function (d) {
+ return d.name === dependency;
+ });
+
+ if (!ds) {
+ resolve('done');
+ return;
+ }
+
var link = document.createElement("link");
link.rel = 'stylesheet';
- link.className = 'splidejs-script';
- link.href = 'https://cdn.jsdelivr.net/npm/@splidejs/splide@latest/dist/css/splide.min.css';
+ link.className = ds.name + '-script';
+ link.href = ds.css;
doc.head.appendChild(link);
var script = document.createElement("script");
- script.src = 'https://cdn.jsdelivr.net/npm/@splidejs/splide@latest/dist/js/splide.min.js';
- script.className = 'splidejs-script';
+ script.src = ds.js;
+ script.className = ds.name + '-script';
doc.body.appendChild(script);
- dependencies.push({
- name: 'splidejs',
- js: script.src,
- css: link.href
- });
+ dependencies.push(ds);
(0,_helpers_index__WEBPACK_IMPORTED_MODULE_3__.addLocal)('gram-dependencies', dependencies);
resolve('done');
});
@@ -1277,6 +1317,15 @@ var Gramateria = /*#__PURE__*/function () {
appendDependency().then(function (dep) {
if (dep === dependency) return;
+ var cScripts = (0,_helpers_index__WEBPACK_IMPORTED_MODULE_3__.getLocal)('gjs-scripts');
+ var isCustomScriptExit = cScripts.filter(function (d) {
+ return d.name === dependency;
+ });
+
+ if (isCustomScriptExit.length !== 0) {
+ return;
+ }
+
setTimeout(function () {
var customScript = document.createElement("script");
customScript.innerHTML = (0,_config_customScripts__WEBPACK_IMPORTED_MODULE_2__.default)(dependency);
@@ -1589,17 +1638,16 @@ var Gramateria = /*#__PURE__*/function () {
key: "removeDependency",
value: function removeDependency(dependency) {
var doc = this.editor.Canvas.getDocument();
- var dependencies = (0,_helpers_index__WEBPACK_IMPORTED_MODULE_3__.getLocal)('gram-dependencies');
- if (dependencies.length == 0) return;
+ var customScript = (0,_helpers_index__WEBPACK_IMPORTED_MODULE_3__.getLocal)('gjs-scripts'); // Custom scripts
- var _iterator4 = _createForOfIteratorHelper(dependencies),
+ var _iterator4 = _createForOfIteratorHelper(customScript),
_step4;
try {
for (_iterator4.s(); !(_step4 = _iterator4.n()).done;) {
- var dp = _step4.value;
- var allScripts = doc.querySelectorAll(".".concat(dp.name, "-script"));
- allScripts.forEach(function (e) {
+ var custom = _step4.value;
+ var allCustomScripts = doc.querySelectorAll(".".concat(custom.name, "-script"));
+ allCustomScripts.forEach(function (e) {
return e.outerHTML = '';
});
}
@@ -1609,15 +1657,35 @@ var Gramateria = /*#__PURE__*/function () {
_iterator4.f();
}
+ customScript = customScript.filter(function (c) {
+ return c.name !== dependency;
+ });
+ (0,_helpers_index__WEBPACK_IMPORTED_MODULE_3__.addLocal)('gjs-scripts', customScript); // Dependencies / plugins
+
+ var dependencies = (0,_helpers_index__WEBPACK_IMPORTED_MODULE_3__.getLocal)('gram-dependencies');
+ if (dependencies.length == 0) return;
+
+ var _iterator5 = _createForOfIteratorHelper(dependencies),
+ _step5;
+
+ try {
+ for (_iterator5.s(); !(_step5 = _iterator5.n()).done;) {
+ var dp = _step5.value;
+ var allScripts = doc.querySelectorAll(".".concat(dp.name, "-script"));
+ allScripts.forEach(function (e) {
+ return e.outerHTML = '';
+ });
+ }
+ } catch (err) {
+ _iterator5.e(err);
+ } finally {
+ _iterator5.f();
+ }
+
dependencies = dependencies.filter(function (d) {
return d.name !== dependency;
});
(0,_helpers_index__WEBPACK_IMPORTED_MODULE_3__.addLocal)('gram-dependencies', dependencies);
- var customScript = (0,_helpers_index__WEBPACK_IMPORTED_MODULE_3__.getLocal)('gjs-scripts');
- customScript = customScript.filter(function (c) {
- return c.name !== dependency;
- });
- (0,_helpers_index__WEBPACK_IMPORTED_MODULE_3__.addLocal)('gjs-scripts', customScript);
}
}, {
key: "init",
diff --git a/template-demo.html b/template-demo.html
deleted file mode 100755
index 50bf72b..0000000
--- a/template-demo.html
+++ /dev/null
@@ -1,171 +0,0 @@
-
-
-
-
-
- \n \n
\n \n
\n \n \n
\n \n ![\"\"](\"https://res.cloudinary.com/dpnea22ek/image/upload/v1627660134/user1.png\")
\n
\n \n \n
\n Peter J. Lamy
\nSoftware Developer
\nLorem ipsum dolor sit amet, consectetur adipiscing tristique hendrerit laoreet.
\n \n\n \n
\n \n
\n \n \n
\n \n ![\"\"](\"https://res.cloudinary.com/dpnea22ek/image/upload/v1627660145/user4.png\")
\n
\n \n \n
\n June D. Smith
\nProduct Manager
\nLorem ipsum dolor sit amet, consectetur adipiscing tristique hendrerit laoreet.
\n \n\n \n
\n \n
\n \n \n
\n \n ![\"\"](\"https://res.cloudinary.com/dpnea22ek/image/upload/v1627660134/user3.png\")
\n
\n \n \n
\n Dianna C. Avila
\nGraphic Designer
\nLorem ipsum dolor sit amet, consectetur adipiscing tristique hendrerit laoreet.
\n \n\n \n
\n \n
\n \n \n
\n \n ![\"\"](\"https://res.cloudinary.com/dpnea22ek/image/upload/v1627660147/user2.png\")
\n
\n \n \n
\n Robert C. Young
\nWeb Designer
\nLorem ipsum dolor sit amet, consectetur adipiscing tristique hendrerit laoreet.
\n \n
-
-
-
-
-
-
-
- 
-
-
-
-
-
-
- -
- -
Parallax Template
-
-
- A modern responsive front-end framework based on Material Design
-
- Get Started
-
- - -
-
-
-
-
-
-
-
-
-
-
-
-
-
- flash_on
-Speeds up development
- -We did most of the heavy lifting for you to provide a default stylings that incorporate our custom components. Additionally, we refined animations and transitions to provide a smoother experience for developers.
-
-
-
-
-
- group
-User Experience Focused
- -By utilizing elements and principles of Material Design, we were able to create a framework that incorporates components and animations that provide more feedback to users. Additionally, a single underlying responsive system across all platforms allow for a more unified user experience.
-
-
-
-
- settings
-Easy to work with
- -We have provided detailed documentation as well as specific code examples to help new users get started. We are also always open to feedback and can answer any questions a user may have about Materialize.
-
- 
-
-
-
-
-
-
-
-
- A modern responsive front-end framework based on Material Design
-
-
-
-
-
-
-
-
-
-
-
-
- -
About Us
-Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam scelerisque id nunc nec volutpat. Etiam pellentesque tristique arcu, non consequat magna fermentum ac. Cras ut ultricies eros. Maecenas eros justo, ullamcorper a sapien id, viverra ultrices eros. Morbi sem neque, posuere et pretium eget, bibendum sollicitudin lacus. Aliquam eleifend sollicitudin diam, eu mattis nisl maximus sed. Nulla imperdiet semper molestie. Morbi massa odio, condimentum sed ipsum ac, gravida ultrices erat. Nullam eget dignissim mauris, non tristique erat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;
-
- 
-
-
-
-
-
-
-
-
-
-
-
- A modern responsive front-end framework based on Material Design
-