Develop Reference

JS - Bpm Analyzer: Argument of AudioContext.decodeAudioData can't be a detached buffer

I'm working on an audio analysis project and I was looking for a way to get the bpm from an mp3 / wav audio using JavaScript.
This is the only post about it that I found: Detecting bpm of audio input using javascript?
This is the only solution I found:
(function() {
var AUDIO_URL = 'media/song.mp3';
var CHANNELS, NUMBER_OF_PREVIOUS_SAMPLES, SAMPLES_PER_INSTANT_ENERGY, SAMPLE_RATE, THRESHOLD_CONSTANT, VARIANCE_COEFFICIENT, audioContext;
var audioSample, beatDetector, beatDetectorVisualisation, beatVisualisation, getAudioContext, getOfflineAudioContext, loadAudioFromUrl, main;
var playTrack, sampleLengthSeconds, timeline, trackStartTime, updateAudioFromArrayBuffer, updateAudioFromPcmData, updateBeats, updateSongPlace;
var updateVisualisation, windowEnd, windowStart,
__extends = function(child, parent) {
for (var key in parent) {
if (__hasProp.call(parent, key)) child[key] = parent[key];
} function ctor() {
this.constructor = child;
}
ctor.prototype = parent.prototype;
child.prototype = new ctor();
child.__super__ = parent.prototype; return child;
},
__hasProp = {}.hasOwnProperty;
THRESHOLD_CONSTANT = 1.5;
VARIANCE_COEFFICIENT = 0;
SAMPLES_PER_INSTANT_ENERGY = 1024;
NUMBER_OF_PREVIOUS_SAMPLES = 43;
CHANNELS = 1;
SAMPLE_RATE = 44100;
audioContext = null;
audioSample = null;
sampleLengthSeconds = 0;
trackStartTime = 0;
beatVisualisation = null;
beatDetectorVisualisation = null;
beatDetector = null;
windowStart = 0;
windowEnd = null;
timeline = null;
getAudioContext = function() {
var AudioContext;
AudioContext = window.AudioContext || window.webkitAudioContext;
if (audioContext == null) {
audioContext = new AudioContext();
}
return audioContext;
};
getOfflineAudioContext = function(channels, length, sampleRate) {
var OfflineAudioContext;
OfflineAudioContext = window.OfflineAudioContext || window.webkitOfflineAudioContext;
return new OfflineAudioContext(channels, length, sampleRate);
};
this.SoundEnergyBeatDetector = (function() {
var BEAT_MIN_DISTANCE_SAMPLES, IMPULSE_TRAIN_SIZE, MAX_DISTANCE_MULTIPLIER, MAX_SEARCH_WINDOW_SIZE;
SAMPLE_RATE = 44100;
BEAT_MIN_DISTANCE_SAMPLES = 10;
MAX_DISTANCE_MULTIPLIER = 2;
IMPULSE_TRAIN_SIZE = 108;
MAX_SEARCH_WINDOW_SIZE = 2;
function SoundEnergyBeatDetector() {}
SoundEnergyBeatDetector.prototype.detectBeats = function(
pcmAudioData, previousEnergyVarianceCoefficient, previousAverageEnergyCoefficient, samplesPerInstantEnergy, numberOfPreviousEnergies) {
var c, currentIndex, currentTimeSeconds, distanceBetweenBeatIndexes, distanceInEnergyIndexBetweenBeats, i, instantEnergySum, lastBeatIndex;
var maxCountIndex, meanCount, pcm, previousEnergies, previousEnergiesAverage, previousEnergiesIndex, previousEnergiesSum, previousEnergiesVariance;
var previousEnergy, sumOfDifferencesFromAverage, threshold, v, _i, _j, _k, _len, _len1, _len2, _ref;
this.maximumEnergies = [];
distanceInEnergyIndexBetweenBeats = [];
lastBeatIndex = 0;
this.energies = [];
this.averageEnergies = [];
this.maxEnergy = 0;
previousEnergies = [];
previousEnergiesIndex = 0;
instantEnergySum = 0;
for (i = _i = 0, _len = pcmAudioData.length; _i < _len; i = ++_i) {
pcm = pcmAudioData[i];
instantEnergySum += Math.pow(pcm, 2);
if (i % samplesPerInstantEnergy !== 0) {
continue;
}
if (instantEnergySum > this.maxEnergy) {
this.maxEnergy = instantEnergySum;
}
currentTimeSeconds = i / SAMPLE_RATE;
this.energies.push([currentTimeSeconds, instantEnergySum]);
if (previousEnergies.length < numberOfPreviousEnergies) {
previousEnergies.push(instantEnergySum);
} else {
previousEnergiesSum = 0;
for (_j = 0, _len1 = previousEnergies.length; _j < _len1; _j++) {
previousEnergy = previousEnergies[_j];
previousEnergiesSum += previousEnergy;
}
previousEnergiesAverage = previousEnergiesSum / numberOfPreviousEnergies;
sumOfDifferencesFromAverage = 0;
for (_k = 0, _len2 = previousEnergies.length; _k < _len2; _k++) {
previousEnergy = previousEnergies[_k];
sumOfDifferencesFromAverage += Math.pow(previousEnergy - previousEnergiesAverage, 2);
}
previousEnergiesVariance = sumOfDifferencesFromAverage / numberOfPreviousEnergies;
v = previousEnergiesVariance * previousEnergyVarianceCoefficient;
c = v + parseFloat(previousAverageEnergyCoefficient);
threshold = c * previousEnergiesAverage;
this.averageEnergies.push([currentTimeSeconds, threshold]);
if (instantEnergySum > threshold) {
currentIndex = this.averageEnergies.length - 1;
distanceBetweenBeatIndexes = currentIndex - lastBeatIndex;
if (distanceBetweenBeatIndexes > BEAT_MIN_DISTANCE_SAMPLES) {
lastBeatIndex = currentIndex;
this.maximumEnergies.push(currentTimeSeconds);
distanceInEnergyIndexBetweenBeats.push(distanceBetweenBeatIndexes);
}
}
previousEnergies.splice(previousEnergiesIndex, 1, instantEnergySum);
}
previousEnergiesIndex++;
if (previousEnergiesIndex >= numberOfPreviousEnergies) {
previousEnergiesIndex = 0;
}
instantEnergySum = 0;
}
_ref = this._calculateTempo(distanceInEnergyIndexBetweenBeats, numberOfPreviousEnergies, samplesPerInstantEnergy), meanCount = _ref[0], maxCountIndex = _ref[1];
return this._calculateConvolution(meanCount, maxCountIndex);
};
SoundEnergyBeatDetector.prototype._calculateTempo = function(distanceInEnergyIndexBetweenBeats, numberOfPreviousEnergies, samplesPerInstantEnergy) {
var a, b, beatDistanceCount, beatDistanceCounts, distance, divisor, i, maxCountIndex, maxCountSoFar, maxDistanceBetwenBeats, meanCount, neighbourCount, neighbourIndex, _i, _j, _k, _len, _len1;
maxDistanceBetwenBeats = numberOfPreviousEnergies * MAX_DISTANCE_MULTIPLIER;
beatDistanceCounts = [];
for (i = _i = 0; 0 <= maxDistanceBetwenBeats ? _i <= maxDistanceBetwenBeats : _i >= maxDistanceBetwenBeats; i = 0 <= maxDistanceBetwenBeats ? ++_i : --_i) {
beatDistanceCounts.push(0);
}
for (_j = 0, _len = distanceInEnergyIndexBetweenBeats.length; _j < _len; _j++) {
distance = distanceInEnergyIndexBetweenBeats[_j];
if (distance < maxDistanceBetwenBeats) {
beatDistanceCounts[distance]++;
}
}
maxCountIndex = 0;
maxCountSoFar = 0;
for (i = _k = 0, _len1 = beatDistanceCounts.length; _k < _len1; i = ++_k) {
beatDistanceCount = beatDistanceCounts[i];
if (beatDistanceCount > maxCountSoFar) {
maxCountSoFar = beatDistanceCount;
maxCountIndex = i;
}
}
if (maxCountIndex === beatDistanceCounts.length - 1) {
neighbourIndex = maxCountIndex - 1;
} else if (maxCountIndex === 0) {
neighbourIndex = maxCountIndex + 1;
} else {
a = maxCountIndex - 1;
b = maxCountIndex + 1;
if (beatDistanceCounts[a] > beatDistanceCounts[b]) {
neighbourIndex = a;
} else {
neighbourIndex = b;
}
}
neighbourCount = beatDistanceCounts[neighbourIndex];
divisor = maxCountSoFar + neighbourCount;
if (divisor === 0) {
meanCount = 0;
} else {
meanCount = (maxCountIndex * maxCountSoFar + neighbourIndex * neighbourCount) / divisor;
}
this.bpm = 60 / (meanCount * (samplesPerInstantEnergy / SAMPLE_RATE));
return [meanCount, maxCountIndex];
};
SoundEnergyBeatDetector.prototype._calculateConvolution = function(meanCount, maxCountIndex) {
var b, beatsConvolution, conv, currentConv, espace, i, impulseTrain, j, localMaxPosition, maxConv, maxConvIndex, offsetIndexLeft, offsetIndexRight, ratio, searchForMaxInWindow, _i, _j, _k, _l, _len, _len1, _m, _ref, _ref1, _results;
impulseTrain = [];
espace = 0;
impulseTrain.push(1);
for (i = _i = 1; 1 <= IMPULSE_TRAIN_SIZE ? _i <= IMPULSE_TRAIN_SIZE : _i >= IMPULSE_TRAIN_SIZE; i = 1 <= IMPULSE_TRAIN_SIZE ? ++_i : --_i) {
if (espace >= meanCount) {
impulseTrain.push(1);
espace -= meanCount;
} else {
impulseTrain.push(0);
}
espace += 1;
}
beatsConvolution = [];
this.convolution = [];
maxConv = 0;
maxConvIndex = 0;
for (i = _j = 0, _ref = this.averageEnergies.length - IMPULSE_TRAIN_SIZE - 1; 0 <= _ref ? _j <= _ref : _j >= _ref; i = 0 <= _ref ? ++_j : --_j) {
beatsConvolution[i] = 0;
this.convolution[i] = [this.averageEnergies[i][0], 0];
for (j = _k = 0; 0 <= IMPULSE_TRAIN_SIZE ? _k <= IMPULSE_TRAIN_SIZE : _k >= IMPULSE_TRAIN_SIZE; j = 0 <= IMPULSE_TRAIN_SIZE ? ++_k : --_k) {
this.convolution[i][1] += this.averageEnergies[i + j][1] * impulseTrain[j];
}
currentConv = Math.abs(this.convolution[i][1]);
if (currentConv > maxConv) {
maxConv = currentConv;
maxConvIndex = i;
}
}
ratio = 1 / maxConv;
_ref1 = this.convolution;
for (_l = 0, _len = _ref1.length; _l < _len; _l++) {
conv = _ref1[_l];
conv[1] *= ratio;
}
searchForMaxInWindow = (function(_this) {
return function(offset) {
var maxIndex, maxSoFar, _m, _ref2, _ref3;
maxSoFar = 0;
maxIndex = offset;
for (i = _m = _ref2 = offset - MAX_SEARCH_WINDOW_SIZE, _ref3 = offset + MAX_SEARCH_WINDOW_SIZE; _ref2 <= _ref3 ? _m <= _ref3 : _m >= _ref3; i = _ref2 <= _ref3 ? ++_m : --_m) {
if (i < 0) {
continue;
}
if (i >= _this.convolution.length) {
break;
}
conv = _this.convolution[i][1];
if (conv > maxSoFar) {
maxSoFar = conv;
maxIndex = i;
}
}
return maxIndex;
};
})(this);
beatsConvolution[maxConvIndex] = 1;
offsetIndexRight = maxConvIndex + maxCountIndex;
while (offsetIndexRight < this.convolution.length && this.convolution[offsetIndexRight][1] > 0) {
localMaxPosition = searchForMaxInWindow(offsetIndexRight);
beatsConvolution[localMaxPosition] = 1;
offsetIndexRight = localMaxPosition + maxCountIndex;
}
offsetIndexLeft = maxConvIndex - maxCountIndex;
while (offsetIndexLeft > 0) {
localMaxPosition = searchForMaxInWindow(offsetIndexLeft);
beatsConvolution[localMaxPosition] = 1;
offsetIndexLeft = localMaxPosition - maxCountIndex;
}
this.beats = [];
_results = [];
for (i = _m = 0, _len1 = beatsConvolution.length; _m < _len1; i = ++_m) {
b = beatsConvolution[i];
if (b > 0) {
_results.push(this.beats.push(this.convolution[i][0]));
} else {
_results.push(void 0);
}
}
return _results;
};
return SoundEnergyBeatDetector;
})();
loadAudioFromUrl = function(url, callback) {
var request;
request = new XMLHttpRequest;
request.open('GET', url, true);
request.responseType = 'arraybuffer';
request.onload = function() {
return callback(request.response);
};
return request.send();
};
this.AbstractAudioSample = (function() {
function AbstractAudioSample() {
this.playing = false;
}
AbstractAudioSample.prototype.loadAudio = function() {
throw 'Load Audio must be implemented by subclass';
};
AbstractAudioSample.prototype.tryPlay = function(offset, gain) {
var gainNode;
if (this.buffer == null) {
return;
}
this.source = this._ctx.createBufferSource();
this.source.buffer = this.buffer;
gainNode = this._ctx.createGain();
if (gain != null) {
gainNode.gain.value = gain;
}
this.source.connect(gainNode);
gainNode.connect(this._ctx.destination);
if ($.isNumeric(offset)) {
this.source.start(0, offset);
} else {
this.source.start(0);
}
return this.playing = true;
};
AbstractAudioSample.prototype.stop = function() {
if (this.source == null) {
return;
}
this.source.stop(0);
return this.playing = false;
};
return AbstractAudioSample;
})();
this.ArrayBufferAudioSample = (function(_super) {
__extends(ArrayBufferAudioSample, _super);
function ArrayBufferAudioSample(_at_arrayBuffer) {
this.arrayBuffer = _at_arrayBuffer;
ArrayBufferAudioSample.__super__.constructor.apply(this, arguments);
}
ArrayBufferAudioSample.prototype.loadAudio = function(_at__ctx, callback) {
this._ctx = _at__ctx;
return this._ctx.decodeAudioData(this.arrayBuffer, (function(_this) {
return function(buffer) {
_this.buffer = buffer;
if (callback != null) {
return callback(_this);
}
};
})(this));
};
return ArrayBufferAudioSample;
})(AbstractAudioSample);
this.PcmAudioGenerator = (function() {
function PcmAudioGenerator() {}
PcmAudioGenerator.prototype.getPcmAudioData = function(offlineContext, audioSample, callback) {
var renderAudioSampleOffline;
renderAudioSampleOffline = (function(_this) {
return function(audioSample) {
offlineContext.oncomplete = function(event) {
return callback(event.renderedBuffer.getChannelData(0));
};
audioSample.tryPlay();
return offlineContext.startRendering();
};
})(this);
return audioSample.loadAudio(offlineContext, renderAudioSampleOffline);
};
return PcmAudioGenerator;
})();
updateSongPlace = function(fractionThroughSong) {
if (audioSample.playing) {
audioSample.stop();
}
trackStartTime = windowStart + ((windowEnd - windowStart) * fractionThroughSong);
return timeline.render(trackStartTime, windowStart, windowEnd);
};
updateVisualisation = function() {
beatDetectorVisualisation.render(beatDetector, windowStart, windowEnd);
return timeline.render(trackStartTime, windowStart, windowEnd);
};
updateBeats = function(pcmAudioData) {
var nOPS, pAEC, pEVC, sPIE;
pAEC = THRESHOLD_CONSTANT;
pEVC = VARIANCE_COEFFICIENT;
sPIE = SAMPLES_PER_INSTANT_ENERGY;
nOPS = NUMBER_OF_PREVIOUS_SAMPLES;
beatDetector = new SoundEnergyBeatDetector();
beatDetector.detectBeats(pcmAudioData, pEVC, pAEC, sPIE, nOPS);
if (windowEnd == null) {
windowEnd = sampleLengthSeconds;
}
console.log("bpm is " + beatDetector.bpm);
$('#bpm').text((beatDetector.bpm.toFixed(2)) + "bpm");
return updateVisualisation();
};
updateAudioFromPcmData = function(pcmAudioData) {
var waveformVisualisation;
waveformVisualisation = new WaveformVisualisation('#waveform', pcmAudioData);
waveformVisualisation.render();
return updateBeats(pcmAudioData);
};
updateAudioFromArrayBuffer = function(arrayBuffer) {
audioContext = getAudioContext();
audioSample = new ArrayBufferAudioSample(arrayBuffer);
return audioSample.loadAudio(audioContext, function(audioSample) {
var length, offlineAudioContext, pcmAudioGenerator, pcmAudioSample;
pcmAudioSample = new ArrayBufferAudioSample(arrayBuffer);
length = audioSample.buffer.length;
sampleLengthSeconds = length / SAMPLE_RATE;
offlineAudioContext = getOfflineAudioContext(CHANNELS, length, SAMPLE_RATE);
pcmAudioGenerator = new PcmAudioGenerator();
return pcmAudioGenerator.getPcmAudioData(offlineAudioContext, pcmAudioSample, updateAudioFromPcmData);
});
};
}).call(this);
I get the following error:
Argument of AudioContext.decodeAudioData can't be a detached buffer
in line:
return this._ctx.decodeAudioData(this.arrayBuffer, (function(_this) {
I tried to shorten down the code as much as possible without removing important information, but please feel free to edit it.

The problem is that you can't use the same ArrayBuffer twice with decodeAudioData(). You can think of this as if decodeAudioData() would consume the ArrayBuffer which means it is gone afterwards. What really happens is that the ArrayBuffer is transferred to another thread by the Web Audio API behind the scenes.
An easy fix would be to copy the ArrayBuffer before you decode it.
new ArrayBufferAudioSample(arrayBuffer.slice(0));
By the way, I've created a simple beat detector called web-audio-beat-detector. Maybe that works for you. Otherwise there is also essentia.js which has a much more elaborate beat detection.

Popular image picker plugin doesn't show pictures

I was trying to use this plugin on my project: http://rvera.github.io/image-picker/ but it is not showing the images but it's just showing the select-option box. Is there anything else I'm missing as a newbie in javascript?
edit: should've added my codes:
html:
<div class="picker" hidden>
<select class="image-picker show-html">
<option value=""></option>
<option data-img-src="http://placekitten.com/300/200" value="1">Cute Kitten 1</option>
<option data-img-src="http://placekitten.com/150/200" value="2">Cute Kitten 2</option>
<option data-img-src="http://placekitten.com/400/200" value="3">Cute Kitten 3</option>
</select>
</div>
<div class="item">
<select class="row kittens">
<div class="col-md-3"><option data-img-src="http://placekitten.com/300/200" value="1">Cute Kitten 1</option></div>
<div class="col-md-3"><option data-img-src="http://placekitten.com/150/200" value="2">Cute Kitten 2</option></div>
<div class="col-md-3"><option data-img-src="http://placekitten.com/400/200" value="3">Cute Kitten 3</option></div>
<div class="col-md-3"><img src="http://placehold.it/250x250" alt="Image" style="max-width:100%;"></div>
</select><!--.row-->
</div><!--.item-->
javascript: I added the plugin code in image-picker.js then this below*
$(function(){
$( document ).ready(function() {
$("select").imagepicker({
show_label : true
})
$(".kittens").imagepicker({
show_label : true
})
});
});
With the help of you guys, found an error from console
(function() {
var ImagePicker, ImagePickerOption, both_array_are_equal, sanitized_options,
bind = function(fn, me){ return function(){ return fn.apply(me, arguments); }; },
indexOf = [].indexOf || function(item) { for (var i = 0, l = this.length; i < l; i++) { if (i in this && this[i] === item) return i; } return -1; };
//console said error found from this first line below and another error is found in the last line "}).call(this);"
jQuery.fn.extend({
imagepicker: function(opts) {
if (opts == null) {
opts = {};
}
return this.each(function() {
var select;
select = jQuery(this);
if (select.data("picker")) {
select.data("picker").destroy();
}
select.data("picker", new ImagePicker(this, sanitized_options(opts)));
if (opts.initialized != null) {
return opts.initialized.call(select.data("picker"));
}
});
}
});
sanitized_options = function(opts) {
var default_options;
default_options = {
hide_select: true,
show_label: false,
initialized: void 0,
changed: void 0,
clicked: void 0,
selected: void 0,
limit: void 0,
limit_reached: void 0
};
return jQuery.extend(default_options, opts);
};
both_array_are_equal = function(a, b) {
var i, j, len, x;
if ((!a || !b) || (a.length !== b.length)) {
return false;
}
a = a.slice(0);
b = b.slice(0);
a.sort();
b.sort();
for (i = j = 0, len = a.length; j < len; i = ++j) {
x = a[i];
if (b[i] !== x) {
return false;
}
}
return true;
};
ImagePicker = (function() {
function ImagePicker(select_element, opts1) {
this.opts = opts1 != null ? opts1 : {};
this.sync_picker_with_select = bind(this.sync_picker_with_select, this);
this.select = jQuery(select_element);
this.multiple = this.select.attr("multiple") === "multiple";
if (this.select.data("limit") != null) {
this.opts.limit = parseInt(this.select.data("limit"));
}
this.build_and_append_picker();
}
ImagePicker.prototype.destroy = function() {
var j, len, option, ref;
ref = this.picker_options;
for (j = 0, len = ref.length; j < len; j++) {
option = ref[j];
option.destroy();
}
this.picker.remove();
this.select.off("change", this.sync_picker_with_select);
this.select.removeData("picker");
return this.select.show();
};
ImagePicker.prototype.build_and_append_picker = function() {
if (this.opts.hide_select) {
this.select.hide();
}
this.select.on("change", this.sync_picker_with_select);
if (this.picker != null) {
this.picker.remove();
}
this.create_picker();
this.select.after(this.picker);
return this.sync_picker_with_select();
};
ImagePicker.prototype.sync_picker_with_select = function() {
var j, len, option, ref, results;
ref = this.picker_options;
results = [];
for (j = 0, len = ref.length; j < len; j++) {
option = ref[j];
if (option.is_selected()) {
results.push(option.mark_as_selected());
} else {
results.push(option.unmark_as_selected());
}
}
return results;
};
ImagePicker.prototype.create_picker = function() {
this.picker = jQuery("<ul class='thumbnails image_picker_selector'></ul>");
this.picker_options = [];
this.recursively_parse_option_groups(this.select, this.picker);
return this.picker;
};
ImagePicker.prototype.recursively_parse_option_groups = function(scoped_dom, target_container) {
var container, j, k, len, len1, option, option_group, ref, ref1, results;
ref = scoped_dom.children("optgroup");
for (j = 0, len = ref.length; j < len; j++) {
option_group = ref[j];
option_group = jQuery(option_group);
container = jQuery("<ul></ul>");
container.append(jQuery("<li class='group_title'>" + (option_group.attr("label")) + "</li>"));
target_container.append(jQuery("<li class='group'>").append(container));
this.recursively_parse_option_groups(option_group, container);
}
ref1 = (function() {
var l, len1, ref1, results1;
ref1 = scoped_dom.children("option");
results1 = [];
for (l = 0, len1 = ref1.length; l < len1; l++) {
option = ref1[l];
results1.push(new ImagePickerOption(option, this, this.opts));
}
return results1;
}).call(this);
results = [];
for (k = 0, len1 = ref1.length; k < len1; k++) {
option = ref1[k];
this.picker_options.push(option);
if (!option.has_image()) {
continue;
}
results.push(target_container.append(option.node));
}
return results;
};
ImagePicker.prototype.has_implicit_blanks = function() {
var option;
return ((function() {
var j, len, ref, results;
ref = this.picker_options;
results = [];
for (j = 0, len = ref.length; j < len; j++) {
option = ref[j];
if (option.is_blank() && !option.has_image()) {
results.push(option);
}
}
return results;
}).call(this)).length > 0;
};
ImagePicker.prototype.selected_values = function() {
if (this.multiple) {
return this.select.val() || [];
} else {
return [this.select.val()];
}
};
ImagePicker.prototype.toggle = function(imagepicker_option, original_event) {
var new_values, old_values, selected_value;
old_values = this.selected_values();
selected_value = imagepicker_option.value().toString();
if (this.multiple) {
if (indexOf.call(this.selected_values(), selected_value) >= 0) {
new_values = this.selected_values();
new_values.splice(jQuery.inArray(selected_value, old_values), 1);
this.select.val([]);
this.select.val(new_values);
} else {
if ((this.opts.limit != null) && this.selected_values().length >= this.opts.limit) {
if (this.opts.limit_reached != null) {
this.opts.limit_reached.call(this.select);
}
} else {
this.select.val(this.selected_values().concat(selected_value));
}
}
} else {
if (this.has_implicit_blanks() && imagepicker_option.is_selected()) {
this.select.val("");
} else {
this.select.val(selected_value);
}
}
if (!both_array_are_equal(old_values, this.selected_values())) {
this.select.change();
if (this.opts.changed != null) {
return this.opts.changed.call(this.select, old_values, this.selected_values(), original_event);
}
}
};
return ImagePicker;
})();
ImagePickerOption = (function() {
function ImagePickerOption(option_element, picker, opts1) {
this.picker = picker;
this.opts = opts1 != null ? opts1 : {};
this.clicked = bind(this.clicked, this);
this.option = jQuery(option_element);
this.create_node();
}
ImagePickerOption.prototype.destroy = function() {
return this.node.find(".thumbnail").off("click", this.clicked);
};
ImagePickerOption.prototype.has_image = function() {
return this.option.data("img-src") != null;
};
ImagePickerOption.prototype.is_blank = function() {
return !((this.value() != null) && this.value() !== "");
};
ImagePickerOption.prototype.is_selected = function() {
var select_value;
select_value = this.picker.select.val();
if (this.picker.multiple) {
return jQuery.inArray(this.value(), select_value) >= 0;
} else {
return this.value() === select_value;
}
};
ImagePickerOption.prototype.mark_as_selected = function() {
return this.node.find(".thumbnail").addClass("selected");
};
ImagePickerOption.prototype.unmark_as_selected = function() {
return this.node.find(".thumbnail").removeClass("selected");
};
ImagePickerOption.prototype.value = function() {
return this.option.val();
};
ImagePickerOption.prototype.label = function() {
if (this.option.data("img-label")) {
return this.option.data("img-label");
} else {
return this.option.text();
}
};
ImagePickerOption.prototype.clicked = function(event) {
this.picker.toggle(this, event);
if (this.opts.clicked != null) {
this.opts.clicked.call(this.picker.select, this, event);
}
if ((this.opts.selected != null) && this.is_selected()) {
return this.opts.selected.call(this.picker.select, this, event);
}
};
ImagePickerOption.prototype.create_node = function() {
var image, imgAlt, imgClass, thumbnail;
this.node = jQuery("<li/>");
image = jQuery("<img class='image_picker_image'/>");
image.attr("src", this.option.data("img-src"));
thumbnail = jQuery("<div class='thumbnail'>");
imgClass = this.option.data("img-class");
if (imgClass) {
this.node.addClass(imgClass);
image.addClass(imgClass);
thumbnail.addClass(imgClass);
}
imgAlt = this.option.data("img-alt");
if (imgAlt) {
image.attr('alt', imgAlt);
}
thumbnail.on("click", this.clicked);
thumbnail.append(image);
if (this.opts.show_label) {
thumbnail.append(jQuery("<p/>").html(this.label()));
}
this.node.append(thumbnail);
return this.node;
};
return ImagePickerOption;
})();
}).call(this);
Cheers

Depth first search using node gives, RangeError: Maximum call stack size exceeded

I’m trying to rewrite my code to get over a stack size error “RangeError: Maximum call stack size exceeded” I run into. I’m trying to run a DFS using a stack in JavaScript using node.
I’ve heard a lot about settimeout but I’m not sure how to implement it in my case. Any advice would be great.
Heres the code that fails:
var Stack = function() {
this.items = [];
};
Stack.prototype.push = function(obj) {
this.items.push(obj);
};
Stack.prototype.pop = function() {
return this.items.pop();
};
Stack.prototype.isEmpty = function() {
return this.items.length === 0;
};
Stack.prototype.isExplored = function(n){
return this.items.indexOf(n) !== -1;
}
Stack.prototype.emptyOut = function() {
this.items = [];
return this.items.length === 0;
};
var stack = new Stack();
var adjList=[];
for(var i= 1; i<15557;i++){
adjList.push([i])
}
adjList.push([0])
function DFS(graph, s){
stack.push(s);
for(var i = 0 ; i < graph[s].length; i++){
var v = graph[s][i];
if(!stack.isExplored(v)){
DFS(graph, v);
}
}
}
DFS(adjList, 0)
console.log("done", stack);

Have you considered switching to an iterative approach?
var Stack = function() {
this.items = [];
};
Stack.prototype.push = function(obj) {
this.items.push(obj);
};
Stack.prototype.pop = function() {
return this.items.pop();
};
Stack.prototype.isEmpty = function() {
return this.items.length === 0;
};
Stack.prototype.isExplored = function(n) {
return this.items.indexOf(n) !== -1;
}
Stack.prototype.emptyOut = function() {
this.items = [];
return this.items.length === 0;
};
var stack = new Stack();
var adjList = [];
for (var i = 1; i < 15557; i++) {
adjList.push([i]);
}
adjList.push([0])
function DFS(graph, v) {
var queue = [v];
while (queue.length) {
v = queue.pop();
if (stack.isExplored(v))
continue;
stack.push(v);
for (var i = graph[v].length - 1; i >= 0; i--) {
queue.push(graph[v][i]);
}
}
}
DFS(adjList, 0);
console.log("done", stack);
The limit is now the amount of memory node has at disposal.

run websocket-rails javascript client in node.js

I'm trying to retrieve data from a websocket using my own web server. The websocket server on the remote host runs websocket-rails. From the Websocket-rails github project page (https://github.com/websocket-rails) I used the javascript client code to put together a web socket client in a html file. That is, I copied the contents of all CoffeeScript files in /lib/assets/javascripts/websocket_rails on github to a single file and then compiled it with js2coffee.org (probably better solutions, but i'm quite a noob as you may have noticed by now). Then added a few lines to connect to the remote web socket and subscribe to a channel. (the channel part is actually why I use the Websocket-rails client, instead of a "normal" web socket connection. As I couldn't figure out how to subscribe to a channel after connecting through a "normal" websocket connection.)
so far so good. When I I use a browser and the code below, I can connect to a channel from the websocket on the remote host and the messages are send to the console.
<!DOCTYPE html>
<meta charset="utf-8" />
<title>WebSocket Test</title>
<script language="javascript" type="text/javascript">
(function() {
var __bind = function(fn, me){ return function(){ return fn.apply(me, arguments); }; },
__hasProp = {}.hasOwnProperty,
__extends = function(child, parent) { for (var key in parent) { if (__hasProp.call(parent, key)) child[key] = parent[key]; } function ctor() { this.constructor = child; } ctor.prototype = parent.prototype; child.prototype = new ctor(); child.__super__ = parent.prototype; return child; };
this.WebSocketRails = (function() {
function WebSocketRails(url, use_websockets) {
this.url = url;
this.use_websockets = use_websockets != null ? use_websockets : true;
this.connection_stale = __bind(this.connection_stale, this);
this.pong = __bind(this.pong, this);
this.supports_websockets = __bind(this.supports_websockets, this);
this.dispatch_channel = __bind(this.dispatch_channel, this);
this.unsubscribe = __bind(this.unsubscribe, this);
this.subscribe_private = __bind(this.subscribe_private, this);
this.subscribe = __bind(this.subscribe, this);
this.dispatch = __bind(this.dispatch, this);
this.trigger_event = __bind(this.trigger_event, this);
this.trigger = __bind(this.trigger, this);
this.unbind = __bind(this.unbind, this);
this.bind = __bind(this.bind, this);
this.connection_established = __bind(this.connection_established, this);
this.new_message = __bind(this.new_message, this);
this.reconnect = __bind(this.reconnect, this);
this.callbacks = {};
this.channels = {};
this.queue = {};
this.connect();
}
WebSocketRails.prototype.connect = function() {
this.state = 'connecting';
if (!(this.supports_websockets() && this.use_websockets)) {
this._conn = new WebSocketRails.HttpConnection(this.url, this);
} else {
this._conn = new WebSocketRails.WebSocketConnection(this.url, this);
}
return this._conn.new_message = this.new_message;
};
WebSocketRails.prototype.disconnect = function() {
if (this._conn) {
this._conn.close();
delete this._conn._conn;
delete this._conn;
}
return this.state = 'disconnected';
};
WebSocketRails.prototype.reconnect = function() {
var event, id, old_connection_id, _ref, _ref1;
old_connection_id = (_ref = this._conn) != null ? _ref.connection_id : void 0;
this.disconnect();
this.connect();
_ref1 = this.queue;
for (id in _ref1) {
event = _ref1[id];
if (event.connection_id === old_connection_id && !event.is_result()) {
this.trigger_event(event);
}
}
return this.reconnect_channels();
};
WebSocketRails.prototype.new_message = function(data) {
var event, socket_message, _i, _len, _ref, _results;
_results = [];
for (_i = 0, _len = data.length; _i < _len; _i++) {
socket_message = data[_i];
event = new WebSocketRails.Event(socket_message);
if (event.is_result()) {
if ((_ref = this.queue[event.id]) != null) {
_ref.run_callbacks(event.success, event.data);
}
delete this.queue[event.id];
} else if (event.is_channel()) {
this.dispatch_channel(event);
} else if (event.is_ping()) {
this.pong();
} else {
this.dispatch(event);
}
if (this.state === 'connecting' && event.name === 'client_connected') {
_results.push(this.connection_established(event.data));
} else {
_results.push(void 0);
}
}
return _results;
};
WebSocketRails.prototype.connection_established = function(data) {
this.state = 'connected';
this._conn.setConnectionId(data.connection_id);
this._conn.flush_queue();
if (this.on_open != null) {
return this.on_open(data);
}
};
WebSocketRails.prototype.bind = function(event_name, callback) {
var _base;
if ((_base = this.callbacks)[event_name] == null) {
_base[event_name] = [];
}
return this.callbacks[event_name].push(callback);
};
WebSocketRails.prototype.unbind = function(event_name) {
return delete this.callbacks[event_name];
};
WebSocketRails.prototype.trigger = function(event_name, data, success_callback, failure_callback) {
var event, _ref;
event = new WebSocketRails.Event([event_name, data, (_ref = this._conn) != null ? _ref.connection_id : void 0], success_callback, failure_callback);
return this.trigger_event(event);
};
WebSocketRails.prototype.trigger_event = function(event) {
var _base, _name;
if ((_base = this.queue)[_name = event.id] == null) {
_base[_name] = event;
}
if (this._conn) {
this._conn.trigger(event);
}
return event;
};
WebSocketRails.prototype.dispatch = function(event) {
var callback, _i, _len, _ref, _results;
if (this.callbacks[event.name] == null) {
return;
}
_ref = this.callbacks[event.name];
_results = [];
for (_i = 0, _len = _ref.length; _i < _len; _i++) {
callback = _ref[_i];
_results.push(callback(event.data));
}
return _results;
};
WebSocketRails.prototype.subscribe = function(channel_name, success_callback, failure_callback) {
var channel;
if (this.channels[channel_name] == null) {
channel = new WebSocketRails.Channel(channel_name, this, false, success_callback, failure_callback);
this.channels[channel_name] = channel;
return channel;
} else {
return this.channels[channel_name];
}
};
WebSocketRails.prototype.subscribe_private = function(channel_name, success_callback, failure_callback) {
var channel;
if (this.channels[channel_name] == null) {
channel = new WebSocketRails.Channel(channel_name, this, true, success_callback, failure_callback);
this.channels[channel_name] = channel;
return channel;
} else {
return this.channels[channel_name];
}
};
WebSocketRails.prototype.unsubscribe = function(channel_name) {
if (this.channels[channel_name] == null) {
return;
}
this.channels[channel_name].destroy();
return delete this.channels[channel_name];
};
WebSocketRails.prototype.dispatch_channel = function(event) {
if (this.channels[event.channel] == null) {
return;
}
return this.channels[event.channel].dispatch(event.name, event.data);
};
WebSocketRails.prototype.supports_websockets = function() {
return typeof WebSocket === "function" || typeof WebSocket === "object";
};
WebSocketRails.prototype.pong = function() {
var pong, _ref;
pong = new WebSocketRails.Event(['websocket_rails.pong', {}, (_ref = this._conn) != null ? _ref.connection_id : void 0]);
return this._conn.trigger(pong);
};
WebSocketRails.prototype.connection_stale = function() {
return this.state !== 'connected';
};
WebSocketRails.prototype.reconnect_channels = function() {
var callbacks, channel, name, _ref, _results;
_ref = this.channels;
_results = [];
for (name in _ref) {
channel = _ref[name];
callbacks = channel._callbacks;
channel.destroy();
delete this.channels[name];
channel = channel.is_private ? this.subscribe_private(name) : this.subscribe(name);
channel._callbacks = callbacks;
_results.push(channel);
}
return _results;
};
return WebSocketRails;
})();
/*
The Event object stores all the relevant event information.
*/
WebSocketRails.Event = (function() {
function Event(data, success_callback, failure_callback) {
var attr;
this.success_callback = success_callback;
this.failure_callback = failure_callback;
this.name = data[0];
attr = data[1];
if (attr != null) {
this.id = attr['id'] != null ? attr['id'] : ((1 + Math.random()) * 0x10000) | 0;
this.channel = attr.channel != null ? attr.channel : void 0;
this.data = attr.data != null ? attr.data : attr;
this.token = attr.token != null ? attr.token : void 0;
this.connection_id = data[2];
if (attr.success != null) {
this.result = true;
this.success = attr.success;
}
}
}
Event.prototype.is_channel = function() {
return this.channel != null;
};
Event.prototype.is_result = function() {
return typeof this.result !== 'undefined';
};
Event.prototype.is_ping = function() {
return this.name === 'websocket_rails.ping';
};
Event.prototype.serialize = function() {
return JSON.stringify([this.name, this.attributes()]);
};
Event.prototype.attributes = function() {
return {
id: this.id,
channel: this.channel,
data: this.data,
token: this.token
};
};
Event.prototype.run_callbacks = function(success, result) {
this.success = success;
this.result = result;
if (this.success === true) {
return typeof this.success_callback === "function" ? this.success_callback(this.result) : void 0;
} else {
return typeof this.failure_callback === "function" ? this.failure_callback(this.result) : void 0;
}
};
return Event;
})();
/*
Abstract Interface for the WebSocketRails client.
*/
WebSocketRails.AbstractConnection = (function() {
function AbstractConnection(url, dispatcher) {
this.dispatcher = dispatcher;
this.message_queue = [];
}
AbstractConnection.prototype.close = function() {};
AbstractConnection.prototype.trigger = function(event) {
if (this.dispatcher.state !== 'connected') {
return this.message_queue.push(event);
} else {
return this.send_event(event);
}
};
AbstractConnection.prototype.send_event = function(event) {
if (this.connection_id != null) {
return event.connection_id = this.connection_id;
}
};
AbstractConnection.prototype.on_close = function(event) {
var close_event;
if (this.dispatcher && this.dispatcher._conn === this) {
close_event = new WebSocketRails.Event(['connection_closed', event]);
this.dispatcher.state = 'disconnected';
return this.dispatcher.dispatch(close_event);
}
};
AbstractConnection.prototype.on_error = function(event) {
var error_event;
if (this.dispatcher && this.dispatcher._conn === this) {
error_event = new WebSocketRails.Event(['connection_error', event]);
this.dispatcher.state = 'disconnected';
return this.dispatcher.dispatch(error_event);
}
};
AbstractConnection.prototype.on_message = function(event_data) {
if (this.dispatcher && this.dispatcher._conn === this) {
return this.dispatcher.new_message(event_data);
}
};
AbstractConnection.prototype.setConnectionId = function(connection_id) {
this.connection_id = connection_id;
};
AbstractConnection.prototype.flush_queue = function() {
var event, _i, _len, _ref;
_ref = this.message_queue;
for (_i = 0, _len = _ref.length; _i < _len; _i++) {
event = _ref[_i];
this.trigger(event);
}
return this.message_queue = [];
};
return AbstractConnection;
})();
/*
HTTP Interface for the WebSocketRails client.
*/
WebSocketRails.HttpConnection = (function(_super) {
__extends(HttpConnection, _super);
HttpConnection.prototype.connection_type = 'http';
HttpConnection.prototype._httpFactories = function() {
return [
function() {
return new XDomainRequest();
}, function() {
return new XMLHttpRequest();
}, function() {
return new ActiveXObject("Msxml2.XMLHTTP");
}, function() {
return new ActiveXObject("Msxml3.XMLHTTP");
}, function() {
return new ActiveXObject("Microsoft.XMLHTTP");
}
];
};
function HttpConnection(url, dispatcher) {
var e;
this.dispatcher = dispatcher;
HttpConnection.__super__.constructor.apply(this, arguments);
this._url = "http://" + url;
this._conn = this._createXMLHttpObject();
this.last_pos = 0;
try {
this._conn.onreadystatechange = (function(_this) {
return function() {
return _this._parse_stream();
};
})(this);
this._conn.addEventListener("load", this.on_close, false);
} catch (_error) {
e = _error;
this._conn.onprogress = (function(_this) {
return function() {
return _this._parse_stream();
};
})(this);
this._conn.onload = this.on_close;
this._conn.readyState = 3;
}
this._conn.open("GET", this._url, true);
this._conn.send();
}
HttpConnection.prototype.close = function() {
return this._conn.abort();
};
HttpConnection.prototype.send_event = function(event) {
HttpConnection.__super__.send_event.apply(this, arguments);
return this._post_data(event.serialize());
};
HttpConnection.prototype._post_data = function(payload) {
return $.ajax(this._url, {
type: 'POST',
data: {
client_id: this.connection_id,
data: payload
},
success: function() {}
});
};
HttpConnection.prototype._createXMLHttpObject = function() {
var e, factories, factory, xmlhttp, _i, _len;
xmlhttp = false;
factories = this._httpFactories();
for (_i = 0, _len = factories.length; _i < _len; _i++) {
factory = factories[_i];
try {
xmlhttp = factory();
} catch (_error) {
e = _error;
continue;
}
break;
}
return xmlhttp;
};
HttpConnection.prototype._parse_stream = function() {
var data, e, event_data;
if (this._conn.readyState === 3) {
data = this._conn.responseText.substring(this.last_pos);
this.last_pos = this._conn.responseText.length;
data = data.replace(/\]\]\[\[/g, "],[");
try {
event_data = JSON.parse(data);
return this.on_message(event_data);
} catch (_error) {
e = _error;
}
}
};
return HttpConnection;
})(WebSocketRails.AbstractConnection);
/*
WebSocket Interface for the WebSocketRails client.
*/
WebSocketRails.WebSocketConnection = (function(_super) {
__extends(WebSocketConnection, _super);
WebSocketConnection.prototype.connection_type = 'websocket';
function WebSocketConnection(url, dispatcher) {
this.url = url;
this.dispatcher = dispatcher;
WebSocketConnection.__super__.constructor.apply(this, arguments);
if (this.url.match(/^wss?:\/\//)) {
console.log("WARNING: Using connection urls with protocol specified is depricated");
} else if (window.location.protocol === 'https:') {
this.url = "wss://" + this.url;
} else {
this.url = "wss://" + this.url;
}
this._conn = new WebSocket(this.url);
this._conn.onmessage = (function(_this) {
return function(event) {
var event_data;
event_data = JSON.parse(event.data);
return _this.on_message(event_data);
};
})(this);
this._conn.onclose = (function(_this) {
return function(event) {
return _this.on_close(event);
};
})(this);
this._conn.onerror = (function(_this) {
return function(event) {
return _this.on_error(event);
};
})(this);
}
WebSocketConnection.prototype.close = function() {
return this._conn.close();
};
WebSocketConnection.prototype.send_event = function(event) {
WebSocketConnection.__super__.send_event.apply(this, arguments);
return this._conn.send(event.serialize());
};
return WebSocketConnection;
})(WebSocketRails.AbstractConnection);
/*
The channel object is returned when you subscribe to a channel.
For instance:
var dispatcher = new WebSocketRails('localhost:3000/websocket');
var awesome_channel = dispatcher.subscribe('awesome_channel');
awesome_channel.bind('event', function(data) { console.log('channel event!'); });
awesome_channel.trigger('awesome_event', awesome_object);
If you want to unbind an event, you can use the unbind function :
awesome_channel.unbind('event')
*/
WebSocketRails.Channel = (function() {
function Channel(name, _dispatcher, is_private, on_success, on_failure) {
var event, event_name, _ref;
this.name = name;
this._dispatcher = _dispatcher;
this.is_private = is_private != null ? is_private : false;
this.on_success = on_success;
this.on_failure = on_failure;
this._failure_launcher = __bind(this._failure_launcher, this);
this._success_launcher = __bind(this._success_launcher, this);
this._callbacks = {};
this._token = void 0;
this._queue = [];
if (this.is_private) {
event_name = 'websocket_rails.subscribe_private';
} else {
event_name = 'websocket_rails.subscribe';
}
this.connection_id = (_ref = this._dispatcher._conn) != null ? _ref.connection_id : void 0;
event = new WebSocketRails.Event([
event_name, {
data: {
channel: this.name
}
}, this.connection_id
], this._success_launcher, this._failure_launcher);
this._dispatcher.trigger_event(event);
}
Channel.prototype.destroy = function() {
var event, event_name, _ref;
if (this.connection_id === ((_ref = this._dispatcher._conn) != null ? _ref.connection_id : void 0)) {
event_name = 'websocket_rails.unsubscribe';
event = new WebSocketRails.Event([
event_name, {
data: {
channel: this.name
}
}, this.connection_id
]);
this._dispatcher.trigger_event(event);
}
return this._callbacks = {};
};
Channel.prototype.bind = function(event_name, callback) {
var _base;
if ((_base = this._callbacks)[event_name] == null) {
_base[event_name] = [];
}
return this._callbacks[event_name].push(callback);
};
Channel.prototype.unbind = function(event_name) {
return delete this._callbacks[event_name];
};
Channel.prototype.trigger = function(event_name, message) {
var event;
event = new WebSocketRails.Event([
event_name, {
channel: this.name,
data: message,
token: this._token
}, this.connection_id
]);
if (!this._token) {
return this._queue.push(event);
} else {
return this._dispatcher.trigger_event(event);
}
};
Channel.prototype.dispatch = function(event_name, message) {
var callback, _i, _len, _ref, _ref1, _results;
if (event_name === 'websocket_rails.channel_token') {
this.connection_id = (_ref = this._dispatcher._conn) != null ? _ref.connection_id : void 0;
this._token = message['token'];
return this.flush_queue();
} else {
if (this._callbacks[event_name] == null) {
return;
}
_ref1 = this._callbacks[event_name];
_results = [];
for (_i = 0, _len = _ref1.length; _i < _len; _i++) {
callback = _ref1[_i];
_results.push(callback(message));
}
return _results;
}
};
Channel.prototype._success_launcher = function(data) {
if (this.on_success != null) {
return this.on_success(data);
}
};
Channel.prototype._failure_launcher = function(data) {
if (this.on_failure != null) {
return this.on_failure(data);
}
};
Channel.prototype.flush_queue = function() {
var event, _i, _len, _ref;
_ref = this._queue;
for (_i = 0, _len = _ref.length; _i < _len; _i++) {
event = _ref[_i];
this._dispatcher.trigger_event(event);
}
return this._queue = [];
};
return Channel;
})();
}).call(this);
//// Below is the code I added, the rest is compiled coffeeScript from the WebSocket-Rails github repository
testWebSocket = function() {
var channelTicker, websocket;
websocket = new WebSocketRails(wsUri);
websocket.on_open = function(data) {
console.log("Socket opened on " + wsUri + " :)");
};
channelTicker = websocket.subscribe("ticker");
channelTicker.bind("ticker.new", function(data) {
console.log(data);
});
};
wsUri = "ws.remotehost.com:3456/websocket";
testWebSocket();
</script>
<h2>WebSocket Test</h2>
<p>all output in console</p>
So after this I thought, nice, lets figure out how to use a server to open the web socket connection and store all output in a mysql database. But this was a bit harder then I expected... I tried node.js to run the javascript from my html file on my web server. that doesn't work.
It throws an error:
WebSocketRails.Event = (function() {
^
ReferenceError: WebSocketRails is not defined
at Object.<anonymous> (/Users/user/Desktop/tmp/wsBrowserClient.js:242:1)
at Module._compile (module.js:456:26)
at Object.Module._extensions..js (module.js:474:10)
at Module.load (module.js:356:32)
at Function.Module._load (module.js:312:12)
at Function.Module.runMain (module.js:497:10)
at startup (node.js:119:16)
at node.js:906:3
As far as I understand it now, the big difference between running js in the browser and in node.js is having or not having a DOM. The browser assigns variables to the window object but node.js can't do this.
So I have to change the javascript code to "node.js" javascript but can't find out where I have to start. My best guess would be with line
this.WebSocketRails = (function() {
but to what should I change it? Hope someone can give me a hand. If someone can tell my how to subscribe to a channel with a "normal" webwocket and then use a web socket client written for node js, of course that would also be fine.
Or a way to 'just' run the code as it is now server-side with another method, that would also help.
To be clear I'm a noob at javascript. Do know a thing or two about php, but that don't help me much here...
BIG thanks for any help!

bootstrap popover by hover in image picker

I'm trying to put Popover and Image Picker together.
The image picker function turn select in html into image and allow users to select.
The problem is that I dont have the code of image in html so I cannot add the popover thing in it.
How do I change javascript of the image picker so that when users hover over the div or the image, bootstrap popover will show? And when I leave the div / image, the popover will disappear.
I have over 10 image and each of them have different text.
The code of image is created by the function, but i do not understand the code in the function
JavaScript of Image Picker:
(function() {
var ImagePicker, ImagePickerOption, both_array_are_equal, sanitized_options,
__bind = function(fn, me){ return function(){ return fn.apply(me, arguments); }; },
__indexOf = [].indexOf || function(item) { for (var i = 0, l = this.length; i < l; i++) { if (i in this && this[i] === item) return i; } return -1; };
jQuery.fn.extend({
imagepicker: function(opts) {
if (opts == null) {
opts = {};
}
return this.each(function() {
var select;
select = jQuery(this);
if (select.data("picker")) {
select.data("picker").destroy();
}
select.data("picker", new ImagePicker(this, sanitized_options(opts)));
if (opts.initialized != null) {
return opts.initialized.call(select.data("picker"));
}
});
}
});
sanitized_options = function(opts) {
var default_options;
default_options = {
hide_select: true,
show_label: false,
initialized: void 0,
changed: void 0,
clicked: void 0,
selected: void 0,
limit: void 0,
limit_reached: void 0
};
return jQuery.extend(default_options, opts);
};
both_array_are_equal = function(a, b) {
return jQuery(a).not(b).length === 0 && jQuery(b).not(a).length === 0;
};
ImagePicker = (function() {
function ImagePicker(select_element, opts) {
this.opts = opts != null ? opts : {};
this.sync_picker_with_select = __bind(this.sync_picker_with_select, this);
this.select = jQuery(select_element);
this.multiple = this.select.attr("multiple") === "multiple";
if (this.select.data("limit") != null) {
this.opts.limit = parseInt(this.select.data("limit"));
}
this.build_and_append_picker();
}
ImagePicker.prototype.destroy = function() {
var option, _i, _len, _ref;
_ref = this.picker_options;
for (_i = 0, _len = _ref.length; _i < _len; _i++) {
option = _ref[_i];
option.destroy();
}
this.picker.remove();
this.select.unbind("change");
this.select.removeData("picker");
return this.select.show();
};
ImagePicker.prototype.build_and_append_picker = function() {
var _this = this;
if (this.opts.hide_select) {
this.select.hide();
}
this.select.change(function() {
return _this.sync_picker_with_select();
});
if (this.picker != null) {
this.picker.remove();
}
this.create_picker();
this.select.after(this.picker);
return this.sync_picker_with_select();
};
ImagePicker.prototype.sync_picker_with_select = function() {
var option, _i, _len, _ref, _results;
_ref = this.picker_options;
_results = [];
for (_i = 0, _len = _ref.length; _i < _len; _i++) {
option = _ref[_i];
if (option.is_selected()) {
_results.push(option.mark_as_selected());
} else {
_results.push(option.unmark_as_selected());
}
}
return _results;
};
ImagePicker.prototype.create_picker = function() {
this.picker = jQuery("<ul class='thumbnails image_picker_selector'></ul>");
this.picker_options = [];
this.recursively_parse_option_groups(this.select, this.picker);
return this.picker;
};
ImagePicker.prototype.recursively_parse_option_groups = function(scoped_dom, target_container) {
var container, option, option_group, _i, _j, _len, _len1, _ref, _ref1, _results;
_ref = scoped_dom.children("optgroup");
for (_i = 0, _len = _ref.length; _i < _len; _i++) {
option_group = _ref[_i];
option_group = jQuery(option_group);
container = jQuery("<ul></ul>");
container.append(jQuery("<li class='group_title'>" + (option_group.attr("label")) + "</li>"));
target_container.append(jQuery("<li>").append(container));
this.recursively_parse_option_groups(option_group, container);
}
_ref1 = (function() {
var _k, _len1, _ref1, _results1;
_ref1 = scoped_dom.children("option");
_results1 = [];
for (_k = 0, _len1 = _ref1.length; _k < _len1; _k++) {
option = _ref1[_k];
_results1.push(new ImagePickerOption(option, this, this.opts));
}
return _results1;
}).call(this);
_results = [];
for (_j = 0, _len1 = _ref1.length; _j < _len1; _j++) {
option = _ref1[_j];
this.picker_options.push(option);
if (!option.has_image()) {
continue;
}
_results.push(target_container.append(option.node));
}
return _results;
};
ImagePicker.prototype.has_implicit_blanks = function() {
var option;
return ((function() {
var _i, _len, _ref, _results;
_ref = this.picker_options;
_results = [];
for (_i = 0, _len = _ref.length; _i < _len; _i++) {
option = _ref[_i];
if (option.is_blank() && !option.has_image()) {
_results.push(option);
}
}
return _results;
}).call(this)).length > 0;
};
ImagePicker.prototype.selected_values = function() {
if (this.multiple) {
return this.select.val() || [];
} else {
return [this.select.val()];
}
};
ImagePicker.prototype.toggle = function(imagepicker_option) {
var new_values, old_values, selected_value;
old_values = this.selected_values();
selected_value = imagepicker_option.value().toString();
if (this.multiple) {
if (__indexOf.call(this.selected_values(), selected_value) >= 0) {
new_values = this.selected_values();
new_values.splice(jQuery.inArray(selected_value, old_values), 1);
this.select.val([]);
this.select.val(new_values);
} else {
if ((this.opts.limit != null) && this.selected_values().length >= this.opts.limit) {
if (this.opts.limit_reached != null) {
this.opts.limit_reached.call(this.select);
}
} else {
this.select.val(this.selected_values().concat(selected_value));
}
}
} else {
if (this.has_implicit_blanks() && imagepicker_option.is_selected()) {
this.select.val("");
} else {
this.select.val(selected_value);
}
}
if (!both_array_are_equal(old_values, this.selected_values())) {
this.select.change();
if (this.opts.changed != null) {
return this.opts.changed.call(this.select, old_values, this.selected_values());
}
}
};
return ImagePicker;
})();
ImagePickerOption = (function() {
function ImagePickerOption(option_element, picker, opts) {
this.picker = picker;
this.opts = opts != null ? opts : {};
this.clicked = __bind(this.clicked, this);
this.option = jQuery(option_element);
this.create_node();
}
ImagePickerOption.prototype.destroy = function() {
return this.node.find(".thumbnail").unbind();
};
ImagePickerOption.prototype.has_image = function() {
return this.option.data("img-src") != null;
};
ImagePickerOption.prototype.is_blank = function() {
return !((this.value() != null) && this.value() !== "");
};
ImagePickerOption.prototype.is_selected = function() {
var select_value;
select_value = this.picker.select.val();
if (this.picker.multiple) {
return jQuery.inArray(this.value(), select_value) >= 0;
} else {
return this.value() === select_value;
}
};
ImagePickerOption.prototype.mark_as_selected = function() {
return this.node.find(".thumbnail").addClass("selected");
};
ImagePickerOption.prototype.unmark_as_selected = function() {
return this.node.find(".thumbnail").removeClass("selected");
};
ImagePickerOption.prototype.value = function() {
return this.option.val();
};
ImagePickerOption.prototype.label = function() {
if (this.option.data("img-label")) {
return this.option.data("img-label");
} else {
return this.option.text();
}
};
ImagePickerOption.prototype.clicked = function() {
this.picker.toggle(this);
if (this.opts.clicked != null) {
this.opts.clicked.call(this.picker.select, this);
}
if ((this.opts.selected != null) && this.is_selected()) {
return this.opts.selected.call(this.picker.select, this);
}
};
ImagePickerOption.prototype.create_node = function() {
var image, thumbnail;
this.node = jQuery("<li/>");
image = jQuery("<img class='image_picker_image'/>");
image.attr("src", this.option.data("img-src"));
thumbnail = jQuery("<div class='thumbnail'>");
thumbnail.click({
option: this
}, function(event) {
return event.data.option.clicked();
});
thumbnail.append(image);
if (this.opts.show_label) {
thumbnail.append(jQuery("<p/>").html(this.label()));
}
this.node.append(thumbnail);
return this.node;
};
return ImagePickerOption;
})();
}).call(this);
Thank you for your help!

I understand more what you are looking for. Unfortunately I think you are going to have to use javascript to apply the pop-over because this elements are added to the DOM dynamically.
With one line of code you can add an ID to each image:
...
ImagePickerOption.prototype.create_node = function() {
var image, thumbnail;
this.node = jQuery("<li/>");
image = jQuery("<img class='image_picker_image'/>");
image.attr("src", this.option.data("img-src"));
//**ADD THIS LINE**
image.attr("id", this.option.data("img-id"));
//*****************
thumbnail = jQuery("<div class='thumbnail'>");
thumbnail.click({
option: this
}, function(event) {
return event.data.option.clicked();
});
thumbnail.append(image);
if (this.opts.show_label) {
thumbnail.append(jQuery("<p/>").html(this.label()));
}
this.node.append(thumbnail);
return this.node;
};
...
In you options tag you can now do:
<option
data-img-src='http://www.example.com/image.jpg'
data-img-id='picture1'>
This will allow you do add the popover through javascript like so:
$('#picture1').popover({ content: 'Picture 1 Message' });
Important Note: Use the I imagepicker initialized callback method to apply your popovers, this will ensure your elements exist on the DOM.