Vue.js 2 template

by simonepozzobon

HTML

<script src="https://unpkg.com/vue@2.5.13/dist/vue.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.2.228/pdf.js"></script>
<script type="x-template" id="main">
  <div>
		<input type="number" v-model.number="page"> /{{numPages}}
    <pdf...

CSS

<style>

/* resize-sensor.vue */
@keyframes resizeSensorVisibility {
  from {
    top: 0;
  }
}

/* pdf.vue */
.annotationLayer {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
}

.annotationLayer section {
  position: absolute;
}

.annotationLayer .linkAnnotation>a {
  position: absolute;
  font-size: 1em;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.annotationLayer .linkAnnotation>a

/* -ms-a */
  {
  background: url("data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7") 0 0 repeat;
}

.annotationLayer .linkAnnotation>a:hover {
  opacity: 0.2;
  background: #ff0;
  box-shadow: 0px 2px 10px #ff0;
}

.annotationLayer .textAnnotation img {
  position: absolute;
  cursor: pointer;
}

.annotationLayer .textWidgetAnnotation input,
.annotationLayer .textWidgetAnnotation textarea,
.annotationLayer .choiceWidgetAnnotation select,
.annotationLayer .buttonWidgetAnnotation.checkBox input,
.annotationLayer .buttonWidgetAnnotation.radioButton input {
  background-color: rgba(0, 54, 255, 0.13);
  border: 1px solid transparent;
  box-sizing: border-box;
  font-size: 9px;
  height: 100%;
  padding: 0 3px;
  vertical-align: top;
  width: 100%;
}

.annotationLayer .textWidgetAnnotation textarea {
  font: message-box;
  font-size: 9px;
  resize: none;
}

.annotationLayer .textWidgetAnnotation input[disabled],
.annotationLayer .textWidgetAnnotation textarea[disabled],
.annotationLayer .choiceWidgetAnnotation select[disabled],
.annotationLayer .buttonWidgetAnnotation.checkBox input[disabled],
.annotationLayer .buttonWidgetAnnotation.radioButton input[disabled] {
  background: none;
  border: 1px solid transparent;
  cursor: not-allowed;
}

.annotationLayer .textWidgetAnnotation input:hover,
.annotationLayer .textWidgetAnnotation textarea:hover,
.annotationLayer .choiceWidgetAnnotation select:hover,
.annotationLayer .buttonWidgetAnnotation.checkBox input:hover,
.annotationLayer .buttonWidgetAnnotation.radioButton input:hover...

Babel + JSX

/*
######################################
Most of this code is just inline imports due to jsfiddle limitations, the code 
you would actually use is in the HTML and in the new Vue block all the way at 
the bottom. No custom CSS is used for this demo, all the css used here are just 
imports that would be included automatically by vue. For more information 
please see https://github.com/FranckFreiburger/vue-pdf/blob/master/README.md

HOW TO UPDATE THIS DEMO:

  1. inline the resizeSensor script 
  2. change export default to `const resizeSensor = {`
  3. inline the pdf.vue script
  4. remove import and PDFJS lines form the pdf.js headers
  5. Find the export default line and change it to `const pdf =`
  6. inline the syles for resize-sensor.vue and pdf.vue
  
######################################
*/

// ############################# resizesensor.js #############################
const resizeSensor = {

    // thanks to https://github.com/marcj/css-element-queries
    props: {
        initial: {
            type: Boolean,
            default: false,
        }
    },
    data: function () {
        return {
            size: {
                width: -1,
                height: -1
            }
        }
    },
    methods: {
        reset: function () {

            var expand = this.$el.firstChild;
            var shrink = this.$el.lastChild;
            expand.scrollLeft = 100000;
            expand.scrollTop = 100000;
            shrink.scrollLeft = 100000;
            shrink.scrollTop = 100000;
        },
        update: function () {

            this.size.width = this.$el.offsetWidth;
            this.size.height = this.$el.offsetHeight;
        }
    },
    watch: {
        size: {
            deep: true,
            handler: function (size) {

                this.reset();
                this.$emit('resize', {
                    width: this.size.width,
                    height: this.size.height
                });
            }
        }
    },
    render:...