Skip to content

Commit fc9328d

Browse files
author
Jeff
committed
fix codepen heights
1 parent b48fd94 commit fc9328d

File tree

7 files changed

+129
-114
lines changed

7 files changed

+129
-114
lines changed

‎docs/.vuepress/components/CodePen.vue

Lines changed: 12 additions & 108 deletions
Original file line numberDiff line numberDiff line change
@@ -9,116 +9,20 @@
99
</template>
1010

1111
<script>
12+
import mountCodePen from '../utils/codePen';
13+
1214
export default {
13-
props: ['url', 'height'],
15+
props: {
16+
url: {
17+
type: String,
18+
required: true,
19+
},
20+
height: {
21+
default: 250
22+
}
23+
},
1424
mounted () {
15-
document.getElementsByClassName || (document.getElementsByClassName = function (e) {
16-
var n, t, r, a = document, o = [];
17-
if (a.querySelectorAll) return a.querySelectorAll('.' + e);
18-
if (a.evaluate) for (t = './/*[contains(concat(\' \', @class, \' \'), \' ' + e + ' \')]', n = a.evaluate(t, a,
19-
null, 0,
20-
null); r = n.iterateNext();) o.push(r); else for (n = a.getElementsByTagName('*'), t = new RegExp(
21-
'(^|\\s)' + e + '(\\s|$)'), r = 0; r < n.length; r++) t.test(n[r].className) && o.push(n[r]);
22-
return o;
23-
}), function () {
24-
function e () {
25-
function e () {
26-
for (var e = document.getElementsByClassName('codepen'), t = e.length - 1; t > -1; t--) {
27-
var u = a(e[t]);
28-
if (0 !== Object.keys(u).length && (u = o(u), u.user = n(u, e[t]), r(u))) {
29-
var c = i(u), l = s(u, c);
30-
f(e[t], l);
31-
}
32-
}
33-
m();
34-
}
35-
36-
function n (e, n) {
37-
if ('string' == typeof e.user) return e.user;
38-
for (var t = 0, r = n.children.length; t < r; t++) {
39-
var a = n.children[t], o = a.href || '', i = o.match(/codepen\.(io|dev)\/(\w+)\/pen\//i);
40-
if (i) return i[2];
41-
}
42-
return 'anon';
43-
}
44-
45-
function r (e) {return e['slug-hash'];}
46-
47-
function a (e) {
48-
for (var n = {}, t = e.attributes, r = 0, a = t.length; r < a; r++) {
49-
var o = t[r].name;
50-
0 === o.indexOf('data-') && (n[o.replace('data-', '')] = t[r].value);
51-
}
52-
return n;
53-
}
54-
55-
function o (e) {
56-
return e.href && (e['slug-hash'] = e.href), e.type && (e['default-tab'] = e.type), e.safe &&
57-
('true' === e.safe ? e.animations = 'run' : e.animations = 'stop-after-5'), e;
58-
}
59-
60-
function i (e) {
61-
var n = u(e), t = e.user ? e.user : 'anon', r = '?' + l(e),
62-
a = e.preview && 'true' === e.preview ? 'embed/preview' : 'embed',
63-
o = [n, t, a, e['slug-hash'] + r].join('/');
64-
return o.replace(/\/\//g, '//');
65-
}
66-
67-
function u (e) {
68-
return e.host ? c(e.host) : 'file:' === document.location.protocol
69-
? 'https://codepen.io'
70-
: '//codepen.io';
71-
}
72-
73-
function c (e) {return e.match(/^\/\//) || !e.match(/https?:/) ? document.location.protocol + '//' + e : e;}
74-
75-
function l (e) {
76-
var n = '';
77-
for (var t in e) '' !== n && (n += '&'), n += t + '=' + encodeURIComponent(e[t]);
78-
return n;
79-
}
80-
81-
function s (e, n) {
82-
var r;
83-
e['pen-title'] ? r = e['pen-title'] : (r = 'CodePen Embed ' + t, t++);
84-
var a = {
85-
id: 'cp_embed_' + e['slug-hash'].replace('/', '_'),
86-
src: n,
87-
scrolling: 'no',
88-
frameborder: '0',
89-
height: d(e),
90-
allowTransparency: 'true',
91-
allowfullscreen: 'true',
92-
allowpaymentrequest: 'true',
93-
name: 'CodePen Embed',
94-
title: r,
95-
'class': 'cp_embed_iframe ' + (e['class'] ? e['class'] : ''),
96-
style: 'width: ' + p + '; overflow: hidden;',
97-
}, o = '<iframe ';
98-
for (var i in a) o += i + '="' + a[i] + '" ';
99-
return o += '></iframe>';
100-
}
101-
102-
function d (e) {return e.height ? e.height : 300;}
103-
104-
function f (e, n) {
105-
if (e.parentNode) {
106-
var t = document.createElement('div');
107-
t.className = 'cp_embed_wrapper', t.innerHTML = n, e.parentNode.replaceChild(t, e);
108-
} else e.innerHTML = n;
109-
}
110-
111-
function m () {'function' == typeof __CodePenIFrameAddedToPage && __CodePenIFrameAddedToPage();}
112-
113-
var p = '100%';
114-
e();
115-
}
116-
117-
function n (e) {/in/.test(document.readyState) ? setTimeout('window.__cp_domReady(' + e + ')', 9) : e();}
118-
119-
var t = 1;
120-
window.__cp_domReady = n, window.__CPEmbed = e, n(function () {new __CPEmbed;});
121-
}();
25+
mountCodePen();
12226
},
12327
};
12428
</script>

‎docs/.vuepress/utils/codePen.js

Lines changed: 111 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,111 @@
1+
export default () => {
2+
3+
document.getElementsByClassName || (document.getElementsByClassName = function (e) {
4+
var n, t, r, a = document, o = [];
5+
if (a.querySelectorAll) return a.querySelectorAll('.' + e);
6+
if (a.evaluate) for (t = './/*[contains(concat(\' \', @class, \' \'), \' ' + e + ' \')]', n = a.evaluate(t, a,
7+
null, 0,
8+
null); r = n.iterateNext();) o.push(r); else for (n = a.getElementsByTagName('*'), t = new RegExp(
9+
'(^|\\s)' + e + '(\\s|$)'), r = 0; r < n.length; r++) t.test(n[r].className) && o.push(n[r]);
10+
return o;
11+
}), function () {
12+
function e () {
13+
function e () {
14+
for (var e = document.getElementsByClassName('codepen'), t = e.length - 1; t > -1; t--) {
15+
var u = a(e[t]);
16+
if (0 !== Object.keys(u).length && (u = o(u), u.user = n(u, e[t]), r(u))) {
17+
var c = i(u), l = s(u, c);
18+
f(e[t], l);
19+
}
20+
}
21+
m();
22+
}
23+
24+
function n (e, n) {
25+
if ('string' == typeof e.user) return e.user;
26+
for (var t = 0, r = n.children.length; t < r; t++) {
27+
var a = n.children[t], o = a.href || '', i = o.match(/codepen\.(io|dev)\/(\w+)\/pen\//i);
28+
if (i) return i[2];
29+
}
30+
return 'anon';
31+
}
32+
33+
function r (e) {return e['slug-hash'];}
34+
35+
function a (e) {
36+
for (var n = {}, t = e.attributes, r = 0, a = t.length; r < a; r++) {
37+
var o = t[r].name;
38+
0 === o.indexOf('data-') && (n[o.replace('data-', '')] = t[r].value);
39+
}
40+
return n;
41+
}
42+
43+
function o (e) {
44+
return e.href && (e['slug-hash'] = e.href), e.type && (e['default-tab'] = e.type), e.safe &&
45+
('true' === e.safe ? e.animations = 'run' : e.animations = 'stop-after-5'), e;
46+
}
47+
48+
function i (e) {
49+
var n = u(e), t = e.user ? e.user : 'anon', r = '?' + l(e),
50+
a = e.preview && 'true' === e.preview ? 'embed/preview' : 'embed',
51+
o = [n, t, a, e['slug-hash'] + r].join('/');
52+
return o.replace(/\/\//g, '//');
53+
}
54+
55+
function u (e) {
56+
return e.host ? c(e.host) : 'file:' === document.location.protocol
57+
? 'https://codepen.io'
58+
: '//codepen.io';
59+
}
60+
61+
function c (e) {return e.match(/^\/\//) || !e.match(/https?:/) ? document.location.protocol + '//' + e : e;}
62+
63+
function l (e) {
64+
var n = '';
65+
for (var t in e) '' !== n && (n += '&'), n += t + '=' + encodeURIComponent(e[t]);
66+
return n;
67+
}
68+
69+
function s (e, n) {
70+
var r;
71+
e['pen-title'] ? r = e['pen-title'] : (r = 'CodePen Embed ' + t, t++);
72+
var a = {
73+
id: 'cp_embed_' + e['slug-hash'].replace('/', '_'),
74+
src: n,
75+
scrolling: 'no',
76+
frameborder: '0',
77+
height: d(e),
78+
allowTransparency: 'true',
79+
allowfullscreen: 'true',
80+
allowpaymentrequest: 'true',
81+
name: 'CodePen Embed',
82+
title: r,
83+
'class': 'cp_embed_iframe ' + (e['class'] ? e['class'] : ''),
84+
style: 'width: ' + p + '; overflow: hidden;',
85+
}, o = '<iframe ';
86+
for (var i in a) o += i + '="' + a[i] + '" ';
87+
return o += '></iframe>';
88+
}
89+
90+
function d (e) {return e.height ? e.height : 300;}
91+
92+
function f (e, n) {
93+
if (e.parentNode) {
94+
var t = document.createElement('div');
95+
t.className = 'cp_embed_wrapper', t.innerHTML = n, e.parentNode.replaceChild(t, e);
96+
} else e.innerHTML = n;
97+
}
98+
99+
function m () {'function' == typeof __CodePenIFrameAddedToPage && __CodePenIFrameAddedToPage();}
100+
101+
var p = '100%';
102+
e();
103+
}
104+
105+
function n (e) {/in/.test(document.readyState) ? setTimeout('window.__cp_domReady(' + e + ')', 9) : e();}
106+
107+
var t = 1;
108+
window.__cp_domReady = n, window.__CPEmbed = e, n(function () {new __CPEmbed;});
109+
}();
110+
111+
}

‎docs/docs/digging-deeper/ajax.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
## AJAX Remote Option Loading
22

3-
<CodePen url="POMeOX" height="40"/>
3+
<CodePen url="POMeOX" height="400"/>
44

55
The `onSearch` prop allows you to load options via ajax in a parent component
66
when the search text is updated. It is invoked with two parameters, `search` & `loading`.

‎docs/docs/digging-deeper/vuex.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,4 +13,4 @@ action, or trigger a mutation.
1313
></v-select>
1414
```
1515

16-
<CodePen url="aJQJyp" height="50"/>
16+
<CodePen url="aJQJyp" height="350"/>

‎docs/docs/getting-started/localization.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -40,4 +40,4 @@ All of the text within the component has been wrapped within [slots](https://vue
4040

4141
For a full list of component slots, view the [slots API docs](../api/slots.md).
4242

43-
<CodePen url="oZmLVN" height="25"/>
43+
<CodePen url="oZmLVN" height="450"/>

‎docs/docs/getting-started/options.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -31,7 +31,7 @@ If you wanted to display `Canada` in the dropdown, you'd use the `countryName` k
3131
<v-select label="countryName" :options="countries"></v-select>
3232
```
3333

34-
<CodePen url="aEjLPB" height="50"/>
34+
<CodePen url="aEjLPB" height="450"/>
3535

3636

3737
## Option Object Key

‎docs/docs/getting-started/values.md

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@ By default, `vue-select` supports choosing a single value. If you need multiple
2424
<v-select multiple v-model="selected"></v-select>
2525
```
2626

27-
<CodePen url="opMGro" height="25"/>
27+
<CodePen url="opMGro" height="250"/>
2828

2929
## Tagging
3030

@@ -37,7 +37,7 @@ If you want new tags to be pushed to the options list, set `push-tags` to true.
3737

3838
## Return a Single Key from an Object
3939

40-
<CodePen url="XVoWxm" height="35"/>
40+
<CodePen url="XVoWxm" height="350"/>
4141

4242
When the `options` array contains objects, `vue-select` returns the whole object as dropdown value upon selection. You can specify your own `index` prop to return only the value contained in the specific property.
4343

0 commit comments

Comments
 (0)