Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Simple HTML example showing glyph with JavaScript constant #662

Open
incutonez opened this issue Feb 9, 2017 · 1 comment
Open

Simple HTML example showing glyph with JavaScript constant #662

incutonez opened this issue Feb 9, 2017 · 1 comment

Comments

@incutonez
Copy link

incutonez commented Feb 9, 2017

Hello,

I'm wondering if this is possible. Basically, I have a class like this:

Ext.define('Constants', {
  singleton: true,
  /**
    *  <span class="examples Constants.ICON_ONE_CLS"></span>
    */
  ICON_ONE_CLS: 'my-icon my-icon-one'
});

So I want to reuse my constant to populate the span's class in the example. I can include my Constants singleton, and that's actually on the page (verified that it's present), but what I have above obviously won't work because it's HTML, and it'll be treated as a string. I was trying to figure out a way of listening for the page to render, and then replace all instances with the class examples, but I wasn't able to figure that out... I was thinking something like:
var exampleElements = document.getElementsByClassName('examples');
But that was always an empty array because I'm pretty sure the elements weren't showing when my script was fired.

I then saw the inline examples, and included a dir called extjs-build with the downloaded Ext JS SDK, but then my @example just showed as plain text, like it didn't get parsed.

I'm pretty sure I'm not understanding something so simple. Any help would be appreciated :)

FWIW, I can actually get this working if I do class="my-icon my-icon-one" because I'm also including the stylesheet... I was just hoping I could reuse my constants instead of having to maintain the class names in two places.

@incutonez
Copy link
Author

incutonez commented Feb 11, 2017

I actually figured this out by writing a custom tag... although, I wasn't able to figure out how to add the glyph into the dropdown for the tags (like how it'll say PRI for private classes), so I'm still working on that, but it at least solves this issue.

require "jsduck/tag/member_tag"

class Glyph < JsDuck::Tag::MemberTag
  def initialize
    @tagname = :glyph
    @pattern = "glyph"
    @html_position = POS_DOC + 0.1
    @member_type = {
      :title => "Glyphs",
      :position => MEMBER_POS_CFG - 0.1,
      :icon => File.dirname(__FILE__) + "/icons/property.png",
    }
    super
  end

  def parse_doc(scanner, position)
    name = scanner.match(/.*$/)
    return {
      :tagname => :glyph,
      :name => name,
      :doc => :multiline
    }
  end

  def process_code(code)
    h = super(code)
    # Make sure we add the actual CSS the constant is referencing, so we can
    # reuse this when making our span
    h[:glyphCss] = code[:default]
    h
  end

  def to_html(glyph, cls)
    # Apparently we have to remove some single quotes
    css = glyph[:glyphCss].tr("'", "")
    <<-EOHTML
      #{member_link(glyph)} <span class="glyph-example #{css}"></span>
    EOHTML
  end
end

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant