Skip to content
Snippets Groups Projects
Commit 1c7b4f82 authored by Ken Hawkins's avatar Ken Hawkins
Browse files

Formatting, npm 

Various changes around the VF js formatting and npm file tracking and a couple typos. Doesn't change the intent of the branch.
parent ca20f1f7
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
Showing
with 101 additions and 61 deletions
components/vf-componenet-rollup/scripts.js
+ 3
− 0
View file @ 1c7b4f82
......@@ -10,6 +10,9 @@
import { vfBanner } from 'vf-banner/vf-banner';
vfBanner();
import { vfMastheadSetStyle } from 'vf-masthead/vf-masthead';
vfMastheadSetStyle();
import { vfTabs } from 'vf-tabs/vf-tabs';
vfTabs();
......
components/vf-masthead/.npmignore 0 → 100644
+ 4
− 0
View file @ 1c7b4f82
bin
.github
.travis.yml
node_modules
components/vf-masthead/README.md
+ 6
− 6
View file @ 1c7b4f82
......@@ -24,7 +24,7 @@ This is set in the components Sass partial but is used in the components HTML in
">
```
To override this the changes to `--vf-masthead__color--foreround-default` and `--vf-masthead__color--background-default` need to be applied either after the Sass partial is compiled in your build step or in the HTML on the page using `root`:
To override this the changes to `--vf-masthead__color--foreground-default` and `--vf-masthead__color--background-default` need to be applied either after the Sass partial is compiled in your build step or in the HTML on the page using `root`:
```html
<style>
......@@ -39,17 +39,17 @@ To override this the changes to `--vf-masthead__color--foreround-default` and `-
If you are overriding the background or foreground (text) colour make sure you are:
- using a colour from the Visual Framework.
- testing to be sure that the contrast ratio meets accessibility guidelines.
- using a colour from the Visual Framework
- testing to be sure that the contrast ratio meets accessibility guidelines
---
### Background Images
If you wish to use an image instead of a colour for the background of your masthead you will need to define it's location as a CSS Custom Property.
If you wish to use an image instead of a colour for the background of your masthead you will need to define its location as a CSS Custom Property.
```css
--vf-masthead__bg-image: url('path/to/background-image.png');
--vf-masthead__bg-image: url('path/to/background-image_00EF00.png');
```
#### Image Size
......@@ -81,7 +81,7 @@ The JavaScript looks for this hexidecimal colour code and mathematically works o
</style>
```
If JavaScript is disabled, or if it doesn't load with the page. The masthead will defualt to the background colour.
If JavaScript is disabled, or if it doesn't load with the page. The masthead will default to the background colour.
---
......
components/vf-masthead/package.json
+ 0
− 8
View file @ 1c7b4f82
......@@ -7,14 +7,6 @@
"license": "Apache 2.0",
"style": "vf-masthead.css",
"sass": "index.scss",
"files": [
"assets",
"index.scss",
"vf-masthead.scss",
"vf-masthead.css",
"vf-masthead.njk",
"vf-masthead.config.yml"
],
"test": "echo \"Error: no test specified\" && exit 1",
"publishConfig": {
"access": "public"
......
components/vf-masthead/vf-masthead--inlay.njk
+ 10
− 9
View file @ 1c7b4f82
......@@ -5,13 +5,14 @@
--vf-masthead__bg-image: url('{{ '/assets/vf-masthead/assets/group-bg_2d4155.png' | path }}');
}
</style>
<div id="js-masthead-bg" class="vf-masthead" style="background-color: var(--vf-masthead__color--background, var(--vf-masthead__color--background-default)); color: var(--vf-masthead__color--foreground, var(--vf-masthead__color--foreround-default) );">
<div class="vf-masthead__inner">
<div class="vf-masthead__title">
<h1 class="vf-masthead__heading">
<a class="vf-masthead__heading__link" href="http://dev-vf-theme-prototype.pantheonsite.io">Häring Group</a>
<span class="vf-masthead__heading--additional">Chromosome structure and dynamics</span>
</h1>
</div>
<div data-vf-js-masthead class="vf-masthead" style="background-color: 'var(--vf-masthead__color--background', var(--vf-masthead__color--background-default)); color: var(--vf-masthead__color--foreground, var(--vf-masthead__color--foreground-default) );">
<div class="vf-masthead__inner">
<div class="vf-masthead__title">
<h1 class="vf-masthead__heading">
<a class="vf-masthead__heading__link" href="#">Häring Group</a>
<span class="vf-masthead__heading--additional">Chromosome structure and dynamics</span>
</h1>
</div>
</div> <!--/vf-masthead-->
</div>
</div>
<!--/vf-masthead-->
components/vf-masthead/vf-masthead.js
+ 61
− 21
View file @ 1c7b4f82
// vf-masthead
/*
* A note on the Visual Framework and JavaScript:
* The VF is primairly a CSS framework so we've included only a minimal amount
* of JS in components and it's fully optional (just remove the JavaScript selectors
* i.e. `data-vf-js-tabs`). So if you'd rather use Angular or Bootstrap for your
* tabs, the Visual Framework won't get in the way.
*
* When querying the DOM for elements that should be acted on:
* 🚫 Don't: const tabs = document.querySelectorAll('.vf-tabs');
* ✅ Do: const tabs = document.querySelectorAll('[data-vf-js-tabs]');
*
* This allows users who would prefer not to have this JS engange on an element
* to drop `data-vf-js-component` and still maintain CSS styling.
*/
// Uncomment this boilerplate
// // if you need to import any other components' JS to use here
// import { vfOthercomponent } from 'vf-other-component/vf-other-component';
//
// function vfcomponentName(firstPassedVar) {
// firstPassedVar = firstPassedVar || 'defaultVal';
//
// }
//
// // If you need to invoke the component by default
// vfcomponentName();
//
// // By default your component should be usable with js imports
// export { vfcomponentName };
//
// // You should also import it at ./components/vf-core/scripts.js
// // import { vfcomponentName } from '../components/raw/vf-component/vf-component.js';
// // vfcomponentName();
// // And, if needed, invoke it
// The background image for the banner element are taken from the database.
// The filename includes the hex code for the background colour of the image.
// Then test if the 6 characters are a hex code and declare the background-color
//function for making background color of banner from image file name
function setStyle(elId) {
if (document.getElementById(elId)) {
var el = document.getElementById(elId);
var bannerEl = document.getElementById("js-masthead-bg");
var bannerBG = getComputedStyle(bannerEl).getPropertyValue('--vf-masthead__bg-image');
var filename = bannerBG.substr(0, bannerBG.lastIndexOf('.')) || bannerBG;
var hexcode = filename.substr(filename.length - 6);
var bannerBGC = "#" + hexcode;
var regHex = /[0-9A-Fa-f]{6}/g;
/**
* Function for making background color of banner from image file name
* @example vfMastheadSetStyle()
*/
function vfMastheadSetStyle() {
const vfMastheads = document.querySelectorAll('[data-vf-js-masthead]');
if (vfMastheads[0]) {
let el = vfMastheads[0];
let bannerBG = getComputedStyle(el).getPropertyValue('--vf-masthead__bg-image');
let filename = bannerBG.substr(0, bannerBG.lastIndexOf('.')) || bannerBG;
let hexcode = filename.substr(filename.length - 6);
let bannerBGC = "#" + hexcode;
let regHex = /[0-9A-Fa-f]{6}/g;
let threshold = 130; // about half of 256. Lower threshold equals more dark text on dark background
let cBrightness = 255; // default to above the threshold
if (regHex.test(hexcode)) {
if (!bannerBGC) return;
bannerBGC = bannerBGC.trim();
function cutHex(h) {return (h.charAt(0)=="#") ? h.substring(1,7):h}
......@@ -27,22 +68,21 @@ function setStyle(elId) {
function hexToB(h) {return parseInt((cutHex(h)).substring(4,6),16)}
function getCorrectTextColor(hex){
threshold = 130; /* about half of 256. Lower threshold equals more dark text on dark background */
hRed = hexToR(hex);
hGreen = hexToG(hex);
hBlue = hexToB(hex);
cBrightness = ((hRed * 299) + (hGreen * 587) + (hBlue * 114)) / 1000;
let hRed = hexToR(hex);
let hGreen = hexToG(hex);
let hBlue = hexToB(hex);
return ((hRed * 299) + (hGreen * 587) + (hBlue * 114)) / 1000;
}
getCorrectTextColor(bannerBGC);
// bannerEl.style.setProperty('--vf-masthead__color--background', "none");
cBrightness = getCorrectTextColor(bannerBGC);
if (cBrightness > threshold){
bannerEl.style.setProperty('--vf-masthead__color--foreground', "#000000");
el.style.setProperty('--vf-masthead__color--foreground', "#000000");
} else if (cBrightness < threshold) {
bannerEl.style.setProperty('--vf-masthead__color--foreground', "#FFFFFF");
el.style.setProperty('--vf-masthead__color--foreground', "#FFFFFF");
}
}
}
};
setStyle('js-masthead-bg');
export { vfMastheadSetStyle };
npm-shrinkwrap.json
+ 14
− 14
View file @ 1c7b4f82
......@@ -8986,7 +8986,7 @@
"source-map": {
"version": "0.6.1",
"resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
"integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
"integrity": "sha1-dHIq8y6WFOnCh6jQu95IteLxomM=",
"dev": true
}
}
......@@ -24242,7 +24242,7 @@
"get-stdin": {
"version": "6.0.0",
"resolved": "https://registry.npmjs.org/get-stdin/-/get-stdin-6.0.0.tgz",
"integrity": "sha512-jp4tHawyV7+fkkSKyvjuLZswblUtz+SQKzSWnBbii16BuZksJlU1wuBYXY75r+duh/llF1ur6oNwi+2ZzjKZ7g=="
"integrity": "sha1-ngm/cSs2CrkiXoEgSPcf3pyJZXs="
},
"glob": {
"version": "7.1.3",
......@@ -24416,7 +24416,7 @@
"meow": {
"version": "5.0.0",
"resolved": "https://registry.npmjs.org/meow/-/meow-5.0.0.tgz",
"integrity": "sha512-CbTqYU17ABaLefO8vCU153ZZlprKYWDljcndKKDCFcYQITzWCXZAVk4QMFZPgvzrnUQ3uItnIE/LoUOwrT15Ig==",
"integrity": "sha1-38c9Y6mvxxSl43F2DrXIi5EHiqQ=",
"requires": {
"camelcase-keys": "^4.0.0",
"decamelize-keys": "^1.0.0",
......@@ -24432,7 +24432,7 @@
"micromatch": {
"version": "3.1.10",
"resolved": "https://registry.npmjs.org/micromatch/-/micromatch-3.1.10.tgz",
"integrity": "sha512-MWikgl9n9M3w+bpsY3He8L+w9eF9338xRl8IAO5viDizwSzziFEyUzo2xrrloB64ADbTf8uA8vRqqttDTOmccg==",
"integrity": "sha1-cIWbyVyYQJUvNZoGij/En57PrCM=",
"requires": {
"arr-diff": "^4.0.0",
"array-unique": "^0.3.2",
......@@ -24507,7 +24507,7 @@
"pify": {
"version": "4.0.1",
"resolved": "https://registry.npmjs.org/pify/-/pify-4.0.1.tgz",
"integrity": "sha512-uB80kBFb/tfd68bVleG9T5GGsGPjJrLAUpR5PZIrhBnIaRTQRjqdJSsIKkOP6OAIFbj7GOrcudc5pNjZ+geV2g=="
"integrity": "sha1-SyzSXFDVmHNcUCkiJP2MbfQeMjE="
},
"postcss": {
"version": "7.0.14",
......@@ -24590,7 +24590,7 @@
"slash": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/slash/-/slash-2.0.0.tgz",
"integrity": "sha512-ZYKh3Wh2z1PpEXWr0MpSBZ0V6mZHAQfYevttO11c51CaWjGTaadiKZ+wVt1PbMlDV5qhMFslpZCemhwOK7C89A=="
"integrity": "sha1-3lUoUaF1nfOo8gZTVEL17E3eq0Q="
},
"slice-ansi": {
"version": "2.1.0",
......@@ -24769,7 +24769,7 @@
"lodash": {
"version": "4.17.11",
"resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.11.tgz",
"integrity": "sha512-cQKh8igo5QUhZ7lg38DYWAxMvjSAKG0A8wGSVimP07SIUEK2UO+arSRKbRZWtelMtN5V0Hkwh5ryOto/SshYIg=="
"integrity": "sha1-s56mIp72B+zYniyN8SU2iRysm40="
},
"postcss-selector-parser": {
"version": "5.0.0",
......@@ -24784,7 +24784,7 @@
"postcss-value-parser": {
"version": "3.3.1",
"resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-3.3.1.tgz",
"integrity": "sha512-pISE66AbVkp4fDQ7VHBwRNXzAAKJjw4Vw7nWI/+Q3vuly7SNfgYXvm6i5IgFylHGK5sP/xHAbB7N49OS4gWNyQ=="
"integrity": "sha1-n/giVH4okyE88cMO+lGsX9G6goE="
}
}
},
......@@ -25165,7 +25165,7 @@
"fs-extra": {
"version": "5.0.0",
"resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-5.0.0.tgz",
"integrity": "sha512-66Pm4RYbjzdyeuqudYqhFiNBbCIuI9kgRqLPSHIlXHidW8NIQtVdkM1yeZ4lXwuhbTETv3EUGMNHAAw6hiundQ==",
"integrity": "sha1-QU0BEM3QZwVzTQVWUsVBEmDDGr0=",
"requires": {
"graceful-fs": "^4.1.2",
"jsonfile": "^4.0.0",
......@@ -25199,7 +25199,7 @@
"js-yaml": {
"version": "3.10.0",
"resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-3.10.0.tgz",
"integrity": "sha512-O2v52ffjLa9VeM43J4XocZE//WT9N0IiwDa3KSHH7Tu8CtH+1qM8SIZvnsTh6v+4yFy5KUY3BHUVwjpfAWsjIA==",
"integrity": "sha1-LnhEFka9RoLpY/IrbpKCPDCcYtw=",
"requires": {
"argparse": "^1.0.7",
"esprima": "^4.0.0"
......@@ -26837,7 +26837,7 @@
"cross-spawn": {
"version": "6.0.5",
"resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-6.0.5.tgz",
"integrity": "sha512-eTVLrBSt7fjbDygz805pMnstIs2VTBNkRm0qxZd+M7A5XDdxVRWO5MxGBXZhjY4cqLYLdtrGqRf8mBPmzwSpWQ==",
"integrity": "sha1-Sl7Hxk364iw6FBJNus3uhG2Ay8Q=",
"requires": {
"nice-try": "^1.0.4",
"path-key": "^2.0.1",
......@@ -26849,7 +26849,7 @@
"dateformat": {
"version": "3.0.3",
"resolved": "https://registry.npmjs.org/dateformat/-/dateformat-3.0.3.tgz",
"integrity": "sha512-jyCETtSl3VMZMWeRo7iY1FL19ges1t55hMo5yaam4Jrsm5EPL89UQkoQRyiI+Yf4k8r2ZpdngkV8hr1lIdjb3Q=="
"integrity": "sha1-puN0maTZqc+F71hyBE1ikByYia4="
},
"debug": {
"version": "4.1.1",
......@@ -26862,7 +26862,7 @@
"find-up": {
"version": "3.0.0",
"resolved": "https://registry.npmjs.org/find-up/-/find-up-3.0.0.tgz",
"integrity": "sha512-1yD6RmLI1XBfxugvORwlck6f75tYL+iR0jqwsOrOxMZyGYqUuDhJ0l4AXdO1iX/FTs9cBAMEk1gWSEx1kSbylg==",
"integrity": "sha1-SRafHXmTQwZG2mHsxa41XCHJe3M=",
"requires": {
"locate-path": "^3.0.0"
}
......@@ -26918,7 +26918,7 @@
"read-pkg-up": {
"version": "4.0.0",
"resolved": "https://registry.npmjs.org/read-pkg-up/-/read-pkg-up-4.0.0.tgz",
"integrity": "sha512-6etQSH7nJGsK0RbG/2TeDzZFa8shjQ1um+SwQQ5cwKy0dhSXdOncEhb1CPpvQG4h7FyOV6EB6YlV0yJvZQNAkA==",
"integrity": "sha1-GyIcYIi6d5lgHICPkRYcZuWPiXg=",
"requires": {
"find-up": "^3.0.0",
"read-pkg": "^3.0.0"
......
tools/component-generator/templates/_package.json
+ 3
− 3
View file @ 1c7b4f82
......@@ -9,9 +9,9 @@
"sass": "index.scss",
"main": "build/index.js",
"test": "echo \"Error: no test specified\" && exit 1",
"publishConfig": {
"access": "public"
},
"publishConfig": {
"access": "public"
},
"repo": "https://github.com/visual-framework/vf-core/tree/master/tree/master/components/<%= componentName %>",
"bugs": {
"url": "https://github.com/visual-framework/vf-core/issues"
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment