feat: Further QEditor work

Author: rstoenescu

dev/components/form/editor.vue

@@ -6,6 +6,7 @@
       :toolbar="[
         ['bold', 'italic', 'strike', 'underline', 'subscript', 'superscript'],
         ['token', 'hr', 'link', 'custom_btn'],
+        ['print', 'fullscreen'],
         [
           {
             label: 'Formatting',
@@ -46,7 +47,6 @@
             options: ['left', 'center', 'right', 'justify']
           }
         ],
-        ['print'],
         ['undo', 'redo'],
         [{
           label: 'Dropdown Test',

src/components/carousel/QCarousel.vue

@@ -49,14 +49,14 @@
 </template>
 
 <script>
-import Platform from '../../features/platform'
 import TouchPan from '../../directives/touch-pan'
 import { cssTransform } from '../../utils/dom'
 import { between, normalizeToInterval } from '../../utils/format'
 import { start, stop } from '../../utils/animate'
 import { getEventKey } from '../../utils/event'
 import CarouselMixin from './carousel-mixin'
 import { QIcon } from '../icon'
+import FullscreenMixin from '../../utils/fullscreen-mixin'
 
 export default {
   name: 'q-carousel',
@@ -66,7 +66,7 @@ export default {
   directives: {
     TouchPan
   },
-  mixins: [CarouselMixin],
+  mixins: [CarouselMixin, FullscreenMixin],
   data () {
     return {
       position: 0,
@@ -217,44 +217,6 @@ export default {
         }
       })
     },
-    toggleFullscreen () {
-      if (this.inFullscreen) {
-        if (!Platform.has.popstate) {
-          this.__setFullscreen(false)
-        }
-        else {
-          window.history.go(-1)
-        }
-        return
-      }
-
-      this.__setFullscreen(true)
-      if (Platform.has.popstate) {
-        window.history.pushState({}, '')
-        window.addEventListener('popstate', this.__popState)
-      }
-    },
-    __setFullscreen (state) {
-      if (this.inFullscreen === state) {
-        return
-      }
-
-      if (state) {
-        this.container.replaceChild(this.fillerNode, this.$el)
-        document.body.appendChild(this.$el)
-        this.inFullscreen = true
-        return
-      }
-
-      this.inFullscreen = false
-      this.container.replaceChild(this.$el, this.fillerNode)
-    },
-    __popState () {
-      if (this.inFullscreen) {
-        this.__setFullscreen(false)
-      }
-      window.removeEventListener('popstate', this.__popState)
-    },
     stopAnimation () {
       stop(this.animUid)
       this.animationInProgress = false
@@ -298,8 +260,6 @@ export default {
   },
   mounted () {
     this.$nextTick(() => {
-      this.fillerNode = document.createElement('span')
-      this.container = this.$el.parentNode
       this.slidesNumber = this.__getSlidesNumber()
       this.__planAutoPlay()
       if (this.handleArrowKeys) {

src/components/editor/QEditor.js

@@ -3,9 +3,11 @@ import { getToolbar, getFonts } from './editor-utils'
 import { buttons } from './editor-definitions'
 import { Caret } from './editor-caret'
 import extend from '../../utils/extend'
+import FullscreenMixin from '../../utils/fullscreen-mixin'
 
 export default {
   name: 'q-editor',
+  mixins: [FullscreenMixin],
   props: {
     value: {
       type: String,
@@ -17,6 +19,8 @@ export default {
       type: String,
       default: '10rem'
     },
+    maxHeight: String,
+    height: String,
     color: String,
     toggleColor: {
       type: String,
@@ -26,6 +30,10 @@ export default {
       type: String,
       default: 'grey-4'
     },
+    contentColor: {
+      type: String,
+      default: 'white'
+    },
     flat: Boolean,
     outline: Boolean,
     push: Boolean,
@@ -179,7 +187,7 @@ export default {
   },
   mounted () {
     this.$nextTick(() => {
-      this.caret = new Caret(this.$refs.content)
+      this.caret = new Caret(this.$refs.content, this)
       this.$refs.content.innerHTML = this.value
       this.$nextTick(this.refreshToolbar)
     })
@@ -189,8 +197,13 @@ export default {
       'div',
       {
         staticClass: 'q-editor',
+        style: {
+          height: this.inFullscreen ? '100vh' : null
+        },
         'class': {
-          disabled: this.disable
+          disabled: this.disable,
+          fullscreen: this.inFullscreen,
+          column: this.inFullscreen
         }
       },
       [
@@ -208,8 +221,14 @@ export default {
           'div',
           {
             ref: 'content',
-            staticClass: 'q-editor-content',
-            style: { minHeight: this.minHeight },
+            staticClass: `q-editor-content bg-${this.contentColor}`,
+            style: this.inFullscreen
+              ? {}
+              : { minHeight: this.minHeight, height: this.height, maxHeight: this.maxHeight },
+            class: {
+              col: this.inFullscreen,
+              'overflow-auto': this.inFullscreen
+            },
             attrs: { contenteditable: this.editable },
             on: {
               input: this.onInput,

src/components/editor/editor-caret.js

@@ -34,8 +34,9 @@ function isChildOf (el, parent) {
 }
 
 export class Caret {
-  constructor (el) {
+  constructor (el, vm) {
     this.el = el
+    this.vm = vm
   }
 
   get selection () {
@@ -139,6 +140,8 @@ export class Caret {
       case 'fontName':
         const res = document.queryCommandValue(cmd)
         return res === `"${param}"` || res === param
+      case 'fullscreen':
+        return this.vm.inFullscreen
       default:
         const state = document.queryCommandState(cmd)
         return param ? state === param : state
@@ -232,6 +235,11 @@ export class Caret {
       })
       return
     }
+    else if (cmd === 'fullscreen') {
+      this.vm.toggleFullscreen()
+      done()
+      return
+    }
 
     document.execCommand(cmd, false, param)
     done()

src/components/editor/editor-definitions.js

@@ -9,14 +9,15 @@ export const buttons = {
   subscript: {cmd: 'subscript', icon: 'vertical_align_bottom', tip: 'Subscript', htmlTip: 'x<subscript>2</subscript>'},
   superscript: {cmd: 'superscript', icon: 'vertical_align_top', tip: 'Superscript', htmlTip: 'x<superscript>2</superscript>'},
   link: {cmd: 'link', icon: 'link', tip: 'Hyperlink', key: 76},
+  fullscreen: {cmd: 'fullscreen', icon: 'fullscreen', tip: 'Toggle Fullscreen', key: 70},
 
   quote: {cmd: 'formatBlock', param: 'BLOCKQUOTE', icon: 'format_quote', tip: 'Quote', key: 81},
   left: {cmd: 'justifyLeft', icon: 'format_align_left', tip: 'Left align'},
   center: {cmd: 'justifyCenter', icon: 'format_align_center', tip: 'Center align'},
   right: {cmd: 'justifyRight', icon: 'format_align_right', tip: 'Right align'},
   justify: {cmd: 'justifyFull', icon: 'format_align_justify', tip: 'Justify align'},
 
-  print: {type: 'no-state', cmd: 'print', icon: 'print', tip: 'Print'},
+  print: {type: 'no-state', cmd: 'print', icon: 'print', tip: 'Print', key: 80},
   outdent: {type: 'no-state', disable: vm => vm.caret && !vm.caret.can('outdent'), cmd: 'outdent', icon: 'format_indent_decrease', tip: 'Decrease indentation'},
   indent: {type: 'no-state', disable: vm => vm.caret && !vm.caret.can('indent'), cmd: 'indent', icon: 'format_indent_increase', tip: 'Increase indentation'},
   removeFormat: {type: 'no-state', cmd: 'removeFormat', icon: 'format_clear', tip: 'Remove formatting'},

src/components/editor/editor.ios.styl

@@ -6,6 +6,7 @@
 .q-editor-content
   outline 0
   padding $editor-content-padding
+  min-height $editor-content-min-height
 
   hr
     border 0

src/components/editor/editor.mat.styl

@@ -6,6 +6,7 @@
 .q-editor-content
   outline 0
   padding $editor-content-padding
+  min-height $editor-content-min-height
 
   hr
     border 0

src/css/variables.ios.styl

@@ -114,6 +114,7 @@ $dot-position-right    ?= 10px
 $editor-border-color            ?= #ccc
 $editor-border                  ?= 1px solid $editor-border-color
 $editor-content-padding         ?= 10px
+$editor-content-min-height      ?= 10em
 $editor-toolbar-padding         ?= 5px
 $editor-hr-color                ?= #ccc
 $editor-button-gutter           ?= 5px

src/css/variables.mat.styl

@@ -111,6 +111,7 @@ $dot-position-right    ?= 10px
 $editor-border-color            ?= #ccc
 $editor-border                  ?= 1px solid $editor-border-color
 $editor-content-padding         ?= 10px
+$editor-content-min-height      ?= 10em
 $editor-toolbar-padding         ?= 5px
 $editor-hr-color                ?= #ccc
 $editor-button-gutter           ?= 5px

src/utils/fullscreen-mixin.js

@@ -0,0 +1,53 @@
+import Platform from '../features/platform'
+
+export default {
+  data () {
+    return {
+      inFullscreen: false
+    }
+  },
+  created () {
+    this.fillerNode = document.createElement('span')
+  },
+  methods: {
+    toggleFullscreen () {
+      if (this.inFullscreen) {
+        if (!Platform.has.popstate) {
+          this.__setFullscreen(false)
+        }
+        else {
+          window.history.go(-1)
+        }
+        return
+      }
+
+      this.__setFullscreen(true)
+      if (Platform.has.popstate) {
+        window.history.pushState({}, '')
+        window.addEventListener('popstate', this.__popState)
+      }
+    },
+    __setFullscreen (state) {
+      if (this.inFullscreen === state) {
+        return
+      }
+
+      if (state) {
+        this.container = this.$el.parentNode
+        this.container.replaceChild(this.fillerNode, this.$el)
+        document.body.appendChild(this.$el)
+        this.inFullscreen = true
+        return
+      }
+
+      this.inFullscreen = false
+      this.container.replaceChild(this.$el, this.fillerNode)
+    },
+    __popState () {
+      if (this.inFullscreen) {
+        this.__setFullscreen(false)
+      }
+      window.removeEventListener('popstate', this.__popState)
+    }
+  }
+}