Browse files

Move playlist title generation into controller for now. Presenters ca…

…n come later
  • Loading branch information...
1 parent 4d37b63 commit b1c0d9fa397fad6138a7de531e232e6a2f760668 @jwheare committed Dec 15, 2009
View
9 public/index.html
@@ -165,7 +165,14 @@ <h1 id="title">
</div>
<div id="main">
- <h1 id="playlistTitle">Create a new playlist</h1>
+ <h1 id="createPlaylist">Create a new playlist</h1>
+
+ <div id="playlistHeader">
+ <img src="#">
+ <h1><a href="#"></a></h1>
+ <p class="subtitle"></p>
+ <p class="description"></p>
+ </div>
<p id="tracksLoading"><img src="/track_scanning.gif" width="16" height="16">Loading tracks…</p>
<p id="tracksError">Failed to load tracks. Please try again later.</p>
View
27 public/playlick.css
@@ -300,28 +300,37 @@ form#lastfm_battle_form input#lastfm_battle_input_they {
#main h2 {
margin: 0 0 0 40px;
}
-#main h1 img {
+
+#playlistHeader {
+ margin-bottom: 15px;
+}
+#playlistHeader h1 {
+ margin-bottom: 0;
+}
+#playlistHeader img {
float: right;
margin: 0 0 24px 10px;
vertical-align: middle;
max-width: 100px;
max-height: 100px;
}
-#main h1 small {
+#playlistHeader p {
+ margin: 0;
+}
+#playlistHeader p.subtitle {
+ font-size: 14px;
+ line-height: 1.6;
+ font-weight: bold;
+}
+#playlistHeader p.description {
display: block;
font-weight: normal;
font-size: 13px;
line-height: 1.5;
}
-#main h1 small span.source {
- color: #999;
-}
-#main h1 small span a {
+#playlistHeader p.description a {
color: #4c7a0f;
}
-#main h1 span.subtitle {
- font-size: 14px;
-}
p#tracksLoading {
display: none;
View
38 src/js/controllers/playlist.controller.js
@@ -4,7 +4,8 @@
function Playlist () {
this.playlistSidebarElem = $('#playlists');
this.loadingPlaylistsElem = $('#loading_playlists');
- this.titleElem = $('#playlistTitle');
+ this.createTitleElem = $('#createPlaylist');
+ this.headerElem = $('#playlistHeader');
this.copyrightElem = $('span#playlistCopyright');
this.sourceElem = $('#playlistSource');
this.sourceLink = $('a#playlistSourceLink');
@@ -64,7 +65,8 @@ Playlist.prototype = {
/* CREATE */
showCreateTitle: function () {
- this.titleElem.html(STRINGS.create_playlist_title);
+ this.headerElem.hide();
+ this.createTitleElem.show();
},
create: function () {
@@ -206,8 +208,38 @@ Playlist.prototype = {
this.tracksErrorElem.show();
}
},
+ buildTitle: function () {
+ this.headerElem.empty();
+ // Add an image
+ if (this.current.image) {
+ this.headerElem.append($('<img>').attr('src', this.current.image));
+ }
+
+ var title = $('<h1>');
+ var titleText = this.current.toString();
+ if (this.current.url) {
+ title.append(
+ $('<a>').attr('href', this.current.url).text(titleText)
+ );
+ } else {
+ title.text(titleText);
+ }
+ this.headerElem.append(title);
+
+ if (this.current.subtitle) {
+ this.headerElem.append($('<p class="subtitle">').text(this.current.subtitle));
+ }
+ if (this.current.description) {
+ // Autolink description
+ var escapedDescription = $('<div>').html(this.current.description).text();
+ var description = $('<p class="description">').html(UTIL.autoLink(escapedDescription));
+ this.headerElem.append(description);
+ }
+ this.headerElem.show();
+ },
loadTitle: function () {
- this.titleElem.html(this.current.titleHTML());
+ this.createTitleElem.hide();
+ this.buildTitle();
},
loadCopyright: function () {
this.copyrightElem.text(this.current.copyright || '');
View
39 src/js/main/models.js
@@ -49,47 +49,8 @@
.append(edit_form)
.html();
};
- // Based on http://daringfireball.net/2009/11/liberal_regex_for_matching_urls
- var autolink_regexp = /\b([\w-]+:\/+|www[.])[^\s()<>]+(?:\([\w\d]+\)|(?:[^.,;'">\:\s\<\>\)\]\!]|\/))/g;
- function autoLink (word) {
- return word.replace(autolink_regexp, function (match, protocol, index, full) {
- var url = match;
- if (protocol == 'www.') {
- url = 'http://' + url;
- }
- var text = match.replace(/^http:\/\//, '').replace(/\/$/, '');
- return '<a href="' + url + '">' + text + '</a>';
- });
- }
- function playlistTitleHtml () {
- var wrapper = $('<div>');
- // Add an image
- if (this.image) {
- wrapper.append($('<img>').attr('src', this.image));
- }
-
- var title = this.toString();
- if (this.url) {
- wrapper.append(
- $('<a>').attr('href', this.url).text(title)
- );
- } else {
- wrapper.append(title);
- }
- if (this.subtitle) {
- wrapper.append('<br>').append($('<span class="subtitle">').text(this.subtitle));
- }
- // Autolink description
- if (this.description) {
- var description = $('<small>')
- .append(autoLink($('<div>').html(this.description).text()));
- wrapper.append('<br>').append(description);
- }
- return wrapper.html();
- };
/* Apply to Models */
MODELS.Track.prototype.toHTML = trackToHtml;
MODELS.Playlist.prototype.toHTML = playlistToHtml;
- MODELS.Playlist.prototype.titleHTML = playlistTitleHtml;
})();
View
1 src/js/main/strings.js
@@ -10,6 +10,5 @@ var STRINGS = {
disconnect_from_playdar_text: 'Disconnect',
playdar_unavailable_text: 'Can\'t find Playdar',
download_playdar_text: '<a href="http://www.playdar.org/download/" title="Download Playdar">Download</a>',
- create_playlist_title: CONTROLLERS.Playlist.titleElem.html(),
loading_playlists_text: CONTROLLERS.Playlist.loadingPlaylistsElem.html()
};
View
3 src/js/models/playlist.model.js
@@ -165,9 +165,6 @@ Playlist.prototype = {
toHTML: function () {
return this.toString();
},
- titleHTML: function () {
- return this.toString();
- },
/**
* Build an applescript for exporting to iTunes
**/
View
13 src/js/util.js
@@ -37,5 +37,18 @@ var UTIL = {
}
});
return hash_parts;
+ },
+
+ // Based on http://daringfireball.net/2009/11/liberal_regex_for_matching_urls
+ autolink_regexp: /\b([\w-]+:\/+|www[.])[^\s()<>]+(?:\([\w\d]+\)|(?:[^.,;'">\:\s\<\>\)\]\!]|\/))/g,
+ autoLink: function (word) {
+ return word.replace(UTIL.autolink_regexp, function (match, protocol, index, full) {
+ var url = match;
+ if (protocol == 'www.') {
+ url = 'http://' + url;
+ }
+ var text = match.replace(/^http:\/\//, '').replace(/\/$/, '');
+ return '<a href="' + url + '">' + text + '</a>';
+ });
}
};

0 comments on commit b1c0d9f

Please sign in to comment.