mirror of
https://github.com/Hopiu/vue-material.git
synced 2026-05-19 12:41:07 +00:00
start the creation of button "edit on codepen"
This commit is contained in:
Marcos Moura
parent
f07f608d02
commit
815c58b29f
6 changed files with 263 additions and 24 deletions
|
|
@ -12,16 +12,16 @@
|
|||
<meta name="application-name" content="Vue Material">
|
||||
<meta name="description" content="Material Design for Vue">
|
||||
|
||||
<meta name="msapplication-config" content="assets/favicon/browserconfig.xml">
|
||||
<meta name="msapplication-config" content="/assets/favicon/browserconfig.xml">
|
||||
<meta name="theme-color" content="#2196f3">
|
||||
<link rel="apple-touch-icon" sizes="180x180" href="assets/favicon/apple-touch-icon.png">
|
||||
<link rel="icon" type="image/png" href="assets/favicon/favicon-32x32.png" sizes="32x32">
|
||||
<link rel="icon" type="image/png" href="assets/favicon/favicon-194x194.png" sizes="194x194">
|
||||
<link rel="icon" type="image/png" href="assets/favicon/android-chrome-192x192.png" sizes="192x192">
|
||||
<link rel="icon" type="image/png" href="assets/favicon/favicon-16x16.png" sizes="16x16">
|
||||
<link rel="manifest" href="assets/favicon/manifest.json">
|
||||
<link rel="mask-icon" href="assets/favicon/safari-pinned-tab.svg" color="#2196f3">
|
||||
<link rel="shortcut icon" href="assets/favicon/favicon.ico">
|
||||
<link rel="apple-touch-icon" sizes="180x180" href="/assets/favicon/apple-touch-icon.png">
|
||||
<link rel="icon" type="image/png" href="/assets/favicon/favicon-32x32.png" sizes="32x32">
|
||||
<link rel="icon" type="image/png" href="/assets/favicon/favicon-194x194.png" sizes="194x194">
|
||||
<link rel="icon" type="image/png" href="/assets/favicon/android-chrome-192x192.png" sizes="192x192">
|
||||
<link rel="icon" type="image/png" href="/assets/favicon/favicon-16x16.png" sizes="16x16">
|
||||
<link rel="manifest" href="/assets/favicon/manifest.json">
|
||||
<link rel="mask-icon" href="/assets/favicon/safari-pinned-tab.svg" color="#2196f3">
|
||||
<link rel="shortcut icon" href="/assets/favicon/favicon.ico">
|
||||
|
||||
<title>Vue Material</title>
|
||||
|
||||
|
|
|
|||
BIN
docs/src/assets/codepen.png
Normal file
BIN
docs/src/assets/codepen.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2 KiB |
|
|
@ -16,7 +16,6 @@
|
|||
@import '../../../src/core/stylesheets/variables.scss';
|
||||
|
||||
.code-block {
|
||||
//margin: -16px;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
border-radius: 2px;
|
||||
|
|
@ -166,6 +165,7 @@
|
|||
import highlightJavascript from 'highlight.js/lib/languages/javascript';
|
||||
import highlightBash from 'highlight.js/lib/languages/bash';
|
||||
import Clipboard from 'clipboard';
|
||||
import getClosestVueParent from '../../../src/core/utils/getClosestVueParent';
|
||||
|
||||
highlight.registerLanguage('scss', highlightSCSS);
|
||||
highlight.registerLanguage('xml', highlightXML);
|
||||
|
|
@ -221,9 +221,17 @@
|
|||
}
|
||||
},
|
||||
mounted() {
|
||||
this.exampleBoxParent = getClosestVueParent(this.$parent, 'example-box');
|
||||
this.reindent();
|
||||
this.enableCopy();
|
||||
|
||||
if (this.exampleBoxParent) {
|
||||
this.exampleBoxParent.codeBlocks.push({
|
||||
lang: this.lang,
|
||||
code: this.$refs.block.innerHTML
|
||||
});
|
||||
}
|
||||
|
||||
highlight.highlightBlock(this.$refs.block);
|
||||
}
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1,19 +1,51 @@
|
|||
<template>
|
||||
<md-card class="example-box">
|
||||
<md-toolbar class="md-dense" v-md-theme="'white'">
|
||||
<h3 class="md-title">{{ cardTitle }}</h3>
|
||||
</md-toolbar>
|
||||
<div class="example-box">
|
||||
<md-card class="example-box-card">
|
||||
<md-toolbar class="md-dense" v-md-theme="'white'">
|
||||
<h3 class="md-title">{{ cardTitle }}</h3>
|
||||
</md-toolbar>
|
||||
|
||||
<md-tabs md-right :md-dynamic-height="false" class="md-transparent example-tabs">
|
||||
<md-tab class="example-content" md-label="Demo">
|
||||
<slot name="demo"></slot>
|
||||
</md-tab>
|
||||
<md-card-area>
|
||||
<md-tabs md-right :md-dynamic-height="false" class="md-transparent example-tabs">
|
||||
<md-tab class="example-content" md-label="Demo">
|
||||
<slot name="demo"></slot>
|
||||
</md-tab>
|
||||
|
||||
<md-tab class="code-content" md-label="Code">
|
||||
<slot name="code"></slot>
|
||||
</md-tab>
|
||||
</md-tabs>
|
||||
</md-card>
|
||||
<md-tab class="code-content" md-label="Code">
|
||||
<slot name="code"></slot>
|
||||
</md-tab>
|
||||
</md-tabs>
|
||||
</md-card-area>
|
||||
|
||||
<!-- <button type="button" class="md-codepen" @click="editOnCodepen">
|
||||
<img src="assets/codepen.png" alt="Edit on Codepen">
|
||||
<md-tooltip md-direction="left">Edit on codepen</md-tooltip>
|
||||
</button> -->
|
||||
</md-card>
|
||||
|
||||
<form action="http://codepen.io/pen/define" method="POST" target="_blank" v-if="codeBlocks.length" ref="form">
|
||||
<input type="hidden" name="data" :value="codeString">
|
||||
</form>
|
||||
|
||||
<pre ref="initialJs">
|
||||
Vue.use(VueMaterial)
|
||||
|
||||
Vue.material.theme.register('default', {
|
||||
primary: 'blue',
|
||||
accent: 'pink'
|
||||
})
|
||||
|
||||
var App = new Vue({
|
||||
el: '#app'
|
||||
})
|
||||
</pre>
|
||||
|
||||
<pre ref="initialHtml">
|
||||
<div id="app" v-md-theme="'default'">
|
||||
### TEMPLATE ###
|
||||
</div>
|
||||
</pre>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss">
|
||||
|
|
@ -26,6 +58,10 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
.md-tooltip.md-codepen-tooltip {
|
||||
margin-left: -4px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
|
@ -46,12 +82,92 @@
|
|||
background-color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
.example-box-card {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
|
||||
&:hover .md-codepen {
|
||||
opacity: .54;
|
||||
transform: translate3D(0, 0, 0);
|
||||
transition: .4s cubic-bezier(.25, .8, .25, 1);
|
||||
}
|
||||
}
|
||||
|
||||
.md-codepen {
|
||||
margin: 0;
|
||||
padding: 4px;
|
||||
cursor: pointer;
|
||||
position: absolute;
|
||||
right: 4px;
|
||||
bottom: 4px;
|
||||
border: none;
|
||||
background: none;
|
||||
opacity: .26;
|
||||
transform: translate3D(120%, 0, 0);
|
||||
transition: .3s cubic-bezier(.55, 0, .55, .2);
|
||||
|
||||
img {
|
||||
width: 32px;
|
||||
}
|
||||
}
|
||||
|
||||
pre {
|
||||
display: none;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
cardTitle: String
|
||||
},
|
||||
data: () => ({
|
||||
codeBlocks: [],
|
||||
codeString: ''
|
||||
}),
|
||||
methods: {
|
||||
editOnCodepen() {
|
||||
let data = {
|
||||
title: 'Vue Material - ' + this.cardTitle,
|
||||
private: false,
|
||||
head: '<meta name="viewport" content="width=device-width">',
|
||||
html_pre_processor: 'none',
|
||||
js_pre_processor: 'none',
|
||||
js: this.$refs.initialJs.innerHTML,
|
||||
css_pre_processor: 'scss',
|
||||
css_starter: 'neither',
|
||||
css_prefix_free: false,
|
||||
css_external: [
|
||||
'http://fonts.googleapis.com/css?family=Roboto:300,400,500,700,400italic',
|
||||
'http://fonts.googleapis.com/icon?family=Material+Icons',
|
||||
'https://cdn.rawgit.com/marcosmoura/vue-material/master/dist/vue-material.css'
|
||||
].join(';'),
|
||||
js_external: [
|
||||
'https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.3/vue.min.js',
|
||||
'https://cdn.rawgit.com/marcosmoura/vue-material/master/dist/vue-material.js'
|
||||
].join(';')
|
||||
};
|
||||
|
||||
this.codeBlocks.forEach((block) => {
|
||||
if (block.lang === 'xml') {
|
||||
let initialHtml = this.$refs.initialHtml.innerHTML;
|
||||
|
||||
data.html = initialHtml.replace('### TEMPLATE ###', block.code);
|
||||
} else if (block.lang === 'javascript') {
|
||||
data.js = data.js += block.code;
|
||||
} else {
|
||||
data.css = block.code;
|
||||
}
|
||||
});
|
||||
|
||||
this.codeString = JSON.stringify(data).replace(/"/g, '"').replace(/'/g, ''');
|
||||
|
||||
this.$nextTick(() => {
|
||||
console.log(this.$refs.initialJs);
|
||||
this.$refs.form.submit();
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -183,7 +183,68 @@
|
|||
|
||||
<div slot="code">
|
||||
<code-block lang="xml">
|
||||
<div class="field-group">
|
||||
<md-input-container>
|
||||
<label for="movie">Movie</label>
|
||||
<md-select name="movie" id="movie" v-model="movie">
|
||||
<md-option value="fight_club">Fight Club</md-option>
|
||||
<md-option value="godfather">Godfather</md-option>
|
||||
<md-option value="godfather_ii">Godfather II</md-option>
|
||||
<md-option value="godfather_iii">Godfather III</md-option>
|
||||
<md-option value="godfellas">Godfellas</md-option>
|
||||
<md-option value="pulp_fiction">Pulp Fiction</md-option>
|
||||
<md-option value="scarface">Scarface</md-option>
|
||||
</md-select>
|
||||
</md-input-container>
|
||||
|
||||
<md-input-container>
|
||||
<label for="country">Country</label>
|
||||
<md-select name="country" id="country" v-model="country">
|
||||
<md-option value="australia">Australia</md-option>
|
||||
<md-option value="brazil">Brazil</md-option>
|
||||
<md-option value="japan">Japan</md-option>
|
||||
<md-option value="united_states">United States</md-option>
|
||||
</md-select>
|
||||
</md-input-container>
|
||||
|
||||
<md-input-container>
|
||||
<label for="font">Font</label>
|
||||
<md-select name="font" id="font" v-model="font">
|
||||
<md-option value="arial">Arial</md-option>
|
||||
<md-option value="calibri">Calibri</md-option>
|
||||
<md-option value="cambria">Cambria</md-option>
|
||||
<md-option value="comic_sans">Comic Sans</md-option>
|
||||
<md-option value="consolas">Consolas</md-option>
|
||||
<md-option value="courier">Courier</md-option>
|
||||
<md-option value="droid_sans">Droid Sans</md-option>
|
||||
<md-option value="georgia">Georgia</md-option>
|
||||
<md-option value="helvetica">Helvetica</md-option>
|
||||
<md-option value="impact">Impact</md-option>
|
||||
<md-option value="roboto">Roboto</md-option>
|
||||
<md-option value="segoe_ui">Segoe UI</md-option>
|
||||
<md-option value="times_new_roman">Times New Roman</md-option>
|
||||
<md-option value="ubuntu">Ubuntu</md-option>
|
||||
<md-option value="verdana">Verdana</md-option>
|
||||
</md-select>
|
||||
</md-input-container>
|
||||
</div>
|
||||
|
||||
<md-button class="md-raised md-primary" @click="setPulpFiction">Set Pulp Fiction</md-button>
|
||||
</code-block>
|
||||
|
||||
<code-block lang="javascript">
|
||||
export default {
|
||||
data: () => ({
|
||||
movie: 'godfather',
|
||||
country: '',
|
||||
font: ''
|
||||
}),
|
||||
methods: {
|
||||
setPulpFiction() {
|
||||
this.movie = 'pulp_fiction';
|
||||
}
|
||||
}
|
||||
};
|
||||
</code-block>
|
||||
</div>
|
||||
</example-box>
|
||||
|
|
@ -237,7 +298,61 @@
|
|||
|
||||
<div slot="code">
|
||||
<code-block lang="xml">
|
||||
<md-input-container>
|
||||
<label for="food">Food</label>
|
||||
<md-select name="food" id="food" v-model="food">
|
||||
<md-subheader>Fruits</md-subheader>
|
||||
<md-option value="apples">Apples</md-option>
|
||||
<md-option value="bananas">Bananas</md-option>
|
||||
<md-option value="peaches">Peaches</md-option>
|
||||
<md-option value="oranges">Oranges</md-option>
|
||||
|
||||
<md-subheader>Vegetables</md-subheader>
|
||||
<md-option value="carrots">Carrots</md-option>
|
||||
<md-option value="cucumbers">Cucumbers</md-option>
|
||||
|
||||
<md-subheader>Baked Goods</md-subheader>
|
||||
<md-option value="apple_pie">Apple Pie</md-option>
|
||||
<md-option value="chocolate_cake">Chocolate Cake</md-option>
|
||||
</md-select>
|
||||
</md-input-container>
|
||||
|
||||
<md-input-container>
|
||||
<label for="users">Users</label>
|
||||
<md-select name="users" id="users" multiple v-model="users">
|
||||
<md-subheader>Managers</md-subheader>
|
||||
<md-option value="jim_halpert">Jim Halpert</md-option>
|
||||
<md-option value="dwight_schrute">Dwight Schrute</md-option>
|
||||
<md-option value="michael_scott">Michael Scott</md-option>
|
||||
|
||||
<md-subheader>Employees</md-subheader>
|
||||
<md-option value="pam_beesly">Pam Beesly</md-option>
|
||||
<md-option value="angela_martin">Angela Martin</md-option>
|
||||
<md-option value="kelly_kapoor">Kelly Kapoor</md-option>
|
||||
<md-option value="ryan_howard">Ryan Howard</md-option>
|
||||
<md-option value="kevin_malone">Kevin Malone</md-option>
|
||||
<md-option value="creed_bratton">Creed Bratton</md-option>
|
||||
<md-option value="oscar_nunez">Oscar Nunez</md-option>
|
||||
<md-option value="toby_flenderson">Toby Flenderson</md-option>
|
||||
<md-option value="stanley_hudson">Stanley Hudson</md-option>
|
||||
<md-option value="meredith_palmer">Meredith Palmer</md-option>
|
||||
<md-option value="phyllis_lapin_vance">Phyllis Lapin-Vance</md-option>
|
||||
</md-select>
|
||||
</md-input-container>
|
||||
|
||||
<div>Selected users: {{ users }}</div>
|
||||
</code-block>
|
||||
|
||||
<code-block lang="javascript">
|
||||
export default {
|
||||
data: () => ({
|
||||
food: '',
|
||||
users: [
|
||||
'jim_halpert',
|
||||
'michael_scott'
|
||||
]
|
||||
})
|
||||
};
|
||||
</code-block>
|
||||
</div>
|
||||
</example-box>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
let getClosestVueParent = ($parent, cssClass) => {
|
||||
if (!$parent.$el) {
|
||||
if (!$parent || !$parent.$el) {
|
||||
return false;
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Reference in a new issue