From 7149d714eac46ca4562ba854848271badb89deab Mon Sep 17 00:00:00 2001 From: John Nguyen Date: Sun, 11 Dec 2016 15:57:26 -0800 Subject: [PATCH 1/6] Separate CSS attrs and tag attrs for iframe --- src/featherlight.js | 50 +++++++++++++++++++++++++++++++++------------ 1 file changed, 37 insertions(+), 13 deletions(-) diff --git a/src/featherlight.js b/src/featherlight.js index a48eff80..ebc511a2 100644 --- a/src/featherlight.js +++ b/src/featherlight.js @@ -54,21 +54,44 @@ return opened; }; - // structure({iframeMinHeight: 44, foo: 0}, 'iframe') - // #=> {min-height: 44} - var structure = function(obj, prefix) { - var result = {}, - regex = new RegExp('^' + prefix + '([A-Z])(.*)'); - for (var key in obj) { - var match = key.match(regex); - if (match) { - var dasherized = (match[1] + match[2].replace(/([A-Z])/g, '-$1')).toLowerCase(); - result[dasherized] = obj[key]; - } + var iframeStructure = { + // iframeStructure.css({iframeMinHeight: 44, foo: 0}, 'iframe') => {min-height: 44} + css: function(obj) { + return parseAttrs(obj, 'iframe'); + }, + // NOTE: List of available [iframe attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe). + attr: function(obj) { + var whiteList = ['allowfullscreen', 'frameborder', 'height', 'longdesc', + 'marginheight', 'marginwidth', 'name', 'referrerpolicy', 'scrolling', + 'sandbox', 'src', 'srcdoc', 'width'], + attrs = {}; + + whiteList.map(function(item) { + var attrValue = parseAttrs(obj, 'iframe')[item]; + + if (attrValue) { + attrs[item] = attrValue; + return attrs[item]; + } + }); + + return attrs; } - return result; }; +function parseAttrs(obj, prefix) { + var attrs = {}, + regex = new RegExp('^' + prefix + '([A-Z])(.*)'); + for (var key in obj) { + var match = key.match(regex); + if (match) { + var dasherized = (match[1] + match[2].replace(/([A-Z])/g, '-$1')).toLowerCase(); + attrs[dasherized] = obj[key]; + } + } + return attrs; +} + /* document wide key handler */ var eventMap = { keyup: 'onKeyUp', resize: 'onResize' }; @@ -384,7 +407,8 @@ var $content = $(' -

This Ligthbox was loaded using ajax

With little code, you can build lightboxes that use custom content loaded with ajax...

diff --git a/src/index.html b/src/index.html index 7904fa02..5af29d93 100644 --- a/src/index.html +++ b/src/index.html @@ -74,7 +74,8 @@

Featherlight.js The ultra slim lightbox.

Default Custom Styles Image - iFrame + iFrame + Ajax
@@ -155,8 +156,6 @@

Featherlight with custom styles

- -

This Ligthbox was loaded using ajax

With little code, you can build lightboxes that use custom content loaded with ajax...

From 8304a4d04a315b9a54c63472f11160449ccba786 Mon Sep 17 00:00:00 2001 From: John Nguyen Date: Sun, 11 Dec 2016 15:58:16 -0800 Subject: [PATCH 3/6] Add .editorconfig --- .editorconfig | 6 ++++++ 1 file changed, 6 insertions(+) create mode 100644 .editorconfig diff --git a/.editorconfig b/.editorconfig new file mode 100644 index 00000000..dd9908cb --- /dev/null +++ b/.editorconfig @@ -0,0 +1,6 @@ +root = true +[*] +end_of_line = lf +insert_final_newline = true +indent_style = tab +indent_size = 2 From a954df46264038e41e9e7b9474844f8d185c9193 Mon Sep 17 00:00:00 2001 From: John Nguyen Date: Sun, 11 Dec 2016 16:24:03 -0800 Subject: [PATCH 4/6] Add build and test to package.json scripts --- package.json | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/package.json b/package.json index 96cc6256..989161eb 100644 --- a/package.json +++ b/package.json @@ -62,5 +62,9 @@ "repository": { "type": "git", "url": "https://github.com/noelboss/featherlight.git" + }, + "scripts": { + "build": "grunt", + "test": "grunt test" } } From ef143e8586b4bcaf8e454a1653ac4efea9f7906f Mon Sep 17 00:00:00 2001 From: John Nguyen Date: Mon, 12 Dec 2016 07:54:28 -0800 Subject: [PATCH 5/6] Fix indentation, use jQuery.each instead of map --- src/featherlight.js | 24 ++++++++++++------------ 1 file changed, 12 insertions(+), 12 deletions(-) diff --git a/src/featherlight.js b/src/featherlight.js index ebc511a2..7917c64e 100644 --- a/src/featherlight.js +++ b/src/featherlight.js @@ -66,31 +66,31 @@ 'sandbox', 'src', 'srcdoc', 'width'], attrs = {}; - whiteList.map(function(item) { + $.each(whiteList, function(index, item) { var attrValue = parseAttrs(obj, 'iframe')[item]; if (attrValue) { attrs[item] = attrValue; return attrs[item]; - } + } }); return attrs; } }; -function parseAttrs(obj, prefix) { - var attrs = {}, - regex = new RegExp('^' + prefix + '([A-Z])(.*)'); - for (var key in obj) { - var match = key.match(regex); - if (match) { - var dasherized = (match[1] + match[2].replace(/([A-Z])/g, '-$1')).toLowerCase(); - attrs[dasherized] = obj[key]; + function parseAttrs(obj, prefix) { + var attrs = {}, + regex = new RegExp('^' + prefix + '([A-Z])(.*)'); + for (var key in obj) { + var match = key.match(regex); + if (match) { + var dasherized = (match[1] + match[2].replace(/([A-Z])/g, '-$1')).toLowerCase(); + attrs[dasherized] = obj[key]; + } } + return attrs; } - return attrs; -} /* document wide key handler */ var eventMap = { keyup: 'onKeyUp', resize: 'onResize' }; From 17e1253021df14527220e0e14399b82db90287db Mon Sep 17 00:00:00 2001 From: John Nguyen Date: Mon, 12 Dec 2016 08:14:11 -0800 Subject: [PATCH 6/6] Add tests for iframe attributes --- test/featherlight_test.js | 21 +++++++++++++++++++++ 1 file changed, 21 insertions(+) diff --git a/test/featherlight_test.js b/test/featherlight_test.js index e6cf0778..631a2650 100644 --- a/test/featherlight_test.js +++ b/test/featherlight_test.js @@ -409,6 +409,27 @@ var stubAjaxLoad = function(content) { expect($('.featherlight iframe')).to.have.css('width').equal('323px'); expect($('.featherlight iframe')).to.have.css('min-height').equal('212px'); }); + + describe('generates an iframe with tag attributes', function() { + it('adds `allowfullescreen` attribute', function() { + $('').featherlight().click(); + + expect($('.featherlight iframe')).to.have.attr('src').equal('http://www.apple.com'); + expect($('.featherlight iframe')).to.have.attr('allowfullscreen').equal('true'); + }); + + it('does not add invalid attributes', function() { + $('').featherlight().click(); + + expect($('.featherlight iframe')).to.have.attr('src').equal('http://www.apple.com'); + expect($('.featherlight iframe')).to.not.have.css('display').equal('flex'); + expect($('.featherlight iframe')).to.not.have.attr('display').equal('flex'); + expect($('.featherlight iframe')).to.not.have.attr('invalid').equal('foo'); + }); + }); }); });