Related
In SAPUI5 I have a Model ("sModel") filled with metadata.
In this model I have a property "/aSelectedNumbers".
I also have a panel, of which I want to change the visibility depending on the content of the "/aSelectedNumbers" property.
update
first controller:
var oModelMeta = cv.model.recycleModel("oModelZAPRegistratieMeta", that);
//the cv.model.recycleModel function sets the model to the component
//if that hasn't been done so already, and returns that model.
//All of my views are added to a sap.m.App, which is returned in the
//first view of this component.
var aSelectedRegistratieType = [];
var aSelectedDagdelen = ["O", "M"];
oModelMeta.setProperty("/aSelectedRegistratieType", aSelectedRegistratieType);
oModelMeta.setProperty("/aSelectedDagdelen", aSelectedDagdelen);
First Panel (Which has checkboxes controlling the array in question):
sap.ui.jsfragment("fragments.data.ZAPRegistratie.Filters.RegistratieTypeFilter", {
createContent: function(oInitData) {
var oController = oInitData.oController;
var fnCallback = oInitData.fnCallback;
var oModel = cv.model.recycleModel("oModelZAPRegistratieMeta", oController);
var oPanel = new sap.m.Panel( {
content: new sap.m.Label( {
text: "Registratietype",
width: "120px"
})
});
function addCheckBox(sName, sId) {
var oCheckBox = new sap.m.CheckBox( {
text: sName,
selected: {
path: "oModelZAPRegistratieMeta>/aSelectedRegistratieType",
formatter: function(oFC) {
if (!oFC) { return false; }
console.log(oFC);
return oFC.indexOf(sId) !== -1;
}
},
select: function(oEvent) {
var aSelectedRegistratieType = oModel.getProperty("/aSelectedRegistratieType");
var iIndex = aSelectedRegistratieType.indexOf(sId);
if (oEvent.getParameters().selected) {
if (iIndex === -1) {
aSelectedRegistratieType.push(sId);
oModel.setProperty("/aSelectedRegistratieType", aSelectedRegistratieType);
}
} else {
if (iIndex !== -1) {
aSelectedRegistratieType.splice(iIndex, 1);
oModel.setProperty("/aSelectedRegistratieType", aSelectedRegistratieType);
}
}
// arrays update niet live aan properties
oModel.updateBindings(true); //******** <<===== SEE HERE
if (fnCallback) {
fnCallback(oController);
}
},
width: "120px",
enabled: {
path: "oModelZAPRegistratieMeta>/bChanged",
formatter: function(oFC) {
return oFC !== true;
}
}
});
oPanel.addContent(oCheckBox);
}
addCheckBox("Presentielijst (dag)", "1");
addCheckBox("Presentielijst (dagdelen)", "2");
addCheckBox("Uren (dagdelen)", "3");
addCheckBox("Tijd (dagdelen)", "4");
return oPanel;
}
});
Here is the panel of which the visibility is referred to in the question. Note that it DOES work after oModel.updateBindings(true) (see comment in code above), but otherwise it does not update accordingly.
sap.ui.jsfragment("fragments.data.ZAPRegistratie.Filters.DagdeelFilter", {
createContent: function(oInitData) {
var oController = oInitData.oController;
var fnCallback = oInitData.fnCallback;
var oModel = cv.model.recycleModel("oModelZAPRegistratieMeta", oController);
var oPanel = new sap.m.Panel( {
content: new sap.m.Label( {
text: "Dagdeel",
width: "120px"
}),
visible: {
path: "oModelZAPRegistratieMeta>/aSelectedRegistratieType",
formatter: function(oFC) {
console.log("visibility");
console.log(oFC);
if (!oFC) { return true; }
if (oFC.length === 0) { return true; }
return oFC.indexOf("2") !== -1;
}
}
});
console.log(oPanel);
function addCheckBox(sName, sId) {
var oCheckBox = new sap.m.CheckBox( {
text: sName,
selected: {
path: "oModelZAPRegistratieMeta>/aSelectedDagdelen",
formatter: function(oFC) {
if (!oFC) { return false; }
console.log(oFC);
return oFC.indexOf(sId) !== -1;
}
},
select: function(oEvent) {
var aSelectedDagdelen = oModel.getProperty("/aSelectedDagdelen");
var iIndex = aSelectedDagdelen.indexOf(sId);
if (oEvent.getParameters().selected) {
if (iIndex === -1) {
aSelectedDagdelen.push(sId);
oModel.setProperty("/aSelectedDagdelen", aSelectedDagdelen);
}
} else {
if (iIndex !== -1) {
aSelectedDagdelen.splice(iIndex, 1);
oModel.setProperty("/aSelectedDagdelen", aSelectedDagdelen);
}
}
if (fnCallback) {
fnCallback(oController);
}
},
enabled: {
path: "oModelZAPRegistratieMeta>/bChanged",
formatter: function(oFC) {
return oFC !== true;
}
},
width: "120px"
});
oPanel.addContent(oCheckBox);
}
addCheckBox("Ochtend", "O", true);
addCheckBox("Middag", "M", true);
addCheckBox("Avond", "A");
addCheckBox("Nacht", "N");
return oPanel;
}
});
The reason that the model doesn´t trigger a change event is that the reference to the Array does not change.
A possible way to change the value is to create a new Array everytime you read it from the model:
var newArray = oModel.getProperty("/aSelectedNumbers").slice();
// do your changes to the array
// ...
oModel.setProperty("/aSelectedNumbers", newArray);
This JSBin illustrates the issue.
I have a durandal/requirejs single page application. When a user sits idle, I need to display a warning to the user indicating that the session is about to time out. I have looked at several examples on the internet for asp.net apps, but can't find any examples for a single page application.
My application is similar to John Papa's code camper (MVC application).
How can I get a session timeout warning to the user if their session is 2 minutes away from timing out?
--EDIT
In my main.js file I have-
app.setRoot('viewmodels/shell', 'entrance');
router.guardRoute = function (instance, instruction) {
var sess_pollInterval = 60000;
//How many minutes the session is valid for
var sess_expirationMinutes = 2;
//How many minutes before the warning prompt
var sess_warningMinutes = 1;
var sess_intervalID;
var sess_lastActivity;
initSessionMonitor();
function initSessionMonitor() {
sess_lastActivity = new Date();
sessSetInterval();
$(document).bind('keypress.session', function (ed, e) { sessKeyPressed(ed, e); });
}
function sessSetInterval() {
sess_intervalID = setInterval('sessInterval()', sess_pollInterval);
}
function sessClearInterval() {
clearInterval(sess_intervalID);
}
function sessKeyPressed(ed, e) {
sess_lastActivity = new Date();
}
function sessPingServer() {
//Call an AJAX function to keep-alive your session.
alert('someAJAXFunction();');
}
function sessLogOut() {
alert('here');
//window.location.href = '/Account/LogOff';
}
function sessInterval() {
var now = new Date();
var diff = now - sess_lastActivity;
var diffMins = (diff / 1000 / 60);
if (diffMins >= sess_warningMinutes) {
//wran before expiring
//stop the timer
sessClearInterval();
//promt for attention
if (confirm('Your session will expire in ' + (sess_expirationMinutes - sess_warningMinutes) +
' minutes (as of ' + now.toTimeString() + '), press OK to remain logged in ' +
'or press Cancel to log off. \nIf you are logged off any changes will be lost.')) {
now = new Date();
diff = now - sess_lastActivity;
diffMins = (diff / 1000 / 60);
if (diffMins > sess_expirationMinutes) {
//timed out
sessLogOut();
}
else {
//reset inactivity timer
sessPingServer();
sessSetInterval();
sess_lastActivity = new Date();
}
} else {
sessLogOut();
}
} else {
sessPingServer();
}
}
return true;
};
}
now getting "Uncaught ReferenceError: sessInterval is not defined." Ideas?
Here's how I do it in my idle service. It uses some other services, but you should get the idea. Basically, I start tracking user activity in observable when he sings in and reset the timeout for idle handler everytime observable changes.
//idle.js
define(function (require) {
var ko = require('knockout'),
$ = require('jquery'),
router = require('lib/router'),
config = require('lib/config'),
dialog = require('lib/dialog'),
auth = require('auth/auth'),
lastActionDate = ko.observable(),
signoutHandle = null,
onIdle = function () {
console.log('user has been idle, signing out');
return auth.signOut()
.then(function () {
router.navigate('');
dialog.show('auth/idle');
});
},
init = function () {
var userActionHandler = function () {
lastActionDate(new Date());
};
auth.on('signin:success').then(function (user) {
$(document).on('click keydown scroll', userActionHandler);
userActionHandler();
});
auth.on('signout:success').then(function (using) {
$(document).off('click keydown scroll', userActionHandler);
});
lastActionDate.subscribe(function () {
if (signoutHandle) {
clearTimeout(signoutHandle);
}
signoutHandle = setTimeout(onIdle, config.get('idleTimeout') * 1000);
});
};
return {
init: init
};
});
Then I just call idle.init() my main.js file before app.start()
The approach I used was different than my post above. I used timeout-dialog.js and altered that script to use with durandal's router and any other service I needed within my application. I also used idle js. Here is the code-
main.js in app.start()-
var timeout = 100;
$(document).bind("idle.idleTimer", function () {
controls.timeoutDialog.setupDialogTimer();
});
$(document).bind("active.idleTimer", function () {
var sess = Security.GetKeepSessionAlive();
});
$.idleTimer(timeout);
timeout-dialog.js code-
String.prototype.format = function () {
var s = this,
i = arguments.length;
while (i--) {
s = s.replace(new RegExp('\\{' + i + '\\}', 'gm'), arguments[i]);
}
return s;
};
define(['durandal/system', 'plugins/router', 'services/logger', 'services/SecurityDataService'],
function (system, router, logger, Security){
timeoutDialog = {
settings: {
timeout: 50,
countdown: 15,
title: 'Your session is about to expire!',
message: 'You will be logged out in {0} seconds.',
question: 'Do you want to stay signed in?',
keep_alive_button_text: 'Yes, Keep me signed in',
sign_out_button_text: 'No, Sign me out',
keep_alive_url: '',
keep_alive_function: function () {
},
logout_url: function () {
router.map([
{ route: 'ErrorPage', moduleId: 'ErrorPage', title: 'ErrorPage', title: 'ErrorPage', nav: false }
]).activate
router.navigate('ErrorPage');
},
logout_redirect_url: function () {
router.map([
{ route: 'ErrorPage', moduleId: 'ErrorPage', title: 'ErrorPage', title: 'ErrorPage', nav: false }
]).activate
router.navigate('ErrorPage');
},
logout_function: function () {
amplify.store("ErrorDetails", "Session Timed Out!");
router.map([
{ route: 'ErrorPage', moduleId: 'ErrorPage', title: 'ErrorPage', title: 'ErrorPage', nav: false }
]).activate
router.navigate('ErrorPage');
},
restart_on_yes: true,
dialog_width: 350
},
alertSetTimeoutHandle: 0,
setupDialogTimer: function (options) {
if (options !== undefined) {
$.extend(this.settings, options);
}
var self = this;
if (self.alertSetTimeoutHandle !== 0) {
clearTimeout(self.alertSetTimeoutHandle);
}
self.alertSetTimeoutHandle = window.setTimeout(function () {
self.setupDialog();
}, (this.settings.timeout - this.settings.countdown) * 1000);
},
setupDialog: function () {
//check for other modal forms on view
//$.element.modal('hide');
$('.modal').modal('hide');
var self = this;
self.destroyDialog();
$('<div id="timeout-dialog">' +
'<p id="timeout-message">' + this.settings.message.format('<span id="timeout-countdown">' + this.settings.countdown + '</span>') + '</p>' +
'<p id="timeout-question">' + this.settings.question + '</p>' +
'</div>')
.appendTo('body')
.dialog({
modal: true,
width: this.settings.dialog_width,
minHeight: 'auto',
zIndex: 10000,
closeOnEscape: false,
draggable: false,
resizable: false,
dialogClass: 'timeout-dialog',
title: this.settings.title,
buttons: {
'keep-alive-button': {
text: this.settings.keep_alive_button_text,
id: "timeout-keep-signin-btn",
click: function () {
self.keepAlive();
}
},
'sign-out-button': {
text: this.settings.sign_out_button_text,
id: "timeout-sign-out-button",
click: function () {
self.signOut(true);
}
}
}
});
self.startCountdown();
},
destroyDialog: function () {
if ($("#timeout-dialog").length) {
$("#timeout-dialog").dialog("close");
$('#timeout-dialog').remove();
}
},
startCountdown: function () {
var self = this,
counter = this.settings.countdown;
this.countdown = window.setInterval(function () {
counter -= 1;
$("#timeout-countdown").html(counter);
if (counter <= 0) {
window.clearInterval(self.countdown);
self.signOut(false);
}
}, 1000);
},
keepAlive: function () {
var self = this;
this.destroyDialog();
window.clearInterval(this.countdown);
this.settings.keep_alive_function();
if (this.settings.keep_alive_url !== '') {
$.get(this.settings.keep_alive_url, function (data) {
if (data === "OK") {
if (this.settings.restart_on_yes) {
self.setupDialogTimer();
}
}
else {
self.signOut(false);
}
});
}
},
signOut: function (is_forced) {
var self = this;
this.destroyDialog();
this.settings.logout_function(is_forced);
if (this.settings.logout_url !== null) {
$.post(this.settings.logout_url, function (data) {
self.redirectLogout(is_forced);
});
}
else {
self.redirectLogout(is_forced);
}
},
redirectLogout: function (is_forced) {
var target = this.settings.logout_redirect_url + '?next=' + encodeURIComponent(window.location.pathname + window.location.search);
if (!is_forced)
target += '&timeout=t';
window.location = target;
},
};
var dataservice = {
timeoutDialog: timeoutDialog
};
return dataservice;
});
I put the timeout-dialog.js in my own folder under the apps folder to bring in durandal and other services i needed. The idle-timer.js was left in the scripts folder and registered via bundle.config.
I'm starting to learn and azure phonejs.
Todo list get through a standard example:
$(function() {
var client = new WindowsAzure.MobileServiceClient('https://zaburrito.azure-mobile.net/', 'key');
var todoItemTable = client.getTable('todoitem');
// Read current data and rebuild UI.
// If you plan to generate complex UIs like this, consider using a JavaScript templating library.
function refreshTodoItems() {
var query = todoItemTable.where({ complete: false });
query.read().then(function(todoItems) {
var listItems = $.map(todoItems, function(item) {
return $('<li>')
.attr('data-todoitem-id', item.id)
.append($('<button class="item-delete">Delete</button>'))
.append($('<input type="checkbox" class="item-complete">').prop('checked', item.complete))
.append($('<div>').append($('<input class="item-text">').val(item.text)));
});
$('#todo-items').empty().append(listItems).toggle(listItems.length > 0);
$('#summary').html('<strong>' + todoItems.length + '</strong> item(s)');
}, handleError);
}
function handleError(error) {
var text = error + (error.request ? ' - ' + error.request.status : '');
$('#errorlog').append($('<li>').text(text));
}
function getTodoItemId(formElement) {
return $(formElement).closest('li').attr('data-todoitem-id');
}
// Handle insert
$('#add-item').submit(function(evt) {
var textbox = $('#new-item-text'),
itemText = textbox.val();
if (itemText !== '') {
todoItemTable.insert({ text: itemText, complete: false }).then(refreshTodoItems, handleError);
}
textbox.val('').focus();
evt.preventDefault();
});
// Handle update
$(document.body).on('change', '.item-text', function() {
var newText = $(this).val();
todoItemTable.update({ id: getTodoItemId(this), text: newText }).then(null, handleError);
});
$(document.body).on('change', '.item-complete', function() {
var isComplete = $(this).prop('checked');
todoItemTable.update({ id: getTodoItemId(this), complete: isComplete }).then(refreshTodoItems, handleError);
});
// Handle delete
$(document.body).on('click', '.item-delete', function () {
todoItemTable.del({ id: getTodoItemId(this) }).then(refreshTodoItems, handleError);
});
// On initial load, start by fetching the current data
refreshTodoItems();
});
and it works!
Changed for the use of phonejs and the program stops working, even mistakes does not issue!
This my View:
<div data-options="dxView : { name: 'home', title: 'Home' } " >
<div class="home-view" data-options="dxContent : { targetPlaceholder: 'content' } " >
<button data-bind="click: incrementClickCounter">Click me</button>
<span data-bind="text: listData"></span>
<div data-bind="dxList:{
dataSource: listData,
itemTemplate:'toDoItemTemplate'}">
<div data-options="dxTemplate:{ name:'toDoItemTemplate' }">
<div style="float:left; width:100%;">
<h1 data-bind="text: name"></h1>
</div>
</div>
</div>
</div>
This my ViewModel:
Application1.home = function (params) {
var client = new WindowsAzure.MobileServiceClient('https://zaburrito.azure-mobile.net/', 'key');
var todoItemTable = client.getTable('todoitem');
var toDoArray = ko.observableArray([
{ name: "111", type: "111" },
{ name: "222", type: "222" }]);
var query = todoItemTable.where({ complete: false });
query.read().then(function (todoItems) {
for (var i = 0; i < todoItems.length; i++) {
toDoArray.push({ name: todoItems[i].text, type: "NEW!" });
}
});
var viewModel = {
listData: toDoArray,
incrementClickCounter: function () {
todoItemTable = client.getTable('todoitem');
toDoArray.push({ name: "Zippy", type: "Unknown" });
}
};
return viewModel;
};
I can easily add items to the list of programs, but from the server list does not come:-(
I am driven to exhaustion and can not solve the problem for 3 days, which is critical for me!
Specify where my mistake! Thank U!
I suggest you use a DevExpress.data.DataSource and a DevExpress.data.CustomStore instead of ko.observableArray.
Application1.home = function (params) {
var client = new WindowsAzure.MobileServiceClient('https://zaburrito.azure-mobile.net/', 'key');
var todoItemTable = client.getTable('todoitem');
var toDoArray = [];
var store = new DevExpress.data.CustomStore({
load: function(loadOptions) {
var d = $.Deferred();
if(toDoArray.length) {
d.resolve(toDoArray);
} else {
todoItemTable
.where({ complete: false })
.read()
.then(function(todoItems) {
for (var i = 0; i < todoItems.length; i++) {
toDoArray.push({ name: todoItems[i].text, type: "NEW!" });
}
d.resolve(toDoArray);
});
}
return d.promise();
},
insert: function(values) {
return toDoArray.push(values) - 1;
},
remove: function(key) {
if (!(key in toDoArray))
throw Error("Unknown key");
toDoArray.splice(key, 1);
},
update: function(key, values) {
if (!(key in toDoArray))
throw Error("Unknown key");
toDoArray[key] = $.extend(true, toDoArray[key], values);
}
});
var source = new DevExpress.data.DataSource(store);
// older version
store.modified.add(function() { source.load(); });
// starting from 14.2:
// store.on("modified", function() { source.load(); });
var viewModel = {
listData: source,
incrementClickCounter: function () {
store.insert({ name: "Zippy", type: "Unknown" });
}
};
return viewModel;
}
You can read more about it here and here.
Thanks to other people's questions, I have gotten AJAX links to work for individual songs when clicked in the DOM. My problem is that I need to find a way to load all of the tracks under a given user's account on soundcloud. I edited the stratus.js file to make it listen for the click by using .delegate(), but I can't figure out how to call the track listing from soundcloud and load it through the given iframe. This is the stratus.js file.
(function() {
var $;
$ = jQuery;
(function($){var g,d,j=1,a,b=this,f=!1,h="postMessage",e="addEventListener",c,i=b[h]&&!$.browser.opera;$[h]=function(k,l,m){if(!l){return}k=typeof k==="string"?k:$.param(k);m=m||parent; if(i){m[h](k,l.replace(/([^:]+:\/\/[^\/]+).*/,"$1"))}else{if(l){m.location=l.replace(/#.*$/,"")+"#"+(+new Date)+(j++)+"&"+k}}};$.receiveMessage=c=function(l,m,k){if(i){if(l){a&&c(); a=function(n){if((typeof m==="string"&&n.origin!==m)||($.isFunction(m)&&m(n.origin)===f)){return f}l(n)}}if(b[e]){b[l?e:"removeEventListener"]("message",a,f)} else{b[l?"attachEvent":"detachEvent"]("onmessage",a)}}else{g&&clearInterval(g);g=null;if(l){k=typeof m==="number"?m:typeof k==="number"?k:100; g=setInterval(function(){var o=document.location.hash,n=/^#?\d+&/;if(o!==d&&n.test(o)){d=o;l({data:o.replace(n,"")})}},k)}}}})(jQuery);
$.fn.stratus = function(settings) {
return $.stratus(settings);
};
$.stratus = function(settings) {
var root_url, src;
root_url = settings.env === 'development' ? 'http://example.com:3000' : 'http://stratus.sc';
$('head').append("<link rel='stylesheet' href='" + root_url + "/stratus.css' type='text/css'/>");
if (settings.align === 'top') {
$('head').append("<style>#stratus{ top: 0; }</style>");
}
if (settings.position === 'absolute') {
$('head').append("<style>#stratus{ position: absolute; }</style>");
}
if (settings.offset) {
$('head').append("<style>#stratus{ " + settings.align + ": " + settings.offset + "px !important; }</style>");
}
$('body').append("<div id='stratus'><iframe allowtransparency='true' frameborder='0' scrolling='0'></div>");
src = root_url + '/player?' + $.param(settings, true) + '&link=' + encodeURIComponent(document.location.href);
$('#stratus iframe').attr({
src: src
});
$('#stratus iframe').load(function() {// /resolve?url=
return $(this).css({
visibility: 'visible'
});
});
$('#stratus').show();
$(document).delegate("a.stratus","click", function () {
$.postMessage($(this).attr('href'), src, $('#stratus iframe')[0].contentWindow);
return false;
});
return $.receiveMessage(function(e) {
return $('#stratus').toggleClass('open');
}, root_url);
};
}).call(this);
I believe that a call through the Soundcloud API will be necessary, then a run through the user data for individual track additions through the iframe. This is the player.js file, which I'm not sure is necessary for this post, but it helped me begin to understand what was happening with the initial adding of tracks from the customisable Links field:
console.log("Stratus loading...");
$(function() {
var b, booleans, getScaledImageData, link, params, scApiUrl, source_origin, strtobool, timecode, _i, _len;
window.Track = Backbone.Model.extend({
initialize: function() {
var that, track;
that = this;
track = this.attributes;
track.timecode = timecode(track.duration);
return soundManager.createSound({
id: "sound_" + track.id,
multiShot: false,
url: track.stream_url + (/\?/.test(track.stream_url) ? '&' : '?') + 'consumer_key=' + Stratus.options.key,
volume: Stratus.options.volume,
whileplaying: function() {
Stratus.$('.played').width((this.position / track.duration * 100) + '%');
return Stratus.$('#player .duration').text(timecode(this.position) + ' / ' + timecode(track.duration));
},
whileloading: function() {
return Stratus.$('.loaded').width((this.bytesLoaded / this.bytesTotal * 100) + '%');
},
onplay: function() {
if (this.loaded) {
return Stratus.$('.loaded').width('100%');
}
},
onresume: function() {
if (this.loaded) {
return Stratus.$('.loaded').width('100%');
}
},
onfinish: function() {
return Stratus.nextTrack();
}
});
},
sound: function() {
return "sound_" + this.id;
},
play: function() {
return soundManager.play(this.sound());
},
pause: function() {
return soundManager.pause(this.sound());
},
seek: function(relative) {
return soundManager.setPosition(this.sound(), this.get('duration') * relative);
},
getWave: function(callback) {
var that;
that = this;
return $.getJSON('http://wave64.heroku.com/w?callback=?', {
url: this.get('waveform_url')
}, function(data) {
var waveform;
waveform = new Image();
waveform.src = data.data;
return waveform.onload = function() {
var waveform_data;
waveform_data = getScaledImageData(waveform);
that.set({
'waveform_data': waveform_data
});
return callback();
};
});
},
comment: function(text) {
return SC.post("/tracks/" + this.id + "/comments", {
"comment[body]": text
}, function() {
Stratus.$('#comment input').val('');
Stratus.toggleComment();
return alert("Comment posted!");
});
},
favorite: function() {
if (Stratus.$('.love').hasClass('loved')) {
return SC["delete"]("/me/favorites/" + this.id, function() {
return Stratus.$('.love').removeClass('loved');
});
} else {
return SC.put("/me/favorites/" + this.id, function() {
return Stratus.$('.love').addClass('loved');
});
}
},
isFavorite: function() {
return SC.get("/me/favorites/" + this.id, function(data) {
if (!(data.errors != null)) {
return Stratus.$('.love').addClass('loved');
}
});
}
});
window.TrackList = Backbone.Collection.extend({
model: Track,
select: function(track) {
this.stop();
this.current = track;
return this.trigger('player:select');
},
toggle: function(track) {
if (track && this.current !== track) {
this.select(track);
}
if (this.playing) {
return this.pause();
} else {
return this.play();
}
},
play: function(track) {
if (track && this.current !== track) {
this.select(track);
}
this.playing = true;
this.current.play();
return this.trigger('player:toggle');
},
pause: function() {
this.playing = false;
this.current.pause();
return this.trigger('player:toggle');
},
stop: function() {
this.playing = false;
return soundManager.stopAll();
},
prev: function() {
var i;
i = this.indexOf(this.current) - 1;
if (i > -1) {
return this.at(i);
} else {
return this.last();
}
},
next: function() {
var i;
i = this.indexOf(this.current) + 1;
if (i < _.size(this)) {
return this.at(i);
} else {
return this.first();
}
},
random: function() {
var i;
i = Math.round(Math.random() * _.size(this));
return this.at(i);
}
});
window.Tracks = new TrackList();
window.TrackView = Backbone.View.extend({
tagName: "li",
events: {
"click": "toggleTrack"
},
render: function() {
return $(this.el).html(ich.track(this.model.toJSON()));
},
toggleTrack: function() {
return Tracks.toggle(this.model);
}
});
window.AppView = Backbone.View.extend({
el: $('#stratus'),
defaults: {
align: 'bottom',
animate: 'slide',
auto_play: false,
buying: true,
color: 'F60',
download: true,
env: 'production',
key: 'ybtyKcnlhP3RKXpJ58fg',
links: ['http://soundcloud.com/qotsa/sets/test'],
random: false,
redirect: 'http://stratus.sc/callback.html',
user: true,
stats: true,
volume: 50
},
events: {
"dblclick": "showDrawer",
"click .prev": "prevTrack",
"click .toggle": "toggleCurrent",
"click .next": "nextTrack",
"click #time": "seekTrack",
"mousemove #time": "movePosition",
"click .share": "toggleShare",
"click .close.sharing": "toggleShare",
"click .comment": "toggleComment",
"click .close.commenting": "toggleComment",
"keypress #add input": "commentTrack",
"click .love": "favoriteTrack",
"click #avatar": "logout",
"click .popup": "popupPlayer"
},
initialize: function() {
var options, that;
console.log("Stratus initializing...");
that = this;
this.options = options = _.extend(this.defaults, this.options);
Tracks.bind('add', this.add, this);
Tracks.bind('player:select', this.render, this);
Tracks.bind('player:toggle', this.toggle, this);
SC.initialize({
client_id: options.key,
redirect_uri: options.redirect
});
return SC.whenStreamingReady(function() {
return that.loadTracks(options.links, function() {
Tracks.select(options.random ? Tracks.random() : Tracks.first());
if (options.auto_play) {
Tracks.play();
}
if (options.align === 'top') {
options.top = true;
}
options.color = {
base: tinycolor(options.color).toHexString(),
light: tinycolor.lighten(options.color).toHexString(),
dark: tinycolor.darken(options.color).toHexString()
};
$('head').append(ich.theme(options));
if (SC.isConnected()) {
that.updateUser();
}
return that.animate(function() {
return that.resize();
});
});
});
},
loadTracks: function(links, callback) {
var index, loadURL;
index = 0;
loadURL = function(link) {
var url;
console.log("Loading " + link + "...");
url = scApiUrl(link);
return SC.get(url, function(data) {
index += 1;
if (data.tracks) {
Tracks.add(data.tracks);
} else if (data.username || data.creator) {
links.push(data.uri + '/tracks');
} else {
Tracks.add(data);
}
if (links[index]) {
return loadURL(links[index]);
} else {
return callback();
}
});
};
return loadURL(links[index]);
},
render: function() {
var artwork, data, el, that, track;
that = this;
track = Tracks.current;
data = Tracks.current.toJSON();
el = this.$('#tracks .track_' + data.id);
this.$('#player .track').html(ich.current(data));
this.$('#buttons').html(ich.buttons(data));
this.$('#stats').html(ich.stats(data));
this.$('#share').html(ich.share(data));
artwork = data.artwork_url ? data.artwork_url : data.user.avatar_url;
this.$('#artwork img').attr({
src: artwork.replace('-large', '-t300x300')
});
el.addClass('current').siblings().removeClass('current');
if (track.has('waveform_data')) {
this.updateWave(track);
} else {
track.getWave(function() {
return that.updateWave(track);
});
}
if (SC.isConnected()) {
track.isFavorite();
}
return this.resize();
},
add: function(track) {
var view;
view = new TrackView({
model: track,
className: 'track track_' + track.id
});
return this.$("#tracks").append(view.render());
},
toggle: function() {
return this.$('#player').toggleClass('playing', Tracks.playing);
},
toggleCurrent: function() {
Tracks.toggle();
return false;
},
prevTrack: function() {
Tracks.play(Tracks.prev());
return false;
},
nextTrack: function() {
Tracks.play(Tracks.next());
return false;
},
seekTrack: function(e) {
var relative;
if (!Tracks.playing) {
Tracks.play();
}
relative = Math.min(this.$('.loaded').width(), (e.pageX - this.$('#time').offset().left) / this.$('#time').width());
Tracks.current.seek(relative);
return false;
},
movePosition: function(e) {
return this.$('.position').css({
"left": e.pageX - this.$('#time').offset().left
});
},
updateWave: function(track) {
var canvas, context;
canvas = this.$('#waveform').get(0);
context = canvas.getContext('2d');
canvas.setAttribute('width', 180);
canvas.setAttribute('height', 40);
context.clearRect(0, 0, 180, 40);
return context.putImageData(track.get('waveform_data'), 0, 0);
},
animate: function(callback) {
if (this.options.popup) {
this.$('#player, #drawer').fadeIn('slow');
}
switch (this.options.animate) {
case 'slide':
return this.$('#player').slideDown('slow', function() {
return callback();
});
case 'fade':
return this.$('#player').fadeIn('slow', function() {
return callback();
});
default:
return this.$('#player').show(0, function() {
return callback();
});
}
},
resize: function() {
this.$('#share').css({
"margin-right": this.$('#buttons').width() - 30
});
return this.$('#comment').css({
"margin-right": this.$('#buttons').width() - 60
});
},
showDrawer: function() {
this.$('#drawer').toggle();
return $.postMessage(true, source_origin, parent);
},
popupPlayer: function() {
Tracks.stop();
this.toggle();
return $.popupWindow($.url().attr('source') + '&popup=true', {
height: 199,
width: 800,
location: false
});
},
toggleShare: function() {
this.$('#share').toggle();
this.$('#share input').select();
return false;
},
toggleComment: function() {
var that;
that = this;
if (SC.isConnected()) {
this.$('#comment').toggle();
this.$('#comment input').select();
} else {
this.login(function() {
return that.toggleComment();
});
}
return false;
},
commentTrack: function(e) {
var text;
text = this.$('#comment input').val();
if (e.keyCode === 13) {
return Tracks.current.comment(text);
}
},
favoriteTrack: function() {
if (SC.isConnected()) {
Tracks.current.favorite();
} else {
this.login(function() {
return Tracks.current.favorite();
});
}
return false;
},
login: function(callback) {
var that;
that = this;
return SC.connect(function(user) {
that.updateUser();
return callback();
});
},
updateUser: function() {
var that;
that = this;
return SC.get("/me", function(user) {
return that.$('#avatar').attr({
src: user.avatar_url
});
});
},
logout: function() {
SC.disconnect();
return alert("Logged out.");
}
});
link = decodeURIComponent($.url().param('link'));
source_origin = $.url(link).attr('base');
$.receiveMessage(function(e) {
var result, url;
url = e.data;
result = Tracks.find(function(track) {
return track.get('permalink_url') === url;
});
if (result) {
return Tracks.toggle(result);
} else {
return SC.get("/resolve", {
url: url
}, function(track) {
Tracks.add(track);
return Tracks.play(Tracks.get(track.id));
});
}
}, source_origin);
scApiUrl = function(url) {
if (/api\./.test(url)) {
return url;
} else {
return "/resolve?url=" + url;
}
};
timecode = function(ms) {
return SC.Helper.millisecondsToHMS(ms);
};
strtobool = function(str) {
switch (str) {
case 'true':
return true;
case true:
return true;
default:
return false;
}
};
getScaledImageData = function(image) {
var color, height, isImageData, lastIndex, orig, origCtx, origImageData, origWidth, populateScaledImagedData, precise, scaleX, scaleY, scaled, scaledCtx, scaledImageData, width, x, y;
color = Stratus.$('#player').css('background-color');
color = tinycolor(color).toRgb();
precise = function(number, precision) {
precision = Math.pow(10, precision || 0);
return Math.round(number * precision) / precision;
};
populateScaledImagedData = function(x, y, srcImageData, indexOffset) {
var alpha, index, indexScaled, isOpaque;
indexOffset = indexOffset || 0;
index = (Math.floor(y / scaleY) * origWidth + Math.floor(x / scaleX)) * 4;
indexScaled = indexOffset + (y * width + x) * 4;
alpha = srcImageData.data[index + 3];
isOpaque = alpha === 255;
scaledImageData.data[indexScaled] = isOpaque ? color['r'] : 0;
scaledImageData.data[indexScaled + 1] = isOpaque ? color['g'] : 0;
scaledImageData.data[indexScaled + 2] = isOpaque ? color['b'] : 0;
scaledImageData.data[indexScaled + 3] = alpha;
return indexScaled;
};
height = 40;
width = 180;
origWidth = image.width;
scaleX = precise(width / image.width, 4);
scaleY = precise(height / image.height, 4);
try {
isImageData = !(image instanceof Image);
} catch (e) {
isImageData = image.hasOwnProperty("data") && image.data.hasOwnProperty("length");
}
orig = document.createElement("canvas");
orig.width = image.width;
orig.height = image.height;
origCtx = orig.getContext("2d");
if (!isImageData) {
origCtx.drawImage(image, 0, 0, image.width, image.height, 0, 0, image.width, image.height);
} else {
origCtx.putImageData(image, 0, 0);
}
origImageData = origCtx.getImageData(0, 0, image.width, image.height);
scaled = document.createElement("canvas");
scaled.width = width;
scaled.height = height;
scaledCtx = scaled.getContext("2d");
scaledImageData = scaledCtx.getImageData(0, 0, width, height);
y = 0;
while (y < height) {
x = 0;
while (x < width) {
lastIndex = populateScaledImagedData(x, y, origImageData, 0);
x++;
}
y++;
}
return scaledImageData;
};
params = $.url().param();
if (params.links) {
params.links = decodeURIComponent(params.links);
params.links = params.links.split(',');
}
if (params.redirect) {
params.redirect = decodeURIComponent(params.redirect);
}
booleans = ['auto_play', 'buying', 'download', 'random', 'user', 'stats', 'popup'];
for (_i = 0, _len = booleans.length; _i < _len; _i++) {
b = booleans[_i];
if (params[b]) {
params[b] = strtobool(params[b]);
}
}
return window.Stratus = new AppView(params);
});
I'm aware that this is rather intensive, and I apologize for that. Just throwing up a prayer that I won't have to radically alter my website user's experience in a negative way.
I don't know about the stratus player, but in general - if you want to retrieve a list of tracks of a specific user - given that you know the user's id, you indeed have to make a call to the soundcloud API. You can do it like this:
SC.initialize({
client_id: "YOUR_CLIENT_ID",
redirect_uri: "http://example.com/callback.html",
});
/**
Once that's done you are all set and ready to call the SoundCloud API.
**/
/**
Call to the SoundCloud API.
Retrieves list of tracks, and displays a list with links to the tracks showing 'tracktitle' and 'track duration'
**/
var userId = 39090345; // user_id of Prutsonic
SC.get("/tracks", {
user_id: userId,
limit: 100
}, function (tracks) {
for (var i = 0; i < tracks.length; i++) {
console.log(tracks[i].title);
}
});
You can try my fiddle here: http://jsfiddle.net/tobiasbeuving/26pHX/5/
Cheers,
T
I'm a bit confused about the asynchous call to the DataBase.
I just want to have a javasctipt adapter class for the calls to the web sql. But I'm not quite sure how to do this. Propably somebody have a good hint for me.
The function OfflneAppDBAdapter.prototype.IsDeviceConfigured() should return true or false depending if there are any items in the Table DeviceConfig.
function OfflneAppDBAdapter() {
self = this;
this.deviceIsConfigured = false;
this.Init = function () {
$data.Entity.extend("$de.offlineapp.DeviceConfig", {
Id: { type: "int", key: true, computed: true },
Name: { type: "string", required: true },
Token: { type: "string" },
Type: { type: "string" }
});
$data.EntityContext.extend("$de.offlineapp.DataContext", {
DeviceConfig: { type: $data.EntitySet, elementType: $de.offlineapp.DeviceConfig }
});
}
self.Init();
$de.offlineapp.context = new $de.offlineapp.DataContext({
name: "webSql", databaseName: "OfflineApp"
});
$de.offlineapp.context.onReady(function () {
});
}
// ************************************************************************
// PUBLIC METHODS -- ANYONE MAY READ/WRITE
// ************************************************************************
OfflneAppDBAdapter.prototype.AddDeviceConfig = function (deviceName, deviceToken, deviceTyp) {
$de.offlineapp.context.onReady(function () {
var promise = $de.offlineapp.context.DeviceConfig.toArray(function (x) {
if (x.length == 0) {
var emp = new $de.offlineapp.DeviceConfig({ Name: deviceName, Token: deviceToken, Type: deviceTyp });
$de.offlineapp.context.DeviceConfig.add(emp);
$de.offlineapp.context.saveChanges();
}
}
)
});
}
OfflneAppDBAdapter.prototype.IsDeviceConfigured = function () {
$de.offlineapp.context.onReady(function () {
var promise = $de.offlineapp.context.DeviceConfig.toArray(function (x) {
if (x.length == 0) {
this.deviceIsConfigured = true;
}
}
)
});
return this.deviceIsConfigured;
}
var myOfflineAppDBAdapter = new OfflneAppDBAdapter();
myOfflineAppDBAdapter.AddDeviceConfig("DeviceName", "Token", "iPad");
console.log(myOfflineAppDBAdapter.IsDeviceConfigured());
As expected the console prints "false". I' aware that the jaydata call works with callbacks and the callbacks are not part of the main class. But there must be a possibility to do so?
I would really apprechiate any help.
Thank you in advance....
Chris
UPDATE:
As you requested the startup code:
function OfflineApplication()
{
self = this;
}
OfflineApplication.prototype.StartApplication = function () {
//Check if online, then sync and
if (navigator && navigator.onLine === true) {
this.IsDeviceConfigured();
}
else {
}
}
///check if the device has a base configuration
OfflineApplication.prototype.IsDeviceConfigured = function () {
myOfflineAppDBAdapter.GetDeviceConfiguration(function (result) {
if (result.length > 0) {
myOfflineAppDBAdapter.deviceIsConfigured = true;
myOfflineApplication.HasDeviceAnApplication();
}
else {
///Get the device base conf from the server.
myOfflineAppSynchronisationAdapter.getDeviceConfigurationByToken(token, myOfflineApplication.HasDeviceAnApplication);
myOfflineAppDBAdapter.deviceIsConfigured = true;
}
});
}
///check if the device has an "application config" in general
OfflineApplication.prototype.HasDeviceAnApplication = function () {
myOfflineAppDBAdapter.GetDeviceAnApplication(function (result) {
if (result.length > 0) {
myOfflineApplication.IsDeviceApplicationVersionLatest(result);
}
else {
myOfflineApplication.GetApplication(false);
}
});
}
///the application config could differ from time to time, so we have to check if a different application should be synct with the device
OfflineApplication.prototype.IsDeviceApplicationVersionLatest = function (result) {
myOfflineAppDBAdapter.DeleteDeviceAnApplication(function () { });
console.log(result);
}
///get the application from the server
OfflineApplication.prototype.GetApplication = function (clearConfig) {
if (clearConfig === true)
{
}
myOfflineAppSynchronisationAdapter.getDeviceApplicationByToken(token, myOfflineApplication.LoadApplication);
}
OfflineApplication.prototype.LoadApplication = function () {
console.log('Now everything is finde and the application gets loaded..');
}
var myOfflineAppDBAdapter = new OfflneAppDBAdapter();
var myOfflineAppSynchronisationAdapter = new OfflineAppSynchronisationAdapter();
var myOfflineApplication = new OfflineApplication();
myOfflineApplication.StartApplication();
There is no sync way. You handling promises wrong. Make your code simple :) You'll need something like this:
$data.Entity.extend("$de.offlineapp.DeviceConfig", {
Id: { type: "int", key: true, computed: true },
Name: { type: "string", required: true },
Token: { type: "string" },
Type: { type: "string" }
});
$data.EntityContext.extend("$de.offlineapp.DataContext", {
DeviceConfig: { type: $data.EntitySet, elementType: $de.offlineapp.DeviceConfig }
});
var context = new $de.offlineapp.DataContext({
name: "webSql", databaseName: "OfflineApp"
});
function AddDeviceConfig(deviceName, deviceToken, deviceTyp) {
return context.DeviceConfig.toArray()
.then(function (x) {
if (x.length == 0) {
var emp = new $de.offlineapp.DeviceConfig({ Name: deviceName, Token: deviceToken, Type: deviceTyp });
context.DeviceConfig.add(emp);
return context.saveChanges();
}
})
}
function IsDeviceConfigured() {
return context.DeviceConfig.toArray()
.then(function (x) {
return x.length > 0;
})
}
context.onReady()
.then(IsDeviceConfigured)
.then(console.log)
.then(function() { return AddDeviceConfig("DeviceName", "Token", "iPad"); })
.then(IsDeviceConfigured)
.then(console.log);
here's a fiddle which does this: http://jsfiddle.net/JayData/cpT5q/1/