get quaggaJS barcode results on input field - javascript

I am a newbie to HTML/Javascript Language.
I am trying to implement quaggaJS barcode scanner Using the live-stream into my HTML page. its working fine but what i want is to get the result on input field.
Below is my input field:
<input class="form-control" type="number" name="id" required autofocus>
This is live_w_locator.js file from quaggaJS:
$(function() {
var resultCollector = Quagga.ResultCollector.create({
capture: true,
capacity: 20,
blacklist: [{
code: "WIWV8ETQZ1", format: "code_93"
}, {
code: "EH3C-%GU23RK3", format: "code_93"
}, {
code: "O308SIHQOXN5SA/PJ", format: "code_93"
}, {
code: "DG7Q$TV8JQ/EN", format: "code_93"
}, {
code: "VOFD1DB5A.1F6QU", format: "code_93"
}, {
code: "4SO64P4X8 U4YUU1T-", format: "code_93"
}],
filter: function(codeResult) {
// only store results which match this constraint
// e.g.: codeResult
return true;
}
});
var App = {
init: function() {
var self = this;
Quagga.init(this.state, function(err) {
if (err) {
return self.handleError(err);
}
//Quagga.registerResultCollector(resultCollector);
App.attachListeners();
App.checkCapabilities();
Quagga.start();
});
},
handleError: function(err) {
console.log(err);
},
checkCapabilities: function() {
var track = Quagga.CameraAccess.getActiveTrack();
var capabilities = {};
if (typeof track.getCapabilities === 'function') {
capabilities = track.getCapabilities();
}
this.applySettingsVisibility('zoom', capabilities.zoom);
this.applySettingsVisibility('torch', capabilities.torch);
},
updateOptionsForMediaRange: function(node, range) {
console.log('updateOptionsForMediaRange', node, range);
var NUM_STEPS = 6;
var stepSize = (range.max - range.min) / NUM_STEPS;
var option;
var value;
while (node.firstChild) {
node.removeChild(node.firstChild);
}
for (var i = 0; i <= NUM_STEPS; i++) {
value = range.min + (stepSize * i);
option = document.createElement('option');
option.value = value;
option.innerHTML = value;
node.appendChild(option);
}
},
applySettingsVisibility: function(setting, capability) {
// depending on type of capability
if (typeof capability === 'boolean') {
var node = document.querySelector('input[name="settings_' + setting + '"]');
if (node) {
node.parentNode.style.display = capability ? 'block' : 'none';
}
return;
}
if (window.MediaSettingsRange && capability instanceof window.MediaSettingsRange) {
var node = document.querySelector('select[name="settings_' + setting + '"]');
if (node) {
this.updateOptionsForMediaRange(node, capability);
node.parentNode.style.display = 'block';
}
return;
}
},
initCameraSelection: function(){
var streamLabel = Quagga.CameraAccess.getActiveStreamLabel();
return Quagga.CameraAccess.enumerateVideoDevices()
.then(function(devices) {
function pruneText(text) {
return text.length > 30 ? text.substr(0, 30) : text;
}
var $deviceSelection = document.getElementById("deviceSelection");
while ($deviceSelection.firstChild) {
$deviceSelection.removeChild($deviceSelection.firstChild);
}
devices.forEach(function(device) {
var $option = document.createElement("option");
$option.value = device.deviceId || device.id;
$option.appendChild(document.createTextNode(pruneText(device.label || device.deviceId || device.id)));
$option.selected = streamLabel === device.label;
$deviceSelection.appendChild($option);
});
});
},
attachListeners: function() {
var self = this;
self.initCameraSelection();
$(".controls").on("click", "button.stop", function(e) {
e.preventDefault();
Quagga.stop();
self._printCollectedResults();
});
$(".controls .reader-config-group").on("change", "input, select", function(e) {
e.preventDefault();
var $target = $(e.target),
value = $target.attr("type") === "checkbox" ? $target.prop("checked") : $target.val(),
name = $target.attr("name"),
state = self._convertNameToState(name);
console.log("Value of "+ state + " changed to " + value);
self.setState(state, value);
});
},
_printCollectedResults: function() {
var results = resultCollector.getResults(),
$ul = $("#result_strip ul.collector");
results.forEach(function(result) {
var $li = $('<li><div class="thumbnail"><div class="imgWrapper"><img /></div><div class="caption"><h4 class="code"></h4></div></div></li>');
$li.find("img").attr("src", result.frame);
$li.find("h4.code").html(result.codeResult.code + " (" + result.codeResult.format + ")");
$ul.prepend($li);
});
},
_accessByPath: function(obj, path, val) {
var parts = path.split('.'),
depth = parts.length,
setter = (typeof val !== "undefined") ? true : false;
return parts.reduce(function(o, key, i) {
if (setter && (i + 1) === depth) {
if (typeof o[key] === "object" && typeof val === "object") {
Object.assign(o[key], val);
} else {
o[key] = val;
}
}
return key in o ? o[key] : {};
}, obj);
},
_convertNameToState: function(name) {
return name.replace("_", ".").split("-").reduce(function(result, value) {
return result + value.charAt(0).toUpperCase() + value.substring(1);
});
},
detachListeners: function() {
$(".controls").off("click", "button.stop");
$(".controls .reader-config-group").off("change", "input, select");
},
applySetting: function(setting, value) {
var track = Quagga.CameraAccess.getActiveTrack();
if (track && typeof track.getCapabilities === 'function') {
switch (setting) {
case 'zoom':
return track.applyConstraints({advanced: [{zoom: parseFloat(value)}]});
case 'torch':
return track.applyConstraints({advanced: [{torch: !!value}]});
}
}
},
setState: function(path, value) {
var self = this;
if (typeof self._accessByPath(self.inputMapper, path) === "function") {
value = self._accessByPath(self.inputMapper, path)(value);
}
if (path.startsWith('settings.')) {
var setting = path.substring(9);
return self.applySetting(setting, value);
}
self._accessByPath(self.state, path, value);
console.log(JSON.stringify(self.state));
App.detachListeners();
Quagga.stop();
App.init();
},
inputMapper: {
inputStream: {
constraints: function(value){
if (/^(\d+)x(\d+)$/.test(value)) {
var values = value.split('x');
return {
width: {min: parseInt(values[0])},
height: {min: parseInt(values[1])}
};
}
return {
deviceId: value
};
}
},
numOfWorkers: function(value) {
return parseInt(value);
},
decoder: {
readers: function(value) {
if (value === 'ean_extended') {
return [{
format: "ean_reader",
config: {
supplements: [
'ean_5_reader', 'ean_2_reader'
]
}
}];
}
return [{
format: value + "_reader",
config: {}
}];
}
}
},
state: {
inputStream: {
type : "LiveStream",
constraints: {
width: {min: 640},
height: {min: 480},
facingMode: "environment",
aspectRatio: {min: 1, max: 2}
}
},
locator: {
patchSize: "medium",
halfSample: true
},
numOfWorkers: 2,
frequency: 10,
decoder: {
readers : [{
format: "code_128_reader",
config: {}
}]
},
locate: true
},
lastResult : null
};
App.init();
Quagga.onProcessed(function(result) {
var drawingCtx = Quagga.canvas.ctx.overlay,
drawingCanvas = Quagga.canvas.dom.overlay;
if (result) {
if (result.boxes) {
drawingCtx.clearRect(0, 0, parseInt(drawingCanvas.getAttribute("width")), parseInt(drawingCanvas.getAttribute("height")));
result.boxes.filter(function (box) {
return box !== result.box;
}).forEach(function (box) {
Quagga.ImageDebug.drawPath(box, {x: 0, y: 1}, drawingCtx, {color: "green", lineWidth: 2});
});
}
if (result.box) {
Quagga.ImageDebug.drawPath(result.box, {x: 0, y: 1}, drawingCtx, {color: "#00F", lineWidth: 2});
}
if (result.codeResult && result.codeResult.code) {
Quagga.ImageDebug.drawPath(result.line, {x: 'x', y: 'y'}, drawingCtx, {color: 'red', lineWidth: 3});
}
}
});
Quagga.onDetected(function(result) {
var code = result.codeResult.code;
if (App.lastResult !== code) {
App.lastResult = code;
var $node = null, canvas = Quagga.canvas.dom.image;
$node = $('<li><div class="thumbnail"><div class="imgWrapper"><img /></div><div class="caption"><h4 class="code"></h4></div></div></li>');
$node.find("img").attr("src", canvas.toDataURL());
$node.find("h4.code").html(code);
$("#result_strip ul.thumbnails").prepend($node);
}
});
});
Appreciate your help...Thank You

