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

Jump to bottom

[Waiting for JsBarcode 4] New options from element #107

Open
wants to merge 4 commits into
base: master
Choose a base branch
from
Open

[Waiting for JsBarcode 4] New options from element #107

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
4143d8a
Rewrite of getOptionsFromElement
lindell Sep 27, 2016
89be5f8
Now uses dash to convert camel case properties in HTML elements
lindell Sep 28, 2016
8124593
Updated initTest
lindell Sep 28, 2016
6393368
Updated readme to reflect changes to html properties
lindell Sep 28, 2016
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
4 changes: 2 additions & 2 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -97,8 +97,8 @@ Use any `jsbarcode-*` or `data-*` as attributes where `*` is any option.
<svg class="barcode"
jsbarcode-format="upc"
jsbarcode-value="123456789012"
jsbarcode-textmargin="0"
jsbarcode-fontoptions="bold">
jsbarcode-text-margin="0"
jsbarcode-font-options="bold">
</svg>
````

Expand Down
30 changes: 15 additions & 15 deletions src/help/getOptionsFromElement.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,25 +1,25 @@
import optionsFromStrings from "./optionsFromStrings.js";
import defaults from "../options/defaults.js";

function getOptionsFromElement(element){
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

As a suggestion:

function getOptionsFromElement(element) {
	const options = {};
	const attributes = element.attributes;

	for (let i = 0; i < attributes.length; i++) {
		const match = attributes[i].name
			.match(/(jsbarcode|data)-([A-Za-z0-9-]+)/i);

		if (match) {
			// Transforms foo-bar to fooBar
			const property = match[2].replace(/-[a-zA-Z]/, (val) => val[1].toUpperCase());
			options[property] = attributes[i].value;
		}
	}

	// Since all attributes are string they need to be converted to integers
	return optionsFromStrings(options);
}

var options = {};
for(var property in defaults){
if(defaults.hasOwnProperty(property)){
// jsbarcode-*
if(element.hasAttribute("jsbarcode-" + property.toLowerCase())){
options[property] = element.getAttribute("jsbarcode-" + property.toLowerCase());
}

// data-*
if(element.hasAttribute("data-" + property.toLowerCase())){
options[property] = element.getAttribute("data-" + property.toLowerCase());
}

var attributes = element.attributes;
for(var i = 0; i < attributes.length; i++){
var name = attributes[i].name;
var value = attributes[i].value;

var match = name.match(/(jsbarcode|data)-([A-Za-z0-9-]+)/i);
if(match){
var property = match[2];

// Transforms foo-bar to fooBar
property = property.replace(/-[a-zA-Z]/, (val) => val[1].toUpperCase());

options[property] = value;
}
}

options["value"] = element.getAttribute("jsbarcode-value") || element.getAttribute("data-value");

// Since all atributes are string they need to be converted to integers
// Since all atributes are string they need to be converted to integers
options = optionsFromStrings(options);

return options;
Expand Down
15 changes: 9 additions & 6 deletions test/browser/initTest.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,15 +24,18 @@
JsBarcode("#barcode1").init();
$("#barcode2").JsBarcode().init();
JsBarcode("#barcode3").init();

JsBarcode(".barcode4").init(); // Should not give errors
}
</script>
</head>
<body>
<svg class="barcode"
jsbarcode-value="123456789010"
jsbarcode-format="ean13"
jsbarcode-textMargin="0"
jsbarcode-lineColor="#e00">
jsbarcode-text-margin="0"
jsbarcode-flat="true"
jsbarcode-line-color="#e00">
</svg>

<img class="barcode" data-value="Test"/>
Expand All @@ -48,8 +51,8 @@
<svg class="jqbarcode"
jsbarcode-value="123456789010"
jsbarcode-format="ean13"
jsbarcode-textMargin="0"
jsbarcode-lineColor="#e00">
jsbarcode-text-margin="0"
jsbarcode-line-color="#e00">
</svg>

<img class="jqbarcode" data-value="Test"/>
Expand All @@ -65,8 +68,8 @@
<svg id="barcode1"
jsbarcode-value="123456789010"
jsbarcode-format="ean13"
jsbarcode-textMargin="0"
jsbarcode-lineColor="#e00">
jsbarcode-text-margin="0"
jsbarcode-line-color="#e00">
</svg>

<img id="barcode2" data-value="Test"/>
Expand Down