From 0974c368d7114cb83c87f58fe8755e712a384823 Mon Sep 17 00:00:00 2001
From: Rene Saarsoo <nene@triin.net>
Date: Mon, 27 May 2013 12:35:01 +0300
Subject: [PATCH] User-defined member icons.

Member icons are now defined in member tag classes.  There the
:icon field defines the icon file which is included to the docs
app resources and an appropriate CSS gets generated.
---
 lib/jsduck/tag/cfg.rb                         |   1 +
 lib/jsduck/tag/css_mixin.rb                   |   1 +
 lib/jsduck/tag/css_var.rb                     |   1 +
 lib/jsduck/tag/event.rb                       |   1 +
 .../members => lib/jsduck/tag/icons}/cfg.png  | Bin
 .../jsduck/tag/icons}/css_mixin.png           | Bin
 .../jsduck/tag/icons}/css_var.png             | Bin
 .../jsduck/tag/icons}/event.png               | Bin
 .../jsduck/tag/icons}/method.png              | Bin
 .../jsduck/tag/icons}/property.png            | Bin
 lib/jsduck/tag/member_tag.rb                  |   4 ++
 lib/jsduck/tag/method.rb                      |   1 +
 lib/jsduck/tag/property.rb                    |   1 +
 lib/jsduck/web/css.rb                         |   9 +++-
 lib/jsduck/web/member_icons.rb                |  43 ++++++++++++++++++
 lib/jsduck/web/writer.rb                      |   8 ++++
 template/resources/sass/_class_overview.scss  |   1 -
 template/resources/sass/_header.scss          |   1 -
 template/resources/sass/_mixins.scss          |  14 ------
 template/resources/sass/_toolbar.scss         |   4 +-
 20 files changed, 70 insertions(+), 20 deletions(-)
 rename {template/resources/images/members => lib/jsduck/tag/icons}/cfg.png (100%)
 rename {template/resources/images/members => lib/jsduck/tag/icons}/css_mixin.png (100%)
 rename {template/resources/images/members => lib/jsduck/tag/icons}/css_var.png (100%)
 rename {template/resources/images/members => lib/jsduck/tag/icons}/event.png (100%)
 rename {template/resources/images/members => lib/jsduck/tag/icons}/method.png (100%)
 rename {template/resources/images/members => lib/jsduck/tag/icons}/property.png (100%)
 create mode 100644 lib/jsduck/web/member_icons.rb

diff --git a/lib/jsduck/tag/cfg.rb b/lib/jsduck/tag/cfg.rb
index a0b58731..9e917ff1 100644
--- a/lib/jsduck/tag/cfg.rb
+++ b/lib/jsduck/tag/cfg.rb
@@ -12,6 +12,7 @@ module JsDuck::Tag
         :title => "Config options",
         :toolbar_title => "Configs",
         :position => MEMBER_POS_CFG,
+        :icon => File.dirname(__FILE__) + "/icons/cfg.png",
         :subsections => [
           {:title => "Required config options", :filter => {:required => true}},
           {:title => "Optional config options", :filter => {:required => false}, :default => true},
diff --git a/lib/jsduck/tag/css_mixin.rb b/lib/jsduck/tag/css_mixin.rb
index 2cbab67c..b1dda7aa 100644
--- a/lib/jsduck/tag/css_mixin.rb
+++ b/lib/jsduck/tag/css_mixin.rb
@@ -11,6 +11,7 @@ module JsDuck::Tag
       @member_type = {
         :title => "CSS Mixins",
         :position => MEMBER_POS_CSS_MIXIN,
+        :icon => File.dirname(__FILE__) + "/icons/css_mixin.png"
       }
     end
 
diff --git a/lib/jsduck/tag/css_var.rb b/lib/jsduck/tag/css_var.rb
index b4f73292..ce8e5190 100644
--- a/lib/jsduck/tag/css_var.rb
+++ b/lib/jsduck/tag/css_var.rb
@@ -10,6 +10,7 @@ module JsDuck::Tag
         :title => "CSS Variables",
         :toolbar_title => "CSS Vars",
         :position => MEMBER_POS_CSS_VAR,
+        :icon => File.dirname(__FILE__) + "/icons/css_var.png"
       }
     end
 
diff --git a/lib/jsduck/tag/event.rb b/lib/jsduck/tag/event.rb
index 32253aab..07081819 100644
--- a/lib/jsduck/tag/event.rb
+++ b/lib/jsduck/tag/event.rb
@@ -10,6 +10,7 @@ module JsDuck::Tag
       @member_type = {
         :title => "Events",
         :position => MEMBER_POS_EVENT,
+        :icon => File.dirname(__FILE__) + "/icons/event.png"
       }
     end
 
