Uploaded image for project: 'NetBeans'
  1. NetBeans
  2. NETBEANS-2498

A red dot appears on a Typescript file when there's no error in the file

    XMLWordPrintableJSON

    Details

    • Type: Bug
    • Status: Closed
    • Priority: Major
    • Resolution: Invalid
    • Affects Version/s: 8.2
    • Fix Version/s: None
    • Component/s: editor - Other
    • Labels:
      None
    • Environment:

      Windows 10 PRO

      Description

      I have an error in my code but there's not any errors, I don't think. I'm using the following:

       

      {{ Angular CLI: 1.7.4 Node: 8.11.1 OS: win32 x64 Angular: 5.2.11 ... animations, common, compiler, compiler-cli, core, forms ... http, platform-browser, platform-browser-dynamic ... platform-server, router @angular/cdk: 5.2.4 @angular/cli: 1.7.4 @angular/language-service: 4.4.7 @angular/material: 7.3.7 @angular-devkit/build-optimizer: 0.3.2 @angular-devkit/core: 0.3.2 @angular-devkit/schematics: 0.3.2 @ngtools/json-schema: 1.2.0 @ngtools/webpack: 1.10.2 @schematics/angular: 0.3.2 @schematics/package-update: 0.3.2 typescript: 2.4.2 webpack: 3.11.0}}

       

      I get a RED DOT on my Typescript file and when I run ng serve, there are no errors and everything compiles fine.

      Is there a plugin or something that reveals what actually is wrong or going on or is this an anomaly that I shouldn't concern myself with?

       

      Here's the code from my service that's showing a red dot.

       

      Sorry about the formatting issues... your code placeholder changed all my < and > signs to unicode....  the link to the JQUERY that I was trying to convert to Typescript is located in the comments.  But there are missing declarations for bgColor and content and missing comma's in some places. It's badly written code. What I am trying to do is replicate what he did here:  http://www.thepetedesign.com/demos/adaptive-modal_demo.html

       

      Modal from Existing Container and Custom Styles is what I want to do in Typescript and Angular.

       

      // code placeholder
      
      import {Injectable} from '@angular/core';
      
      @Injectable()
      export class ModalAdaptiveService {
      
      constructor(
      
      ) {}
      
      public bgColor: string;
      public content: string;
      /* ===========================================================
      * jquery.adpative-modal.js v1.0
      * ===========================================================
      * Copyright 2014 Pete Rojwongsuriya.
      * http://www.thepetedesign.com
      *
      * Adaptive Modal let you add a modal windows
      * that can be morphed from anything
      *
      * https://github.com/peachananr/adaptive-modal
      *
      * License: GPL v3
      *
      * ========================================================== */
      
      function($) {
      
      let myThis = this;
      
      let defaults = {
      elementAnimateTime: 100,
      customBgColor: "#333",
      remoteUrl: false,
      elementAnimateIn: "scaleShow",
      elementAnimateOut: "scaleHide",
      beforeAnimate: function (el, status) {},
      afterAnimate: function (el, status) {},
      /* Deafult Ajax Parameters */
      type: "GET",
      async: true,
      complete: function (xhr, text) {},
      cache: true,
      error: function (xhr, text, e) {},
      global: true,
      headers: {},
      statusCode: {},
      success: function (data, text, xhr) {},
      dataType: "html"
      };
      
      // a function to replicate all styles from the original button
      
      $.fn.getStyleObject = function () {
      let dom = this.get(0);
      let style;
      let returns = {};
      if (window.getComputedStyle) {
      let camelize = function (a, b) {
      return b.toUpperCase();
      };
      style = window.getComputedStyle(dom, null);
      for (let i = 0, l = style.length; i < l; i++) {
      let prop = style[i];
      let camel = prop.replace(/\-([a-z])/g, camelize);
      let val = style.getPropertyValue(prop);
      returns[camel] = val;
      };
      return returns;
      };
      if (style = dom.currentStyle) {
      for (let prop in style) {
      returns[prop] = style[prop];
      };
      return returns;
      };
      return this.css();
      }
      
      // Function to detect remote URL
      
      function urlCheck(url) {
      if (/^([a-z]([a-z]|\d|\+|-|\.)*):(\/\/(((([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:)*@)?((\[(|(v[\da-f]{1,}\.(([a-z]|\d|-|\.|_|~)|[!\$&'\(\)\*\+,;=]|:)+))\])|((\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5])\.(\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5])\.(\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5])\.(\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5]))|(([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=])*)(:\d*)?)(\/(([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:|@)*)*|(\/((([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:|@)+(\/(([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:|@)*)*)?)|((([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:|@)+(\/(([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:|@)*)*)|((([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:|@)){0})(\?((([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:|@)|[\uE000-\uF8FF]|\/|\?)*)?(\#((([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:|@)|\/|\?)*)?$/i.test(url)) {
      return true;
      } else {
      return false;
      }
      }
      
      // Function to run animation in sequence
      
      function runAnimation(i, timeline, animations) {
      setTimeout(function () {
      if (typeof animations[i].beforeAnimate == 'function') animations[i].beforeAnimate();
      if (animations[i].remove) {
      if (animations[i].hide == true) {
      $(animations[i].selector).removeClass(animations[i].remove).addClass(animations[i].step).one("animationend webkitAnimationEnd oAnimationEnd MSAnimationEnd", function () {
      $(this).hide();
      if (typeof animations[i].afterAnimate == 'function') animations[i].afterAnimate();
      });
      } else {
      $(animations[i].selector).removeClass(animations[i].remove).addClass(animations[i].step).show().one("animationend webkitAnimationEnd oAnimationEnd MSAnimationEnd", function () {
      if (typeof animations[i].afterAnimate == 'function') animations[i].afterAnimate();
      });
      }
      } else {
      if (animations[i].hide == true) {
      $(animations[i].selector).addClass(animations[i].step).one("animationend webkitAnimationEnd oAnimationEnd MSAnimationEnd", function () {
      $(this).hide()
      if (typeof animations[i].afterAnimate == 'function') animations[i].afterAnimate();
      });
      } else {
      $(animations[i].selector).addClass(animations[i].step).show().one("animationend webkitAnimationEnd oAnimationEnd MSAnimationEnd", function () {
      if (typeof animations[i].afterAnimate == 'function') animations[i].afterAnimate();
      });
      }
      }
      }, timeline);
      }
      
      
      $.fn.adaptiveModal = function (options) {
      
      return this.each(function () {
      let settings = $.extend({}, defaults, options),
      el = $(this);
      
      // Public Method to Open Modal Programatically
      
      $.fn.openModal = function () {
      let el = $(this),
      className = el.data("am-custom-class") || "",
      customBgColor = el.data("am-custom-bgcolor") || el.css('backgroundColor') || settings.customBgColor,
      h = el.outerHeight(),
      w = el.outerWidth(),
      posX = el.offset().left,
      posY = el.offset().top - $(window).scrollTop(),
      styles = el.getStyleObject(),
      remote = "";
      
      // Prevent animation overlap when there's an ongoing animation
      if (el.hasClass("am-animating")) {
      return false;
      }
      
      if (typeof settings.beforeAnimate == 'function') settings.beforeAnimate(el, "open");
      
      // Fallback default background color in case the button has no background color available
      if (el.css('backgroundColor') == "rgba(0 ,0 ,0 ,0)") customBgColor = settings.customBgColor;
      
      myThis.bgColor = customBgColor
      
      // animation flag to true
      el.addClass("am-animating");
      
      
      // Apply to remove URL only
      if (el.data("remote") == true || settings.remoteUrl != false) {
      myThis.content = "Loading.."
      remote = "am-remote"
      let type = (el.data("type")) ? el.data("type") : settings.type;
      let href = el.attr("href") || settings.remoteUrl;
      let datatype = (el.data("datatype")) ? el.data("datatype") : settings.dataType;
      
      // Call AJAX
      
      $.ajax({
      type: type,
      url: href,
      async: settings.async,
      complete: settings.complete,
      cache: settings.cache,
      error: settings.error,
      global: settings.global,
      headers: settings.headers,
      statusCode: settings.statusCode,
      success: function (data, text, xhr) {
      
      // Animate Elements when ajax is completed
      if (typeof settings.success == 'function') {
      settings.success(data, text, xhr);
      } else {
      $(".am-remote").html(data)
      }
      
      $(".am-back > .am-modal-content > *").each(function () {
      animations.push({
      time: 0,
      step: "am-expanded",
      selector: $(".am-back"),
      beforeAnimate: function () {
      
      $(".am-back").attr("style", "").css({
      background: myThis.bgColor,
      minHeight: $(".am-back").height()
      });
      }
      }, {
      time: settings.elementAnimateTime,
      step: "animated " + settings.elementAnimateIn,
      selector: this,
      });
      });
      animations.push({
      time: 0,
      step: "",
      selector: $(".am-back"),
      beforeAnimate: function () {
      if (typeof settings.afterAnimate == 'function') settings.afterAnimate(el, "open");
      el.removeClass("am-animating")
      }
      });
      
      
      let timeline = 0;
      
      for (let i = 0; i < animations.length; i++) {
      timeline = parseInt(animations[i].time, 10) + parseInt('0', 10);
      runAnimation(i, timeline, animations);
      }
      
      },
      dataType: datatype
      });
      
      } else {
      // Use data-title or content from href if the link is not remote
      myThis.content = el.data("title") || $(el.attr("href")).html()
      }
      
      // Create objects to be animated
      $("body").append("<div class='am-overlay'><div class='am-close-backdrop'></div><div class='am-modal " + className + "'><div class='am-wrapper'></div></div></div>");
      el.clone().removeData("toggle").removeData("title").addClass("am-front").css(styles).appendTo(".am-modal .am-wrapper");
      
      $(".am-modal .am-wrapper").append("<div class='am-back'><div class='am-modal-content " + remote + "'>" + myThis.content + "</div></div>")
      
      $(".am-modal").css({
      width: w,
      height: h,
      top: posY,
      left: posX
      });
      
      // Get real height of the object to animate correctly
      $("body").prepend("<div class='am-sample'></div>")
      $(".am-back").clone().addClass("am-expanded " + className).appendTo(".am-sample");
      $(".am-sample .am-back").wrap("<div class='am-modal am-expanded " + className + "'></div>");
      
      let realH = $(".am-sample .am-back").outerHeight();
      $(".am-sample").remove();
      
      $(".am-back").css({
      width: w,
      height: h,
      backgroundColor: myThis.bgColor
      });
      
      // Add close button
      $(".am-back").append("<a href='#' class='am-close'>&#215;</a>")
      
      // Close function
      $(".am-back .am-close, .am-close-backdrop, .am-trigger-close").click(function (e) {
      el.closeModal();
      
      return false;
      });
      
      // Complex series of class switching and CSS3 animation
      let animations = []
      
      animations.push({
      time: 500,
      step: "am-flipped",
      selector: $(".am-modal"),
      beforeAnimate: function () {
      el.css({
      visibility: "hidden"
      });
      }
      }, {
      time: 500,
      step: "am-expanded",
      selector: $(".am-modal"),
      beforeAnimate: function () {
      $(".am-modal").attr("style", "");
      }
      }, {
      time: 0,
      step: "am-expanded",
      selector: $(".am-back"),
      beforeAnimate: function () {
      
      $(".am-back").attr("style", "").css({
      background: myThis.bgColor,
      height: realH,
      minHeight: realH
      });
      }
      }, {
      time: 500,
      step: "",
      selector: $(".am-back"),
      beforeAnimate: function () {
      if (!$(".am-back .am-modal-content").hasClass("am-remote")) {
      $(".am-back").css({
      height: "auto"
      });
      if (typeof settings.afterAnimate == 'function') settings.afterAnimate(el, "open");
      el.removeClass("am-animating")
      }
      
      
      }
      }
      );
      
      // Animate elemtn directly under the modal one by one
      $(".am-back > .am-modal-content > *").each(function () {
      
      animations.push({
      time: settings.elementAnimateTime,
      step: "animated scaleShow",
      selector: this,
      });
      });
      
      let timeline = 0;
      
      for (let i = 0; i < animations.length; i++) {
      timeline = parseInt(animations[i].time, 10) + parseInt('0', 10);
      runAnimation(i, timeline, animations);
      }
      
      $("body").addClass("am-modal-open");
      }
      
      // Public Method to Close Modal Programatically
      
      $.fn.closeModal = function () {
      
      let el2 = $(this),
      className = el2.data("am-custom-class") || "",
      animations = [],
      h = el2.outerHeight(),
      w = el2.outerWidth(),
      posX = el2.offset().left,
      posY = el2.offset().top - $(window).scrollTop();
      
      // Prevent animation overlap when there's an ongoing animation
      if (el2.hasClass("am-animating")) {
      return false;
      }
      
      if (typeof settings.beforeAnimate == 'function') settings.beforeAnimate(el2, "close");
      
      // Toggle Animation to true
      el2.addClass("am-animating");
      
      //Animate out modal content
      $(".am-back > .am-modal-content > *").each(function () {
      animations.push({
      time: settings.elementAnimateTime,
      step: settings.elementAnimateOut,
      remove: settings.elementAnimateIn,
      selector: this,
      });
      });
      
      // get real height to animate from
      $("body").prepend("<div class='am-sample'></div>")
      $(".am-back").clone().addClass("am-expanded " + className).appendTo(".am-sample");
      $(".am-sample .am-back").wrap("<div class='am-modal am-expanded " + className + "'></div>");
      let realH = $(".am-sample .am-back").outerHeight();
      
      $(".am-sample").remove();
      
      // complex series of class switching and CSS3 animations
      animations.push({
      time: 0,
      selector: $(".am-expanded"),
      step: "",
      beforeAnimate: function () {
      $(".am-expanded").css({
      height: realH
      });
      }
      },
      {
      time: 300,
      remove: "am-expanded",
      selector: $(".am-back"),
      beforeAnimate: function () {
      $(".am-back").css({
      width: w,
      height: h,
      top: posY,
      left: posX,
      minHeight: 0
      });
      }
      },
      {
      time: 0,
      remove: "am-expanded",
      selector: $(".am-modal"),
      step: "",
      beforeAnimate: function () {
      $(".am-modal").css({
      width: w,
      height: h,
      top: posY,
      left: posX
      });
      }
      },
      {
      time: 200,
      remove: "am-flipped",
      step: "",
      selector: $(".am-modal")
      },
      {
      time: 0,
      step: "",
      selector: $(".am-modal"),
      beforeAnimate: function () {
      el2.css({
      visibility: "visible"
      })
      }
      },
      {
      time: 500,
      remove: "am-modal-open",
      step: "",
      selector: $("body")
      },
      {
      time: 500,
      step: "",
      selector: $(".am-overlay"),
      beforeAnimate: function () {
      $(".am-overlay").remove();
      if (typeof settings.afterAnimate == 'function') settings.afterAnimate(el2, "close");
      el2.removeClass("am-animating");
      }
      });
      
      
      
      let timeline = 0;
      
      for (let i = 0; i < animations.length; i++) {
      timeline = parseInt(animations[i].time, 10) + parseInt('0', 10);
      runAnimation(i, timeline, animations);
      
      if (i - 1 == animations.length) {
      console.log("Animations Length is equal to i - 1, in this case.");
      }
      }
      
      }
      
      // Determine the type of URL in the href attribute
      if (el.attr("href").length > 0 && el.attr("href") != "#") {
      if (!urlCheck(el.attr("href"))) $(el.attr("href")).hide();
      }
      // Add button trigger
      el.addClass("am-btn").click(function () {
      el.openModal()
      return false;
      });
      
      
      });
      
      }
      
      // Auto initialize when data-toggle='adaptive-modal' are present
      $(document).ready(function () {
      $("[data-toggle='adaptive-modal']").adaptiveModal();
      });
      };
      
      }
      
      

       

        Attachments

          Activity

            People

            • Assignee:
              Unassigned
              Reporter:
              pborregg PETER BORREGGINE
            • Votes:
              0 Vote for this issue
              Watchers:
              3 Start watching this issue

              Dates

              • Due:
                Created:
                Updated:
                Resolved: