This was failing with a 'Object doesn't have
method' error on IE11. Assume Babel wasn't
polyfilling Array.includes so reverting to jQuery
version for now.
This commit applies a carefully selected blend of `white-space`,
`display` and `background-position` to ensure that:
- you can always see the full name of the current folder in the heading
(which is useful because people might have mutiple folders with the
same name, differentiated by some king of suffix)
- the clickable are of a single folder or template in the list is 100%
width, for the biggest possible hit area
- the name of a folder or template wraps underneath the folder icon (ie
the folder icon is treated like a normal character, not like a bullet
point)
It’s a bit rudimentary to only show the current place in the hierarchy
and the parent. You lose a sense of how deep you are.
But we can’t just show the full path, because it can be arbitrarily
long. So what this commit does is show the full path, but truncates the
display of any items. Further-up than the current folder or its parent.
This also helps disambiguate between folders and templates, because
folders are always shown with the folder icon.
This probably won’t affect many teams, because we don’t anticipate a lot
of deep nesting.
The work done to stack sticky elements closer
together only effected the stack when stuck to the
top/bottom edge:
707c426b9a
It should have included the same for when a stack
of sticky elements is stopped at the end of it's
scroll area. This adds code to deal with that.
The templateFolderForm JS was setting the mode to
'dialog' but not back when the state was changed
back to a normal sticky element. This caused
adjustments and scrolling when no adjustment
needed to be accommodated.
There were also problems with adjustForResize. It
was manipulating the same flag that resizing the
window did and returned a value never used.
The `recalculate` method currently does three
things:
1. sync's the internal store with the DOM
2. updates the saved positional and dimensional
data from the new DOM
3. allows the mode to be set
The problem with using it as the way to set the
mode is that, every call to it is effectively
setting the mode but this isn't always the
intention.
This splits off setting the mode so other modules
have to explicity set it and those that don't
intend to can just call `recalculate` to notify of
DOM changes.
If a sticky element was already in the store, the
code for adding it would return early. This meant
dimensions and positions for it were not being
recalculated.
make sure the class is applied to a child element, so that `$el.find`
will always find something for `js-will-stick-at-bottom-when-scrolling`.
Also, clean up code by treating all stickies on the template folder
form as dialogs - they all are after all all dialogs - modals that
expect your attention on top of the main page content.
When the screen resizes, the dimensions of our
elements may change so we run
`setElementDimensions` again to update our store
of those values.
This caused a bug with the stored position of
stuck elements. When stuck, elements are
'fixed' so their position is relative to the
window position. We need the value stored to be
from the position in the document flow, not the
'fixed' value.
This change means, when an element is stuck, we
check its shim for the position instead. The shim
occupies the space the element would do in the
page so it makes sense to use it for this.
The controls for the template folders are all
present in the page when it loads. The
templateFolderForm JS filters them so you only see
the one you need to for the thing you're trying to
do.
This changes when the controls are made sticky so
it happens after the templateFolderForm JS has
performed its filtering.
This ensures sticky elements don't fade in if
in a sticky position when the page loads.
The fade is there to show when an element is
becoming sticky. This has no use if it was already
sticky the first time you see it.
Because the same situation applies when
recalculate is called, we also want the flag to be
reset before this happens.
When mode === 'dialog', sticky elements are
stacked so we need to apply the box shadow to the
top (when sticking to the bottom edge) and bottom
(when sticking to the top edge) elements in the
stack.
From what I can see, we need the version of
`nth-child` that supports targeting by selector.
As of this date, support for this is only in
Safari:
https://caniuse.com/#feat=css-nth-child-of
Until we can use this version of `nth-child`, we
need to use JS to apply the styles.
Instead of keeping references to nodes detached
from the DOM, remove them from the store.
Likewise, add node appended to the DOM.
This includes code to 'clean' DOM nodes when
removed. This is important because nodes can
retain classes and styles. If they are re-attached
in future this can cause problems with how the
state of the element is determined.
We want a mode for when a single task is shared
between all sticky elements on the page and that
task has the highest priority on the page. In that
case:
- they should stack together into a single block,
attached to the top/bottom of the viewport
- that block should adjust to the vertical space
available
This should also adjust to the height of the
viewport, dropping whatever elements that don't
fit back into the page flow. When this happens, we
scroll the page so all the parts of the dialog are
seen together at the start of the task.
If the screen resizes, sticky elements can end up
moving from one part of the screen to another,
sometimes without passing through their different
states (in-page, stuck, stopped) in the normal
order.
This makes the methods that change their states
better at dealing with those state changes.
If you have a long template it’s annoying to have to scroll all the
way to the bottom to click save, when you’ve only changed a small thing
near the staert of the content.
Uses some CSS to draw some grey lines to show which radios descend from
which.
I don’t feel like the intentation is enough, and it looks a bit messy
because the circles of the radio buttons don’t have straight edges
easily suggest visual alignment.
Copies the design from conditionally revealing content in the design
system:
https://design-system.service.gov.uk/components/radios/#conditionally-revealing-content
Implementation is done with pseudo elements, because borders can’t be
positionned exactly enough.
This is from when we used to show the email logos inside the label of
the radio buttons.
Changing the CSS will also change its hash, will will cache-bust
CloudFront. Which is why I’m doing this now.
Includes:
- change .stopped method to .isStopped() for
consistency
- replace code in checkResize that adjusts
dimensions for setElementDimensions
- add code that deals with the window size being
too small to run whenever positions are calculated
- add reset method for when screen is too small
for sticking behaviour
- move guard out of methods for stopping and
sticking (it hid info that was useful at the
point they were called)
Allows other JS to tell sticky elements to
recalculate their dimensions and then position
(and then check to see if their state needs
changing).
We need this because we change the content of our
element so its dimensions change.
The recalculation code also updates the shim for
elements that are 'stuck' so the horizontal space
the element would occupy in the flow of the page
is correct.
Includes other code that splits the height
StickyElement stores into two properties:
1. `verticalSpace`
2. `height`
`verticalSpace` is the vertical space the element
occupies in the document flow when not stuck.
`height` is the visual space of the element,
including padding and border.