diff --git a/template/resources/images/members/cfg.png b/lib/jsduck/tag/icons/cfg.png
similarity index 100%
rename from template/resources/images/members/cfg.png
rename to lib/jsduck/tag/icons/cfg.png
diff --git a/template/resources/images/members/css_mixin.png b/lib/jsduck/tag/icons/css_mixin.png
similarity index 100%
rename from template/resources/images/members/css_mixin.png
rename to lib/jsduck/tag/icons/css_mixin.png
diff --git a/template/resources/images/members/css_var.png b/lib/jsduck/tag/icons/css_var.png
similarity index 100%
rename from template/resources/images/members/css_var.png
rename to lib/jsduck/tag/icons/css_var.png
diff --git a/template/resources/images/members/event.png b/lib/jsduck/tag/icons/event.png
similarity index 100%
rename from template/resources/images/members/event.png
rename to lib/jsduck/tag/icons/event.png
diff --git a/template/resources/images/members/method.png b/lib/jsduck/tag/icons/method.png
similarity index 100%
rename from template/resources/images/members/method.png
rename to lib/jsduck/tag/icons/method.png
diff --git a/template/resources/images/members/property.png b/lib/jsduck/tag/icons/property.png
similarity index 100%
rename from template/resources/images/members/property.png
rename to lib/jsduck/tag/icons/property.png
diff --git a/lib/jsduck/tag/member_tag.rb b/lib/jsduck/tag/member_tag.rb
index 6aa6f1e0..75a6f886 100644
--- a/lib/jsduck/tag/member_tag.rb
+++ b/lib/jsduck/tag/member_tag.rb
@@ -11,6 +11,7 @@ module JsDuck::Tag
     #       :position => MEMBER_POS_EVENT,
     #       # The following are optional
     #       :toolbar_title => "Events",
+    #       :icon => File.dirname(__FILE__) + "/icons/event.png",
     #       :subsections => [
     #         {:title => "Static events",
     #          :filter => {:static => false},
@@ -27,6 +28,9 @@ module JsDuck::Tag
     # label on Docs app toolbar button unless :toolbar_title is
     # specified.
     #
+    # Icon defines a file to be used as member icon in various places
+    # of the docs app.
+    #
     # Subsections allows splitting the list of members to several
     # subgroups.  For example methods get split into static and
     # instance methods.