You can get the reference of your input control and set its value to the code variable in the onDetected code block.
Quagga.onDetected(function(result) {
var code = result.codeResult.code;
document.getElementById('MyInput').value = code;
});

Related

Sort list of mixed alpha-numeric strings with dots?

I've got an array of objects that I need to sort using the tab property.
All the values are alphanumeric strings.
I've setup an example to show you what I have so far, which I can't seem to get working.
I need my list sorted like doc1, doc2, doc3... doc12, doc13, doc14
// Sort set of values both lexicographically and numerically
function myComparator({ tab: value1 }, { tab: value2 }) {
const _value1 = parseFloat(value1);
const _value2 = parseFloat(value2);
if (_value1 - _value2 === 0) {
return (value1 > value2) ? 1 : -1;
} else {
return _value1 - _value2;
}
}
const myArray = [
{ doc: 'Doc1', tab: '7' },
{ doc: 'Doc2', tab: '7A' },
{ doc: 'Doc3', tab: '7B' },
{ doc: 'Doc4', tab: '7.0001' },
{ doc: 'Doc5', tab: '7.01' },
{ doc: 'Doc6', tab: '7.01A' },
{ doc: 'Doc7', tab: '7.1' },
{ doc: 'Doc8', tab: '7.1A' },
{ doc: 'Doc9', tab: '7.2' },
{ doc: 'Doc10', tab: '7.3' },
{ doc: 'Doc11', tab: '7.10' },
{ doc: 'Doc12', tab: '7.11' },
{ doc: 'Doc13', tab: '7.20' },
{ doc: 'Doc14', tab: '7.34' },
];
myArray.sort(myComparator);
let html = '';
for (let i = 0; i < myArray.length; i++) {
html += '<li>' + myArray[i].doc + '</li>';
}
document.getElementById('results').innerHTML = html;
<ul id="results" />
Pulled together numerous other code snippets to find a solution. See below:
function customSort(data, key, order) {
function isNumber(v) {
return (+v).toString() === v;
}
function isRoman(s) {
// http://stackoverflow.com/a/267405/1447675
return /^M{0,4}(CM|CD|D?C{0,3})(XC|XL|L?X{0,3})(IX|IV|V?I{0,3})$/i.test(s);
}
function parseRoman(s) {
var val = { M: 1000, D: 500, C: 100, L: 50, X: 10, V: 5, I: 1 };
return s.toUpperCase().split('').reduce(function (r, a, i, aa) {
return val[a] < val[aa[i + 1]] ? r - val[a] : r + val[a];
}, 0);
}
var sort = {
asc: function (a, b) {
var i = 0,
l = Math.min(a.value.length, b.value.length);
while (i < l && a.value[i] === b.value[i]) {
i++;
}
if (i === l) {
return a.value.length - b.value.length;
}
if (isNumber(a.value[i]) && isNumber(b.value[i])) {
return a.value[i] - b.value[i];
}
if (isRoman(a.value[i]) && isRoman(b.value[i])) {
return parseRoman(a.value[i]) - parseRoman(b.value[i]);
}
return a.value[i].localeCompare(b.value[i]);
},
desc: function (a, b) {
return sort.asc(b, a);
}
};
var mapped = data.map(function (el, i) {
var string = el[key].replace(/\d(?=[a-z])|[a-z](?=\.)/gi, '$&. .'),
regex = /(\d+)|([^0-9.]+)/g,
m,
parts = [];
while ((m = regex.exec(string)) !== null) {
parts.push(m[0]);
}
return { index: i, value: parts, o: el, string: string };
});
mapped.sort(sort[order] || sort.asc);
return mapped.map(function (el) {
return data[el.index];
});
}
var arr = [
{ doc: 'Doc10', tab: '7.3' },
{ doc: 'Doc2', tab: '7B' },
{ doc: 'Doc13', tab: '7.20' },
{ doc: 'Doc0', tab: '7' },
{ doc: 'Doc1', tab: '7A' },
{ doc: 'Doc3', tab: '7C' },
{ doc: 'Doc4', tab: '7.0001' },
{ doc: 'Doc5', tab: '7.01' },
{ doc: 'Doc6', tab: '7.01A' },
{ doc: 'Doc7', tab: '7.1' },
{ doc: 'Doc8', tab: '7.1A' },
{ doc: 'Doc9', tab: '7.2' },
{ doc: 'Doc11', tab: '7.10' },
{ doc: 'Doc12', tab: '7.11' },
{ doc: 'Doc14', tab: '7.34' }
];
const myArray = customSort(arr, 'tab');
let html = '';
for (let i = 0; i < myArray.length; i++) {
html += '<li>' + myArray[i].doc + '</li>';
}
document.getElementById('results').innerHTML = html;
<ul id="results" />
The correct order I was looking for was:
7
7A
7B
7.0001
7.01
7.01A
7.1
7.1A
7.2
7.3
7.10
7.11
7.20
7.34

