From d21a88a5decc8df18b7add8550e32f8a789892a2 Mon Sep 17 00:00:00 2001 From: Steven Miers Date: Tue, 31 Mar 2015 19:55:26 -0500 Subject: [PATCH 1/6] VRFS-2998 : Hooking up preview widget - incremental. --- .../javascripts/jam_track_screen.js.coffee | 81 ++++-- web/app/assets/javascripts/jamtrack.js.coffee | 243 ------------------ .../stylesheets/client/jamtrack.css.scss | 15 +- web/app/views/clients/_jamtrack.html.slim | 38 +-- 4 files changed, 72 insertions(+), 305 deletions(-) delete mode 100644 web/app/assets/javascripts/jamtrack.js.coffee diff --git a/web/app/assets/javascripts/jam_track_screen.js.coffee b/web/app/assets/javascripts/jam_track_screen.js.coffee index d2f1f21a0..c2b699e84 100644 --- a/web/app/assets/javascripts/jam_track_screen.js.coffee +++ b/web/app/assets/javascripts/jam_track_screen.js.coffee @@ -21,6 +21,7 @@ context.JK.JamTrackScreen=class JamTrackScreen @next = null @currentQuery = this.defaultQuery() @expanded = false + @expanded = [] beforeShow:(data) => this.setFilterFromURL() @@ -67,10 +68,10 @@ context.JK.JamTrackScreen=class JamTrackScreen refresh:() => @currentQuery = this.buildQuery() that = this - rest.getJamtracks(@currentQuery).done((response) -> + rest.getJamtracks(@currentQuery).done((response) => that.clearResults() that.handleJamtrackResponse(response) - ).fail (jqXHR) -> + ).fail (jqXHR) => that.clearResults() that.noMoreJamtracks.show() that.app.notifyServerError jqXHR, 'Jamtrack Unavailable' @@ -118,7 +119,7 @@ context.JK.JamTrackScreen=class JamTrackScreen # if we less results than asked for, end searching @scroller.infinitescroll 'pause' if @currentPage == 0 and response.jamtracks.length == 0 - @content.append '
There\'s no jamtracks.
' + @content.append '
No JamTracks found.
' if @currentPage > 0 @noMoreJamtracks.show() # there are bugs with infinitescroll not removing the 'loading'. @@ -131,6 +132,7 @@ context.JK.JamTrackScreen=class JamTrackScreen registerInfiniteScroll:() => + that = this @scroller.infinitescroll { behavior: 'local' navSelector: '#jamtrackScreen .btn-next-pager' @@ -143,10 +145,10 @@ context.JK.JamTrackScreen=class JamTrackScreen loading: msg: $('
Loading ...
') img: '/assets/shared/spinner.gif' - path: (page) -> - '/api/jamtracks?' + $.param(this.buildQuery()) + path: (page) => + '/api/jamtracks?' + $.param(that.buildQuery()) - }, (json, opts) -> + }, (json, opts) => this.handleJamtrackResponse(json) @scroller.infinitescroll 'resume' @@ -156,7 +158,7 @@ context.JK.JamTrackScreen=class JamTrackScreen addToCartJamtrack:(e) => e.preventDefault() params = id: $(e.target).attr('data-jamtrack-id') - rest.addJamtrackToShoppingCart(params).done((response) -> + rest.addJamtrackToShoppingCart(params).done((response) => context.location = '/client#/shoppingCart' ).fail @app.ajaxError @@ -165,31 +167,45 @@ context.JK.JamTrackScreen=class JamTrackScreen @app.layout.showDialog 'jamtrack-availability-dialog' registerEvents:() => - @screen.find('.jamtrack-detail-btn').on 'click', this.showJamtrackDescription + #@screen.find('.jamtrack-detail-btn').on 'click', this.showJamtrackDescription @screen.find('.play-button').on 'click', this.playJamtrack @screen.find('.jamtrack-add-cart').on 'click', this.addToCartJamtrack @screen.find('.license-us-why').on 'click', this.licenseUSWhy @screen.find('.jamtrack-detail-btn').on 'click', this.toggleExpanded - + # @screen.find('.jamtrack-preview').each (index, element) => + # new JK.JamTrackPreview(data.app, $element, jamTrack, track, {master_shows_duration: true}) + renderJamtracks:(data) => that = this for jamtrack in data.jamtracks + jamtrackExpanded = jamtrack.id in this.expanded + counter = 0 + newTrack = $.extend(jamtrack) + newTrack.tracks = [] for track in jamtrack.tracks continue if track.track_type=='Master' - inst = '../assets/content/icon_instrument_default24.png' - if track.instrument.id in instrument_logo_map - inst = instrument_logo_map[track.instrument.id].asset - track.instrument_url = inst - track.instrument_desc = track.instrument.description - if track.part != '' - track.instrument_desc += ' (' + track.part + ')' + if counter++ < 2 || jamtrackExpanded + newTrack.tracks.push(track) + if track.track_type=='Master' + track.instrument_desc = "Master" + else + inst = '../assets/content/icon_instrument_default24.png' + if track.instrument? + if track.instrument.id in instrument_logo_map + inst = instrument_logo_map[track.instrument.id].asset + newTrack.instrument_desc = track.instrument.description + newTrack.instrument_url = inst + + if track.part != '' + newTrack.instrument_desc += ' (' + track.part + ')' options = - jamtrack: jamtrack - expanded: that.expanded + jamtrack: newTrack + expanded: jamtrackExpanded @jamtrackItem = $(context._.template($('#template-jamtrack').html(), options, variable: 'data')) - that.renderJamtrack(@jamtrackItem) + that.renderJamtrack(@jamtrackItem, jamtrack) + this.registerEvents() showJamtrackDescription:(e) => @@ -200,12 +216,27 @@ context.JK.JamTrackScreen=class JamTrackScreen else @description.hide() - toggleExpanded:() => - this.expanded = !this.expanded - this.refresh() - - renderJamtrack:(jamtrack) => - @content.append jamtrack + toggleExpanded:(e) => + e.preventDefault() + this.logger.debug("toggleExpanded", e) + jamtrackRecord = $(e.target).parents('.jamtrack-record') + this.logger.debug("jamtrackRecord", jamtrackRecord) + jamTrackId = jamtrackRecord.attr("jamtrack-id") + if jamTrackId in this.expanded + this.expanded = this.expanded.filter (id) -> id isnt jamTrackId + else + this.expanded.push jamTrackId + this.refresh + false + + renderJamtrack:(jamtrackElement, jamTrack) => + @content.append jamtrackElement + + for track in jamTrack.tracks + trackRow = jamtrackElement.find("[jamtrack-track-id='#{track.id}']") + previewElement = trackRow.find(".jamtrack-preview") + new JK.JamTrackPreview(@app, previewElement, jamTrack, track, {master_shows_duration: true}) + initialize:() => screenBindings = diff --git a/web/app/assets/javascripts/jamtrack.js.coffee b/web/app/assets/javascripts/jamtrack.js.coffee deleted file mode 100644 index 95a1c89f0..000000000 --- a/web/app/assets/javascripts/jamtrack.js.coffee +++ /dev/null @@ -1,243 +0,0 @@ -$ = jQuery -context = window -context.JK ||= {} - -context.JK.JamTrackScreen=class JamTrackScreen - LIMIT = 10 - instrument_logo_map = context.JK.getInstrumentIconMap24() - - constructor: (@app) -> - @logger = context.JK.logger - @screen = null - @content = null - @scroller = null - @genre = null - @artist = null - @instrument = null - @availability = null - @nextPager = null - @noMoreJamtracks = null - @currentPage = 0 - @next = null - @currentQuery = this.defaultQuery() - @expanded = false - - beforeShow:(data) => - this.setFilterFromURL() - this.refresh() - - afterShow:(data) => - - events:() => - @genre.on 'change', this.search - @artist.on 'change', this.search - @instrument.on 'change', this.search - @availability.on 'change', this.search - - clearResults:() => - #$logger.debug("CLEARING CONTENT") - @currentPage = 0 - @content.empty() - @noMoreJamtracks.hide() - @next = null - - setFilterFromURL:() => - # Grab parms from URL for artist, instrument, and availability - parms=this.getParams() - this.logger.debug("parms", parms) - if(parms.artist?) - @artist.val(parms.artist) - if(parms.instrument?) - @instrument.val(parms.instrument) - if(parms.availability?) - @availability.val(parms.availability) - window.history.replaceState({}, "", "/client#/jamtrack") - - getParams:() => - params = {} - q = window.location.href.split("?")[1] - if q? - q = q.split('#')[0] - raw_vars = q.split("&") - for v in raw_vars - [key, val] = v.split("=") - params[key] = decodeURIComponent(val) - params - - refresh:() => - @currentQuery = this.buildQuery() - that = this - rest.getJamtracks(@currentQuery).done((response) -> - that.clearResults() - that.handleJamtrackResponse(response) - ).fail (jqXHR) -> - that.clearResults() - that.noMoreJamtracks.show() - that.app.notifyServerError jqXHR, 'Jamtrack Unavailable' - - search:() => - this.refresh() - false - - defaultQuery:() => - query = - per_page: LIMIT - page: @currentPage+1 - if @next - query.since = @next - query - - buildQuery:() => - @currentQuery = this.defaultQuery() - # genre filter - # var genres = @screen.find('#jamtrack_genre').val() - # if (genres !== undefined) { - # @currentQuery.genre = genres - # } - # instrument filter - - instrument = @instrument.val() - if instrument? - @currentQuery.instrument = instrument - - # artist filter - art = @artist.val() - if art? - @currentQuery.artist = art - - # availability filter - availability = @availability.val() - if availability? - @currentQuery.availability = availability - @currentQuery - - handleJamtrackResponse:(response) => - #logger.debug("Handling response", JSON.stringify(response)) - @next = response.next - this.renderJamtracks(response) - if response.next == null - # if we less results than asked for, end searching - @scroller.infinitescroll 'pause' - if @currentPage == 0 and response.jamtracks.length == 0 - @content.append '
There\'s no jamtracks.
' - if @currentPage > 0 - @noMoreJamtracks.show() - # there are bugs with infinitescroll not removing the 'loading'. - # it's most noticeable at the end of the list, so whack all such entries - $('.infinite-scroll-loader').remove() - else - @currentPage++ - this.buildQuery() - this.registerInfiniteScroll() - - - registerInfiniteScroll:() => - @scroller.infinitescroll { - behavior: 'local' - navSelector: '#jamtrackScreen .btn-next-pager' - nextSelector: '#jamtrackScreen .btn-next-pager' - binder: @scroller - dataType: 'json' - appendCallback: false - prefill: false - bufferPx: 100 - loading: - msg: $('
Loading ...
') - img: '/assets/shared/spinner.gif' - path: (page) -> - '/api/jamtracks?' + $.param(this.buildQuery()) - - }, (json, opts) -> - this.handleJamtrackResponse(json) - @scroller.infinitescroll 'resume' - - playJamtrack:(e) => - e.preventDefault() - - addToCartJamtrack:(e) => - e.preventDefault() - params = id: $(e.target).attr('data-jamtrack-id') - rest.addJamtrackToShoppingCart(params).done((response) -> - context.location = '/client#/shoppingCart' - ).fail @app.ajaxError - - licenseUSWhy:(e) => - e.preventDefault() - @app.layout.showDialog 'jamtrack-availability-dialog' - - registerEvents:() => - @screen.find('.jamtrack-detail-btn').on 'click', this.showJamtrackDescription - @screen.find('.play-button').on 'click', this.playJamtrack - @screen.find('.jamtrack-add-cart').on 'click', this.addToCartJamtrack - @screen.find('.license-us-why').on 'click', this.licenseUSWhy - @screen.find('.jamtrack-detail-btn').on 'click', this.toggleExpanded - - renderJamtracks:(data) => - that = this - for jamtrack in data.jamtracks - for track in jamtrack.tracks - continue if track.track_type=='Master' - inst = '../assets/content/icon_instrument_default24.png' - if track.instrument.id in instrument_logo_map - inst = instrument_logo_map[track.instrument.id].asset - track.instrument_url = inst - track.instrument_desc = track.instrument.description - if track.part != '' - track.instrument_desc += ' (' + track.part + ')' - - options = - jamtrack: jamtrack - expanded: that.expanded - - @jamtrackItem = $(context._.template($('#template-jamtrack').html(), options, variable: 'data')) - that.renderJamtrack(@jamtrackItem) - this.registerEvents() - - showJamtrackDescription:(e) => - e.preventDefault() - @description = $(e.target).parent('.detail-arrow').next() - if @description.css('display') == 'none' - @description.show() - else - @description.hide() - - toggleExpanded:() => - this.expanded = !this.expanded - this.refresh() - - renderJamtrack:(jamtrack) => - @content.append jamtrack - - initialize:() => - screenBindings = - 'beforeShow': this.beforeShow - 'afterShow': this.afterShow - @app.bindScreen 'jamtrack', screenBindings - @screen = $('#jamtrack-find-form') - @scroller = @screen.find('.content-body-scroller') - @content = @screen.find('.jamtrack-content') - @genre = @screen.find('#jamtrack_genre') - @artist = @screen.find('#jamtrack_artist') - @instrument = @screen.find('#jamtrack_instrument') - @availability = @screen.find('#jamtrack_availability') - @nextPager = @screen.find('a.btn-next-pager') - @noMoreJamtracks = @screen.find('.end-of-jamtrack-list') - if @screen.length == 0 - throw new Error('@screen must be specified') - if @scroller.length == 0 - throw new Error('@scroller must be specified') - if @content.length == 0 - throw new Error('@content must be specified') - if @noMoreJamtracks.length == 0 - throw new Error('@noMoreJamtracks must be specified') - #if(@genre.length == 0) throw new Error("@genre must be specified") - - if @artist.length == 0 - throw new Error('@artist must be specified') - if @instrument.length == 0 - throw new Error('@instrument must be specified') - if @availability.length == 0 - throw new Error('@availability must be specified') - this.events() - - diff --git a/web/app/assets/stylesheets/client/jamtrack.css.scss b/web/app/assets/stylesheets/client/jamtrack.css.scss index d63839387..16bc8b824 100644 --- a/web/app/assets/stylesheets/client/jamtrack.css.scss +++ b/web/app/assets/stylesheets/client/jamtrack.css.scss @@ -127,14 +127,15 @@ .jamtrack-description { display: none; } + + } - .jamtrack-detail-btn { - cursor: pointer; - margin-top: 7px; - margin-right: 5px; - padding-top: 5px; - vertical-align: bottom; - } + .jamtrack-detail-btn { + cursor: pointer; + margin-top: 7px; + margin-right: 5px; + padding-top: 5px; + vertical-align: bottom; } .jamtrack-tracks { diff --git a/web/app/views/clients/_jamtrack.html.slim b/web/app/views/clients/_jamtrack.html.slim index 79e2cf17e..ba5d68acc 100644 --- a/web/app/views/clients/_jamtrack.html.slim +++ b/web/app/views/clients/_jamtrack.html.slim @@ -25,14 +25,6 @@ script#template-jamtrack type='text/template' | Title: .detail-value | {{data.jamtrack.name}} - / .clearall.detail-label - / | Type: - / .detail-value - / | {{data.jamtrack.recording_type}} - / .clearall.detail-label - / | Original Artist: - / .detail-value - / | {{data.jamtrack.original_artist}} .clearall.detail-label | Original Artist: .detail-value @@ -56,34 +48,19 @@ script#template-jamtrack type='text/template' | {{data.jamtrack.description}} ="{% } %}" - - / / / .clearall.detail-label - / | Copyright: - / .copyright-value - / ="{% if (data.jamtrack.licensor !=null) { %}" - / | {{data.jamtrack.licensor.name}} - / ="{% }; %}" - / .clearall.jamtrack-description - / .detail-label - / | Description - / .detail-value - / | {{data.jamtrack.description}} - / .clearall .jamtrack-tracks - / .tracks-caption - / | Tracks in This Recording: ="{% counter = 0 %}" + ="{% trackCnt = data.jamtrack.tracks.length %}" ="{% _.each(data.jamtrack.tracks, function(track) { %}" - ="{% if(track.track_type == JK.MASTER_TRACK) return; %}" - .track-instrument href="{{track.url_44}}" - .instrument-image - img src="/assets/shared/play_button.png" width=24 height=24 - .instrument-image - img src="{{track.instrument_url}}" width=24 height=24 - .instrument-desc + ="{% ++counter; %}" + track.description + .instrument-desc | {{track.instrument_desc}} + .track-instrument + .jamtrack-preview .clearall ="{% }); %}" + ="{% if(!(trackCnt==0 || trackCnt==1)) { %}" .detail-arrow .jamtrack-detail-btn ="{% if (data.expanded) { %}" @@ -93,6 +70,7 @@ script#template-jamtrack type='text/template' | preview all tracks =image_tag("down_arrow.png") ="{% } %}" + ="{% } %}" .jamtrack-action / a.play-button href="#" data-jamtrack-id="{{data.jamtrack.id}}" From 31a8729f7119194fdc7fa3da387db4e54549f84c Mon Sep 17 00:00:00 2001 From: Steven Miers Date: Fri, 10 Apr 2015 15:56:33 -0500 Subject: [PATCH 2/6] VRFS-2998 : Fix runaway previews by only allowing one expanded item at a time. --- .../javascripts/jam_track_screen.js.coffee | 65 ++++++++++--------- 1 file changed, 35 insertions(+), 30 deletions(-) diff --git a/web/app/assets/javascripts/jam_track_screen.js.coffee b/web/app/assets/javascripts/jam_track_screen.js.coffee index c2b699e84..f62125cd3 100644 --- a/web/app/assets/javascripts/jam_track_screen.js.coffee +++ b/web/app/assets/javascripts/jam_track_screen.js.coffee @@ -20,9 +20,8 @@ context.JK.JamTrackScreen=class JamTrackScreen @currentPage = 0 @next = null @currentQuery = this.defaultQuery() - @expanded = false - @expanded = [] - + @expanded = null + beforeShow:(data) => this.setFilterFromURL() this.refresh() @@ -174,18 +173,25 @@ context.JK.JamTrackScreen=class JamTrackScreen @screen.find('.jamtrack-detail-btn').on 'click', this.toggleExpanded # @screen.find('.jamtrack-preview').each (index, element) => # new JK.JamTrackPreview(data.app, $element, jamTrack, track, {master_shows_duration: true}) - + + rerenderJamtracks:() => + if @currentData? + @clearResults() + @renderJamtracks(@currentData) + false + renderJamtracks:(data) => + @currentData = data that = this for jamtrack in data.jamtracks - jamtrackExpanded = jamtrack.id in this.expanded + jamtrackExpanded = this.expanded==jamtrack.id counter = 0 - newTrack = $.extend(jamtrack) - newTrack.tracks = [] + trackRow = $.extend(jamtrack) + trackRow.tracks = [] + trackRow.trackCnt = jamtrack.tracks.count for track in jamtrack.tracks - continue if track.track_type=='Master' - if counter++ < 2 || jamtrackExpanded - newTrack.tracks.push(track) + if track.track_type != 'Master' + trackRow.tracks.push(track) if track.track_type=='Master' track.instrument_desc = "Master" else @@ -193,21 +199,30 @@ context.JK.JamTrackScreen=class JamTrackScreen if track.instrument? if track.instrument.id in instrument_logo_map inst = instrument_logo_map[track.instrument.id].asset - newTrack.instrument_desc = track.instrument.description - newTrack.instrument_url = inst + track.instrument_desc = track.instrument.description + track.instrument_url = inst if track.part != '' - newTrack.instrument_desc += ' (' + track.part + ')' + track.instrument_desc += ' (' + track.part + ')' options = - jamtrack: newTrack + jamtrack: trackRow expanded: jamtrackExpanded - + @logger.debug "Creating template with options", options @jamtrackItem = $(context._.template($('#template-jamtrack').html(), options, variable: 'data')) that.renderJamtrack(@jamtrackItem, jamtrack) this.registerEvents() + renderJamtrack:(jamtrackElement, jamTrack) => + @content.append jamtrackElement + + if this.expanded==jamTrack.id + for track in jamTrack.tracks + trackRow = jamtrackElement.find("[jamtrack-track-id='#{track.id}']") + previewElement = trackRow.find(".jamtrack-preview") + new JK.JamTrackPreview(@app, previewElement, jamTrack, track, {master_shows_duration: false}) + showJamtrackDescription:(e) => e.preventDefault() @description = $(e.target).parent('.detail-arrow').next() @@ -220,24 +235,14 @@ context.JK.JamTrackScreen=class JamTrackScreen e.preventDefault() this.logger.debug("toggleExpanded", e) jamtrackRecord = $(e.target).parents('.jamtrack-record') - this.logger.debug("jamtrackRecord", jamtrackRecord) jamTrackId = jamtrackRecord.attr("jamtrack-id") - if jamTrackId in this.expanded - this.expanded = this.expanded.filter (id) -> id isnt jamTrackId + this.logger.debug("jamtrackRecord", jamTrackId, jamtrackRecord) + if this.expanded==jamTrackId + this.expanded = null else - this.expanded.push jamTrackId - this.refresh - false + this.expanded = jamTrackId + this.rerenderJamtracks() - renderJamtrack:(jamtrackElement, jamTrack) => - @content.append jamtrackElement - - for track in jamTrack.tracks - trackRow = jamtrackElement.find("[jamtrack-track-id='#{track.id}']") - previewElement = trackRow.find(".jamtrack-preview") - new JK.JamTrackPreview(@app, previewElement, jamTrack, track, {master_shows_duration: true}) - - initialize:() => screenBindings = 'beforeShow': this.beforeShow From b051c33bd75222590dd3625b50a536f7ffe30fc8 Mon Sep 17 00:00:00 2001 From: Steven Miers Date: Fri, 10 Apr 2015 15:58:03 -0500 Subject: [PATCH 3/6] VRFS-2998 : Misc formatting. Also only show jam_track_tracks if expanded. --- .../stylesheets/client/jamtrack.css.scss | 13 +++++---- web/app/views/clients/_jamtrack.html.slim | 27 +++++++++---------- 2 files changed, 18 insertions(+), 22 deletions(-) diff --git a/web/app/assets/stylesheets/client/jamtrack.css.scss b/web/app/assets/stylesheets/client/jamtrack.css.scss index 16bc8b824..104aadd26 100644 --- a/web/app/assets/stylesheets/client/jamtrack.css.scss +++ b/web/app/assets/stylesheets/client/jamtrack.css.scss @@ -97,7 +97,7 @@ .jamtrack-detail { @include border_box_sizing; float: left; - width: 30%; + width: 25%; padding: 10px 0px; .detail-label { width: 40%; @@ -141,9 +141,8 @@ .jamtrack-tracks { @include border_box_sizing; float: left; - width: 50%; - padding: 10px 0px; - + width: 45%; + padding: 10px 0px; .tracks-caption { margin-top: 5px; margin-bottom: 10px; @@ -168,10 +167,10 @@ .jamtrack-action { @include border_box_sizing; float: left; - width: 20%; - padding: 10px 0px; + width: 30%; + padding: 0px 0px; text-align: center; - + // vertical-align: top; .play-button { margin-top: 5px; } diff --git a/web/app/views/clients/_jamtrack.html.slim b/web/app/views/clients/_jamtrack.html.slim index ba5d68acc..21dd1a0d0 100644 --- a/web/app/views/clients/_jamtrack.html.slim +++ b/web/app/views/clients/_jamtrack.html.slim @@ -49,27 +49,24 @@ script#template-jamtrack type='text/template' ="{% } %}" .jamtrack-tracks - ="{% counter = 0 %}" - ="{% trackCnt = data.jamtrack.tracks.length %}" - ="{% _.each(data.jamtrack.tracks, function(track) { %}" - ="{% ++counter; %}" - track.description - .instrument-desc - | {{track.instrument_desc}} - .track-instrument - .jamtrack-preview - .clearall - ="{% }); %}" - ="{% if(!(trackCnt==0 || trackCnt==1)) { %}" .detail-arrow .jamtrack-detail-btn ="{% if (data.expanded) { %}" | hide tracks =image_tag("up_arrow.png") ="{% } else { %}" - | preview all tracks + | show tracks =image_tag("down_arrow.png") ="{% } %}" + ="{% if (data.expanded) { %}" + ="{% _.each(data.jamtrack.tracks, function(track) { %}" + .jamtrack-track jamtrack-track-id="{{track.id}}" + / .instrument-desc + / | {{track.instrument_desc}} + /.track-instrument + .jamtrack-preview + .clearall + ="{% }); %}" ="{% } %}" .jamtrack-action @@ -86,7 +83,7 @@ script#template-jamtrack type='text/template' ="{% }; %}" ="{% if (data.jamtrack.sales_region==JK.AVAILABILITY_US) { %}" .jamtrack-license - | This JamTrack available only to US customers. - a.license-us-why href="#", why? + | This JamTrack available only to US customers.      + a.license-us-why href="#" why? ="{% }; %}" .clearall From 6e971b159cc0c8eca1e62d6d9231eb5d9dfcc912 Mon Sep 17 00:00:00 2001 From: Steven Miers Date: Mon, 6 Apr 2015 15:52:34 -0500 Subject: [PATCH 4/6] Fix bug found in spec. --- .../assets/javascripts/jam_track_screen.js.coffee | 10 +++------- web/app/assets/stylesheets/client/jamtrack.css.scss | 10 +++++++--- web/app/views/clients/_jamtrack.html.slim | 12 ++++++------ 3 files changed, 16 insertions(+), 16 deletions(-) diff --git a/web/app/assets/javascripts/jam_track_screen.js.coffee b/web/app/assets/javascripts/jam_track_screen.js.coffee index f62125cd3..9aaedfe3a 100644 --- a/web/app/assets/javascripts/jam_track_screen.js.coffee +++ b/web/app/assets/javascripts/jam_track_screen.js.coffee @@ -185,10 +185,9 @@ context.JK.JamTrackScreen=class JamTrackScreen that = this for jamtrack in data.jamtracks jamtrackExpanded = this.expanded==jamtrack.id - counter = 0 - trackRow = $.extend(jamtrack) - trackRow.tracks = [] - trackRow.trackCnt = jamtrack.tracks.count + trackRow = _.clone(jamtrack) + trackRow.track_cnt = jamtrack.tracks.length + trackRow.tracks = [] for track in jamtrack.tracks if track.track_type != 'Master' trackRow.tracks.push(track) @@ -208,7 +207,6 @@ context.JK.JamTrackScreen=class JamTrackScreen options = jamtrack: trackRow expanded: jamtrackExpanded - @logger.debug "Creating template with options", options @jamtrackItem = $(context._.template($('#template-jamtrack').html(), options, variable: 'data')) that.renderJamtrack(@jamtrackItem, jamtrack) @@ -233,10 +231,8 @@ context.JK.JamTrackScreen=class JamTrackScreen toggleExpanded:(e) => e.preventDefault() - this.logger.debug("toggleExpanded", e) jamtrackRecord = $(e.target).parents('.jamtrack-record') jamTrackId = jamtrackRecord.attr("jamtrack-id") - this.logger.debug("jamtrackRecord", jamTrackId, jamtrackRecord) if this.expanded==jamTrackId this.expanded = null else diff --git a/web/app/assets/stylesheets/client/jamtrack.css.scss b/web/app/assets/stylesheets/client/jamtrack.css.scss index 104aadd26..af21255cc 100644 --- a/web/app/assets/stylesheets/client/jamtrack.css.scss +++ b/web/app/assets/stylesheets/client/jamtrack.css.scss @@ -97,7 +97,7 @@ .jamtrack-detail { @include border_box_sizing; float: left; - width: 25%; + width: 30%; padding: 10px 0px; .detail-label { width: 40%; @@ -141,7 +141,7 @@ .jamtrack-tracks { @include border_box_sizing; float: left; - width: 45%; + width: 35%; padding: 10px 0px; .tracks-caption { margin-top: 5px; @@ -163,11 +163,15 @@ margin-left: 10px; } } + + .jamtrack-track { + margin-left: 7px; + } .jamtrack-action { @include border_box_sizing; float: left; - width: 30%; + width: 35%; padding: 0px 0px; text-align: center; // vertical-align: top; diff --git a/web/app/views/clients/_jamtrack.html.slim b/web/app/views/clients/_jamtrack.html.slim index 21dd1a0d0..f34884e7a 100644 --- a/web/app/views/clients/_jamtrack.html.slim +++ b/web/app/views/clients/_jamtrack.html.slim @@ -50,13 +50,13 @@ script#template-jamtrack type='text/template' .jamtrack-tracks .detail-arrow - .jamtrack-detail-btn + .jamtrack-detail-btn.orange ="{% if (data.expanded) { %}" - | hide tracks - =image_tag("up_arrow.png") + | hide tracks ({{data.jamtrack.tracks.length}}) + a.details-arrow.arrow-up-orange ="{% } else { %}" - | show tracks - =image_tag("down_arrow.png") + | show tracks ({{data.jamtrack.tracks.length}}) + a.details-arrow.arrow-down-orange ="{% } %}" ="{% if (data.expanded) { %}" ="{% _.each(data.jamtrack.tracks, function(track) { %}" @@ -84,6 +84,6 @@ script#template-jamtrack type='text/template' ="{% if (data.jamtrack.sales_region==JK.AVAILABILITY_US) { %}" .jamtrack-license | This JamTrack available only to US customers.      - a.license-us-why href="#" why? + a.license-us-why.orange href="#" why? ="{% }; %}" .clearall From 1e24b20f3cf8e636203ed4948226a266b78ba4c9 Mon Sep 17 00:00:00 2001 From: Steven Miers Date: Mon, 6 Apr 2015 16:10:03 -0500 Subject: [PATCH 5/6] Tableize floated div view. --- .../stylesheets/client/jamtrack.css.scss | 10 +++----- web/app/views/clients/_jamtrack.html.slim | 25 +++++++++---------- 2 files changed, 16 insertions(+), 19 deletions(-) diff --git a/web/app/assets/stylesheets/client/jamtrack.css.scss b/web/app/assets/stylesheets/client/jamtrack.css.scss index af21255cc..b1aaf02e5 100644 --- a/web/app/assets/stylesheets/client/jamtrack.css.scss +++ b/web/app/assets/stylesheets/client/jamtrack.css.scss @@ -90,13 +90,13 @@ } .jamtrack-record { - border-bottom: 1px solid black; + //border-bottom: 1px solid black; text-align: left; } .jamtrack-detail { + width: 35%; @include border_box_sizing; - float: left; width: 30%; padding: 10px 0px; .detail-label { @@ -140,8 +140,7 @@ .jamtrack-tracks { @include border_box_sizing; - float: left; - width: 35%; + width: 35%; padding: 10px 0px; .tracks-caption { margin-top: 5px; @@ -170,9 +169,8 @@ .jamtrack-action { @include border_box_sizing; - float: left; width: 35%; - padding: 0px 0px; + // padding: 0px 0px; text-align: center; // vertical-align: top; .play-button { diff --git a/web/app/views/clients/_jamtrack.html.slim b/web/app/views/clients/_jamtrack.html.slim index f34884e7a..6cf0504e2 100644 --- a/web/app/views/clients/_jamtrack.html.slim +++ b/web/app/views/clients/_jamtrack.html.slim @@ -9,18 +9,20 @@ =render(:partial => "web_filter", :locals => {:search_type => Search::PARAM_JAMTRACK}) .filter-body .content-body-scroller - .profile-wrapper - .jamtrack-content + .profile-wrapper + table.generaltable + thead + tr + th JAMTRACK + th TRACKS INCLUDED/PREVIEW + th SHOP + tbody.jamtrack-content a.btn-next-pager href="/api/jamtracks?page=1" Next .end-of-jamtrack-list.end-of-list="No more Jamtracks" script#template-jamtrack type='text/template' - .jamtrack-record jamtrack-id="{{data.jamtrack.id}}" - .top_bar - .jamtrack-detail.jamtrack-header JAMTRACK - .jamtrack-tracks.jamtrack-header TRACKS INCLUDED/PREVIEW - .jamtrack-action.jamtrack-header SHOP - .jamtrack-detail + tr.jamtrack-record jamtrack-id="{{data.jamtrack.id}}" + td.jamtrack-detail .detail-label | Title: .detail-value @@ -47,8 +49,7 @@ script#template-jamtrack type='text/template' .detail-value | {{data.jamtrack.description}} ="{% } %}" - - .jamtrack-tracks + td.jamtrack-tracks .detail-arrow .jamtrack-detail-btn.orange ="{% if (data.expanded) { %}" @@ -68,8 +69,7 @@ script#template-jamtrack type='text/template' .clearall ="{% }); %}" ="{% } %}" - - .jamtrack-action + td.jamtrack-action / a.play-button href="#" data-jamtrack-id="{{data.jamtrack.id}}" / =image_tag "shared/play_button.png" .jamtrack-price @@ -86,4 +86,3 @@ script#template-jamtrack type='text/template' | This JamTrack available only to US customers.      a.license-us-why.orange href="#" why? ="{% }; %}" - .clearall From 4238d9b0cec5bad598665dd97741ddea7388bc40 Mon Sep 17 00:00:00 2001 From: Steven Miers Date: Mon, 6 Apr 2015 16:48:58 -0500 Subject: [PATCH 6/6] Add spec to verify expand functionality. --- web/spec/features/jamtrack_shopping_spec.rb | 16 ++++++++++++---- 1 file changed, 12 insertions(+), 4 deletions(-) diff --git a/web/spec/features/jamtrack_shopping_spec.rb b/web/spec/features/jamtrack_shopping_spec.rb index daeb34152..95f887979 100644 --- a/web/spec/features/jamtrack_shopping_spec.rb +++ b/web/spec/features/jamtrack_shopping_spec.rb @@ -49,15 +49,12 @@ describe "JamTrack Shopping", :js => true, :type => :feature, :capybara_feature find('#jamtrack-availability-dialog #dialog-close-button').trigger(:click) end - jamtrack.jam_track_tracks.each do |track| - jamtrack_record.find('.instrument-desc', "#{track.instrument.description} ( #{track.part} }") - end - if options[:added_cart] jamtrack_record.find('a.jamtrack-add-cart-disabled', text: 'Already In Cart') else jamtrack_record.find('a.jamtrack-add-cart.button-orange', text: 'Add to Cart') end + jamtrack_record end def not_find_jamtrack jamtrack @@ -144,5 +141,16 @@ describe "JamTrack Shopping", :js => true, :type => :feature, :capybara_feature find('.shopping-sub-total', text: "Subtotal: $ #{jt_us.price + jt_ww.price}") end + + it "can expand" do + jamtrack = find_jamtrack(jt_us) + jamtrack.find('.jamtrack-detail-btn').trigger(:click) + + jt_us.jam_track_tracks.each do |track| + jamtrack.find('.instrument-name', track.instrument.description) + jamtrack.find('.part', "(#{track.part}}") + end + end + end end