Skip to content

Javascript library for adding Google-style toolbars to your web app

License

Notifications You must be signed in to change notification settings

danielktaylor/gToolbars.js

Repository files navigation

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.

Screenshot

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>
  1. 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 -->
  1. Add images to the buttons:
#toolbar-undo {
  background-image: url("./icons/undo.png");
}

#toolbar-shape {
  background-image: url("./icons/shapes.png");
}
  1. Register button actions:
registerButton($("#toolbar-undo"), function() {
  // pressed undo
});

Dependencies

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

About

Javascript library for adding Google-style toolbars to your web app

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published