gToolbars.js

gToolbars.js is a javascript library for creating toolbars that have the same visual style as Google Docs, Sheets, Slides, etc. It handles the CSS styles and dropdowns logistics for you. I made this library for my web-based image editor.

Usage

1. Include the CSS and JS files:

<link rel="stylesheet" type="text/css" href="gToolbars-0.2.0.css">
<script defer src="gToolbars-0.2.0.js"></script>

2. Add a toolbar to the HTML:

<div class="gt-toolbar">
  <div id="toolbar-undo" class="gt-button"></div>
  <div class="mdl-tooltip mdl-tooltip--large gt-noselect" for="toolbar-undo">Undo</div>
  
  <div class="gt-separator"></div>
  
  <div id="toolbar-shape" class="gt-button gt-dropdown">
    <div class="gt-arrow"></div>
    <div class="gt-submenu gt-noselect gt-noshow">
      <div class="gt-submenu-item" id="toolbar-circle">
        <img src="icons/circle.png" class="gt-submenu-icon">
        Circle
      </div>
      <div class="gt-submenu-item" id="toolbar-rectangle">
        <img src="icons/rectangle.png" class="gt-submenu-icon">
        Rectangle
      </div>
    </div><!-- /toolbar-submenu -->
  </div><!-- /toolbar-shape -->
  <div class="mdl-tooltip mdl-tooltip--large gt-noselect" for="toolbar-shape">Insert Shape</div>
</div><!-- /toolbar -->

3. Add images to the buttons:

#toolbar-undo {
  background-image: url("./icons/undo.png");
}

#toolbar-shape {
  background-image: url("./icons/shapes.png");
}

4. Register button actions:

registerButton($("#toolbar-undo"), function() {
  // pressed undo
});

Dependencies

• jQuery
• Material Design Lite if you want tooltips
• Spectrum if you want a color picker

Browser Support

• Firefox 44
• Chrome 49
• Safari 9.1
• IE 9+ (with correct doctype)
• Mobile Safari
• Untested: Android Browser
• Untested: IE 8

Generating the CSS

If you make changes to the SASS, you'll need to regenerate the CSS:

sass gToolbars-0.2.0.scss > gToolbars-0.2.0.css

Open Issues

• Remove jQuery dependency
• Remove Material Design Lite dependency by implementing tooltips
• Implement CommonJS and AMD compatibility
• Switch to a single PNG image containing all icons