tmdinosaurcenter
/
tainacan
mirror of https://github.com/tainacan/tainacan
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

create initial components for metadata types

This commit is contained in:
Eduardo humberto 2017-12-08 13:15:04 -02:00
parent 3b3cfda7fb
commit 9e2819f44b
7 changed files with 166 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

44
src/classes/field-types/checkbox/Checkbox.vue Normal file
View File

@ -0,0 +1,44 @@
<template>
<div class="component">
<label
v-for="option in getOptions"
:for="option.replace(' ','-') + '-checkbox'">
<input
type="checkbox"
:id="option.replace(' ','-') + '-checkbox'"
:value="option"
v-model="checked"> {{ option }}</br></label>
</label>
</div>
</template>
<script>
export default {
data(){
return {
checked:[]
}
},
props: {
name: {
type: String
},
options: {
type: String
}
},
computed: {
getOptions(){
const values = ( this.options ) ? this.options.split("\n") : '';
return values;
}
}
}
</script>
<style scoped="">
#postcustomstuff table input, #postcustomstuff table select, #postcustomstuff table textarea {
width: auto;
margin: 8px;
}
</style>

5
src/classes/field-types/checkbox/class-tainacan-checkbox.php
View File

@ -21,7 +21,8 @@ class Checkbox extends Field_Type {
*/
public function render( $metadata ){
return '<tainacan-checkbox name="'.$metadata->get_name().'"></tainacan-checkbox>';
$options = ( isset( $this->options['options'] ) ) ? $this->options['options'] : '';
return '<tainacan-checkbox options="'.$options.'" name="'.$metadata->get_name().'"></tainacan-checkbox>';
}
/**
@ -35,7 +36,7 @@ class Checkbox extends Field_Type {
<small><?php echo __('Insert the options, separate by lines for the metadata value','tainacan'); ?></small>
</td>
<td>
<textarea name="tnc_metadata_options"><?php echo ( $this->options ) ? $this->options : ''; ?></textarea>
<textarea name="field_type_checkbox[options]"><?php echo ( isset( $this->options['options'] ) ) ? $this->options['options'] : ''; ?></textarea>
</td>
</tr>
<?php

31
src/classes/field-types/date/Date.vue Normal file
View File

@ -0,0 +1,31 @@
<template>
<div class="component">
<p>{{ name }}</p>
<input type="date">
</div>
</template>
<script>
export default {
props: {
name: { type: String }
}
}
</script>
<style scoped>
input[type="text"] {
display: block;
margin: 0;
width: 100%;
border-radius: 6px;
font-family: sans-serif;
font-size: 18px;
appearance: none;
box-shadow: none;
color:green;
}
input[type="text"]:focus {
outline: none;
}
</style>

31
src/classes/field-types/numeric/Numeric.vue Normal file
View File

@ -0,0 +1,31 @@
<template>
<div class="component">
<p>{{ name }}</p>
<input type="number">
</div>
</template>
<script>
export default {
props: {
name: { type: String }
}
}
</script>
<style scoped>
input[type="text"] {
display: block;
margin: 0;
width: 100%;
border-radius: 6px;
font-family: sans-serif;
font-size: 18px;
appearance: none;
box-shadow: none;
color:green;
}
input[type="text"]:focus {
outline: none;
}
</style>

44
src/classes/field-types/radio/Radio.vue Normal file
View File

@ -0,0 +1,44 @@
<template>
<div class="component">
<label
v-for="option in getOptions"
:for="option.replace(' ','-') + '-checkbox'">
<input
type="radio"
:id="option.replace(' ','-') + '-checkbox'"
:value="option"
v-model="checked"> {{ option }}<br>
</label>
</div>
</template>
<script>
export default {
data(){
return {
checked:''
}
},
props: {
name: {
type: String
},
options: {
type: String
}
},
computed: {
getOptions(){
const values = ( this.options ) ? this.options.split("\n") : '';
return values;
}
}
}
</script>
<style scoped="">
#postcustomstuff table input, #postcustomstuff table select, #postcustomstuff table textarea {
width: auto;
margin: 8px;
}
</style>

7
src/classes/field-types/radio/class-tainacan-radio.php
View File

@ -21,7 +21,8 @@ class Radio extends Field_Type {
*/
public function render( $metadata ){
return '<tainacan-radio name="'.$metadata->get_name().'"></tainacan-radio>';
$options = ( isset( $this->options['options'] ) ) ? $this->options['options'] : '';
return '<tainacan-radio options="'.$options.'" name="'.$metadata->get_name().'"></tainacan-radio>';
}
/**
@ -32,10 +33,10 @@ class Radio extends Field_Type {
<tr>
<td>
<label><?php echo __('Options','tainacan'); ?></label><br/>
<small><?php echo __('Insert the options, separate by ";" for the metadata value','tainacan'); ?></small>
<small><?php echo __('Insert the options, separate by lines for the metadata value','tainacan'); ?></small>
</td>
<td>
<textarea name="tnc_metadata_options"><?php echo ( $this->options ) ? $this->options : ''; ?></textarea>
<textarea name="field_type_radio[options]"><?php echo ( isset( $this->options['options'] ) ) ? $this->options['options'] : ''; ?></textarea>
</td>
</tr>
<?php

10
src/js/main.js
View File

@ -7,7 +7,15 @@ Vue.use(VueCustomElement);
import Text from '../classes/field-types/text/Text.vue';
import Textarea from '../classes/field-types/textarea/Textarea.vue';
import Selectbox from '../classes/field-types/selectbox/Selectbox.vue';
import Checkbox from '../classes/field-types/checkbox/Checkbox.vue';
import Radio from '../classes/field-types/radio/Radio.vue';
import Numeric from '../classes/field-types/numeric/Numeric.vue';
import Date from '../classes/field-types/date/Date.vue';
Vue.customElement('tainacan-text', Text);
Vue.customElement('tainacan-textarea', Textarea);
Vue.customElement('tainacan-selectbox', Selectbox);
Vue.customElement('tainacan-selectbox', Selectbox);
Vue.customElement('tainacan-checkbox', Checkbox);
Vue.customElement('tainacan-radio', Radio);
Vue.customElement('tainacan-numeric', Numeric);
Vue.customElement('tainacan-date', Date);