fixing CDN and adding tooltips

.gitignore

@@ -102,3 +102,6 @@ venv.bak/
 
 # mypy
 .mypy_cache/
+
+# Docs
+_build/

_static/copybutton.css

@@ -3,14 +3,15 @@ button.copybtn {
   webkit-transition: opacity .3s ease-in-out;
   -o-transition: opacity .3s ease-in-out;
   transition: opacity .3s ease-in-out;
-  opacity: 0;
+  opacity: .5;
   padding: 2px 6px;
   position: absolute;
   right: 4px;
   top: 4px;
+  background-color: rgb(238, 238, 238);
 }
 div.highlight:hover .copybtn, div.highlight .copybtn:focus {
-    opacity: .3;
+    opacity: .8;
 }
 div.highlight .copybtn:hover {
     opacity: 1;

_static/copybutton.js

@@ -1,24 +1,58 @@
 function addCopyButtonToCode(){
-// get all code elements
-var allCodeBlocksElements = $( "div.highlight pre" );
-
-// For each element, do the following steps
-allCodeBlocksElements.each(function(ii) {
-// define a unique id for this element and add it
-var currentId = "codeblock" + (ii + 1);
-$(this).attr('id', currentId);
-
-// create a button that's configured for clipboard.js
-// point it to the text that's in this code block
-// add the button just after the text in the code block w/ jquery
-var clipButton = '<button class="btn copybtn" data-clipboard-target="#' + currentId + '"><img src="https://clipboardjs.com/assets/images/clippy.svg" width="13" alt="Copy to clipboard"></button>';
-   $(this).after(clipButton);
-});
+  // get all code elements
+  var allCodeBlocksElements = $( "div.highlight pre" );
 
-// tell clipboard.js to look for clicks that match this query
-new Clipboard('.btn');
-}
+  // For each element, do the following steps
+  allCodeBlocksElements.each(function(ii) {
+  // define a unique id for this element and add it
+  var currentId = "codeblock" + (ii + 1);
+  $(this).attr('id', currentId);
+
+  // create a button that's configured for clipboard.js
+  // point it to the text that's in this code block
+  // add the button just after the text in the code block w/ jquery
+  var clipButton = '<button class="btn copybtn" data-clipboard-target="#' + currentId + '"><i class="far fa-copy" alt="Copy to clipboard"></i></button>';
+     $(this).after(clipButton);
+  });
+
+  // Tooltip functions
+  function setTooltip(btn, message) {
+    $(btn).tooltip('hide')
+      .attr('data-original-title', message)
+      .tooltip('show');
+  }
+
+  function hideTooltip(btn) {
+    setTimeout(function() {
+      $(btn).tooltip('hide');
+    }, 800);
+  }
+
+  $('btn').tooltip({
+    trigger: 'click',
+    placement: 'bottom'
+  });
 
+  // tell clipboard.js to look for clicks that match this query
+  var clipboard = new Clipboard('.btn');
+
+  function clearSelection() {
+   if (window.getSelection) {window.getSelection().removeAllRanges();}
+   else if (document.selection) {document.selection.empty();}
+  }
+
+  clipboard.on('success', function(e) {
+    clearSelection();
+    setTooltip(e.trigger, 'Copied!');
+    hideTooltip(e.trigger);
+  });
+
+  clipboard.on('error', function(e) {
+    setTooltip(e.trigger, 'Failed!');
+    hideTooltip(e.trigger);
+  });
+
+}
 $(document).ready(function () {
 // Once the DOM is loaded for the page, attach clipboard buttons
 addCopyButtonToCode();

doc/Makefile

@@ -0,0 +1,20 @@
+# Minimal makefile for Sphinx documentation
+#
+
+# You can set these variables from the command line.
+SPHINXOPTS    =
+SPHINXBUILD   = sphinx-build
+SPHINXPROJ    = SphinxCopybutton
+SOURCEDIR     = .
+BUILDDIR      = _build
+
+# Put it first so that "make" without argument is like "make help".
+help:
+	@$(SPHINXBUILD) -M help "$(SOURCEDIR)" "$(BUILDDIR)" $(SPHINXOPTS) $(O)
+
+.PHONY: help Makefile
+
+# Catch-all target: route all unknown targets to Sphinx using the new
+# "make mode" option.  $(O) is meant as a shortcut for $(SPHINXOPTS).
+%: Makefile
+	@$(SPHINXBUILD) -M $@ "$(SOURCEDIR)" "$(BUILDDIR)" $(SPHINXOPTS) $(O)

doc/conf.py

@@ -0,0 +1,154 @@
+# -*- coding: utf-8 -*-
+#
+# Configuration file for the Sphinx documentation builder.
+#
+# This file does only contain a selection of the most common options. For a
+# full list see the documentation:
+# http://www.sphinx-doc.org/en/master/config
+
+# -- Path setup --------------------------------------------------------------
+
+# If extensions (or modules to document with autodoc) are in another directory,
+# add these directories to sys.path here. If the directory is relative to the
+# documentation root, use os.path.abspath to make it absolute, like shown here.
+#
+# import os
+# import sys
+# sys.path.insert(0, os.path.abspath('.'))
+
+
+# -- Project information -----------------------------------------------------
+
+project = 'Sphinx Copybutton'
+copyright = '2018, Chris Holdgraf'
+author = 'Chris Holdgraf'
+
+# The short X.Y version
+version = ''
+# The full version, including alpha/beta/rc tags
+release = ''
+
+
+# -- General configuration ---------------------------------------------------
+
+# If your documentation needs a minimal Sphinx version, state it here.
+#
+# needs_sphinx = '1.0'
+
+# Add any Sphinx extension module names here, as strings. They can be
+# extensions coming with Sphinx (named 'sphinx.ext.*') or your custom
+# ones.
+extensions = ['sphinx_copybutton']
+
+# Add any paths that contain templates here, relative to this directory.
+templates_path = ['_templates']
+
+# The suffix(es) of source filenames.
+# You can specify multiple suffix as a list of string:
+#
+# source_suffix = ['.rst', '.md']
+source_suffix = '.rst'
+
+# The master toctree document.
+master_doc = 'index'
+
+# The language for content autogenerated by Sphinx. Refer to documentation
+# for a list of supported languages.
+#
+# This is also used if you do content translation via gettext catalogs.
+# Usually you set "language" from the command line for these cases.
+language = None
+
+# List of patterns, relative to source directory, that match files and
+# directories to ignore when looking for source files.
+# This pattern also affects html_static_path and html_extra_path .
+exclude_patterns = ['_build', 'Thumbs.db', '.DS_Store']
+
+# The name of the Pygments (syntax highlighting) style to use.
+pygments_style = 'sphinx'
+
+
+# -- Options for HTML output -------------------------------------------------
+
+# The theme to use for HTML and HTML Help pages.  See the documentation for
+# a list of builtin themes.
+#
+html_theme = 'alabaster'
+
+# Theme options are theme-specific and customize the look and feel of a theme
+# further.  For a list of options available for each theme, see the
+# documentation.
+#
+# html_theme_options = {}
+
+# Add any paths that contain custom static files (such as style sheets) here,
+# relative to this directory. They are copied after the builtin static files,
+# so a file named "default.css" will overwrite the builtin "default.css".
+html_static_path = ['_static']
+
+# Custom sidebar templates, must be a dictionary that maps document names
+# to template names.
+#
+# The default sidebars (for documents that don't match any pattern) are
+# defined by theme itself.  Builtin themes are using these templates by
+# default: ``['localtoc.html', 'relations.html', 'sourcelink.html',
+# 'searchbox.html']``.
+#
+# html_sidebars = {}
+
+
+# -- Options for HTMLHelp output ---------------------------------------------
+
+# Output file base name for HTML help builder.
+htmlhelp_basename = 'SphinxCopybuttondoc'
+
+
+# -- Options for LaTeX output ------------------------------------------------
+
+latex_elements = {
+    # The paper size ('letterpaper' or 'a4paper').
+    #
+    # 'papersize': 'letterpaper',
+
+    # The font size ('10pt', '11pt' or '12pt').
+    #
+    # 'pointsize': '10pt',
+
+    # Additional stuff for the LaTeX preamble.
+    #
+    # 'preamble': '',
+
+    # Latex figure (float) alignment
+    #
+    # 'figure_align': 'htbp',
+}
+
+# Grouping the document tree into LaTeX files. List of tuples
+# (source start file, target name, title,
+#  author, documentclass [howto, manual, or own class]).
+latex_documents = [
+    (master_doc, 'SphinxCopybutton.tex', 'Sphinx Copybutton Documentation',
+     'Chris Holdgraf', 'manual'),
+]
+
+
+# -- Options for manual page output ------------------------------------------
+
+# One entry per manual page. List of tuples
+# (source start file, name, description, authors, manual section).
+man_pages = [
+    (master_doc, 'sphinxcopybutton', 'Sphinx Copybutton Documentation',
+     [author], 1)
+]
+
+
+# -- Options for Texinfo output ----------------------------------------------
+
+# Grouping the document tree into Texinfo files. List of tuples
+# (source start file, target name, title, author,
+#  dir menu entry, description, category)
+texinfo_documents = [
+    (master_doc, 'SphinxCopybutton', 'Sphinx Copybutton Documentation',
+     author, 'SphinxCopybutton', 'One line description of project.',
+     'Miscellaneous'),
+]

doc/index.rst

@@ -0,0 +1,42 @@
+=================
+Sphinx-copybutton
+=================
+
+Sphinx-copybutton does one thing: add little "copy" button to the right
+of your code blocks. That's it!
+
+**Here's an example**
+
+.. image:: ../copybutton.gif
+
+And here's a code block, note the copy button to the right!
+
+.. code-block:: bash
+
+   copy me!
+
+Installation
+============
+
+You can install ``sphinx-copybutton`` with ``pip``:
+
+.. code-block:: bash
+
+   pip install sphinx-copybutton
+
+Usage
+=====
+
+In your ``conf.py`` configuration file, add ``sphinx_copybutton`` to your
+extensions list. E.g.:
+
+.. code-block:: python
+
+   extensions = [
+       ...
+       'sphinx_copybutton'
+       ...
+   ]
+
+When you build your site, your code blocks should now have little copy buttons to their
+right. Clicking the button will copy the code inside!

pyproject.toml

@@ -1,5 +1,5 @@
 [build-system]
-requires = ["flit"]
+requires = ["flit", "setuptools", "wheel"]
 build-backend = "flit.buildapi"
 
 [tool.flit.metadata]

sphinx_copybutton.py

@@ -3,9 +3,25 @@
 
 __version__ = "0.1.1"
 github_url = 'https://cdn.rawgit.com/choldgraf/sphinx-copybutton/master/_static/'
+fa_url = 'https://use.fontawesome.com/releases/v5.2.0/css/all.css'
+boot_css_url = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"
+boot_js_url = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"
+pop_js_url = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"
+
+def add_static_path(app):
+    static_path = os.path.abspath(os.path.join(os.path.dirname(__file__), '_static'))
+    app.config.html_static_path.append(static_path)
 
 def setup(app):
+    # Add our static path
+    app.connect('builder-inited', add_static_path)
+
     # Add relevant code to headers
-    app.add_stylesheet(github_url + 'copybutton.css')
-    app.add_javascript(github_url + "copybutton.js")
+    app.add_stylesheet('copybutton.css')
+    app.add_stylesheet(fa_url)
+    app.add_stylesheet(boot_css_url)
+
+    app.add_javascript("copybutton.js")
     app.add_javascript("https://cdn.jsdelivr.net/npm/clipboard@1/dist/clipboard.min.js")
+    app.add_javascript(pop_js_url)
+    app.add_javascript(boot_js_url)