Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Update deps #142

Open
wants to merge 15 commits into
base: develop
Choose a base branch
from
Open

Update deps #142

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
15 commits
Select commit Hold shift + click to select a range
c24f611
Merge branch 'develop'
DanielRuf Aug 2, 2020
84e4f5f
added accessibility attrs
kelseythejackson May 16, 2022
f43b2e3
updated distributed file
kelseythejackson May 16, 2022
1455502
updated columns and tests
kelseythejackson May 16, 2022
0bacb8f
updated columns and tests
kelseythejackson May 16, 2022
9b21064
Fix title and anchor
DanielRuf Sep 10, 2020
72b4cd6
Bump ini from 1.3.5 to 1.3.8
dependabot[bot] Dec 13, 2020
a75a583
Bump y18n from 3.2.1 to 3.2.2
dependabot[bot] Apr 1, 2021
907bff6
Bump lodash from 4.17.19 to 4.17.21
dependabot[bot] May 11, 2021
bee3b90
Bump hosted-git-info from 2.8.8 to 2.8.9
dependabot[bot] May 11, 2021
a3c5156
Bump path-parse from 1.0.6 to 1.0.7
dependabot[bot] Aug 12, 2021
63b0edc
Bump elliptic from 6.5.3 to 6.5.4
dependabot[bot] Oct 26, 2021
991170f
Bump bl from 1.2.2 to 1.2.3
dependabot[bot] Oct 26, 2021
16db406
Merge branch 'develop' of github.com:kelseythejackson/inky into develop
kelseythejackson May 16, 2022
dc08d82
updated deps
kelseythejackson May 18, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 1 addition & 9 deletions dist/inky-browser.js
View file
Open in desktop

Large diffs are not rendered by default.

237 changes: 157 additions & 80 deletions lib/componentFactory.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,171 +1,248 @@
var format = require('util').format;
var $ = require('cheerio');
var getAttrs = require('./util/getAttrs');
var format = require("util").format;
var $ = require("cheerio");
var getAttrs = require("./util/getAttrs");

