├── readme.md ├── index.html └── inky-foundation.js /readme.md: -------------------------------------------------------------------------------- 1 | | Inky | Foundation Flex Grid | 2 | | ------------- | ------------- | 3 | | https://foundation.zurb.com/emails/docs/wrapper.html | | 4 | | https://foundation.zurb.com/emails/docs/grid.html#container | | 5 | | class="large-offset-3" | class="large-offset-3" | 6 | | class="collapse" | medium-uncollapse large-collapse | 7 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Basic Plugin 5 | 6 | 7 | 8 | 9 | 17 |
18 |
19 |
6 columns
20 |
6 columns
21 |
22 |
23 |
12/6/4 columns
24 |
12/6/8 columns
25 |
26 |
27 |
28 |
29 |
30 |
31 | 32 | 33 | 37 | 38 | 45 | 46 | -------------------------------------------------------------------------------- /inky-foundation.js: -------------------------------------------------------------------------------- 1 | (function($) { 2 | //http://stefangabos.ro/jquery/jquery-plugin-boilerplate-revisited/ 3 | $.inkyFoundation = function(element, options) { 4 | 5 | var defaults = { 6 | foo: 'bar', 7 | onFoo: function() {} 8 | } 9 | 10 | var plugin = this; 11 | 12 | plugin.settings = {} 13 | 14 | var $element = $(element), 15 | element = element, 16 | $clone = $(element).clone(); 17 | 18 | plugin.init = function() { 19 | plugin.settings = $.extend({}, defaults, options); 20 | foo_private_method(); 21 | } 22 | 23 | 24 | plugin.convert_to_inky = function() { 25 | $clone.find(".columns").replaceTag("",true); 26 | $clone.find(".columns").removeClass("columns"); 27 | $clone.find(".column").replaceTag("",true); 28 | $clone.find(".column").removeClass("column"); 29 | $clone.find(".row").replaceTag("",true); 30 | $clone.find(".row").removeClass("row"); 31 | $clone.find("br").replaceTag("",true); 32 | 33 | $clone.find('*[class*="small-"],*[class*="large-"]').each(function(index,element){ 34 | var self = this; 35 | var class_list = $(self).attr('class').split(/\s+/); 36 | var matched_classes = class_list.filter(function(css_class){ 37 | var patt = /^(small|large)-\d+$/; 38 | var res = patt.test(css_class); 39 | return res; 40 | }); 41 | matched_classes.forEach(function(css_class){ 42 | var split_string = css_class.split("-"); 43 | $(self).attr(split_string[0],split_string[1]); 44 | $(self).removeClass(css_class); 45 | }); 46 | }); 47 | 48 | $clone.find('*[class=""]').removeAttr('class'); 49 | return $clone.wrapAll("
").parent().html(); 50 | } 51 | 52 | var foo_private_method = function() { 53 | } 54 | 55 | plugin.init(); 56 | 57 | } 58 | 59 | $.fn.inkyFoundation = function(options) { 60 | 61 | return this.each(function() { 62 | if (undefined == $(this).data('inkyFoundation')) { 63 | var plugin = new $.inkyFoundation(this, options); 64 | $(this).data('inkyFoundation', plugin); 65 | } 66 | }); 67 | 68 | } 69 | 70 | // https://stackoverflow.com/a/20469901/2000485 71 | $.extend({ 72 | replaceTag: function (currentElem, newTagObj, keepProps) { 73 | var $currentElem = $(currentElem); 74 | var i, $newTag = $(newTagObj).clone(); 75 | if (keepProps) { 76 | newTag = $newTag[0]; 77 | $(newTag).attr("class", $currentElem.attr("class")); 78 | var attributes = $currentElem.prop("attributes"); 79 | $.each(attributes, function() { 80 | $(newTag).attr(this.name, this.value); 81 | }); 82 | } 83 | $currentElem.wrapAll($newTag); 84 | // Handle empty elements - current element was within converted element when there wasn't anything to unwrap 85 | if($currentElem.contents().length > 0){ 86 | $currentElem.contents().unwrap(); 87 | } 88 | else{ 89 | $currentElem.remove(); 90 | } 91 | 92 | return this; 93 | } 94 | }); 95 | 96 | $.fn.extend({ 97 | replaceTag: function (newTagObj, keepProps) { 98 | return this.each(function() { 99 | jQuery.replaceTag(this, newTagObj, keepProps); 100 | }); 101 | } 102 | }); 103 | 104 | })(jQuery); --------------------------------------------------------------------------------