Multiple filters work together. Match multiple filter types together

I have several different filter types.The type of filters is checkbox and rang-price and select-option.Each of these filters works individually.But I want group filters to work.please help my.
let FlyList = [{
"id": "1",
"flight_number": "961",
"type_ticket": "systemi",
"airline": "ata",
"fly_time": "04:00",
"class_type": "economy",
"price": "10000",
"capacity": "2",
}, {
"id": "2",
"flight_number": "960",
"type_ticket": "chartery",
"airline": "Air-Tour",
"fly_time": "08:00",
"class_type": "Business",
"price": "20000",
"capacity": "3",
}, {
"id": "3",
"flight_number": "950",
"type_ticket": "systemi",
"airline": "taban",
"fly_time": "11:00",
"class_type": "Business",
"price": "30000",
"capacity": "5",
},
];
let filters = new Array();
function rangeSlider() {
$(".range-slider").ionRangeSlider({
hide_min_max: true,
keyboard: true,
min: 0,
max: 150,
from: 0,
to: 140,
type: 'double',
step: 1,
prefix: "$",
grid: true,
onFinish: function(data) {
var _price = filters.findIndex(item => item.field === 'price');
if (_price != -1) filters[_price]['value'] = [data.from, data.to];
else addOrRemoveFilter('price', [data.from, data.to], true);
customFilter();
// console.log(addOrRemoveFilter('price', [data.from, data.to], true));
}
});
}
function customFilter() {
let filtered_list = [];
FlyList.filter(item => {
filters.forEach(function(el, i) {
let _field = el['field'];
let _value = el['value'];
// console.log(_value);
if (typeof(_value) === 'object' && _value.length) {
if(parseInt(item[_field]) >= (parseInt(_value[0] * 1000)) && parseInt(item[_field]) <= (parseInt(_value[1]*1000))){
filtered_list.push(item);
}
else{
FlyList = [];
}
} else {
let isMulti = _value.split(',');
//RANGE PRICE SLIDER
if (isMulti.length > 1) {
let time = miliseconds(item[_field].split(':')[0], item[_field].split(':')[1])
let num1 = miliseconds(isMulti[0].split(':')[0], isMulti[0].split(':')[1]);
let num2 = miliseconds(isMulti[1].split(':')[0], isMulti[1].split(':')[1]);
if (time >= num1 && time <= num2) filtered_list.push(item);
} else {
//end RANGE PRICE SLIDER
item[_field] == _value ? filtered_list.push(item) : false;
}
}
})
});
function miliseconds(hrs,min) {
return((hrs*60*60+min*60)*1000);
}
$('#flights').updateDom(filtered_list.length ? filtered_list : FlyList, {
animate: true,
});
}
let filterCheckboxes = document.querySelectorAll('.filtersAll');
filterCheckboxes.forEach(checkbox => checkbox.addEventListener('change', (e) => {
e.preventDefault();
let filterTypeElement = findFilterTypeElement(e.target);
if (filterTypeElement) {
let field = filterTypeElement.getAttribute('data-field');
let val = e.target.value;
addOrRemoveFilter(field,val,e.target.checked);
customFilter();
}
}));
document.getElementById('optionAll').addEventListener('change' ,(e)=>{
e.preventDefault();
let filterTypeElement = findFilterTypeElement(e.target);
if (filterTypeElement) {
let field = filterTypeElement.getAttribute('data-field');
let val = e.target.value;
addOrRemoveFilter(field,val,true);
for(var index = 0 ; index < e.target.options.length ; index++)
{
addOrRemoveFilter(field,e.target.options[index].value,false);
}
addOrRemoveFilter(field,val,true);
customFilter();
}
})
function addOrRemoveFilter(f,v,add) {
if(add) {
filters.push({field : f.toLowerCase() , value : v});
} else {
for(let i = 0;i < filters.length ; i++) {
if(filters[i].field === f.toLowerCase() && filters[i].value === v) {
filters.splice(i,1);
}
}
}
// console.log(filters);
}
function getParents(el, parentSelector /* optional */) {
// If no parentSelector defined will bubble up all the way to *document*
if (parentSelector === undefined) {
parentSelector = document;
}
var parents = [];
var p = el.parentNode;
while (p && (p !== parentSelector || p.parentNode)) {
var o = p;
parents.push(o);
p = o.parentNode;
}
parents.push(parentSelector); // Push that parentSelector you wanted to stop at
return parents;
}
function findFilterTypeElement(el) {
var result = null;
var parents = getParents(el);
parents.forEach((item) => {
if (hasClass(item, 'filter_type') && result == null) {
result = item;
}
});
return result;
}
function hasClass(element, className) {
return (' ' + element.className + ' ').indexOf(' ' + className + ' ') > -1;
}

