SHARE
TWEET

Untitled

a guest Jun 26th, 2019 75 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. <template>
  2.     <transition name="about-modal">
  3.         <div class="about-modal-mask" :style="maskBackgroud">
  4.             <div class="about-modal-wrapper">
  5.                 <div
  6.                     class="about-modal-container"
  7.                     :style="modalStyles"
  8.                     :class="`modal__${position}`"
  9.                 >
  10.                     <div class="about-modal-header" v-if="header">
  11.                         <slot name="header">
  12.                             <div
  13.                                 v-html="infoHeaderContent"
  14.                                 :style="headerStyles"
  15.                             ></div>
  16.                         </slot>
  17.                     </div>
  18.                     <div class="about-modal-body" v-if="body">
  19.                         <slot name="body">
  20.                             <div
  21.                                 v-html="infoBodyContent"
  22.                                 :style="bodyStyles"
  23.                             ></div>
  24.                         </slot>
  25.                     </div>
  26.                     <div class="about-modal-footer" v-if="footer">
  27.                         <slot name="footer">
  28.                             <div
  29.                                 v-html="infoFooterContent"
  30.                                 :style="footerStyles"
  31.                             ></div>
  32.                         </slot>
  33.                         <button
  34.                           class="warning about-modal-default-button"
  35.                           @click="$emit('close')"
  36.                         >
  37.                             {{ buttonText }}
  38.                         </button>
  39.                     </div>
  40.                 </div>
  41.             </div>
  42.         </div>
  43.     </transition>
  44. </template>
  45.  
  46. <script>
  47.  
  48. const defaultModalStyles = {
  49.     left: 0,
  50.     right: 0,
  51.     backgroundColor: '#333'
  52. }
  53. const defaultModalHeaderStyles = {
  54.     color: '#000'
  55. }
  56. const defaultModalBodyStyles = {
  57.     color: '#111'
  58. }
  59. const defaultModalFooterStyles = {
  60.     color: '#222'
  61. }
  62.  
  63. export default {
  64.     name: 'AboutModal',
  65.     props: {
  66.         header: {
  67.             type: Boolean,
  68.             default: true
  69.         },
  70.         body: {
  71.             type: Boolean,
  72.             default: true
  73.         },
  74.         footer: {
  75.             type: Boolean,
  76.             default: true
  77.         },
  78.         position: {
  79.             type: String,
  80.             default: 'center',
  81.             validator (position) {
  82.                 return ['top', 'bottom', 'center'].indexOf(position) > -1
  83.             }
  84.         },
  85.         modalStyle: {
  86.             type: Object,
  87.             default: () => ({})
  88.         },
  89.         headerStyle: {
  90.             type: Object,
  91.             default: () => ({})
  92.         },
  93.         bodyStyle: {
  94.             type: Object,
  95.             default: () => ({})
  96.         },
  97.         footerStyle: {
  98.             type: Object,
  99.             default: () => ({})
  100.         },
  101.         maskBackgroud: {
  102.             type: Object,
  103.             default: () => ({
  104.                 backgroundColor: 'rgba(51, 51, 51, 0.82)'
  105.             })
  106.         },
  107.         infoHeader: {
  108.             type: String,
  109.             default: '<div>No Header</div>'
  110.         },
  111.         infoBody: {
  112.             type: String,
  113.             default: '<div>No Body</div>'
  114.         },
  115.         infoFooter: {
  116.             type: String,
  117.             default: '<div>No Footer</div>'
  118.         },
  119.         buttonText: {
  120.             type: String,
  121.             default: 'Tamam'
  122.         }
  123.     },
  124.     data () {
  125.         return {
  126.             infoHeaderContent: this.infoHeader,
  127.             infoBodyContent: this.infoBody,
  128.             infoFooterContent: this.infoFooter,
  129.             modalStyles: {
  130.                 ...defaultModalStyles,
  131.                 ...this.styles
  132.             },
  133.             headerStyles: {
  134.                 ...defaultModalHeaderStyles,
  135.                 ...this.headerStyle
  136.             },
  137.             bodyStyles: {
  138.                 ...defaultModalBodyStyles,
  139.                 ...this.bodyStyle
  140.             },
  141.             footerStyles: {
  142.                 ...defaultModalFooterStyles,
  143.                 ...this.footerStyle
  144.             }
  145.         }
  146.     },
  147.     mounted () {
  148.         if (
  149.             Object.keys(this.$store.state.data).length !== 0 &&
  150.             Object.keys(this.$store.state.data.app).length !== 0 &&
  151.             Object.keys(this.$store.state.data.app.about).length !== 0
  152.         ) {
  153.             if (this.infoHeader === undefined || this.infoHeader === '') {
  154.                 this.infoHeaderContent = this.$store.state.data.app.about.header
  155.             } else {
  156.                 this.infoHeaderContent = this.infoHeader
  157.             }
  158.             if (this.infoBody === undefined || this.infoBody === '') {
  159.                 this.infoBodyContent = this.$store.state.data.app.about.body
  160.             } else {
  161.                 this.infoBodyContent = this.infoBody
  162.             }
  163.             if (this.infoFooter === undefined || this.infoFooter === undefined) {
  164.                 this.infoFooterContent = this.$store.state.data.app.about.footer
  165.             } else {
  166.                 this.infoFooterContent = this.infoFooter
  167.             }
  168.         }
  169.     }
  170. }
  171. </script>
  172.  
  173. <style lang="scss">
  174. $_overlay: #345;
  175. $primary: turquoise;
  176. $warning: yellow;
  177.  
  178. .modal__top {
  179.     top: 0;
  180. }
  181. .modal__bottom {
  182.     bottom: 0;
  183. }
  184. .modal__center {
  185.     margin: 0 auto;
  186. }
  187. .about-modal-mask {
  188.     position: fixed;
  189.     z-index: 9998;
  190.     top: 0;
  191.     left: 0;
  192.     width: 100%;
  193.     height: 100%;
  194.     background-color: $_overlay;
  195.     display: table;
  196.     transition: opacity .3s ease;
  197. }
  198. .about-modal-wrapper {
  199.     display: table-cell;
  200.     vertical-align: middle;
  201. }
  202. .about-modal-container {
  203.     width: 50%;
  204.     overflow: auto;
  205.     margin: 0px auto;
  206.     padding: 20px 30px;
  207.     border-radius: 2px;
  208.     background-color: $primary;
  209.     box-shadow: 0 2px 8px $_overlay;
  210.     transition: ease-in-out 1s all;
  211.     font-family: Helvetica, Arial, sans-serif;
  212. }
  213. .about-modal-header h3 {
  214.     color: $warning;
  215.     margin-top: 0;
  216. }
  217. .about-modal-body {
  218.     margin: 20px 0;
  219. }
  220. .about-modal-default-button {
  221.     float: right;
  222. }
  223. .about-modal-enter {
  224.     opacity: 0;
  225. }
  226. .about-modal-leave-active {
  227.     opacity: 0;
  228. }
  229. .about-modal-enter .about-modal-container,
  230. .about-modal-leave-active .about-modal-container {
  231.     transform: scale(1.1);
  232. }
  233. </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
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!
 
Top