daily pastebin goal
69%
SHARE
TWEET

Untitled

a guest Mar 23rd, 2019 209 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. <template>
  2.   <section>
  3.     <a @click="mainMenu" class="back">
  4.       <i class="fa fa-arrow-circle-left"/>Go back
  5.     </a>
  6.     <div class="field">
  7.       <h1 class="subtitle">Social</h1>
  8.       <h6>Connecting to social services enables you to push or pull data, and allow visitors to connect with you via those services.</h6>
  9.       <h6>Add social sites URL</h6>
  10.       <div class="control" v-for="(option, index) in social" :key="index">
  11.         <div class="social-link-list">
  12.           <!-- <div class="social-icon"> -->
  13.           <i :class="option.icon"/>
  14.           <!-- </div> -->
  15.           <!-- <div class="social-link"> -->
  16.           <input
  17.             class="input fontawesome"
  18.             type="text"
  19.             v-model="option.name"
  20.             :placeholder="option.placeholder"
  21.           >
  22.           <!-- </div> -->
  23.         </div>
  24.       </div>
  25.       <button class="button is-info" @click="updateSetting">Save</button>
  26.     </div>
  27.   </section>
  28. </template>
  29.  
  30. <script>
  31. import EditorServices from "../../services/index.js";
  32. export default {
  33.   props: ["fb_page_id", "template"],
  34.   data() {
  35.     return {
  36.       social: [
  37.         {
  38.           name: "",
  39.           placeholder: "&#xf0e0;Facebook URL",
  40.           icon: "fa fa-facebook"
  41.         },
  42.         { name: "", placeholder: "Instagram URL", icon: "fa fa-instagram" },
  43.         { name: "", placeholder: "Youtube URL", icon: "fa fa-youtube" },
  44.         { name: "", placeholder: "Twitter URL", icon: "fa fa-twitter" },
  45.         { name: "", placeholder: "LinkedIn URL", icon: "fa fa-linkedin" },
  46.         { name: "", placeholder: "Pinterest URL", icon: "fa fa-pinterest" },
  47.         { name: "", placeholder: "Yelp URL", icon: "fa fa-yelp" }
  48.       ]
  49.     };
  50.   },
  51.   methods: {
  52.     mainMenu() {
  53.       this.$emit("clicked-main-menu", "");
  54.     },
  55.     updateSetting() {
  56.       this.social.forEach((item, index) => {
  57.         delete item.placeholder;
  58.         delete item.icon;
  59.       });
  60.       EditorServices.updateSetting(this.fb_page_id, {
  61.         socail_media: { social: this.social },
  62.         fb_page_template_id: this.template.id
  63.       }).then(resp => {
  64.         document.getElementById("frame").contentWindow.location.reload();
  65.         this.addPlaceholder(resp.data);
  66.         this.addSocialIcon(resp.data);
  67.       });
  68.     },
  69.     addPlaceholder(settingData) {
  70.       if (!_.isNil(settingData)) {
  71.         this.social = settingData.socail_media.social;
  72.         this.social[0].placeholder = "Facebook URL";
  73.         this.social[1].placeholder = "Instagram URL";
  74.         this.social[2].placeholder = "Youtube URL";
  75.         this.social[3].placeholder = "Twitter URL";
  76.         this.social[4].placeholder = "Linkedin URL";
  77.         this.social[5].placeholder = "Pinterest URL";
  78.         this.social[6].placeholder = "Yelp URL";
  79.       }
  80.     },
  81.     addSocialIcon(settingData) {
  82.       if (!_.isNil(settingData)) {
  83.         this.social = settingData.socail_media.social;
  84.         this.social[0].icon = "fa fa-facebook";
  85.         this.social[1].icon = "fa fa-instagram";
  86.         this.social[2].icon = "fa fa-youtube";
  87.         this.social[3].icon = "fa fa-twitter";
  88.         this.social[4].icon = "fa fa-linkedin";
  89.         this.social[5].icon = "fa fa-pinterest";
  90.         this.social[6].icon = "fa fa-yelp";
  91.       }
  92.     }
  93.   },
  94.   created() {
  95.     EditorServices.showSetting(this.template.id).then(res => {
  96.       this.addPlaceholder(res.data);
  97.       this.addSocialIcon(res.data);
  98.     });
  99.   }
  100. };
  101. </script>
  102.  
  103. <style scoped>
  104. .field {
  105.   color: #fff;
  106.   margin: 20px 0;
  107.   width: 240px;
  108.   display: flex;
  109.   flex-direction: column;
  110.   align-items: flex-start;
  111.   padding: 0 5px;
  112. }
  113.  
  114. h6 {
  115.   text-align: justify;
  116. }
  117. .social-link-list {
  118.   display: flex;
  119.   flex-flow: row;
  120. }
  121. .field {
  122.   color: #fff;
  123.   margin: 20px 15px;
  124. }
  125. .subtitle {
  126.   color: #fff;
  127.   margin-bottom: 20px;
  128. }
  129. h6 {
  130.   font-size: 13px;
  131.   margin: 14px 0;
  132. }
  133. input {
  134.   margin-bottom: 10px;
  135.   margin-left: 20px;
  136. }
  137. .column.is-1 {
  138.   width: 2%;
  139. }
  140. .fontawesome {
  141.   font: normal normal normal 14px "FontAwesome";
  142.   /* content: "\f09a"; */
  143. }
  144. </style>
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