Skip to content

Commit 60e9e6b

Browse files
obulatobulat
committed
Merge branch 'master' into stepper_style
# Conflicts: # src/components/LicenseText.vue # src/locales/en.json # tests/e2e/specs/AttributionDetailsStep.js # tests/e2e/specs/CopyrightWaiverStep.js # tests/e2e/specs/LicenseDetailsCard.js # tests/e2e/specs/Stepper.js # tests/unit/specs/components/ChooserStep.spec.js # tests/unit/specs/components/CopyrightWaiverStep.spec.js
2 parents 884040a + 4df6242 commit 60e9e6b

22 files changed

+21208
-127
lines changed

‎.cc-metadata.yml‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,4 +5,4 @@ english_name: CC Chooser
55
# All technologies used
66
technologies: HTML, CSS, JS, Bulma, Vue, Jest
77
# Whether this repository should be featured on the CC Open Source site
8-
featured: false
8+
featured: true

‎README.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -44,6 +44,6 @@ To run e2e tests, you must have Java installed. [[download Java here](https://ja
4444

4545

4646
## Deployment
47-
The source files for the beta deployment are contained in the `./docs/` dir, and are live. Any changes to this dir's contents will be automatically deployed, so please take care when making modifications to this location.
47+
The chooser is deployed to GitHub Pages. The source files for the beta deployment are contained in the `./docs/` dir, and are live. Any changes to this dir's contents will be automatically deployed, so please take care when making modifications to this location.
4848

4949
To update the dist bundle, run ```$ npm run build```, and copy the generated files from `./dist/` to `./docs/`, taking care to not delete the CNAME file in `./docs/`.

‎package-lock.json‎

Lines changed: 20555 additions & 9 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/App.vue‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,21 @@
55
id="site-container"
66
class="container"
77
>
8+
<nav
9+
class="breadcrumb caption bold"
10+
aria-label="breadcrumbs"
11+
>
12+
<ul>
13+
<li><a href="#">Home</a></li>
14+
<li><a href="#">Child Page</a></li>
15+
<li class="is-active">
16+
<a
17+
href="#"
18+
aria-current="page"
19+
>Chooser</a>
20+
</li>
21+
</ul>
22+
</nav>
823
<div class="page-head">
924
<div class="select-license-column">
1025
<h2 class="vocab">
@@ -115,6 +130,9 @@ export default {
115130
#site-container {
116131
padding: 0.75rem;
117132
}
133+
.breadcrumb {
134+
margin-bottom: 2rem;
135+
}
118136
.page-head {
119137
display: grid;
120138
grid-template-columns: 1fr;

‎src/components/CopyTools.vue‎

Lines changed: 112 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,112 @@
1+
<template>
2+
<div class="copy-tools">
3+
<copy-type-switch
4+
v-if="clipboardTarget!=='.xmp'"
5+
@change-copy-type="changeCopyType"
6+
/>
7+
<v-button
8+
v-if="clipboardTarget!=='.xmp'"
9+
class="donate small copy-button"
10+
:data-clipboard-target="clipboardTarget"
11+
@click="handleCopy"
12+
>
13+
{{ copyLabel }}
14+
</v-button>
15+
<v-button
16+
v-else
17+
class="donate small copy-button is-xmp"
18+
>
19+
{{ xmpLabel }}
20+
</v-button>
21+
</div>
22+
</template>
23+
24+
<script>
25+
import CopyTypeSwitch from '@/components/CopyTypeSwitch'
26+
import Clipboard from 'clipboard'
27+
export default {
28+
name: 'CopyTools',
29+
components: { CopyTypeSwitch },
30+
props: {
31+
clipboardTarget: {
32+
type: String,
33+
default: '.license-text'
34+
}
35+
},
36+
data() {
37+
return {
38+
copyType: 'short',
39+
copyLabel: this.$t('license-use.copy-label'),
40+
xmpLabel: this.$t('license-use.xmp-label')
41+
}
42+
},
43+
mounted() {
44+
this.clipboard = new Clipboard('.copy-button')
45+
this.clipboard.on('success', this.onCopySuccess)
46+
this.clipboard.on('error', this.onCopyError)
47+
},
48+
destroyed() {
49+
this.clipboard.destroy()
50+
},
51+
methods: {
52+
changeCopyType() {
53+
this.copyType = this.copyType === 'short' ? 'full' : 'short'
54+
this.$emit('change-copy-type', this.copyType)
55+
},
56+
handleCopy() {
57+
this.copyLabel = this.$t('license-use.copied-label')
58+
setTimeout(() => {
59+
this.copyLabel = this.$t('license-use.copy-label')
60+
}, 2000)
61+
},
62+
onCopySuccess(e) {
63+
this.success = true
64+
if (process.env.NODE_ENV === 'production') {
65+
const fieldsFilled = {}
66+
for (const detail in this.attributionDetails) {
67+
fieldsFilled[detail] = this.attributionDetails[detail] !== ''
68+
}
69+
const copiedLicense = {
70+
license: this.shortName,
71+
// codeType can be either rich-text or html
72+
codeType: 'plaintext',
73+
fieldsFilled: fieldsFilled
74+
}
75+
this.$ga.event({
76+
eventCategory: 'Attribution',
77+
eventAction: 'copied',
78+
eventLabel: JSON.stringify(copiedLicense)
79+
})
80+
}
81+
setTimeout(() => {
82+
this.success = false
83+
}, 2000)
84+
e.clearSelection()
85+
},
86+
onCopyError(e) {
87+
e.clearSelection()
88+
}
89+
}
90+
}
91+
</script>
92+
93+
<style lang="scss" scoped>
94+
.copy-tools {
95+
display: flex;
96+
flex-direction: row;
97+
justify-content: space-between;
98+
align-items: center;
99+
border: 0.125rem solid #d8d8d8;
100+
border-top: none;
101+
background-color: white;
102+
padding: 0 1.5rem 1.5rem;
103+
border-bottom-left-radius: 0.25rem;
104+
border-bottom-right-radius: 0.25rem;
105+
}
106+
.button.donate.small {
107+
justify-content: center;
108+
&.is-xmp {
109+
width: fit-content;
110+
}
111+
}
112+
</style>

‎src/components/CopyTypeSwitch.vue‎

Lines changed: 109 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,109 @@
1+
<template>
2+
<div class="toggle">
3+
<span
4+
id="label-short"
5+
ref="short"
6+
class="toggle-label selected"
7+
>license abbreviation</span>
8+
<input
9+
id="copy-type"
10+
:aria-labelledby="currentLabel"
11+
type="checkbox"
12+
name="copy-type"
13+
class="toggle-input"
14+
@input="onInput"
15+
>
16+
<span
17+
id="label-full"
18+
ref="full"
19+
class="toggle-label"
20+
>full license name</span>
21+
</div>
22+
</template>
23+
24+
<script>
25+
import { mapMutations } from 'vuex'
26+
export default {
27+
name: 'CopyTypeSwitch',
28+
data() {
29+
return {
30+
selected: 'short'
31+
}
32+
},
33+
computed: {
34+
currentLabel() {
35+
return `label-${this.selected}`
36+
}
37+
},
38+
methods: {
39+
...mapMutations(['setAttributionType']),
40+
onInput(event) {
41+
const copyType = event.target.checked ? 'full' : 'short'
42+
this.selected = copyType
43+
this.$refs.full.classList.toggle('selected')
44+
this.$refs.short.classList.toggle('selected')
45+
this.setAttributionType(copyType)
46+
}
47+
}
48+
}
49+
</script>
50+
51+
<style lang="scss" scoped>
52+
@supports (-webkit-appearance: none) or (-moz-appearance: none) {
53+
.toggle {
54+
display: flex;
55+
align-items: center;
56+
&-input {
57+
margin-left: 0.5rem;
58+
margin-right: 0.5rem;
59+
border: 2px solid #D8D8D8;
60+
appearance: none;
61+
outline: none;
62+
cursor: pointer;
63+
background: transparent;
64+
display: flex;
65+
align-items: center;
66+
width: 46px;
67+
height: 26px;
68+
border-radius: 23px;
69+
justify-content: left;
70+
71+
&::after {
72+
content: '';
73+
background: #1547A8;
74+
width: 1rem;
75+
height: 1rem;
76+
margin-left: 2px;
77+
border-radius: 50%;
78+
transition: transform 300ms ease;
79+
transform: none;
80+
opacity: 1;
81+
border: none;
82+
position: static;
83+
}
84+
85+
&:active,
86+
&:hover,
87+
&:focus {
88+
box-shadow: 0 0 0 2px rgba(176, 176, 176, 0.3);
89+
transition: box-shadow 400ms ease;
90+
}
91+
92+
&:checked::after {
93+
transition: transform 300ms ease-out;
94+
transform: translateX(22px);
95+
}
96+
97+
}
98+
}
99+
}
100+
101+
.toggle-label {
102+
font-size: 0.8125rem;
103+
font-weight: 600;
104+
color: #d8d8d8;
105+
&.selected {
106+
color: #333;
107+
}
108+
}
109+
</style>

‎src/components/LicenseDetailsCard.vue‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@
1010
>
1111
{{ fullName }} ({{ shortName }})
1212
<LicenseIcons
13+
class="license-icons"
1314
:url="licenseUrl('web')"
1415
:icons-arr="iconsList"
1516
/>
@@ -78,7 +79,7 @@ export default {
7879
display: inline-block;
7980
margin-top: 8px;
8081
}
81-
.license-name .photo-license-icons {
82+
.license-icons {
8283
height: 35px;
8384
vertical-align: middle;
8485
}

‎src/components/LicenseHTML.vue‎

Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
<template>
2+
<div
3+
id="attribution-html"
4+
:aria-label="$t('license-use.html-label')"
5+
class="textarea-html"
6+
readonly
7+
>
8+
{{ htmlLicenseParagraph.replace(/ {2,}/g, ' ') }}
9+
</div>
10+
</template>
11+
12+
<script>
13+
import { mapGetters, mapState } from 'vuex'
14+
import { generateHTML } from '../utils/license-utilities'
15+
16+
export default {
17+
name: 'LicenseHTML',
18+
computed: {
19+
...mapGetters(['shortName', 'fullName', 'iconsList', 'licenseUrl']),
20+
...mapState(['attributionDetails', 'attributionType']),
21+
22+
htmlLicenseParagraph() {
23+
const isFull = this.attributionType === 'full'
24+
const { work, creator, license, paragraph } = generateHTML(this.attributionDetails, this.shortName, isFull)
25+
const licenseCodeSpan = this.$t('license-use.richtext.full-text', {
26+
workTitle: work || this.$t('license-use.richtext.workTitle'),
27+
creator,
28+
license,
29+
by: creator ? this.$t('license-use.richtext.by') : '',
30+
'licensed-text': this.$t('license-use.richtext.licensed-text')
31+
})
32+
return `${paragraph}${licenseCodeSpan}</p>`
33+
}
34+
}
35+
}
36+
</script>
37+
38+
<style lang="scss" scoped>
39+
.textarea-html {
40+
height: 100px;
41+
overflow-x: hidden;
42+
word-break: break-all;
43+
border: 0.125rem solid #d8d8d8;
44+
border-radius: 4px;
45+
font-size: 13px;
46+
&:hover, &:active, &:focus {
47+
border-color: #b0b0b0;
48+
}
49+
}
50+
</style>

0 commit comments

Comments
 (0)