Merge pull request #190 from readthedocs/humitos/placement-bottom

Use `data-ea-placement-bottom` to set CSS `bottom` property
readthedocs · May 2, 2024 · a3d8bd9 · a3d8bd9
2 parents a1efd36 + 0430c0d
commit a3d8bd9
Show file tree

Hide file tree

Showing 7 changed files with 22 additions and 7 deletions.
diff --git a/dist/ethicalads.js b/dist/ethicalads.js
diff --git a/dist/ethicalads.min.js b/dist/ethicalads.min.js
diff --git a/docs/Makefile b/docs/Makefile
@@ -2,7 +2,7 @@
 #
 
 # You can set these variables from the command line.
-SPHINXOPTS    =
+SPHINXOPTS    = -W
 SPHINXBUILD   = sphinx-build
 SOURCEDIR     = .
 BUILDDIR      = _build
@@ -16,4 +16,4 @@ help:
 # 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)
+	@$(SPHINXBUILD) -M $@ "$(SOURCEDIR)" "$(BUILDDIR)" $(SPHINXOPTS) $(O)
diff --git a/docs/conf.py b/docs/conf.py
@@ -22,6 +22,7 @@
 
 extensions = [
     'sphinx_rtd_theme',
+    'sphinx.ext.autosectionlabel',
 ]
 
 templates_path = ['_templates']

diff --git a/docs/index.rst b/docs/index.rst
@@ -36,7 +36,6 @@ Ad client playground
 
 You can play around with an example placement in our `ethical ad client playground <https://jsbin.com/roniviv/edit?html,output>`_ on JSBin.
 
-.. _configuration:
 
 Configuration
 -------------
@@ -54,6 +53,9 @@ The following data attributes are supported on the ad placement element:
     A placement identifier. If you define an ``id`` and :ref:`enable placements reporting <placements>`,
     this will allow you to see reports for each ``id``.
 
+``data-ea-style`` (optional)
+    Use a custom :ref:`placement style <placement-styles>`.
+
 ``data-ea-keywords`` (optional)
     A pipe (``|``) separated array of keywords for this ad placement.
     This is page-specific (not publisher-specific) keywords related to where the ad is shown.
@@ -76,6 +78,10 @@ The following data attributes are supported on the ad placement element:
     This parameter can be used to test the ad client on a specific campaign (group of ads).
     When used, any impressions will not be counted for billing purposes.
 
+``data-ea-placement-bottom`` (optional)
+    Set to a valid value for the CSS bottom property (eg. '40px') to have a custom position.
+    This must be used with ``data-ea-style`` to have any effect.
+
 
 Themes
 ------

diff --git a/index.js b/index.js
@@ -27,7 +27,7 @@ import verge from "verge";
 
 import "./styles.scss";
 
-const AD_CLIENT_VERSION = "1.13.0"; // Sent with the ad request
+const AD_CLIENT_VERSION = "1.14.0-alpha"; // Sent with the ad request
 
 // For local testing, set this
 // const AD_DECISION_URL = "http://ethicaladserver:5000/api/v1/decision/";
@@ -488,6 +488,14 @@ export class Placement {
       return null;
     }
 
+    // Note: this attribute value *must* contain a unit (eg. '200px')
+    const placementBottom = element.getAttribute(
+      ATTR_PREFIX + "placement-bottom"
+    );
+    if (placementBottom) {
+      element.style.setProperty("bottom", placementBottom);
+    }
+
     return new Placement(publisher, ad_type, element, {
       keywords: keywords,
       style: style,

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "ethical-ad-client",
-  "version": "1.13.0",
+  "version": "1.14.0-alpha",
   "description": "EthicalAds client",
   "main": "dist/client.js",
   "scripts": {