From bb951a8f282488f8207c3a0406459611e7ead98f Mon Sep 17 00:00:00 2001 From: Fergal Moran Date: Thu, 18 Apr 2013 10:34:28 +0100 Subject: [PATCH] Fixed pushstate handling in IE <=9 --- dss/settings.py | 2 +- spa/urls.py | 2 +- spa/views.py | 6 +- static/css/deepsouthsounds.css | 3 + static/js/app/app.js | 196 ++++++++++++----------- static/js/app/views/header.js | 16 ++ static/js/com.podnoms.utils.js | 30 +++- static/js/libs/backbone/backbone.mine.js | 74 ++++----- templates/account/login.html | 11 +- templates/base.html | 18 +-- templates/views/HeaderView.html | 5 +- templates/views/LoginView.html | 44 ++--- 12 files changed, 220 insertions(+), 187 deletions(-) diff --git a/dss/settings.py b/dss/settings.py index 7928ea2..0eb28a6 100644 --- a/dss/settings.py +++ b/dss/settings.py @@ -131,7 +131,7 @@ MIDDLEWARE_CLASSES = ( 'django.middleware.clickjacking.XFrameOptionsMiddleware', 'django.middleware.gzip.GZipMiddleware', 'spa.middleware.uploadify.SWFUploadMiddleware', - 'spa.middleware.sqlprinter.SqlPrintingMiddleware', + #'spa.middleware.sqlprinter.SqlPrintingMiddleware', #'debug_toolbar.middleware.DebugToolbarMiddleware', ) diff --git a/spa/urls.py b/spa/urls.py index dec2eb2..e820692 100644 --- a/spa/urls.py +++ b/spa/urls.py @@ -39,5 +39,5 @@ urlpatterns = django.conf.urls.patterns( url(r'^audio/', include(audio.urls)), url(r'^api/', include(v1_api.urls)), url(r'^comments/', include('django.contrib.comments.urls')), - (r'^.*/$', 'spa.views.default') + (r'^.*/$', 'spa.views.app') ) diff --git a/spa/views.py b/spa/views.py index 9de8355..448204c 100644 --- a/spa/views.py +++ b/spa/views.py @@ -24,16 +24,16 @@ def app(request): "inc/app.html", context_instance=RequestContext(request)) - +""" def default(request): if 'HTTP_USER_AGENT' in request.META: if request.META['HTTP_USER_AGENT'].startswith('facebookexternalhit'): logger.debug("Redirecting facebook hit") return social_redirect(request) - backbone_url = "http://%s/#%s" % (request.get_host(), rreplace(lreplace(request.path, '/', ''), '/', '')) + backbone_url = "http://%s/%s" % (request.get_host(), rreplace(lreplace(request.path, '/', ''), '/', '')) return redirect(backbone_url) - +""" def upload(request): return render_to_response("inc/upload.html", context_instance=RequestContext(request)) diff --git a/static/css/deepsouthsounds.css b/static/css/deepsouthsounds.css index 898d160..61b7d08 100644 --- a/static/css/deepsouthsounds.css +++ b/static/css/deepsouthsounds.css @@ -354,3 +354,6 @@ div.event-content td { #sidebar-content-activity { font-size: 85%; } +.no-click{ + cursor: pointer; +} \ No newline at end of file diff --git a/static/js/app/app.js b/static/js/app/app.js index dd700bf..674c57e 100644 --- a/static/js/app/app.js +++ b/static/js/app/app.js @@ -7,42 +7,42 @@ */ var AppRouter = Backbone.Router.extend({ - routes:{ - "mixes":"mixList", - "mixes/:type":"mixList", - "mix/upload":"mixUpload", - "mix/:id":"mixDetails", - "mix/edit/:id":"mixEdit", - "releases":"releaseList", - "release/add":"releaseAdd", - "release/edit/:id":"releaseEdit", - "release/:id":"releaseDetails", - "events":"eventList", - "event/add":"eventAdd", - "event/:id":"eventDetails", - "accounts/social/connections/":"connectAccounts", - "accounts/facebook/login":"loginRedirect", - "accounts/twitter/login":"loginRedirect", - "accounts/login/":"login", - "accounts/logout/":"logout", - "user/:id":"user", - "upload/":"defaultRoute", - "me":"userDetails", - "*path":"defaultRoute" + root: '/', + routes: { + "mixes": "mixList", + "mixes/:type": "mixList", + "mix/upload": "mixUpload", + "mix/:id": "mixDetails", + "mix/edit/:id": "mixEdit", + "releases": "releaseList", + "release/add": "releaseAdd", + "release/edit/:id": "releaseEdit", + "release/:id": "releaseDetails", + "events": "eventList", + "event/add": "eventAdd", + "event/:id": "eventDetails", + //"accounts/social/connections/": "connectAccounts", + //"accounts/facebook/login": "loginRedirect", + //"accounts/twitter/login": "loginRedirect", + //"accounts/login/": "login", + //"accounts/logout/": "logout", + "user/:id": "user", + "upload/": "defaultRoute", + "me": "userDetails", + "*path": "defaultRoute" }, - initialize:function () { + initialize: function () { this.headerView = new HeaderView(); $('#header').html(this.headerView.el); $('#site-content-fill').html(''); this.bind('all', this.trackPageView); - }, - trackPageView:function () { + trackPageView: function () { var url; url = Backbone.history.getFragment(); return com.podnoms.utils.trackPageView(url); }, - defaultRoute:function (path) { + defaultRoute: function (path) { if (path == undefined || path == "" || path == "/") this.mixList('latest'); else { @@ -52,23 +52,23 @@ var AppRouter = Backbone.Router.extend({ } }, - user:function (user) { - this._renderMixList('latest', { "user":user }); + user: function (user) { + this._renderMixList('latest', { "user": user }); }, - mixList:function (type) { + mixList: function (type) { this._renderMixList(type); }, - _renderMixList:function (type, data) { + _renderMixList: function (type, data) { var mixList = new MixCollection(); mixList.type = type || 'latest'; $('#site-content-fill').html(''); - var payload = $.extend(type != undefined ? {type:type} : null, data); + var payload = $.extend(type != undefined ? {type: type} : null, data); mixList.fetch({ - data:payload, - success:function () { + data: payload, + success: function () { var mixes = new MixListView({ - collection:mixList + collection: mixList }); var content = mixes.el; $('#content').html(content); @@ -85,14 +85,14 @@ var AppRouter = Backbone.Router.extend({ $('#status', this.sidebarView.el), $('#header-profile-edit').text()); }, - mixDetails:function (id) { + mixDetails: function (id) { var mix = new Mix({ - id:id + id: id }); mix.fetch({ - success:function () { + success: function () { var html = new MixView({ - model:mix + model: mix }); $('#content').html(html.el); $('#site-content-fill').html(''); @@ -103,137 +103,123 @@ var AppRouter = Backbone.Router.extend({ } }); }, - mixUpload:function () { + mixUpload: function () { var html = new MixCreateView({ - model:new Mix() + model: new Mix() }); $('#content').html(html.el); $('#site-content-fill').html(''); }, - mixEdit:function (id) { + mixEdit: function (id) { var mix = new Mix({ - id:id + id: id }); mix.fetch({ - success:function () { + success: function () { var html = new MixCreateView({ - model:mix + model: mix }); $('#content').html(html.el); $('#site-content-fill').html(''); } }); }, - releaseList:function (page) { + releaseList: function (page) { var releaseList = new ReleaseCollection(); releaseList.fetch({ - success:function () { + success: function () { var content = new ReleaseListView({ - collection:releaseList + collection: releaseList }).el; $('#content').html(content); } }); }, - releaseDetails:function (id) { + releaseDetails: function (id) { var release = new Release({ - id:id + id: id }); $('#site-content-fill').html(''); release.fetch({ - success:function () { + success: function () { var content = new ReleaseView({ - model:release + model: release }).el; $('#content').html(content); } }); }, - releaseAdd:function () { + releaseAdd: function () { var html = new ReleaseCreateView({ - model:new Release({ - release_date:com.podnoms.utils.getDateAsToday() + model: new Release({ + release_date: com.podnoms.utils.getDateAsToday() }) }); $('#content').html(html.el); $('#site-content-fill').html(''); }, - releaseEdit:function (id) { + releaseEdit: function (id) { var release = new Release({ - id:id + id: id }); release.fetch({ - success:function () { + success: function () { var html = new ReleaseCreateView({ - model:release + model: release }); $('#content').html(html.el); $('#site-content-fill').html(''); } }); }, - eventList:function (page) { + eventList: function (page) { var eventList = new EventCollection(); eventList.fetch({ - success:function () { + success: function () { var content = new EventListView({ - collection:eventList + collection: eventList }).el; $('#content').html(content); } }); }, - eventDetails:function (id) { + eventDetails: function (id) { var event = new Event({ - id:id + id: id }); $('#site-content-fill').html(''); event.fetch({ - success:function () { + success: function () { var content = new EventView({ - model:event + model: event }).el; $('#content').html(content); } }); }, - eventAdd:function () { + eventAdd: function () { var html = new EventCreateView({ - model:new Event({ - event_date:com.podnoms.utils.getDateAsToday() + model: new Event({ + event_date: com.podnoms.utils.getDateAsToday() }) }); $('#content').html(html.el); $('#site-content-fill').html(''); }, - loginRedirect:function () { + loginRedirect: function () { com.podnoms.utils.showAlert("Success", "Thank you for logging in.", "alert-success", true); this.defaultRoute(); }, - login:function () { - $.colorbox({ - href:"/tpl/LoginView/", - onClosed:function () { - Backbone.history.navigate('/', { - trigger:true - }); - } - }) - - }, - logout:function () { - com.podnoms.utils.showAlert("Success", "You are now logged out", "alert-success", true); - }, - connectAccounts:function () { + connectAccounts: function () { alert("Connecting accounts"); }, - userDetails:function () { + userDetails: function () { var user = new User(); $('#site-content-fill').html(''); user.fetch({ - success:function () { + success: function () { var content = new UserView({ - model:user + model: user }).el; $('#content').html(content); } @@ -243,15 +229,33 @@ var AppRouter = Backbone.Router.extend({ com.podnoms.utils.loadTemplate(['HeaderView', 'SidebarView', 'UserView', 'MixListView', 'MixListItemView', 'MixView', 'MixCreateView', 'CommentListView', 'CommentListItemView', 'ActivityListView', 'ActivityListItemView', 'ReleaseListView', 'ReleaseListItemView', 'ReleaseItemView', 'ReleaseView', 'ReleaseCreateView', 'ReleaseAudioListView', 'ReleaseAudioItemView', 'EventCreateView', 'EventListView', 'EventListItemView', 'EventView', 'EventItemView'], function () { window.app = new AppRouter(); - $(document).on('click', 'a:internal:not(.no-click)', function (event) { - Backbone.history.navigate($(this).attr('href'), { - trigger:true - }); - return false; - }); - Backbone.history = Backbone.history || new Backbone.History({}); - Backbone.history.start({ - pushState:true + // Trigger the initial route and enable HTML5 History API support, set the + // root folder to '/' by default. Change in app.js. + var enablePushState = true; + // Disable for older browsers + var pushState = !!(enablePushState && window.history && window.history.pushState); + Backbone.history.start({ pushState: pushState, root: app.root, hashChange: true }); + + // All navigation that is relative should be passed through the navigate + // method, to be processed by the router. If the link has a `data-bypass` + // attribute, bypass the delegation completely. + $(document).on("click", "a[href]:not([data-bypass])", function (evt) { + // Get the absolute anchor href. + var href = { prop: $(this).prop("href"), attr: $(this).attr("href") }; + // Get the absolute root. + var root = location.protocol + "//" + location.host + app.root; + + // Ensure the root is part of the anchor href, meaning it's relative. + if (href.prop.slice(0, root.length) === root) { + // Stop the default event to ensure the link will not cause a page + // refresh. + evt.preventDefault(); + + // `Backbone.history.navigate` is sufficient for all Routers and will + // trigger the correct events. The Router's internal `navigate` method + // calls this anyways. The fragment is sliced from the root. + Backbone.history.navigate(href.attr, true); + } }); }); var _eventAggregator = _.extend({}, Backbone.Events); diff --git a/static/js/app/views/header.js b/static/js/app/views/header.js index a245bc7..e1dab4c 100644 --- a/static/js/app/views/header.js +++ b/static/js/app/views/header.js @@ -9,6 +9,7 @@ window.HeaderView = Backbone.View.extend({ events:{ "click #header-play-pause-button":"togglePlayState", + "click #header-login-button":"login", "click #header-live-button":"playLive" }, initialize:function () { @@ -20,6 +21,21 @@ window.HeaderView = Backbone.View.extend({ _eventAggregator.bind("track_playing", this.trackPlaying); _eventAggregator.bind("track_paused", this.trackPaused); }, + login: function () { + com.podnoms.utils.modal('tpl/LoginView'); + return; + $.colorbox({ + href: "/tpl/LoginView/", + onClosed: function () { + Backbone.history.navigate('/', { + trigger: true + }); + } + }); + }, + logout: function () { + com.podnoms.utils.showAlert("Success", "You are now logged out", "alert-success", true); + }, trackChanged:function (data) { $(this.el).find('#track-description').text(data.title); $(this.el).find('#track-description').attr("href", "#" + data.item_url); diff --git a/static/js/com.podnoms.utils.js b/static/js/com.podnoms.utils.js index b38ab05..89013d8 100644 --- a/static/js/com.podnoms.utils.js +++ b/static/js/com.podnoms.utils.js @@ -47,6 +47,22 @@ com.podnoms.utils = { controlGroup.removeClass('error'); $('.help-inline', controlGroup).html(''); }, + modal: function (url) { + if (url.indexOf("#") == 0) { + $(url).modal('open'); + } else { + $.get(url,function (data) { + $('
' + data + '
') + .modal() + .on('hidden', function () { + $(this).remove(); + } + ); + }).success(function () { + $('input:text:visible:first').focus(); + }); + } + }, showError: function (title, message) { this.showAlert(title, message, 'alert-error', true); }, @@ -63,7 +79,7 @@ com.podnoms.utils = { this.hideAlert(); }); }, - showAlertModal: function(title, message){ + showAlertModal: function (title, message) { $('#alert-proxy-title').text(title); $('#alert-proxy-message').html(message); $('#alert-proxy').modal(); @@ -98,16 +114,16 @@ com.podnoms.utils = { return v.toString(16); }); }, - checkPlayCount: function(){ - if (document.cookie.indexOf('sessionId')){ + checkPlayCount: function () { + if (document.cookie.indexOf('sessionId')) { $.getJSON('/ajax/session_play_count', function (data) { - if ((data.play_count != 0) && (data.play_count % 5) == 0){ + if ((data.play_count != 0) && (data.play_count % 5) == 0) { com.podnoms.utils.showAlertModal( "Hey There!", "We've noticed you've been playing a few mixes now.
" + - "This is cool and we're happy you're enjoying the site but we would love it " + - "if you would consider logging in.
" + - "This will let you comment on mixes and even download them."); + "This is cool and we're happy you're enjoying the site but we would love it " + + "if you would consider logging in.
" + + "This will let you comment on mixes and even download them."); } }); } diff --git a/static/js/libs/backbone/backbone.mine.js b/static/js/libs/backbone/backbone.mine.js index 67a1f53..7f92344 100644 --- a/static/js/libs/backbone/backbone.mine.js +++ b/static/js/libs/backbone/backbone.mine.js @@ -9,7 +9,7 @@ Backbone.Validate = function (model, changedAttributes) { }); this.validators = { - required:function (fields) { + required: function (fields) { _.each(fields, function (field) { if (_.isEmpty(this.attributes[field]) === true) { this.addError(field, I18n.t('errors.form.required')); @@ -30,24 +30,24 @@ Backbone.Validate = function (model, changedAttributes) { }; window.TastypieModel = Backbone.Model.extend({ - base_url:function () { + base_url: function () { var temp_url = Backbone.Model.prototype.url.call(this); return (temp_url.charAt(temp_url.length - 1) == '/' ? temp_url : temp_url + '/'); }, - url:function () { + url: function () { return this.base_url(); } }); window.TastypieCollection = Backbone.Collection.extend({ - parse:function (response) { + parse: function (response) { this.recent_meta = response.meta || {}; return response.objects || response; } }); window.DSSModel = window.TastypieModel.extend({ - addError:function (field, message) { + addError: function (field, message) { if (_.isUndefined(this.errors[field])) { this.errors[field] = []; } @@ -57,11 +57,11 @@ window.DSSModel = window.TastypieModel.extend({ }); window.DSSEditableView = Backbone.View.extend({ - events:{ - "change input":"changed", - "change textarea":"changed" + events: { + "change input": "changed", + "change textarea": "changed" }, - changeSelect:function (evt) { + changeSelect: function (evt) { var changed = evt.currentTarget; if (!com.podnoms.utils.isEmpty(changed.id)) { var value = $(evt.currentTarget).val(); @@ -70,7 +70,7 @@ window.DSSEditableView = Backbone.View.extend({ this.model.set(objInst); } }, - changed:function (evt) { + changed: function (evt) { var changed = evt.currentTarget; //$("#" + changed.id) if (!com.podnoms.utils.isEmpty(changed.id)) { @@ -86,16 +86,16 @@ window.DSSEditableView = Backbone.View.extend({ this.model.set(objInst); } }, - _bakeForm:function (el, lookups) { + _bakeForm: function (el, lookups) { //TODO extend lookups to be a list //TODO this way we can initialise more than one lookup per page var model = this.model; var labels, mapped; $('.typeahead', el).typeahead({ - source:function (query, process) { + source: function (query, process) { $.get( '/ajax/lookup/' + lookups + '/', - { query:query }, + { query: query }, function (data) { labels = [] mapped = {} @@ -106,7 +106,7 @@ window.DSSEditableView = Backbone.View.extend({ process(labels); }, 'json'); }, - updater:function (item) { + updater: function (item) { this.$element.val(mapped[item][0]); model.set(this.$element.attr('id'), mapped[item][0]); return item; @@ -114,33 +114,33 @@ window.DSSEditableView = Backbone.View.extend({ }); $('.datepicker', el).datepicker( { - 'format':'dd/mm/yyyy' + 'format': 'dd/mm/yyyy' } ); $('.timepicker', el).timepicker(); $('textarea.tinymce', this.el).tinymce({ - script_url:"/static/js/libs/tiny_mce/tiny_mce.js", - mode:"textareas", - theme:"advanced", - theme_advanced_toolbar_location:"top", - theme_advanced_toolbar_align:"left", - theme_advanced_buttons1:"fullscreen,media,tablecontrols,separator,link,unlink,anchor,separator,preview,separator,bold,italic,underline,strikethrough,separator,bullist,numlist,outdent,indent,separator,undo,redo,separator,image,cleanup,help,separator,code", - theme_advanced_buttons2:"", - theme_advanced_buttons3:"", - auto_cleanup_word:true, - plugins:"media, table,save,advhr,advimage,advlink,emotions,iespell,insertdatetime,print,contextmenu,fullscreen,preview,searchreplace", - plugin_insertdate_dateFormat:"%m/%d/%Y", - plugin_insertdate_timeFormat:"%H:%M:%S", - extended_valid_elements:"a[name|href|target=_blank|title|onclick],img[class|src|border=0|alt|title|hspace|vspace|width|height|align|onmouseover|onmouseout|name],hr[class|width|size|noshade],font[face|size|color|style],span[class|align|style]", - fullscreen_settings:{ - theme_advanced_path_location:"top", - theme_advanced_buttons1:"fullscreen,media, separator,preview,separator,cut,copy,paste,separator,undo,redo,separator,search,replace,separator,code,separator,cleanup,separator,bold,italic,underline,strikethrough,separator,forecolor,backcolor,separator,justifyleft,justifycenter,justifyright,justifyfull,separator,help", - theme_advanced_buttons2:"removeformat,styleselect,formatselect,fontselect,fontsizeselect,separator,bullist,numlist,outdent,indent,separator,link,unlink,anchor", - theme_advanced_buttons3:"sub,sup,separator,image,insertdate,inserttime,separator,tablecontrols,separator,hr,advhr,visualaid,separator,charmap,emotions,iespell,flash,separator,print" + script_url: "/static/js/libs/tiny_mce/tiny_mce.js", + mode: "textareas", + theme: "advanced", + theme_advanced_toolbar_location: "top", + theme_advanced_toolbar_align: "left", + theme_advanced_buttons1: "fullscreen,media,tablecontrols,separator,link,unlink,anchor,separator,preview,separator,bold,italic,underline,strikethrough,separator,bullist,numlist,outdent,indent,separator,undo,redo,separator,image,cleanup,help,separator,code", + theme_advanced_buttons2: "", + theme_advanced_buttons3: "", + auto_cleanup_word: true, + plugins: "media, table,save,advhr,advimage,advlink,emotions,iespell,insertdatetime,print,contextmenu,fullscreen,preview,searchreplace", + plugin_insertdate_dateFormat: "%m/%d/%Y", + plugin_insertdate_timeFormat: "%H:%M:%S", + extended_valid_elements: "a[name|href|target=_blank|title|onclick],img[class|src|border=0|alt|title|hspace|vspace|width|height|align|onmouseover|onmouseout|name],hr[class|width|size|noshade],font[face|size|color|style],span[class|align|style]", + fullscreen_settings: { + theme_advanced_path_location: "top", + theme_advanced_buttons1: "fullscreen,media, separator,preview,separator,cut,copy,paste,separator,undo,redo,separator,search,replace,separator,code,separator,cleanup,separator,bold,italic,underline,strikethrough,separator,forecolor,backcolor,separator,justifyleft,justifycenter,justifyright,justifyfull,separator,help", + theme_advanced_buttons2: "removeformat,styleselect,formatselect,fontselect,fontsizeselect,separator,bullist,numlist,outdent,indent,separator,link,unlink,anchor", + theme_advanced_buttons3: "sub,sup,separator,image,insertdate,inserttime,separator,tablecontrols,separator,hr,advhr,visualaid,separator,charmap,emotions,iespell,flash,separator,print" } }); }, - _saveChanges:function () { + _saveChanges: function () { var args = arguments; if (this.model.isValid() != "") { if (this.model.errors) { @@ -153,10 +153,10 @@ window.DSSEditableView = Backbone.View.extend({ this.model.save( null, { - success:args[0].success, - error:args[0].error + success: args[0].success, + error: args[0].error } ); } } -}); \ No newline at end of file +}); diff --git a/templates/account/login.html b/templates/account/login.html index 0a2c34f..faef1de 100644 --- a/templates/account/login.html +++ b/templates/account/login.html @@ -1,17 +1,9 @@ {% extends "account/base.html" %} - -{% load i18n %} {% load account_tags %} -{% load url from future %} - -{% block head_title %}{% trans "Sign In" %}{% endblock %} - - +{% block head_title %}"Sign In"{% endblock %} {% block content %} -

Login to Deep South Sounds

-
- {% endblock %} diff --git a/templates/base.html b/templates/base.html index 22527cf..c4d98ab 100644 --- a/templates/base.html +++ b/templates/base.html @@ -20,14 +20,6 @@ {% endcompress %} - {% block headerscripts %} {% endblock %} @@ -97,7 +89,6 @@ - @@ -124,5 +115,14 @@ {% endcompress %} {% block footerscripts %} {% endblock %} + +
diff --git a/templates/views/HeaderView.html b/templates/views/HeaderView.html index 3ea75f5..c893736 100644 --- a/templates/views/HeaderView.html +++ b/templates/views/HeaderView.html @@ -17,13 +17,12 @@ - Logout  + Logout  {% else %}
  • - Login/Signup  + Login/Signup 
    • {% endif %} diff --git a/templates/views/LoginView.html b/templates/views/LoginView.html index ff2a50e..dbaac68 100644 --- a/templates/views/LoginView.html +++ b/templates/views/LoginView.html @@ -1,26 +1,30 @@ {% load account %} {% load socialaccount %} - -
    +
    +

    Login to Deep South Sounds

    -
    -
    - +
    +
    + \ No newline at end of file +
    +
    Please note that using a social account
    does not give us access to your private information
    +
    +
    + +