Docdiff: initial work to toggle enabled/disabled (#63)

![Peek 2023-04-25 16-43](https://user-images.githubusercontent.com/244656/234422680-79c4562a-f2d0-475d-b8a7-a76757ef514b.gif) Closes #62 Closes #23 Closes #11
readthedocs · Aug 31, 2023 · 32a0449 · 32a0449
1 parent 3c17f4f
commit 32a0449
Show file tree

Hide file tree

Showing 11 changed files with 356 additions and 24 deletions.
diff --git a/dist/readthedocs-addons.js b/dist/readthedocs-addons.js
diff --git a/dist/readthedocs-addons.js.map b/dist/readthedocs-addons.js.map
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -22,7 +22,6 @@
     "babel-jest": "^29.5.0",
     "babel-loader": "^9.1.2",
     "css-loader": "^6.7.3",
-    "doc-diff": "github:readthedocs/doc-diff#humitos/nodejs-version",
     "ethical-ad-client": "github:readthedocs/ethical-ad-client#humitos/node-sass",
     "express-interceptor": "^1.2.0",
     "jest": "^29.5.0",
@@ -33,6 +32,8 @@
     "prettier": "^2.8.4",
     "semver": "^7.3.8",
     "tippy.js": "^6.3.7",
+    "tslib": "^2.4.0",
+    "visual-dom-diff": "^0.7.2",
     "webpack": "^5.76.1",
     "webpack-cli": "^5.0.1",
     "webpack-dev-server": "^4.11.1"

diff --git a/public/docdiff.changed.html b/public/docdiff.changed.html
@@ -0,0 +1,17 @@
+<html>
+    <head>
+        <title>DocDiff Addons - Read the Docs</title>
+    </head>
+    <body>
+        <div id="main">
+            <h1>DocDiff Changed</h1>
+            <p>This is a great feature for external versions previews.</p>
+            <p>Paragraph deleted</p>
+        </div>
+
+        <readthedocs-docdiff
+            base-url="http://localhost:8000/docdiff.changed.html"
+            root-selector="#main"
+        ></readthedocs-docdiff>
+    </body>
+</html>
diff --git a/public/docdiff.html b/public/docdiff.html
@@ -0,0 +1,17 @@
+<html>
+  <head>
+    <title>DocDiff Addons - Read the Docs</title>
+  </head>
+  <body>
+      <div id="main">
+          <h1>DocDiff Addons</h1>
+          <p>This is a great feature for pull request previews.</p>
+      </div>
+
+      <readthedocs-docdiff
+          base-url="http://localhost:8000/docdiff.changed.html"
+          root-selector="#main"
+          inject-styles="true"
+      ></readthedocs-docdiff>
+  </body>
+</html>
diff --git a/public/index.html b/public/index.html
@@ -16,6 +16,10 @@ <h1>Documentation Addons</h1>
       <li><a href="/pelican">Pelican</a></li>
     </ul>
 
+    <h2>DocDiff</h2>
+
+    <p>Visit <a href="docdiff.html">this page</a> to take a look at it.</p>
+
     <h2>Search</h2>
 
     <p>Nothing to see here, just a placeholder to put the <code>readthedocs-search</code> tag.</p>

diff --git a/src/docdiff.css b/src/docdiff.css
@@ -0,0 +1,65 @@
+/* Example copied from */
+/* https://www.w3schools.com/howto/howto_css_switch.asp */
+
+/* The switch - the box around the slider */
+:host .switch {
+  position: relative;
+  display: inline-block;
+  width: 60px;
+  height: 34px;
+}
+
+/* Hide default HTML checkbox */
+:host .switch input {
+  opacity: 0;
+  width: 0;
+  height: 0;
+}
+
+/* The slider */
+:host .slider {
+  position: absolute;
+  cursor: pointer;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: #ccc;
+  -webkit-transition: 0.4s;
+  transition: 0.4s;
+}
+
+:host .slider:before {
+  position: absolute;
+  content: "";
+  height: 26px;
+  width: 26px;
+  left: 4px;
+  bottom: 4px;
+  background-color: white;
+  -webkit-transition: 0.4s;
+  transition: 0.4s;
+}
+
+:host input:checked + .slider {
+  background-color: #2196f3;
+}
+
+:host input:focus + .slider {
+  box-shadow: 0 0 1px #2196f3;
+}
+
+:host input:checked + .slider:before {
+  -webkit-transform: translateX(26px);
+  -ms-transform: translateX(26px);
+  transform: translateX(26px);
+}
+
+/* Rounded sliders */
+:host .slider.round {
+  border-radius: 34px;
+}
+
+:host .slider.round:before {
+  border-radius: 50%;
+}
diff --git a/src/docdiff.document.css b/src/docdiff.document.css
@@ -0,0 +1,12 @@
+.doc-diff-added {
+  background-color: rgb(171, 242, 188);
+  text-decoration: none;
+}
+
+.doc-diff-modified {
+}
+
+.doc-diff-removed {
+  background-color: rgba(255, 129, 130, 0.4);
+  text-decoration: none;
+}