Develop Reference

Spotify follow playlist button?

(function() {
function login(callback) {
var CLIENT_ID = 'my_client_id';
var REDIRECT_URI = 'http://jmperezperez.com/spotify-oauth-jsfiddle-proxy/';
function getLoginURL(scopes) {
return 'https://accounts.spotify.com/authorize?client_id=' + CLIENT_ID +
'&redirect_uri=' + encodeURIComponent(REDIRECT_URI) +
'&scope=' + encodeURIComponent(scopes.join(' ')) +
'&response_type=token';
}
var url = getLoginURL([
'playlist-modify-public'
]);
var width = 450,
height = 730,
left = (screen.width / 2) - (width / 2),
top = (screen.height / 2) - (height / 2);
window.addEventListener("message", function(event) {
var hash = JSON.parse(event.data);
if (hash.type == 'access_token') {
callback(hash.access_token);
}
}, false);
var w = window.open(url,
'Spotify',
'menubar=no,location=no,resizable=no,scrollbars=no,status=no, width=' + width + ', height=' + height + ', top=' + top + ', left=' + left
);
}
function followPlaylist(accessToken, playlistUri) {
var parts = playlistUri.split(':');
$.ajax({
url: 'https://api.spotify.com/v1/users/' + parts[2] + '/playlists/' + parts[4] + '/followers',
headers: {
'Authorization': 'Bearer ' + accessToken
},
method: 'PUT',
success: function() {
followButton.textContent = 'Following';
},
dataType: 'html',
error: function(e) {
console.error(e);
}
});
}
var followButton = document.getElementById('btn-follow'),
playlistUriInput = document.getElementById('playlist-uri');
followButton.addEventListener('click', function() {
login(function(accessToken) {
followPlaylist(accessToken, playlistUriInput.value);
});
});
})();
When I press the button it's doing nothing!
I searched everywhere for this, but I can't find it. Is it possible?

React window.addeventlistener doesn't work

I am trying to add spotify authentication to the single page application.
Here is my button click handler event.
var CLIENT_ID = '****';
var REDIRECT_URI = window.location.href;
function getLoginURL(scopes) {
return 'https://accounts.spotify.com/authorize?client_id=' + CLIENT_ID +
'&redirect_uri=' + encodeURIComponent(REDIRECT_URI) +
'&scope=' + encodeURIComponent(scopes.join(' ')) +
'&response_type=token';
}
var url = getLoginURL([
'user-read-email',
'user-read-birthdate',
'user-read-private',
'user-library-modify',
'user-library-read',
'user-follow-read',
'user-follow-modify',
'streaming',
'playlist-modify-private',
'playlist-modify-public',
'playlist-read-collaborative',
'playlist-read-private'
]);
var width = 450,
height = 730,
left = (window.screen.width / 2) - (width / 2),
top = (window.screen.height / 2) - (height / 2);
window.open(url,
'Spotify',
'menubar=no,location=no,resizable=no,scrollbars=no,status=no, width=' + width + ', height=' + height + ', top=' + top + ', left=' + left
);
console.log("window is open");
});
When authentication is performed should will work window.addEventListener('message')
Here is event listener:
componentDidMount() {
window.addEventListener('message', (event) => {
***console.log("Spotify Window sent event data.");
var hash = JSON.parse(event.data);
if (hash.type == 'access_token') {
console.log(hash.access_token);
}
}); }
But it doesn't work. Where is the problem in here? The section marked with *** doesn't even work.
By the way I used this documentation: http://jsfiddle.net/JMPerez/62wafrm7/

It could be possible that, because Spotify is redirecting back to your page, the event is being fired before the component is mounted, which would mean the window isn't listening for it.
I would consider moving your window.addEventListener() code into your index.js file outside of any components.

PopupCenter by opening new window instead of overwriting the previous one

Can the PopupCenter function open a new window instead of overwriting the previously opened window? I tried to add target="_blank" but it does not work.
I have the code written as below:
HTML:
Submit Form<br>
View Form<br>
Javascript:
function PopupCenter(url, title, w, h) {
var left = (screen.width - w) / 2;
var top = (screen.height - h) / 2;
var params = "width=" + w + ", height=" + h;
params += ", top=" + top + ", left=" + left;
params += ", directories=no";
params += ", location=no";
params += ", menubar=no";
params += ", resizable=yes";
params += ", scrollbars=yes";
params += ", status=no";
params += ", toolbar=no";
newwin = window.open(url, title, params);
if (window.focus) { newwin.focus(); }
//return false;
}
For instance, the link for submit form and view form will open seperate windows. Is it possible to achieve this? Need some help and thanks in advance.

