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.
This removes some code which is duplicative and obscure (ie it’s not
very clear why we do `"a" * 73` even though there is a Very Good Reason
for doing so).
This introduces a validator to validate that the name field is not empty
on the ServiceUpdateEmailBranding form, but only if the form details are
being submitted. If a file is being uploaded, the name is allowed to be
empty.
We were previously persisting the logo for the email branding and
deleting the temp files that get created before trying to update the
database with the new email branding. This meant that if there was an
error when saving (e.g. the domain used was a duplicate) the final logo
was already in S3 and trying to go 'back' in the browser would give an
error since the temp files needed to display the create branding page
had already been deleted.
This changes the order we do things in, so that we try persisting the
email branding to the database first.
We were getting all letter logos from a method in the email branding
client. Since we will be adding more client methods to deal with
letters, it makes things clearer to separate the email and letter
branding clients.
The Service Toolkit[1] used to categorise GaaP Programme[2] things under
‘Components’ so the breadcrumb reflected this.
This commit also fixes the anchor link, which has also changed[3] to the
new terminology.
1. https://www.gov.uk/service-toolkit
2. Rest in peace
3. https://www.w3.org/Provider/Style/URI
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.
The owner is often repetetive, eg
> *Hackney Council*
> Default for Hackney Council
Instead it’s more useful to reflect what the person setting up the brand
has entered – the domain.
This also adds an empty hint for non-default brands so that the page is
evenly spaced and nothing overlaps.
