https://path-to.org/js/newton2.js

1window.state = 69;
2// function is used for dragging and moving
3function dragElement(element, direction) {
4  var md; // remember mouse down info
5  const first = document.getElementById("first");
6  const second = document.getElementById("second");
7
8  element.onmousedown = onMouseDown;
9
10  function onMouseDown(e) {
11    //console.log("mouse down: " + e.clientX);
12    md = {
13      e,
14      offsetLeft: element.offsetLeft,
15      offsetTop: element.offsetTop,
16      firstWidth: first.offsetWidth,
17      secondWidth: second.offsetWidth
18    };
19    document.onmousemove = onMouseMove;
20    document.onmouseup = () => {
21      //console.log("mouse up");
22      self.viewer.viewport.goHome()
23      // const centerPoint = new OpenSeadragon.Point(2488,771);
24      //
25      // viewer.viewport.panTo(centerPoint)
26      document.onmousemove = document.onmouseup = null;
27    }
28  }
29
30  function onMouseMove(e) {
31    //console.log("mouse move: " + e.clientX);
32
33    if (direction === "H") // Horizontal
34    {
35      dx = e.clientX - 0.31 * document.body.clientWidth;
36      element.style.left = md.offsetLeft + dx + "px";
37      first.style.width = "calc(31% + " + dx + "px)";
38      second.style.width = "calc(69% - " + dx + "px)";
39      //self.viewer.viewport.goHome();
40      // second.style.width = "100%"
41      window.state = dx;
42    }
43  }
44}
45
46
47dragElement(document.getElementById("separator"), "H");
48
49function goHomeandResize() {
50  console.log(self.viewer.viewport.getZoom())
51  if (self.viewer.viewport.getZoom() <= 0.00125) {
52
53  }
54  else {
55    self.viewer.viewport.goHome();
56  }
57}
58window.onresize = goHomeandResize;
59
60
61var tileSource = {
62  Image: {
63    xmlns: "http://schemas.microsoft.com/deepzoom/2008",
64    Url: "img/newton/tiles/",
65    Format: "jpg",
66    Overlap: "0",
67    TileSize: "256",
68    Size: {
69      Height: "4286",
70      Width: "13827"
71    }
72  }
73};
74
75// var tileSource = {
76//   type: 'image',
77//   url:  '../img/newton/FinalVer.jpg',
78//   buildPyramid: true,
79//   crossOriginPolicy: 'Anonymous',
80//   ajaxWithCredentials: false
81// };
82
83var viewer = OpenSeadragon({
84  id: "contentDiv",
85  prefixUrl: "//openseadragon.github.io/openseadragon/images/",
86  zoomPerClick: 1.5,
87  zoomPerScroll: 1.09,
88  tileSources: [{
89    tileSource: tileSource,
90    width: 4978
91    //width:4286
92  }]
93
94});
95window.viewerBlah = viewer
96
97// viewer.zoomPerClick = 1
98var overlay = viewer.svgOverlay();
99
100//var path = "/Path%20to%20Newton/The%20Path%20to%20Newton-plain2.svg";
101var path = "./img/newton/FinalVer.svg";
102//var path = "/Path%20to%20Newton2/The%20Path%20to%20Newton.svg";
103function _loadSVG(path, callback) {
104  var xhr = new XMLHttpRequest();
105  xhr.onload = function (e) {
106    try {
107      if (xhr.readyState == 4 && xhr.status == 200) {
108        callback(xhr.responseXML.documentElement);
109      }
110    } catch (e) {
111      console.log(e);
112    }
113  };
114  xhr.open("GET", path, true);
115  xhr.overrideMimeType("text/xml");
116  xhr.responseType = "document";
117  xhr.send();
118}
119
120
121// document.window.resize(function() {
122//     overlay.resize();
123// });
124
125const processSVG = function (xmlDocumentElem) {
126  var g = xmlDocumentElem.getElementById("bubbles");
127  var eachA = xmlDocumentElem.querySelectorAll("#bubbles a")
128  //console.log(eachA)
129  overlay.node().appendChild(g);
130
131  const niceArrayOfCircles = Array.prototype.slice.call(g.querySelectorAll(".bubble"));
132  //console.log(niceArrayOfCircles);
133  niceArrayOfCircles.reverse();
134  //console.log(niceArrayOfCircles);
135
136  const tableOfValues = niceArrayOfCircles.map(function (n, i) {
137    return {
138      id: n.getAttribute("id"),
139      cx: n.getAttribute("cx"),
140      cy: n.getAttribute("cy")
141    }
142  });
143
144  //console.table(tableOfValues);
145
146  let n = 0;
147
148  window.timestopN = n;
149
150  window.timestop = window.setInterval(() => {
151    let theX = parseInt(tableOfValues[window.timestopN]["cx"], 10);
152    let theY = parseInt(tableOfValues[window.timestopN]["cy"], 10);
153    let thePoint = new OpenSeadragon.Point(theX, theY)
154    const centerPoint = new OpenSeadragon.Point(4977, 771);
155
156    viewer.viewport.panTo(thePoint)
157    viewer.viewport.zoomTo(0.00125)
158
159    window.timestopN = window.timestopN + 1;
160    console.log(window.timestopN);
161    if (window.timestopN == 36) {
162      window.timestopN = 0
163    }
164    console.log("beep" + thisPoint + window.timestopN, tableOfValues[window.timestopN]["id"], tableOfValues[window.timestopN]["cx"] + " " + tableOfValues[window.timestopN]["cy"])
165
166  }, 3000)
167
168  /* stops the tour */
169  clearInterval(window.timestop)
170
171
172  // overlay.onClick(g, function() {
173  //             console.log('click', arguments);
174  //             event.preventDefault();
175  //             event.stopPropagation();
176  //         });
177  window.eachA = eachA;
178  eachA.forEach(function (a) {
179
180    overlay.onClick(a, function () {
181      if (window.state === 100 || window.state === 0) {
182        helloworld(69)
183      }
184      const href = this.element.getAttribute("xlink:href")
185
186      console.log('click', arguments);

187      //follow the link here to the anchor that is found ing
188      setTimeout(function () { document.location.assign(href) }, 400)
189
190      // debugger
191      event.preventDefault();
192      event.stopPropagation();
193
194    });
195  });
196
197  const eachSvgLeftNav = document.querySelectorAll(".link_to_svg");
198  const eachLinkResizeNav = document.querySelectorAll(".link_resize");
199
200
201  const linkToSVGLeftNavClick = function (eventObject) {
202    //alert( "Handler for .click() called." );
203    const linkSvgid = this.dataset["svgid"];
204    const tableRow = tableOfValues.find(function (e) {
205      return e.id === linkSvgid;
206    });
207
208    if (tableRow === undefined) {
209      eventObject.preventDefault();
210      eventObject.stopPropagation();
211      return;
212    }
213    setTimeout(function () {
214
215      if (window.state === 100 || window.state === 0) {
216        helloworld(69)
217      }
218
219      setTimeout(function () {
220        let theX = parseInt(tableRow["cx"], 10);
221        let theY = parseInt(tableRow["cy"], 10);
222        let thePoint = new OpenSeadragon.Point(theX, theY)
223        const centerPoint = new OpenSeadragon.Point(4977, 771);
224
225        viewer.viewport.panTo(thePoint);
226        viewer.viewport.zoomTo(0.00125);
227      }, 400)
228      // console.log(this.dataset["svgid"])}
229    }, 400);
230
231    eventObject.preventDefault();
232    eventObject.stopPropagation();
233  };
234
235
236const linkResizeClick = function (e) {
237  var width = parseInt(e.target.dataset["width"], 10);
238  window.state = width;
239  console.log(width);
240  helloworld(width)
241};
242eachSvgLeftNav.forEach(a => a.addEventListener('click', linkToSVGLeftNavClick))
243eachLinkResizeNav.forEach(a => a.addEventListener('click', linkResizeClick))
244
245}
246
247function helloworld(value) {
248  console.log("Hello world");
249  var md; // remember mouse down info
250  var element = document.getElementById("separator");
251  const first = document.getElementById("first");
252  const second = document.getElementById("second");
253
254  //console.log("mouse down: " + e.clientX);
255  md = {
256    offsetLeft: element.offsetLeft,
257    offsetTop: element.offsetTop,
258    firstWidth: first.offsetWidth,
259    secondWidth: second.offsetWidth
260  };
261
262  // // prevent negative-sized elements
263  // delta.x = Math.min(Math.max(delta.x, -md.firstWidth),
264  //        md.secondWidth);
265
266  const delta = parseInt(value, 10);
267
268  // element.style.left = md.offsetLeft + delta + "px";
269  // first.style.width = (md.firstWidth) - delta + "px";
270  // second.style.width = (md.secondWidth)+ delta + "px";
271
272  element.style.left = delta + "%";
273  first.style.width = 100 - delta + "%";
274  second.style.width = delta + "%";
275
276  function timeOutGoHome() {
277    window.setTimeout(goHomeandResize, 200);
278  }
279  timeOutGoHome();
280
281  console.log(self.viewer.viewport.getZoom());
282
283}
284
285_loadSVG(path, processSVG);