Skip to content

Make breadcrumbs persist when you go up the chain. #318

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
Torgen wants to merge 5 commits into
base: master
Choose a base branch
from
Open

Make breadcrumbs persist when you go up the chain. #318

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
4dfa5a2
Make breadcrumbs persist when you go up the chain.
Torgen Feb 6, 2018
81add3e
Fix quip breadcrumb
Torgen Jul 10, 2018
1d15c33
Fix oplog breadcrumb
Torgen Jul 10, 2018
68093b7
Fix quip breadcrumb
Torgen Jul 10, 2018
2c88489
Clean up obsolete helpers from header_breadcrumbs
Torgen Jul 14, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
87 changes: 59 additions & 28 deletions client/header.coffee
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -39,7 +39,7 @@ Template.registerHelper 'link', (args) ->
link += '</a>'
return new Spacebars.SafeString(link)

$(document).on 'click', 'a.puzzles-link, a.rounds-link, a.chat-link, a.home-link, a.oplogs-link, a.quips-link', (event) ->
$(document).on 'click', 'a.puzzles-link, a.rounds-link, a.chat-link, a.home-link, a.oplogs-link, a.quips-link, a.callins-link, a.facts-link', (event) ->
return unless event.button is 0 # check right-click
return if event.ctrlKey or event.shiftKey or event.altKey # check alt/ctrl/shift clicks
return if /^https?:/.test($(event.currentTarget).attr('href'))
Expand Down Expand Up @@ -200,44 +200,75 @@ Template.header_loginmute.events
editing: undefined # abort current edit, whatever it is

############## breadcrumbs #######################
Template.header_breadcrumbs.helpers
Tracker.autorun ->
breadcrumbs = Session.get 'breadcrumbs'
currentpage = Session.get 'currentPage'
currenttype = Session.get 'type'
currentid = Session.get 'id'
# Regenerate breadcrumbs
base = [{page: 'blackboard', type: 'general', id: '0'}]
if currenttype is 'puzzles'
round = model.Rounds.findOne puzzles: currentid
if round?
base.push {page: 'round', type: 'rounds', id: round._id}
base.push {page: 'puzzle', type: 'puzzles', id: currentid}
else if currenttype is 'rounds'
base.push {page: 'round', type: 'rounds', id: currentid}
else if currentpage isnt 'chat' and currentpage isnt 'blackboard'
base.push {page: currentpage, type: currenttype, id: currentid}
# If the new breadcrumbs are a prefix of the old ones, keep the old ones.
if breadcrumbs? and base.length <= breadcrumbs.length
return if do ->
for crumb, i in base
oldcrumb = breadcrumbs[i]
if crumb.page isnt oldcrumb.page or crumb.type isnt oldcrumb.type or crumb.id isnt oldcrumb.id
return false
return true
Session.set 'breadcrumbs', base

Template.header_breadcrumb_chat.helpers
inThisRoom: ->
return false unless Session.equals 'currentPage', 'chat'
return false unless Session.equals 'type', @type
Session.equals 'id', @id

Template.header_breadcrumb_round.onCreated ->
@autorun =>
@subscribe 'round-by-id', Template.currentData().id
Template.header_breadcrumb_round.helpers
round: ->
if Session.equals('type', 'puzzles')
model.Rounds.findOne puzzles: Session.get("id")
else if Session.equals('type', 'rounds')
model.Rounds.findOne Session.get('id')
else null
model.Rounds.findOne @id if @id

Template.header_breadcrumb_puzzle.onCreated ->
@autorun =>
@subscribe 'puzzle-by-id', Template.currentData().id
@subscribe 'round-for-puzzle', Template.currentData().id
Template.header_breadcrumb_puzzle.helpers
puzzle: ->
if Session.equals('type', 'puzzles')
model.Puzzles.findOne Session.get('id')
else null
quip: ->
if Session.equals('type', 'quips')
model.Quips.findOne Session.get('id')
else null
type: -> Session.get('type')
id: -> Session.get('id')
idIsNew: -> Session.equals('id', 'new')
drive: -> switch Session.get('type')
model.Puzzles.findOne @id if @id

Template.header_breadcrumb_quip.onCreated ->
@autorun => @subscribe 'quips'
Template.header_breadcrumb_quip.helpers
idIsNew: -> 'new' is @id
quip: -> model.Quips.findOne @id unless @id is 'new'