You just have to give every link a different title
<html>
<body>
xtf<br>
xtf2<br>
xtf3
<script>
function PopupCenter(url, title, w, h) {
var left = (screen.width - w) / 2;
var top = (screen.height - h) / 2;
var params = "width=" + w + ", height=" + h;
params += ", top=" + top + ", left=" + left;
params += ", directories=no";
params += ", location=no";
params += ", menubar=no";
params += ", resizable=yes";
params += ", scrollbars=yes";
params += ", status=no";
params += ", toolbar=no";
newwin = window.open(url, title, params);
if (window.focus) { newwin.focus(); }
//return false;
}
</script>
</body>
</html>
The first two links in my example open in different windows but not the third, because it has the same title as link nr2

HTML5 Drag-Drop: SetDragImage not working

I'm new to front-end programming and experimenting with HTML5 drag-drop. The object to drag is a bootstrap div.panel which does its job pretty well. However, whilst the object is being dragged, I want to show a custom image using SetDragImage function. I've used this function precisely as described in the Mozilla Developer Network, but still its not working - the default blank rectangle is shown when the object is dragged.
Below is the JavaScript for the drag/drop events, and here is the JSFiddle.
<script type="text/javascript">
function drag(ev){
//var style = window.getComputedStyle(ev.target, null);
var ss = (parseInt($(ev.target).position().left,10) - ev.clientX) + ',' + (parseInt($(ev.target).position().top,10) - ev.clientY);
ev.dataTransfer.setData("text/plain", ss);
ev.dataTransfer.setDragImage(document.getElementById("draggit"), 0, 0);
console.log("drag:target", $(ev.target).position().left + "," + $(ev.target).position().top);
console.log("drag:offset", ss);
}
function drop(ev) {
//console.log("drop:" + $(ev.target).position().left + "," + $(ev.target).position().top);
//console.log("drop:" + ev.clientX + "," + ev.clientY);
var offset = ev.dataTransfer.getData("text/plain");
var npos = offset.split(",");
console.log("drop_clientpos:" + ev.clientX + "," + ev.clientY);
console.log("drop_newpos:" + (ev.clientX + parseInt(npos[0])) + "," + (ev.clientY + parseInt(npos[1])));
document.getElementById("dragme").style.left = (ev.clientX + parseInt(npos[0])) + "px";
document.getElementById("dragme").style.top = (ev.clientY + parseInt(npos[1])) + "px";
ev.preventDefault();
return false;
}
function dragOver(ev) {
ev.preventDefault();
return false;
}
</script>

Pdf page count in javascript (titanium)

Is there a possible way to do a PDF page count in javascript (with titanium)?
I'm working on an application, and i need the amount of pages to know on which page a user is. Right now i'm doing the amount of pages hard coded, but I want to retrieve the pages via javascript.
var pageheight;
var numPages = 180;
wv.addEventListener('load', function(e){
var documentHeight = wv.evalJS('window.outerHeight');
var innerHeight = wv.evalJS('window.innerHeight');
var ratio = innerHeight / wv.height;
pageHeight = parseInt(ratio * (documentHeight / numPages), 10);
Ti.API.info(title);
wv.evalJS("var currentPage = 1;");
wv.evalJS("window.onscroll = function() { currentPage = parseInt(window.pageYOffset/" + pageHeight + ") + 1;}");
wv.evalJS("window.onclick = function() { currentPage = parseInt(window.pageYOffset/" + pageHeight + ") + 1;}");
setInterval(getCurrentPage, 100);
});
function jumpToPage(page){
wv.evalJS('window.scrollTo(0, ' + pageHeight * (page - 1) + ');');
}
function getCurrentPage(){
var currentPage = parseInt(wv.evalJS("currentPage"), 10);
Ti.API.info('currentpage: ' + currentPage);
Ti.API.info(title)
}
I hope someone can help me, i really needs this to work.
thanks in advance

You could set the pageHeight manually, since this is most likely static. Then you would just divide the document height with the page height.
wv.evalJS( "Math.ceil( document.body.scrollHeight / " + pageHeight + " )" );
If not, then you could get page count server side and then just get it with XHR from the app.