diff --git a/lib/jsduck/tag/method.rb b/lib/jsduck/tag/method.rb
index eb44625b..63ac8fd8 100644
--- a/lib/jsduck/tag/method.rb
+++ b/lib/jsduck/tag/method.rb
@@ -11,6 +11,7 @@ module JsDuck::Tag
       @member_type = {
         :title => "Methods",
         :position => MEMBER_POS_METHOD,
+        :icon => File.dirname(__FILE__) + "/icons/method.png",
         :subsections => [
           {:title => "Instance methods", :filter => {:static => false}, :default => true},
           {:title => "Static methods", :filter => {:static => true}},
diff --git a/lib/jsduck/tag/property.rb b/lib/jsduck/tag/property.rb
index 2e332650..98b892c0 100644
--- a/lib/jsduck/tag/property.rb
+++ b/lib/jsduck/tag/property.rb
@@ -11,6 +11,7 @@ module JsDuck::Tag
       @member_type = {
         :title => "Properties",
         :position => MEMBER_POS_PROPERTY,
+        :icon => File.dirname(__FILE__) + "/icons/property.png",
         :subsections => [
           {:title => "Instance properties", :filter => {:static => false}, :default => true},
           {:title => "Static properties", :filter => {:static => true}},
diff --git a/lib/jsduck/web/css.rb b/lib/jsduck/web/css.rb
index 266e415e..9db0449a 100644
--- a/lib/jsduck/web/css.rb
+++ b/lib/jsduck/web/css.rb
@@ -1,5 +1,6 @@
 require 'jsduck/tag_registry'
 require 'jsduck/util/md5'
+require 'jsduck/web/member_icons'
 
 module JsDuck
   module Web
@@ -13,9 +14,15 @@ module JsDuck
       end
 
       def write(filename)
-        File.open(filename, 'w') {|f| f.write(TagRegistry.css + @opts.css) }
+        File.open(filename, 'w') {|f| f.write(all_css) }
         Util::MD5.rename(filename)
       end
+
+      private
+
+      def all_css
+        TagRegistry.css + Web::MemberIcons.css + @opts.css
+      end
     end
 
   end
diff --git a/lib/jsduck/web/member_icons.rb b/lib/jsduck/web/member_icons.rb
new file mode 100644
index 00000000..bb886de3
--- /dev/null
+++ b/lib/jsduck/web/member_icons.rb
@@ -0,0 +1,43 @@
+require 'jsduck/tag_registry'
+require 'fileutils'
+
+module JsDuck
+  module Web
+
+    # Manages member icons.
+    # Generating CSS for them and coping the image files over to output dir.
+    class MemberIcons
+      # Generates CSS for member icons
+      def self.css
+        css = []
+        members_with_icons.each do |m|
+          name = m[:name]
+          rule = ".icon-#{name} { background: url(member-icons/#{name}.png) no-repeat; }"
+          css << "#search-dropdown #{rule}"
+          css << ".members .members-section #{rule}"
+          css << ".members .comments-section #{rule}"
+          css << ".class-overview .x-toolbar.member-links #{rule}"
+        end
+        css.join("\n")
+      end
+
+      # Copies all member icons to given destination dir.
+      def self.write(dir)
+        FileUtils.mkdir(dir)
+
+        members_with_icons.each do |m|
+          if File.exists?(m[:icon])
+            FileUtils.cp(m[:icon], "#{dir}/#{m[:name]}.png")
+          else
+            Logger.log(nil, "Member icon file not found", m[:icon])
+          end
+        end
+      end
+
+      def self.members_with_icons
+        TagRegistry.member_types.find_all {|m| m[:icon] }
+      end
+    end
+
+  end
+end
diff --git a/lib/jsduck/web/writer.rb b/lib/jsduck/web/writer.rb
index 2409c18f..8c960733 100644
--- a/lib/jsduck/web/writer.rb
+++ b/lib/jsduck/web/writer.rb
@@ -7,6 +7,7 @@ require 'jsduck/web/index_html'
 require 'jsduck/web/data'
 require 'jsduck/web/css'
 require 'jsduck/web/source'
+require 'jsduck/web/member_icons'
 require 'fileutils'
 
 module JsDuck
@@ -24,6 +25,8 @@ module JsDuck
       def write
         write_template_files
 
+        write_member_icons
+
         write_html_files
 
         # class-formatting is done in parallel which breaks the links
@@ -45,6 +48,11 @@ module JsDuck
         Web::Template.new(@opts).write
       end
 
+      # Copy over member icons
+      def write_member_icons
+        Web::MemberIcons.write(@opts.output_dir+"/member-icons")
+      end
+
       # Generate data.js and styles.css.
       # Then generate HTML files, linking to the data.js and styles.css from them.
       def write_html_files
diff --git a/template/resources/sass/_class_overview.scss b/template/resources/sass/_class_overview.scss
index c39a0a79..2a6d0deb 100644
--- a/template/resources/sass/_class_overview.scss
+++ b/template/resources/sass/_class_overview.scss
@@ -104,7 +104,6 @@
       padding: 0 0 0 25px;
       font-size: 1.3em;
       font-weight: bold; }
-    @include member-icons;
   h4.members-subtitle {
     padding-left: 25px;
     margin: 10px 0 7px 0; }
diff --git a/template/resources/sass/_header.scss b/template/resources/sass/_header.scss
index 29d99520..a48b7de4 100644
--- a/template/resources/sass/_header.scss
+++ b/template/resources/sass/_header.scss
@@ -122,7 +122,6 @@
     height: 18px; }
 
   @include icons;
-  @include member-icons;
 
   .meta {
     position: absolute;
diff --git a/template/resources/sass/_mixins.scss b/template/resources/sass/_mixins.scss
index c722fbbc..496bcbc1 100644
--- a/template/resources/sass/_mixins.scss
+++ b/template/resources/sass/_mixins.scss
@@ -40,20 +40,6 @@
   .icon-component-redirect {
     background: url(../images/icons.png) no-repeat 0 -640px; } }
 
-@mixin member-icons {
-  .icon-cfg {
-    background: url(../images/members/cfg.png) no-repeat; }
-  .icon-property {
-    background: url(../images/members/property.png) no-repeat; }
-  .icon-method {
-    background: url(../images/members/method.png) no-repeat; }
-  .icon-event {
-    background: url(../images/members/event.png) no-repeat; }
-  .icon-css_var {
-    background: url(../images/members/css_var.png) no-repeat; }
-  .icon-css_mixin {
-    background: url(../images/members/css_mixin.png) no-repeat; } }
-
 @mixin green-button {
   @include box-shadow(#b3f33d 0 1px 0 0 inset);
   color: #fff;
diff --git a/template/resources/sass/_toolbar.scss b/template/resources/sass/_toolbar.scss
index 8a1bd247..6a3e94be 100644
--- a/template/resources/sass/_toolbar.scss
+++ b/template/resources/sass/_toolbar.scss
@@ -1,5 +1,4 @@
 // Styles for class documentation toolbar
-@import "mixins";
 
 // softer rounded corners on the toolbar
 .class-overview .x-toolbar.member-links {
@@ -8,8 +7,7 @@
   padding: 5px;
   // ExtJS styles hide the border using !important.
   // So to override it we need to use !important too.
-  border-width: 1px !important;
-  @include member-icons; }
+  border-width: 1px !important; }
 
 
 // The reset (X) button in filter-class-members text box
-- 
GitLab