senchalabs / jsduck

Simple JavaScript Duckumentation generator.
http://docs.sencha.com/
GNU General Public License v3.0
1.5k stars 238 forks source link

Simple HTML example showing glyph with JavaScript constant #662

Open incutonez opened 7 years ago

incutonez commented 7 years ago

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 commented 7 years ago

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