Template.header_breadcrumbs.helpers
breadcrumbs: -> Session.get 'breadcrumbs'
crumb_template: -> "header_breadcrumb_#{this.page}"
drive: -> switch Session.get 'type'
when 'general'
Session.get 'RINGHUNTERS_FOLDER'
when 'rounds', 'puzzles'
model.collection(Session.get('type'))?.findOne(Session.get('id'))?.drive
model.collection(Session.get 'type')?.findOne(Session.get 'id')?.drive

Template.header_breadcrumbs.events
"mouseup .fake-link[data-href]": (event, template) ->
# we work hard to try to make middle-click, shift-click, etc still work.
a = $(event.currentTarget).closest('a')
href = $(event.currentTarget).attr('data-href')
oldhref = a.attr('href')
a.attr('href', href)
Meteor.setTimeout (-> a.attr('href', oldhref)), 100
"click .bb-upload-file": (event, template) ->
folder = switch Session.get('type')
folder = switch Session.get 'type'
when 'general'
Session.get 'RINGHUNTERS_FOLDER'
when 'rounds', 'puzzles'
model.collection(Session.get('type'))?.findOne(Session.get('id'))?.drive
model.collection(Session.get 'type')?.findOne(Session.get 'id')?.drive
return unless folder
uploadToDriveFolder folder, (docs) ->
message = "uploaded "+(for doc in docs
Expand Down
135 changes: 91 additions & 44 deletions header.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,65 +10,112 @@
{{> header_breadcrumbs}}
</div>
</div>
</template>

<template name="header_breadcrumb_chat">
<li class="{{#if inThisRoom}}active{{/if}}">
<a href="/chat/{{type}}/{{id}}" class="chat-link"><i class="icon-comment icon-white"></i> {{> Template.contentBlock}} Chat</a>
</li>
</template>

<template name="header_breadcrumbs">
<div class='bb-breadcrumbs{{#if currentPageEquals "blackboard"}} bb-omit-when-narrow{{/if}}'>
{{#if drive}}
<span class="bb-drive-buttons">
<button type="button"
class="bb-upload-file btn btn-inverse">
<i class="icon-upload icon-white"></i> Upload file
</button>
<a class="bb-drive-link btn btn-inverse"
title="Open Drive Folder"
target="_blank"
href="{{drive_link drive}}"><i class="icon-inbox icon-white"></i></a>
</span>
<template name="header_breadcrumb_blackboard">
<li class="{{#if currentPageEquals "blackboard"}}active{{/if}}">
<a href="/" class="home-link"><i class="icon-home icon-white"></i> Blackboard</a>
</li>
{{> header_breadcrumb_chat}}
</template>

<template name="header_breadcrumb_extra_links">
{{#if this.link}}
<a href="{{this.link}}" target="_blank" title="Round on hunt site">
<i class="icon-share-alt icon-white"></i>
</a>
{{/if}}
<ul class="nav">
<li class="{{#if currentPageEquals "blackboard"}}active{{/if}}"><a href="/" class="home-link"><i class="icon-home icon-white"></i> Blackboard</a></li>
{{#if round}}
{{#if spreadsheet}}
<a href="{{spread_link spreadsheet}}" target="_blank" title="Spreadsheet">
<i class="icon-th icon-white"></i>
</a>
{{/if}}
</template>

<template name="header_breadcrumb_round">
<li class="{{#if currentPageEquals "round"}}active{{else}}bb-omit-when-narrow{{/if}}">
<a href="/rounds/{{round._id}}" class="rounds-link">
<a href="/rounds/{{id}}" class="rounds-link">
<i class="icon-folder-open icon-white"></i> Round: {{round.name}}
{{#if round.link}} <span class="fake-link" data-href="{{round.link}}" title="Link to hunt site"><i class="icon-share-alt icon-white"></i></span>{{/if}}
{{#if round.spreadsheet}} <span class="fake-link" data-href="{{spread_link round.spreadsheet}}" title="Link to round spreadsheet"><i class="icon-th icon-white"></i></span>{{/if}}
</a>
{{> header_breadcrumb_extra_links round}}
</li>
{{/if}}
{{#if puzzle}}
{{> header_breadcrumb_chat }}
</template>

<template name="header_breadcrumb_puzzle">
<li class="{{#if currentPageEquals "puzzle"}}active{{else}}bb-omit-when-narrow{{/if}}">
<a href="/puzzles/{{puzzle._id}}" class="puzzles-link">
<a href="/puzzles/{{id}}" class="puzzles-link">
<i class="icon-book icon-white"></i> Puzzle: {{puzzle.name}}
{{#if puzzle.link}} <span class="fake-link" data-href="{{puzzle.link}}" title="Link to hunt site"><i class="icon-share-alt icon-white"></i></span>{{/if}}
{{#if puzzle.spreadsheet}} <span class="fake-link" data-href="{{spread_link puzzle.spreadsheet}}" title="Link to puzzle spreadsheet"><i class="icon-th icon-white"></i></span>{{/if}}
</a>
{{> header_breadcrumb_extra_links puzzle}}
</li>
{{/if}}
{{#if currentPageEquals "quip"}}
<li class="active"><a><i class="icon-check icon-white"></i> {{#if idIsNew}}Add New Quip{{else}}Quip: {{quip.name}}{{/if}}</a></li>
{{else if currentPageEquals "oplog"}}
<li class="active"><a><i class="icon-time icon-white"></i> Operation Logs</a></li>
{{else if currentPageEquals "facts"}}
<li class="active"><a><i class="icon-wrench icon-white"></i> Server Facts</a></li>
{{else}}
{{#if currentPageEquals "callins"}}
<li class="active"><a><i class="icon-check icon-white"></i> Answer Queue</a></li>
{{/if}}
<li class="{{#if currentPageEquals "chat"}}active{{else}}bb-omit-when-narrow{{/if}}">
<a href="/chat/{{type}}/{{id}}" class="chat-link"><i class="icon-comment icon-white"></i>
{{#if typeEquals "roundgroups"}}{{link id=id editing=true}}{{/if}}
{{#if typeEquals "rounds"}}Round{{/if}}
{{#if typeEquals "puzzles"}}Puzzle{{/if}}
{{#if typeEquals "general"}}General{{/if}}
chat</a></li>
{{/if}}
</ul>
{{> header_breadcrumb_chat }}
</template>

<template name="header_breadcrumb_quip">
<li class="{{#if currentPageEquals "quip"}}active{{/if}}">
<a href="/quips/{{id}}" class="quips-link">
<i class="icon-check icon-white"></i> {{#if idIsNew}}Add New Quip{{else}}Quip: {{quip.name}}{{/if}}
</a>
</li>
</template>

<template name="header_breadcrumb_oplog">
<li class="{{#if currentPageEquals "oplog"}}active{{/if}}">
<a href="/oplogs/0" class="oplogs-link">
<i class="icon-time icon-white"></i> Operation Logs
</a>
</li>
</template>

<template name="header_breadcrumb_facts">
<li class="{{#if currentPageEquals "facts"}}active{{/if}}">
<a href="/facts" class="facts-link">
<i class="icon-wrench icon-white"></i> Server Facts
</a>
</li>
</template>

<template name="header_breadcrumb_callins">
<li class="{{#if currentPageEquals "callins"}}active{{/if}}">
<a href="/callins" class="callins-link">
<i class="icon-check icon-white"></i> Answer Queue
</a>
</li>
</template>

<template name="header_breadcrumbs">
<div class='bb-breadcrumbs{{#if currentPageEquals "blackboard"}} bb-omit-when-narrow{{/if}}'>
<ul class="nav">
{{#each breadcrumbs}}
{{> Template.dynamic template=crumb_template}}
{{/each}}
<li class="fill">
{{#if currentPageEquals "chat"}}
{{> chat_header }}
{{/if}}
</li>
{{#if drive}}
<li class="bb-drive-buttons">
<button type="button"
class="bb-upload-file btn btn-inverse">
<i class="icon-upload icon-white"></i> Upload file
</button>
</li>
<li class="bb-drive-buttons">
<span>
<a class="bb-drive-link btn btn-inverse"
title="Open Drive Folder"
target="_blank"
href="{{drive_link drive}}"><i class="icon-inbox icon-white"></i></a></span>
</li>
{{/if}}
</div>
</template>

Expand Down
29 changes: 23 additions & 6 deletions header.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,12 +9,29 @@
padding-right: 160px;
height: 40px;
overflow: hidden;
.bb-drive-buttons {
position: absolute;
right: 0;
width: 163px;
.bb-drive-link + .tooltip .tooltip-arrow {
left: auto; right: 20px;
.nav {
display: flex;
flex-flow: row nowrap;
justify-content: stretch;
float: none;
& > li {
display: flex;
flex-grow: 0;
flex-shrink: 0;
& > a + a {
padding-left: 0px;
margin-left: -10px;
}
}
& > .fill {
flex-grow: 1;
flex-shrink: 1;
overflow: hidden;
}
.bb-drive-buttons {
.bb-drive-link + .tooltip .tooltip-arrow {
left: auto; right: 20px;
}
}
}
}
Expand Down