]> git.ipfire.org Git - thirdparty/foundation/foundation-emails.git/commitdiff
projects / thirdparty / foundation / foundation-emails.git / commitdiff
? search:
summary | shortlog | log | commit | commitdiff | tree
raw | patch | inline | side by side (parent: 8cbb23d)
Changes to gulpfile so that work can be done on the html parser. Basic syntax layout...
authorJeanie Chung <jeanie.chung@gmail.com>
Fri, 23 Jan 2015 21:34:51 +0000 (13:34 -0800)
committerJeanie Chung <jeanie.chung@gmail.com>
Fri, 23 Jan 2015 21:34:51 +0000 (13:34 -0800)
gulpfile.js patch | blob | blame | history
html/index.html patch | blob | blame | history
js/components/col.js [new file with mode: 0644] patch | blob
js/components/row.js [new file with mode: 0644] patch | blob
js/components/row/row.html [deleted file] patch | blob | blame | history
js/components/row/row.js [deleted file] patch | blob | blame | history
js/components/table.js [new file with mode: 0644] patch | blob

diff --git a/gulpfile.js b/gulpfile.js
index 118aa0cc8f8903a0efa87be5da244e7cef64b67a..d862bf5dfc451d00ad0265ce702a67eb20710353 100644 (file)
--- a/gulpfile.js
+++ b/gulpfile.js
@@ -51,6 +51,11 @@ gulp.task('clean:html', function(cb) {
   rimraf('./build/html', cb);
 });
 
+// Clean the JS directory
+gulp.task('clean:js', function(cb) {
+  rimraf('./build/js', cb);
+})
+
 // 4. STYLESHEETS
 // - - - - - - - - - - - - - - -
 
@@ -114,19 +119,22 @@ gulp.task('jquery', function() {
     .pipe(gulp.dest(dirs.build + '/js/'));
 });
 
-// Concat all js files
-gulp.task('js', ['jquery'], function() {
-  gulp.src(dirs.js)
-    .pipe(concat('main.js'))
+gulp.task('inky-prime', function() {
+  return gulp.src(dirs.js)
+    .pipe(concat('inky-prime.js'))
     .pipe(gulp.dest(dirs.build + '/js/'))
-    .pipe(connect.reload());
+    .pipe(connect.reload());  
+})
+
+gulp.task('js', ['clean:js', 'jquery'], function() {
+  gulp.start('inky-prime');
 });
 
 // 7. GO FORTH AND BUILD
 // - - - - - - - - - - - - - - -
 
 // Wipes build folder, then compiles SASS, then minifies and copies HTML
-gulp.task('build', ['clean', 'sass'], function() {
+gulp.task('build', ['clean', 'sass', 'js'], function() {
   gulp.start('minify-html');
 });
 
diff --git a/html/index.html b/html/index.html
index 73448f567766ca2bf20b5ffb3a2bc2858a927daf..c3b431c51c7800aae1b03ff8eee2c0244dc2d982 100644 (file)
--- a/html/index.html
+++ b/html/index.html
@@ -2,7 +2,7 @@
 <head>
   <link rel="stylesheet" type="text/css" href="css/ink.css">
   <script type="text/javascript" src="js/jquery.js"></script>
-  <script type="text/javascript" src="js/main.js"></script>
+  <script type="text/javascript" src="js/inky-prime.js"></script>
 </head>
  
 <body>
@@ -11,16 +11,30 @@
     <p>This is an email.</p>
     <div class="inky loaded"></div>
   </div>
+  <container>
+    <row>
+      <column class="four">
+        four col
+        <div class="bloop">
+        bloop 
+        </div>
+      </column>
+      <column class="eight">eight col</column>
+    </row>
+  </container>
 
+  <container>
+    <row>
+      <column class="two">
+        two col
+        </div>
+      </column>
+      <column class="eight">eight col</column>
+      <column class="two">two col</column>
+    </row>
+  </container>
 
-      <table class="row">
-        <tr>
-          <td class="wrapper">
-
-          </td>
-        </tr>
-      </table>
-
-      <row></row>
+  <container>empty container</container>
+  <row>empty row</row>
 </body>
 </html>
\ No newline at end of file
diff --git a/js/components/col.js b/js/components/col.js
new file mode 100644 (file)
index 0000000..0d11fc8
--- /dev/null
+++ b/js/components/col.js
@@ -0,0 +1,29 @@
+// Columns
+
+// TODO: Make private function
+
+var createCol = function(obj) {
+  var output = '';
+
+  $.each(obj, function(v,k) {
+    var temp = ''
+    var contents = $(this).html();
+    var colClass = 'columns ' + $(this).attr('class');
+
+    if (v !== obj.length - 1) {
+      temp = '<td class="wrapper">' 
+              +'<table class="' + colClass + '">'
+              +'<tr><td>'
+              + contents +'</tr></td></table></td>';
+    } else {
+      temp = '<td class="wrapper last">' 
+              +'<table class="' + colClass + '">'
+              +'<tr><td>'
+              + contents +'</tr></td></table></td>';
+    }   
+
+    output += temp;
+  });
+
+  return output;
+};
diff --git a/js/components/row.js b/js/components/row.js
new file mode 100644 (file)
index 0000000..6f8f35e
--- /dev/null
+++ b/js/components/row.js
@@ -0,0 +1,23 @@
+// Rows
+
+$(document).on('ready', function() {
+  $('row').each(function() {
+    var contents = $(this).html();
+    var html = $.parseHTML( contents );
+
+    // find a better way to detect empty row
+    // or will we ever have an empty row?
+    if (html[0].nodeName !== '#text') {
+      contents = createCol(html);
+    }
+
+    $(this).empty().html('<tr>' + contents + '</tr>');
+    $(this).replaceWith(function() {
+      return $('<table/>', {
+        class: 'row',
+        html: this.innerHTML
+      });
+    });
+
+  }); 
+});
diff --git a/js/components/row/row.html b/js/components/row/row.html
deleted file mode 100644 (file)
index 2f62b38..0000000
--- a/js/components/row/row.html
+++ /dev/null
@@ -1 +0,0 @@
-row
\ No newline at end of file
diff --git a/js/components/row/row.js b/js/components/row/row.js
deleted file mode 100644 (file)
index e69de29..0000000
diff --git a/js/components/table.js b/js/components/table.js
new file mode 100644 (file)
index 0000000..1c26570
--- /dev/null
+++ b/js/components/table.js
@@ -0,0 +1,17 @@
+// Table Main Body
+
+$(document).on('ready', function() {
+
+  $('container').each(function() {
+    var contents = $(this).html();
+    $(this).empty().html('<tbody><tr><td>' + contents + '</td></tr></tbody>');
+
+    $(this).replaceWith(function() {
+      return $('<table/>', {
+        class: 'container',
+        html: this.innerHTML
+      });
+    });
+
+  }); 
+});
Mirror of https://github.com/foundation/foundation-emails.git