How to update code to avoid "Undefined value"?

Recently I was working on a project with this extension and I have noticed that when I select "FIELD" option and enter a value everything works fine. But after I delete value from field and push enter whole app crash because of undefined value. Maybe someone could help me with code how to avoid this annoying crash?
Thx in advance!
Here is whole code.
/*global define*/
define(["qlik"], function(qlik) {
'use strict';
var BTN_SELECTED = 'qui-button-selected',
BTN = 'qui-button',
SELECT = 'qui-select',
INPUT = 'qui-input';
function createVariable(name) {
var app = qlik.currApp();
//from 2.1: check if variable exists
if (app.variable.getByName) {
app.variable.getByName(name).then(function() {
//variable already exist
}, function() {
//create variable
app.variable.create(name);
});
} else {
//create variable - ignore errors
app.variable.create(name);
}
}
function createElement(tag, cls, html) {
var el = document.createElement(tag);
if (cls) {
el.className = cls;
}
if (html !== undefined) {
el.innerHTML = html;
}
return el;
}
return {
initialProperties: {
variableValue: {},
variableName: "",
render: "f",
defaultValue: 0,
alternatives: []
},
definition: {
type: "items",
component: "accordion",
items: {
settings: {
uses: "settings",
items: {
variable: {
type: "items",
label: "Variable",
items: {
name: {
ref: "variableName",
label: "Name",
type: "string",
change: function(data) {
createVariable(data.variableName);
data.variableValue.qStringExpression = '=' + data.variableName;
}
},
render: {
type: "string",
component: "dropdown",
label: "Render as",
ref: "render",
options: [{
value: "b",
label: "Button"
}, {
value: "s",
label: "Select"
}, {
value: "f",
label: "Field"
}, {
value: "l",
label: "Slider"
}],
defaultValue: "f"
},
emptyVal: {
ref: "emptyVal",
label: "default(when empty)",
type: "string",
defaultValue: 0
},
alternatives: {
type: "array",
ref: "alternatives",
label: "Alternatives",
itemTitleRef: "label",
allowAdd: true,
allowRemove: true,
addTranslation: "Add Alternative",
items: {
value: {
type: "string",
ref: "value",
label: "Value"
},
label: {
type: "string",
ref: "label",
label: "Label",
expression: "optional"
}
},
show: function(data) {
return data.render === "b" || data.render === "s";
}
},
min: {
ref: "min",
label: "Min",
type: "number",
defaultValue: 0,
show: function(data) {
return data.render === "l";
}
},
max: {
ref: "max",
label: "Max",
type: "number",
defaultValue: 100,
show: function(data) {
return data.render === "l";
}
},
step: {
ref: "step",
label: "Step",
type: "number",
defaultValue: 1,
show: function(data) {
return data.render === "l";
}
}
}
}
}
}
}
},
paint: function($element, layout) {
var wrapper = createElement('div'),
ext = this;
empty = layout.emptyVal;
if (layout.render === 'b') {
layout.alternatives.forEach(function(alt) {
var clazz = alt.value === layout.variableValue ? BTN_SELECTED : BTN;
var btn = createElement('button', clazz, alt.label);
btn.onclick = function() {
qlik.currApp(ext).variable.setContent(layout.variableName, alt.value);
}
wrapper.appendChild(btn);
});
} else if (layout.render === 's') {
var sel = createElement('select', SELECT);
layout.alternatives.forEach(function(alt) {
var opt = createElement('option', undefined, alt.label);
opt.value = alt.value;
opt.selected = alt.value === layout.variableValue;
sel.appendChild(opt);
});
sel.onchange = function() {
qlik.currApp(ext).variable.setContent(layout.variableName, this.value);
}
wrapper.appendChild(sel);
} else if (layout.render === 'l') {
var range = createElement('input');
range.type = 'range';
range.min = layout.min || 0;
range.max = layout.max || 100;
range.step = layout.step || 1;
range.value = layout.variableValue;
range.title = layout.variableValue;
range.style.width = '98%';
range.onchange = function() {
qlik.currApp(ext).variable.setContent(layout.variableName, this.value);
}
wrapper.appendChild(range);
} else {
var fld = createElement('input', INPUT);
fld.type = 'number';
fld.value = layout.variableValue;
fld.onchange = function () {
if (this.value != "undifined") {
qlik.currApp(ext).variable.setContent(layout.variableName, this.value);
} else {
qlik.currApp(ext).variable.setContent(layout.variableName, 0);
}
}
wrapper.appendChild(fld);
}
var elem = $element[0];
if (elem.childNodes.length === 0) {
elem.appendChild(wrapper);
} else {
elem.replaceChild(wrapper, elem.childNodes[0]);
}
}
};
});
if (this.value != "undifined") {
Here, you are comparing value to the string "undifined" (which is also mistyped).
It seems you want to compare to the value undefined:
if (this.value !== undefined) {
or check the data type of value:
if (typeof this.value != "undefined") {

how to add child Node in orgChart2

How to addChild node in lib orgChart2
https://github.com/rchockxm/js-orgChart-2
my code
Ascedance.FamilyTree = (function() {
function FamilyTree() {
var params = {
.....
}
this.pChart = new OrgChartV2(chartParams);
this.pChart.render();
$('.add-root-child').click(this.addChild);
}
FamilyTree.prototype.addChild = function() {
var node, nodeChildParams;
nodeChildParams = {
options: {
targetName: "orgchart",
subTargetName: "orgnode",
clsName: "org-node"
},
customParams: {
caption: "Frank",
description: "Demo Child Nodes"
}
};
node = new OrgNodeV2(nodeChildParams);
return this.pChart.nodes.add.nodes(node);
};
rendering the original wood holds fine
I have by clicking on the button to add another node (method addChild)
You have to create the root node.
// Add by click node.
function addNodesByClick(pData, id) {
if (typeof pData === "object" && pData !== null) {
var isFind = false;
if (typeof pData.node === "object" && pData.node !== null) {
if (pData.node.idt1 == id) {
isFind = true;
}
if (isFind == true) {
var nodeNewChildParams = {
options: {
targetName: "orgchart",
subTargetName: "orgnode",
clsName: "org-node"
},
customParams: {
caption: lpszDemoData,
description: "New Child Nodes"
}
};
var node = new OrgNodeV2(nodeNewChildParams);
pData.addNodes(node);
}
}
if (isFind == false) {
if (typeof pData.nodes === "object" && pData.nodes !== null) {
for (var i = 0; i < pData.nodes.length; i ++) {
addNodesByClick(pData.nodes[i], id);
}
}
}
}
}
(function() {
// Create params for chart.
var chartParams = {
options: {
top: 12,
left: 12,
line: {
size: 2,
color: "#3388dd"
},
node: {
width: 64,
height: 64,
maxWidth: 128,
maxHeight: 128,
template: "<div id=\"{id}\"><p class=\"node-caption\">{caption}</p><span class=\"node-description\">{description}</span><br /><label>Click to Add</label></div>"
}
},
event: {
node: {
onProcess: function(node, nodes) {
console.log("node.onProcess");
},
onClick: function() {
console.log("node.onClick");
addNodesByClick(pOrgNodes, this.id);
document.getElementById("orgchart").innerHTML = "";
// Re-Create OrgChartV2.
var pChart = new OrgChartV2(chartParams);
// Re-Init.
pChart.render();
},
onMouseMove: function() {
console.log("node.onMouseMove");
},
onMouseOver: function() {
console.log("node.onMouseOver");
},
onMouseOut: function() {
console.log("node.onMouseOut");
}
},
onCreate: function() {
console.log("onCreate");
},
onError: null,
onFinish: function() {
console.log("onFinish");
}
},
nodes: pOrgNodes
};
// Create OrgChartV2.
var pChart = new OrgChartV2(chartParams);
// Init.
pChart.render();
})();

How do I display my RSS feed horizontally?

I want to display my custom RSS feed as a horizontal list. I am using a responsive template and embedding my feeds into that template. I believe that my JavaScript is not separating each RSS post into a separate list item like I thought it would.
(function($) {
"use strict";
var RSS = function(target, url, options, callback) {
this.target = target
this.url = url
this.html = []
this.effectQueue = []
this.options = $.extend({
ssl: false,
limit: null,
key: null,
layoutTemplate: '<ul style="display:inline-block;">{entries}</ul>',
entryTemplate: '<li><div class="title">{title}</div><br /><author>{author}</author><img src="{teaserImageUrl}"></img><date>{date}</date><br />{shortBodyPlain}</li>',
tokens: {
},
outputMode: 'json',
dateFormat: 'MMM Do, YYYY',
effect: 'show',
offsetStart: false,
offsetEnd: false,
error: function() {
console.log("jQuery RSS: url doesn't link to RSS-Feed");
},
onData: function(){},
success: function(){}
}, options || {})
this.callback = callback || this.options.success
}
RSS.htmlTags = ["doctype", "html", "head", "title", "base", "link", "meta", "style", "script", "noscript", "body", "article", "nav", "aside", "section", "header", "footer", "h1-h6", "hgroup", "address", "p", "hr", "pre", "blockquote", "ol", "ul", "li", "dl", "dt", "dd", "figure", "figcaption", "div", "table", "caption", "thead", "tbody", "tfoot", "tr", "th", "td", "col", "colgroup", "form", "fieldset", "legend", "label", "input", "button", "select", "datalist", "optgroup", "option", "textarea", "keygen", "output", "progress", "meter", "details", "summary", "command", "menu", "del", "ins", "img", "iframe", "embed", "object", "param", "video", "audio", "source", "canvas", "track", "map", "area", "a", "em", "strong", "i", "b", "u", "s", "small", "abbr", "q", "cite", "dfn", "sub", "sup", "time", "code", "kbd", "samp", "var", "mark", "bdi", "bdo", "ruby", "rt", "rp", "span", "br", "wbr"]
RSS.prototype.load = function(callback) {
var apiProtocol = "http" + (this.options.ssl ? "s" : "")
, apiHost = apiProtocol + "://ajax.googleapis.com/ajax/services/feed/load"
, apiUrl = apiHost + "?v=1.0&output=" + this.options.outputMode + "&callback=?&q=" + encodeURIComponent(this.url)
// set limit to offsetEnd if offset has been set
if(this.options.offsetStart && this.options.offsetEnd) this.options.limit = this.options.offsetEnd;
if (this.options.limit != null) apiUrl += "&num=" + this.options.limit;
if (this.options.key != null) apiUrl += "&key=" + this.options.key;
$.getJSON(apiUrl, callback)
}
RSS.prototype.render = function() {
var self = this
this.load(function(data) {
try {
self.feed = data.responseData.feed
self.entries = data.responseData.feed.entries
} catch(e) {
self.entries = []
self.feed = null
return self.options.error.call(self)
}
var html = self.generateHTMLForEntries()
self.target.append(html.layout)
if (html.entries.length !== 0) {
$.isFunction(self.options.onData) && self.options.onData.call(self);
self.appendEntriesAndApplyEffects($("entries", html.layout), html.entries);
}
if (self.effectQueue.length > 0) {
self.executeEffectQueue(self.callback)
} else {
$.isFunction(self.callback) && self.callback.call(self);
}
})
}
RSS.prototype.appendEntriesAndApplyEffects = function(target, entries) {
var self = this
$.each(entries, function(idx, entry) {
var $html = self.wrapContent(entry)
if(self.options.effect === 'show') {
target.before($html)
} else {
$html.css({ display: 'none' })
target.before($html)
self.applyEffect($html, self.options.effect)
}
})
target.remove()
}
RSS.prototype.generateHTMLForEntries = function() {
var self = this
, result = {
entries: [],
layout: null
}
$(this.entries).each(function() {
var entry = this,
offsetStart = self.options.offsetStart,
offsetEnd = self.options.offsetEnd;
// offset required
if(offsetStart && offsetEnd) {
if(index >= offsetStart && index <= offsetEnd) {
if(self.isRelevant(entry, result.entries)) {
var evaluatedString = self.evaluateStringForEntry(self.options.entryTemplate, entry)
result.entries.push(evaluatedString)
}
}
}else{
// no offset
if(self.isRelevant(entry, result.entries)) {
var evaluatedString = self.evaluateStringForEntry(self.options.entryTemplate, entry)
result.entries.push(evaluatedString)
}
}
})
if(!!this.options.entryTemplate) {
// we have an entryTemplate
result.layout = this.wrapContent(this.options.layoutTemplate.replace("{entries}", "<entries></entries>"))
} else {
// no entryTemplate available
result.layout = this.wrapContent("<div><entries></entries></div>")
}
return result
}
RSS.prototype.wrapContent = function(content) {
if($.trim(content).indexOf('<') !== 0) {
// the content has no html => create a surrounding div
return $("<div>" + content + "</div>")
} else {
// the content has html => don't touch it
return $(content)
}
}
RSS.prototype.applyEffect = function($element, effect, callback) {
var self = this
switch(effect) {
case 'slide':
$element.slideDown('slow', callback)
break
case 'slideFast':
$element.slideDown(callback)
break
case 'slideSynced':
self.effectQueue.push({ element: $element, effect: 'slide' })
break
case 'slideFastSynced':
self.effectQueue.push({ element: $element, effect: 'slideFast' })
break
}
}
RSS.prototype.executeEffectQueue = function(callback) {
var self = this
this.effectQueue.reverse()
var executeEffectQueueItem = function() {
var item = self.effectQueue.pop()
if(item) {
self.applyEffect(item.element, item.effect, executeEffectQueueItem)
} else {
callback && callback()
}
}
executeEffectQueueItem()
}
RSS.prototype.evaluateStringForEntry = function(string, entry) {
var result = string
, self = this
$(string.match(/(\{.*?\})/g)).each(function() {
var token = this.toString()
result = result.replace(token, self.getValueForToken(token, entry))
})
return result
}
RSS.prototype.isRelevant = function(entry, entries) {
var tokenMap = this.getTokenMap(entry)
if(this.options.filter) {
if(this.options.filterLimit && (this.options.filterLimit == entries.length)) {
return false
} else {
return this.options.filter(entry, tokenMap)
}
} else {
return true
}
}
RSS.prototype.getTokenMap = function(entry) {
if (!this.feedTokens) {
var feed = JSON.parse(JSON.stringify(this.feed))
delete feed.entries
this.feedTokens = feed
}
return $.extend({
feed: this.feedTokens,
url: entry.link,
author: entry.author,
date: moment(entry.publishedDate).format(this.options.dateFormat),
title: entry.title,
body: entry.content,
shortBody: entry.contentSnippet,
bodyPlain: (function(entry) {
var result = entry.content
.replace(/<script[\\r\\\s\S]*<\/script>/mgi, '')
.replace(/<\/?[^>]+>/gi, '')
for(var i = 0; i < RSS.htmlTags.length; i++) {
result = result.replace(new RegExp('<' + RSS.htmlTags[i], 'gi'), '')
}
return result
})(entry),
shortBodyPlain: entry.contentSnippet.replace(/<\/?[^>]+>/gi, ''),
//shortBodyPlain: entry.contentSnippet.replace("-- Delivered by Feed43 service", ""),
shortBodyPlain: entry.contentSnippet.replace("369gopee", "<author>").replace("321gopee", "</author><br />"),
index: $.inArray(entry, this.entries),
totalEntries: this.entries.length,
teaserImage: (function(entry){
try { return entry.content.match(/(<img.*?>)/gi)[0] }
catch(e) { return "" }
})(entry),
teaserImageUrl: (function(entry) {
try { return entry.content.match(/(<img.*?>)/gi)[0].match(/src="(.*?)"/)[1] }
catch(e) { return "" }
})(entry)
}, this.options.tokens)
}
RSS.prototype.getValueForToken = function(_token, entry) {
var tokenMap = this.getTokenMap(entry)
, token = _token.replace(/[\{\}]/g, '')
, result = tokenMap[token]
if(typeof result != 'undefined')
return ((typeof result == 'function') ? result(entry, tokenMap) : result)
else
throw new Error('Unknown token: ' + _token)
}
$.fn.rss = function(url, options, callback) {
new RSS(this, url, options, callback).render()
return this; //implement chaining
}
})(jQuery)
When I view the page source, there is not dynamically created html. How would I display these list items inline?
The feeds appear in HTML as follows:
<script>
jQuery(function($) {
$("#rss-feeds").rss("http://www.feed43.com/channelfireball.xml", {
limit: 15
})
</script>
<div style="border:none;width:100%;height:auto;overflow-y:scroll;
overflow-x:scroll;">
<div class="span2 item">
<div class="item-wrap">
<div class="post_results" id="rss-feeds"></div>
</div>
</div>
</div>

Categories

Resources