daily pastebin goal
33%
SHARE
TWEET

Untitled

a guest Apr 16th, 2018 53 Never
Upgrade to PRO!
ENDING IN00days00hours00mins00secs
 
  1. <input-tag :input_class="'form-control'" @update:tags="tags" :placeholder="'e.g. post, black'"></input-tag>
  2.    
  3. require('./bootstrap-admin');
  4.  
  5. var dt = require('datatables.net');
  6.  
  7. window.Vue = require('vue');
  8.  
  9. /**
  10.  * Next, we will create a fresh Vue application instance and attach it to
  11.  * the page. Then, you may begin adding components to this application
  12.  * or customize the JavaScript scaffolding to fit your unique needs.
  13.  */
  14.  
  15. Vue.component('droppable', require('./components/Droppable.vue'));
  16. Vue.component('administrators', require('./components/Administrators.vue'));
  17. Vue.component('medialibrary', require('./components/MediaLibrary.vue'))
  18. Vue.component('repeatable', require('./components/Repeatable.vue'))
  19. Vue.component("searchlister", require("./components/SearchLister.vue"));
  20. Vue.component("input-tag", require("./components/InputTag.vue"));
  21.  
  22. const app = new Vue({
  23.     el: '#app'
  24. });
  25.  
  26. import tinymce from 'tinymce/tinymce'
  27. import 'tinymce/themes/modern/theme'
  28.  
  29. // Plugins
  30. import 'tinymce/plugins/paste/plugin'
  31. import 'tinymce/plugins/link/plugin'
  32. import 'tinymce/plugins/autoresize/plugin'
  33.  
  34. tinymce.init({
  35.     selector: '#content',
  36.     plugins: ['paste', 'link', 'autoresize']
  37. });
  38.  
  39. import './components/blog/blog'
  40.    
  41. <script>
  42. /* eslint-disable */
  43.  const validators = {
  44.   email: new RegExp(/^(([^<>()[]\.,;:s@"]+(.[^<>()[]\.,;:s@"]+)*)|(".+"))@(([[0-9]{1,3}.[0-9]{1,3}.[0-9]{1,3}.[0-9]{1,3}])|(([a-zA-Z-0-9]+.)+[a-zA-Z]{2,}))$/),
  45.   url: new RegExp(/^(https?|ftp|rmtp|mms)://(([A-Z0-9][A-Z0-9_-]*)(.[A-Z0-9][A-Z0-9_-]*)+)(:(d+))?/?/i),
  46.   text: new RegExp(/^[a-zA-Z]+$/),
  47.   digits: new RegExp(/^[d() .:-+#]+$/),
  48.   isodate: new RegExp(/^d{4}[/-](0?[1-9]|1[012])[/-](0?[1-9]|[12][0-9]|3[01])$/)
  49. }
  50. /* eslint-enable */
  51.  
  52. export default {
  53.   name: 'InputTag',
  54.  
  55.   props: {
  56.     tags: {
  57.       type: Array,
  58.       default: () => []
  59.     },
  60.     placeholder: {
  61.       type: String,
  62.       default: ''
  63.     },
  64.     input_class: {
  65.       type: String,
  66.       default: ''
  67.     },
  68.     readOnly: {
  69.       type: Boolean,
  70.       default: false
  71.     },
  72.     validate: {
  73.       type: String,
  74.       default: ''
  75.     },
  76.     addTagOnKeys: {
  77.       type: Array,
  78.       default: function () {
  79.         return [
  80.           13, // Return
  81.           188, // Comma ','
  82.           9 // Tab
  83.         ]
  84.       }
  85.     },
  86.     limit: {
  87.       default: -1
  88.     }
  89.   },
  90.  
  91.   data () {
  92.     return {
  93.       newTag: '',
  94.       innerTags: [...this.tags]
  95.     }
  96.   },
  97.  
  98.   watch: {
  99.     tags () {
  100.       this.innerTags = [...this.tags]
  101.     }
  102.   },
  103.  
  104.   computed: {
  105.     isLimit: function () {
  106.       return this.limit > 0 && Number(this.limit) === this.innerTags.length
  107.     }
  108.   },
  109.  
  110.   methods: {
  111.     focusNewTag () {
  112.       if (this.readOnly || !this.$el.querySelector('.new-tag')) { return }
  113.       this.$el.querySelector('.new-tag').focus()
  114.     },
  115.  
  116.     addNew (e) {
  117.       // Do nothing if the current key code is
  118.       // not within those defined within the addTagOnKeys prop array.
  119.       if ((e && this.addTagOnKeys.indexOf(e.keyCode) === -1) || this.isLimit) {
  120.         return
  121.       }
  122.  
  123.       // We prevent default & stop propagation for all
  124.       // keys except tabs (used to move between controls)
  125.       if (e && e.keyCode !== 9) {
  126.         e.stopPropagation()
  127.         e.preventDefault()
  128.       }
  129.  
  130.       if (
  131.         this.newTag &&
  132.         this.innerTags.indexOf(this.newTag) === -1 &&
  133.         this.validateIfNeeded(this.newTag)
  134.       ) {
  135.         this.innerTags.push(this.newTag)
  136.         this.newTag = ''
  137.         this.tagChange()
  138.       }
  139.     },
  140.  
  141.     validateIfNeeded (tagValue) {
  142.       if (this.validate === '' || this.validate === undefined) {
  143.         return true
  144.       } else if (Object.keys(validators).indexOf(this.validate) > -1) {
  145.         return validators[this.validate].test(tagValue)
  146.       }
  147.       return true
  148.     },
  149.  
  150.     remove (index) {
  151.       this.innerTags.splice(index, 1)
  152.       this.tagChange()
  153.     },
  154.  
  155.     removeLastTag () {
  156.       if (this.newTag) { return }
  157.       this.innerTags.pop()
  158.       this.tagChange()
  159.     },
  160.  
  161.     tagChange () {
  162.       this.$emit('update:tags', this.innerTags)
  163.     }
  164.   }
  165. }
  166. </script>
  167.  
  168. <template>
  169.   <div @click="focusNewTag()" :class="{'read-only': readOnly}" class="vue-input-tag-wrapper">
  170.     <span v-for="(tag, index) in innerTags" :key="index" class="input-tag">
  171.       <span>{{ tag }}</span>
  172.       <a v-if="!readOnly" @click.prevent.stop="remove(index)" class="remove"></a>
  173.     </span>
  174.     <input
  175.       v-if                     = "!readOnly && !isLimit"
  176.       ref                      = "inputtag"
  177.       :placeholder             = "placeholder"
  178.       type                     = "text"
  179.       v-model                  = "newTag"
  180.       v-on:keydown.delete.stop = "removeLastTag"
  181.       v-on:keydown             = "addNew"
  182.       :class                    = "input_class"
  183.       class                    = "new-tag"
  184.     />
  185.   </div>
  186. </template>
  187.  
  188. <style>
  189.   .vue-input-tag-wrapper {
  190.     background-color: #fff;
  191.     border: 1px solid #ccc;
  192.     overflow: hidden;
  193.     padding-left: 4px;
  194.     padding-top: 4px;
  195.     cursor: text;
  196.     text-align: left;
  197.     -webkit-appearance: textfield;
  198.   }
  199.  
  200.   .vue-input-tag-wrapper .input-tag {
  201.     background-color: #cde69c;
  202.     border-radius: 2px;
  203.     border: 1px solid #a5d24a;
  204.     color: #638421;
  205.     display: inline-block;
  206.     font-size: 13px;
  207.     font-weight: 400;
  208.     margin-bottom: 4px;
  209.     margin-right: 4px;
  210.     padding: 3px;
  211.   }
  212.  
  213.   .vue-input-tag-wrapper .input-tag .remove {
  214.     cursor: pointer;
  215.     font-weight: bold;
  216.     color: #638421;
  217.   }
  218.  
  219.   .vue-input-tag-wrapper .input-tag .remove:hover {
  220.     text-decoration: none;
  221.   }
  222.  
  223.   .vue-input-tag-wrapper .input-tag .remove::before {
  224.     content: " x";
  225.   }
  226.  
  227.   .vue-input-tag-wrapper .new-tag {
  228.     background: transparent;
  229.     border: 0;
  230.     color: #777;
  231.     font-size: 13px;
  232.     font-weight: 400;
  233.     margin-bottom: 6px;
  234.     margin-top: 1px;
  235.     outline: none;
  236.     padding: 4px;
  237.     padding-left: 0;
  238.   }
  239.  
  240.   .vue-input-tag-wrapper.read-only {
  241.     cursor: default;
  242.   }
  243. </style>
  244.    
  245. $(function() {
  246.   /**
  247.    * Preview the blog article
  248.    * @var
  249.    */
  250.   $(document).on('click', '#blog-preview', function() {
  251.     $('#draft').html('');
  252.     $('#preview').html('<input type="hidden" name="preview" value="true">');
  253.     $('#blog-form').submit();
  254.   });
  255.  
  256.   /**
  257.    * Publish the blog article
  258.    * @var
  259.    */
  260.   $(document).on('click', '#blog-publish', function() {
  261.     $('#draft').html('');
  262.     $('#publish').html('<input type="hidden" name="status" value="publish">');
  263.     $('#blog-form').submit();
  264.   });
  265.  
  266.   /**
  267.    * submit edited article
  268.    * @return void
  269.    */
  270.   $(document).on('click', '#blog-publish-edit', function() {
  271.     $('#draft').html('');
  272.     $('#publish').html('<input type="hidden" name="status" value="publish">');
  273.     $('#blog-form').submit();
  274.   });
  275.  
  276.   /**
  277.    * publish draft
  278.    * @return void
  279.    */
  280.   $(document).on('click', '#blog-publish-draft', function() {
  281.     $('#draft').html('');
  282.     $('#publish').html('<input type="hidden" name="status" value="publish">');
  283.     $('#blog-form').submit();
  284.   });
  285.  
  286.   /**
  287.    * Decided to preview the composed blog
  288.    * @var
  289.    */
  290.   $(document).on('click', '#btn-preview', function() {
  291.     $('#preview').html();
  292.     $('#blog-form').submit();
  293.   });
  294.  
  295.   /**
  296.    * submit draft
  297.    * @return void
  298.    */
  299.   $(document).on('click', '#btn-draft', function() {
  300.     $('#draft').html('<input type="hidden" name="status" value="draft">');
  301.     $('#blog-form').submit();
  302.   });
  303.  
  304.   /**
  305.    * Generate slug
  306.    * @return {[type]} [description]
  307.    */
  308.   $(document).on('change', '#title', function() {
  309.     let str = $(this).val();
  310.     str = str.replace(/s+/g, '-').toLowerCase();
  311.     $('#slug').val(str);
  312.   })
  313. });
  314.  
  315. $("input").val();
RAW Paste Data
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy. OK, I Understand
 
Top