maverick/docbrown
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Fix gotchas with color preview and some style adjustments and add documentation (#4322)

Browse source
This commit is contained in:
Ben Halpern 2019-10-08 21:32:31 -04:00 • committed by GitHub
parent f7f3380267
commit 3db3f6fdc2
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 81 additions and 57 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

10
app/assets/stylesheets/settings.scss
View file

@ -176,14 +176,20 @@
.color-select-textbox{
flex:1;
min-width:70px;
border-radius: 0px;
border-top-left-radius: 3px;
border-bottom-left-radius: 3px;
}
input[type="color"] {
box-sizing:border-box;
border: none;
border-radius:0px;
border-radius: 0px;
border-top-right-radius: 3px;
border-bottom-right-radius: 3px;
padding:3px;
width:50px;
height:48px;
margin-left: -1px;
border: 1px solid rgb(222, 230, 233);
cursor:pointer;
}
}

113
app/javascript/packs/colorPreview.js
View file

@ -1,61 +1,64 @@
const colorField = {
// input type="color"
bgColor: document.getElementById('bg-color-colorfield'),
textColor: document.getElementById('text-color-colorfield'),
};
const textField = {
// input type="text"
bgColor: document.getElementById('bg-color-textfield'),
textColor: document.getElementById('text-color-textfield'),
};
const preview = document.getElementById('color-select-preview-logo');
// Assigns input[type='text'] values to input[type='color']
function updateColorFields() {
colorField.bgColor.value = textField.bgColor.value;
colorField.textColor.value = textField.textColor.value;
}
// Updating text fields when color fields are changed
function updateTextFields() {
textField.bgColor.value = colorField.bgColor.value;
textField.textColor.value = colorField.textColor.value;
}
// Updates Preview Colors
function updatePreview() {
preview.style.backgroundColor = textField.bgColor.value;
preview.style.fill = textField.textColor.value;
}
// Event Watchers
// When color fields change -> updateTextField values and refresh preview
function watchColorFields() {
updateTextFields();
updatePreview();
}
// When text fields change -> updateColorField values and refresh preview
function watchTextFields(e) {
if (e.target.value.match(/#[0-9a-f]{6}/gi)) {
updateColorFields();
updatePreview();
}
}
function initPreview() {
// Event Listeners
colorField.bgColor.addEventListener('input', watchColorFields);
colorField.textColor.addEventListener('input', watchColorFields);
textField.bgColor.addEventListener('keyup', watchTextFields);
textField.textColor.addEventListener('keyup', watchTextFields);
const colorField = {
// input type="color"
bgColor: document.getElementById('bg-color-colorfield'),
textColor: document.getElementById('text-color-colorfield'),
};
const textField = {
// input type="text"
bgColor: document.getElementById('bg-color-textfield'),
textColor: document.getElementById('text-color-textfield'),
};
const preview = document.getElementById('color-select-preview-logo');
// Assigns input[type='text'] values to input[type='color']
function updateColorFields() {
colorField.bgColor.value = textField.bgColor.value;
colorField.textColor.value = textField.textColor.value;
}
// Updating text fields when color fields are changed
function updateTextFields() {
textField.bgColor.value = colorField.bgColor.value;
textField.textColor.value = colorField.textColor.value;
}
// Updates Preview Colors
function updatePreview() {
preview.style.backgroundColor = textField.bgColor.value;
preview.style.fill = textField.textColor.value;
}
// Event Watchers
// When color fields change -> updateTextField values and refresh preview
function watchColorFields() {
updateTextFields();
updatePreview();
}
// When text fields change -> updateColorField values and refresh preview
function watchTextFields(e) {
if (e.target.value.match(/#[0-9a-f]{6}/gi)) {
updateColorFields();
updatePreview();
}
}
if (preview) {
// Event Listeners
colorField.bgColor.addEventListener('input', watchColorFields);
colorField.textColor.addEventListener('input', watchColorFields);
textField.bgColor.addEventListener('keyup', watchTextFields);
textField.textColor.addEventListener('keyup', watchTextFields);
// on init
updateColorFields();
updatePreview();
preview.style.display = 'inline-block';
// on init
updateColorFields();
updatePreview();
preview.style.display = 'inline-block';
}
}
initPreview();

15
docs/getting-started/architecture.md
View file

@ -38,6 +38,21 @@ The home feed is based on a combination of collective recent posts that are cach
Currently, the top post on the home feed, which must have a cover image, is shared among all users.
## Inter-page navigation
DEV uses a variation of "instant click" which swaps out content instead of full page requests. It is similar to the Rails gem Turbolinks, but more lightweight. The library is modified to work specifically with the Rails app, and does not swap the nav bar or footer when a page is changed. The code for this functionality can be found in `app/assets/javascripts/base.js.erb`.
There are gotchas in terms of JavaScript not loading from a fully blank slate. This means that a lot of functionality needs to be loaded on page change, as well as `window.InstantClick.on('change', someFunction)`. This means lines like this exist in the app...
```javascript
initPreview();
window.InstantClick.on('change', initPreview);
```
This can change how variables need to be defined in certain contexts and orders, differently than if they were loaded freshly, or within the context of a truly integrated single page app.
Of course, it would be possible to abstract away some of these gotchas in the future.
# General app concepts
## Articles (or posts)