CODEWITHSUNDEEP
javascriptangular
Igor.R
Igor.R

Reputation: 185

Importing plain JS code inside angular - 7

I trying to import for the first time this plain JS code inside my angular app.
I created a js file inside the App folder and I passed there all the code that located here . I added the script inside my scripts Array in the angular.json file and set allowJs to true.
Inside my component JS file I importing the methods like that: 

import { Component, OnInit, Input, SimpleChanges } from '@angular/core';
import { Util, HocrProofreader} from '../hocr';

const Utils = Util;
const Hocr = HocrProofreader;

@Component({
  selector: 'app-ocr-compiler',
  templateUrl: './ocr-compiler.component.html',
  styleUrls: ['./ocr-compiler.component.css']
})
export class OcrCompilerComponent implements OnInit {

  constructor() { }

  ngOnInit() {
      Utils.onReady(() => {
        var hocrProofreader = new HocrProofreader({
            layoutContainer: 'layout-container',
            editorContainer: 'editor-container'
        });
      })

      const hocr = '../../assets/1.jpg';
      Hocr.prototype.setHocr(hocr)
  }
}

And the HTML file looks like that

<div class="viewport">
  <div class="toolbar">
      <div class="logo">hOCR-Proofreader</div>

      <button id="toggle-layout-image">Image/Text</button>
      <div class="separator"></div>

      <span>Zoom:</span>
      <button id="zoom-page-full">Full Page</button>
      <button id="zoom-page-width">Page Width</button>
      <button id="zoom-original">Original</button>
      <div class="separator"></div>

      <button id="button-save">Save</button>
  </div>

  <div id="layout-container" class="container"></div>
  <div id="editor-container" class="container"></div>
</div>

The import work fine but I facing with an error:

AppComponent.html:1 ERROR TypeError: Cannot read property 'contentDocument' of undefined
    at Object.push../src/app/hocr.js.HocrProofreader.setHocr (hocr.js:106)

That refers to this code:

HocrProofreader.prototype.setHocr = function (hocr, baseUrl) {
    this.hocrBaseUrl = baseUrl;
    var hocrDoc = this.editorIframe.contentDocument; <===== Here

    // TODO: use baseUrl for images/components in hOCR - use <base>?

    hocrDoc.open();
    hocrDoc.write(hocr);
    hocrDoc.close();

    var self = this;
    var hocrRoot = hocrDoc.documentElement;
    hocrRoot.addEventListener('mousemove', function (event) {
        self.mousePosition = {container: 'editor', x: event.clientX, y: event.clientY};
        self.onHover(event.target, true);
    });
    hocrRoot.addEventListener('mouseleave', function (event) {
        self.mousePosition = null;
        self.onHover(null, true);
    });
    hocrDoc.addEventListener('scroll', function (event) {
        if (!self.mousePosition || self.mousePosition.container !== 'editor') return;
        self.onHover(hocrDoc.elementFromPoint(self.mousePosition.x, self.mousePosition.y), true);
    });

    this.editorStylesheet = Util.createElem('link', {'type': 'text/css', 'rel': 'stylesheet', 'href': 'editor.css'});
    hocrDoc.head.appendChild(this.editorStylesheet);

    hocrDoc.body.contentEditable = true;

    this.setPage('first');
};

Upvotes: 1

Views: 2097

Answers (2)

rebiscosg
rebiscosg

Reputation: 41

The only missing here is to instantiate your object. You can do it inside a service if you want.

HocrProofreader-service.ts

import { Injectable } from '@angular/core';

declare const Util: any;
declare const HocrProofreader: any;

@Injectable({
  providedIn: 'root'
})
export class PRService{
  private util;
  private hpf;

  constructor() {
    this.util = new Util();
    this.hpf = new HocrProofreader({
      layoutContainer: 'layout-container',
      editorContainer: 'editor-container'
    });
  }

  setHocr(hocr) {
    this.hpf.setHocr(hocr);
  }
}

let me know if this works for you.

Upvotes: 0

Ritesh Waghela
Ritesh Waghela

Reputation: 3727

You can definitely use JS inside Angular component. But there is a special place to include your script.

You can include script in angular.json file. Look for scripts array and include the path of your script.

"scripts": [
   "path of your script goes here"
]

After this in you component you can say at the very top before import (though it's not necessary):

declare var Utils;

and use Utils function.

Upvotes: 1

Related Questions