/**
* Returns output for desired custom element
* @param {object} element - Element as a Cheerio object.
* @returns {string} HTML converted from a custom element to table syntax.
*/
module.exports = function(element) {
module.exports = function (element) {
var inner = element.html();
var attrs = getAttrs(element);

switch (element[0].name) {
// <hr>
case this.components.hLine:
var classes = ['h-line'];
if (element.attr('class')) {
classes = classes.concat(element.attr('class').split(' '));
}
return format('<table class="%s"><tr><th>&nbsp;</th></tr></table>', classes.join(' '))
var classes = ["h-line"];
if (element.attr("class")) {
classes = classes.concat(element.attr("class").split(" "));
}
return format(
'<table class="%s" role="presentation"><tr><th>&nbsp;</th></tr></table>',
classes.join(" ")
);

// <column>
case this.components.columns:
return this.makeColumn(element, 'columns');
return this.makeColumn(element, "columns");

// <row>
case this.components.row:
var classes = ['row'];
if (element.attr('class')) {
classes = classes.concat(element.attr('class').split(' '));
var classes = ["row"];
if (element.attr("class")) {
classes = classes.concat(element.attr("class").split(" "));
}

return format('<table %s class="%s"><tbody><tr>%s</tr></tbody></table>', attrs, classes.join(' '), inner);
return format(
'<table %s class="%s" role="presentation"><tbody><tr>%s</tr></tbody></table>',
attrs,
classes.join(" "),
inner
);

// <button>
case this.components.button:
var expander = '';
var expander = "";

// Prepare optional target attribute for the <a> element
var target = '';
if (element.attr('target')) {
target = ' target=' + element.attr('target');
var target = "";
if (element.attr("target")) {
target = " target=" + element.attr("target");
}

// If we have the href attribute we can create an anchor for the inner of the button;
if (element.attr('href')) {
inner = format('<a %s href="%s"%s>%s</a>', attrs, element.attr('href'), target, inner);
if (element.attr("href")) {
inner = format(
'<a %s href="%s"%s>%s</a>',
attrs,
element.attr("href"),
target,
inner
);
}

// If the button is expanded, it needs a <center> tag around the content
if (element.hasClass('expand') || element.hasClass('expanded')) {
inner = format('<center>%s</center>', inner);
if (element.hasClass("expand") || element.hasClass("expanded")) {
inner = format("<center>%s</center>", inner);
expander = '\n<td class="expander"></td>';
}

// The .button class is always there, along with any others on the <button> element
var classes = ['button'];
if (element.attr('class')) {
classes = classes.concat(element.attr('class').split(' '));
var classes = ["button"];
if (element.attr("class")) {
classes = classes.concat(element.attr("class").split(" "));
}

return format('<table class="%s"><tbody><tr><td><table><tbody><tr><td>%s</td></tr></tbody></table></td>%s</tr></tbody></table>', classes.join(' '), inner, expander);
return format(
'<table class="%s" role="presentation"><tbody><tr><td><table><tbody><tr><td>%s</td></tr></tbody></table></td>%s</tr></tbody></table>',
classes.join(" "),
inner,
expander
);

// <container>
case this.components.container:
var classes = ['container'];
if (element.attr('class')) {
classes = classes.concat(element.attr('class').split(' '));
var classes = ["container"];
if (element.attr("class")) {
classes = classes.concat(element.attr("class").split(" "));
}

return format('<table %s align="center" class="%s"><tbody><tr><td>%s</td></tr></tbody></table>', attrs, classes.join(' '), inner);
return format(
'<table %s align="center" class="%s" role="presentation"><tbody><tr><td>%s</td></tr></tbody></table>',
attrs,
classes.join(" "),
inner
);

// <inky>
case this.components.inky:
return '<tr><td><img src="https://raw.githubusercontent.com/arvida/emoji-cheat-sheet.com/master/public/graphics/emojis/octopus.png" /></tr></td>';

// <block-grid>
case this.components.blockGrid:
var classes = ['block-grid', 'up-'+element.attr('up')];
if (element.attr('class')) {
classes = classes.concat(element.attr('class').split(' '));
var classes = ["block-grid", "up-" + element.attr("up")];
if (element.attr("class")) {
classes = classes.concat(element.attr("class").split(" "));
}
return format('<table class="%s"><tbody><tr>%s</tr></tbody></table>', classes.join(' '), inner);
return format(
'<table class="%s"><tbody><tr>%s</tr></tbody></table>',
classes.join(" "),
inner
);

// <menu>
case this.components.menu:
var classes = ['menu'];
if (element.attr('class')) {
classes = classes.concat(element.attr('class').split(' '));
var classes = ["menu"];
if (element.attr("class")) {
classes = classes.concat(element.attr("class").split(" "));
}
return format('<table %s class="%s"><tbody><tr><td><table><tbody><tr>%s</tr></tbody></table></td></tr></tbody></table>', attrs, classes.join(' '), inner);
return format(
'<table %s class="%s" role="presentation"><tbody><tr><td><table><tbody><tr>%s</tr></tbody></table></td></tr></tbody></table>',
attrs,
classes.join(" "),
inner
);

// <item>
case this.components.menuItem:
// Prepare optional target attribute for the <a> element
var target = '';
if (element.attr('target')) {
target = ' target=' + element.attr('target');
}
var classes = ['menu-item'];
if (element.attr('class')) {
classes = classes.concat(element.attr('class').split(' '));
}
return format('<th %s class="%s"><a href="%s"%s>%s</a></th>', attrs, classes.join(' '), element.attr('href'), target, inner);
var target = "";
if (element.attr("target")) {
target = " target=" + element.attr("target");
}
var classes = ["menu-item"];
if (element.attr("class")) {
classes = classes.concat(element.attr("class").split(" "));
}
return format(
'<th %s class="%s"><a href="%s"%s>%s</a></th>',
attrs,
classes.join(" "),
element.attr("href"),
target,
inner
);

// <center>
case this.components.center:
if (element.children().length > 0) {
element.children().each(function() {
$(this).attr('align', 'center');
$(this).addClass('float-center');
element.children().each(function () {
$(this).attr("align", "center");
$(this).addClass("float-center");
});
element.find('item, .menu-item').addClass('float-center');
element.find("item, .menu-item").addClass("float-center");
}

element.attr('data-parsed', '');
element.attr("data-parsed", "");

return format('%s', $.html(element, this.cheerioOpts));
return format("%s", $.html(element, this.cheerioOpts));

// <callout>
case this.components.callout:
var classes = ['callout-inner'];
if (element.attr('class')) {
classes = classes.concat(element.attr('class').split(' '));
var classes = ["callout-inner"];
if (element.attr("class")) {
classes = classes.concat(element.attr("class").split(" "));
}

return format('<table %s class="callout"><tbody><tr><th class="%s">%s</th><th class="expander"></th></tr></tbody></table>', attrs, classes.join(' '), inner);
return format(
'<table %s class="callout" role="presentation"><tbody><tr><th class="%s">%s</th><th class="expander"></th></tr></tbody></table>',
attrs,
classes.join(" "),
inner
);

// <spacer>
case this.components.spacer:
var classes = ['spacer'];
var classes = ["spacer"];
var size;
var html = '';
if (element.attr('class')) {
classes = classes.concat(element.attr('class').split(' '));
}
if (element.attr('size-sm') || element.attr('size-lg')) {
if (element.attr('size-sm')) {
size = (element.attr('size-sm'));
html += format('<table %s class="%s hide-for-large"><tbody><tr><td height="'+size+'" style="font-size:'+size+'px;line-height:'+size+'px;">&nbsp;</td></tr></tbody></table>', attrs);
var html = "";
if (element.attr("class")) {
classes = classes.concat(element.attr("class").split(" "));
}
if (element.attr("size-sm") || element.attr("size-lg")) {
if (element.attr("size-sm")) {
size = element.attr("size-sm");
html += format(
'<table %s class="%s hide-for-large" role="presentation"><tbody><tr><td height="' +
size +
'" style="font-size:' +
size +
"px;line-height:" +
size +
'px;">&nbsp;</td></tr></tbody></table>',
attrs
);
}
if (element.attr('size-lg')) {
size = (element.attr('size-lg'));
html += format('<table %s class="%s show-for-large"><tbody><tr><td height="'+size+'" style="font-size:'+size+'px;line-height:'+size+'px;">&nbsp;</td></tr></tbody></table>', attrs);
if (element.attr("size-lg")) {
size = element.attr("size-lg");
html += format(
'<table %s class="%s show-for-large" role="presentation"><tbody><tr><td height="' +
size +
'" style="font-size:' +
size +
"px;line-height:" +
size +
'px;">&nbsp;</td></tr></tbody></table>',
attrs
);
}
} else {
size = (element.attr('size')) || 16;
html += format('<table %s class="%s"><tbody><tr><td height="'+size+'" style="font-size:'+size+'px;line-height:'+size+'px;">&nbsp;</td></tr></tbody></table>', attrs);
size = element.attr("size") || 16;
html += format(
'<table %s class="%s" role="presentation"><tbody><tr><td height="' +
size +
'" style="font-size:' +
size +
"px;line-height:" +
size +
'px;">&nbsp;</td></tr></tbody></table>',
attrs
);
}

if( element.attr('size-sm') && element.attr('size-lg') ) {
return format(html, classes.join(' '), classes.join(' '), inner);
if (element.attr("size-sm") && element.attr("size-lg")) {
return format(html, classes.join(" "), classes.join(" "), inner);
}

return format(html, classes.join(' '), inner);
return format(html, classes.join(" "), inner);

// <wrapper>
case this.components.wrapper:
var classes = ['wrapper'];
if (element.attr('class')) {
classes = classes.concat(element.attr('class').split(' '));
var classes = ["wrapper"];
if (element.attr("class")) {
classes = classes.concat(element.attr("class").split(" "));
}

return format('<table %s class="%s" align="center"><tbody><tr><td class="wrapper-inner">%s</td></tr></tbody></table>', attrs, classes.join(' '), inner);
return format(
'<table %s class="%s" align="center" role="presentation"><tbody><tr><td class="wrapper-inner">%s</td></tr></tbody></table>',
attrs,
classes.join(" "),
inner
);

default:
// If it's not a custom component, return it as-is
return format('<tr><td>%s</td></tr>', $.html(element, this.cheerioOpts));
return format("<tr><td>%s</td></tr>", $.html(element, this.cheerioOpts));
}
}
};
2 changes: 1 addition & 1 deletion lib/makeColumn.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -46,7 +46,7 @@ module.exports = function(col) {
}

// Final HTML output
output = '<th class="%s" %s><table><tbody><tr><th>%s</th>%s</tr></tbody></table></th>';
output = '<th class="%s" %s><table role="presentation"><tbody><tr><th>%s</th>%s</tr></tbody></table></th>';

return format(output, classes.join(' '), attrs, inner, expander);
}
Loading