From 6d8cde4e7e0154fc6477825ea7ee485ec6038801 Mon Sep 17 00:00:00 2001 From: Rasmus Nielsen Date: Wed, 12 Sep 2018 14:57:15 +0200 Subject: [PATCH 1/8] Create package.json --- package.json | 4 ++++ 1 file changed, 4 insertions(+) create mode 100644 package.json diff --git a/package.json b/package.json new file mode 100644 index 0000000..5b3228a --- /dev/null +++ b/package.json @@ -0,0 +1,4 @@ +{ + "name": "3D-Product-Viewer-JavaScript-Plugin", + "version": "1.0.0" +} From 27c962b147bcaa299c88b9edc920c70912a879a4 Mon Sep 17 00:00:00 2001 From: rasmniel Date: Thu, 13 Sep 2018 09:49:27 +0200 Subject: [PATCH 2/8] Added .gitignore --- .gitignore | 2 ++ 1 file changed, 2 insertions(+) create mode 100644 .gitignore diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..4befed3 --- /dev/null +++ b/.gitignore @@ -0,0 +1,2 @@ +.DS_Store +.idea From 66d442dc0c2900092e8f00a135f90c1f15ff2e87 Mon Sep 17 00:00:00 2001 From: rasmniel Date: Thu, 13 Sep 2018 09:50:00 +0200 Subject: [PATCH 3/8] Implementing init functionality... --- pdt360DegViewer.js | 44 ++++++++++++++++++++++++++++++++++++++++---- 1 file changed, 40 insertions(+), 4 deletions(-) diff --git a/pdt360DegViewer.js b/pdt360DegViewer.js index c5a483c..2a411e9 100644 --- a/pdt360DegViewer.js +++ b/pdt360DegViewer.js @@ -1,3 +1,25 @@ +function init360Viewer(o) { + // Some options are required for the viewer to work. + if (!o.id || !o.count || !o.path || !o.imgType) { + if (!o.id) + initError('id', 'Must specify the id of the wrapping element.'); + if (!o.count) + initError('count', 'Must specify amount of images to cycle.'); + if (!o.path) + initError('path', 'Must specify path to images.'); + if (!o.imgType) + initError('imgType', 'Must specify the extension of images.'); + // If any of the options are not satisfied, return. + return; + } + + pdt360DegViewer(o.id, o.count, o.path, o.imgType, false, false, true, true, true, true, true); +} + +function initError(prop, message) { + console.error('360Viewer encountered an error: Missing "' + prop + '" property. ' + message); +} + var call = 0; function pdt360DegViewer(id, n, p, t, playable, autoPlay, draggable, mouseMove, buttons, keys, scroll) { @@ -9,12 +31,20 @@ function pdt360DegViewer(id, n, p, t, playable, autoPlay, draggable, mouseMove, mainDiv.className = 'viewer'; mainDiv.innerHTML += ``; mainDiv.innerHTML += - '
' + '
' - if (call == 1) + if (call == 1) { + // Get or add a dummy element. + var dummy = document.getElementById('dummy'); + if (!dummy) { + dummy = document.createElement('div'); + dummy.id = 'dummy'; + mainDiv.parentNode.appendChild(dummy); + } for (var k = 1; k <= n; k++) { - document.getElementById('dummy').innerHTML += ``; + dummy.innerHTML += ``; } + } var img = document.querySelector(`#${id} .${id}`); @@ -37,6 +67,7 @@ function pdt360DegViewer(id, n, p, t, playable, autoPlay, draggable, mouseMove, move = []; }); } + //For Non-Touch Devices function nonTouch() { touch = false; @@ -65,6 +96,7 @@ function pdt360DegViewer(id, n, p, t, playable, autoPlay, draggable, mouseMove, move = []; }); } + if (scroll) { img.addEventListener('wheel', function (e) { e.preventDefault(); @@ -82,6 +114,7 @@ function pdt360DegViewer(id, n, p, t, playable, autoPlay, draggable, mouseMove, }; } } + function logic(el, e) { j++; var x = touch ? e.touches[0].clientX : e.clientX; @@ -99,6 +132,7 @@ function pdt360DegViewer(id, n, p, t, playable, autoPlay, draggable, mouseMove, prev(el); } } + if (buttons) { var btnsDiv = document.createElement('div'); btnsDiv.className = 'btnDiv navDiv'; @@ -232,6 +266,7 @@ function pdt360DegViewer(id, n, p, t, playable, autoPlay, draggable, mouseMove, } else e.src = `${p}${--i}.${t}`; } + function nxt(e) { if (i >= n) { i = 1; @@ -240,8 +275,9 @@ function pdt360DegViewer(id, n, p, t, playable, autoPlay, draggable, mouseMove, } else e.src = `${p}${++i}.${t}`; } + function loaderNone(id) { - window.addEventListener('load',function(){ + window.addEventListener('load', function () { document.querySelector(`#${id} .loader`).style.display = 'none'; if (autoPlay) { pause = false; From 593a810f8438e31afa800f95b5896a575b6946f9 Mon Sep 17 00:00:00 2001 From: rasmniel Date: Thu, 13 Sep 2018 10:18:29 +0200 Subject: [PATCH 4/8] Implemented init function, which takes an 'options' object with named properties. --- pdt360DegViewer.js | 26 ++++++++++++++++++++++++-- 1 file changed, 24 insertions(+), 2 deletions(-) diff --git a/pdt360DegViewer.js b/pdt360DegViewer.js index 2a411e9..89aa779 100644 --- a/pdt360DegViewer.js +++ b/pdt360DegViewer.js @@ -13,7 +13,27 @@ function init360Viewer(o) { return; } - pdt360DegViewer(o.id, o.count, o.path, o.imgType, false, false, true, true, true, true, true); + // Consolidate aliases. + o.draggable = o.draggable || o.drag; + o.autoPlay = o.autoPlay || o.autoplay; + o.buttons = o.buttons || o.buttonNavigation; + o.keys = o.keys || o.keyNavigation; + o.scroll = o.scroll || o.scrollNavigation; + + // Initialize viewer. + pdt360DegViewer( + o.id, + o.count, + o.path, + o.imgType, + o.playable, + o.autoPlay, + o.draggable, + o.mouseMove, + o.buttons, + o.keys, + o.scroll + ); } function initError(prop, message) { @@ -34,11 +54,12 @@ function pdt360DegViewer(id, n, p, t, playable, autoPlay, draggable, mouseMove, '
' if (call == 1) { - // Get or add a dummy element. + // Get dummy element or add a one if none exist. var dummy = document.getElementById('dummy'); if (!dummy) { dummy = document.createElement('div'); dummy.id = 'dummy'; + dummy.style.cssText = 'display: none;'; mainDiv.parentNode.appendChild(dummy); } for (var k = 1; k <= n; k++) { @@ -88,6 +109,7 @@ function pdt360DegViewer(id, n, p, t, playable, autoPlay, draggable, mouseMove, drag = true; mouseEvent(); } + function mouseEvent() { img.addEventListener('mousemove', function (e) { (drag) ? logic(this, e) : null; From a739b81ace56146b95262b8070af4654fc54f3f9 Mon Sep 17 00:00:00 2001 From: rasmniel Date: Thu, 13 Sep 2018 15:10:10 +0200 Subject: [PATCH 5/8] D --- pdt360DegViewer.js | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/pdt360DegViewer.js b/pdt360DegViewer.js index 89aa779..a0e9d2f 100644 --- a/pdt360DegViewer.js +++ b/pdt360DegViewer.js @@ -1,4 +1,5 @@ -function init360Viewer(o) { +function init360Viewer(options) { + var o = options; // Some options are required for the viewer to work. if (!o.id || !o.count || !o.path || !o.imgType) { if (!o.id) @@ -54,7 +55,7 @@ function pdt360DegViewer(id, n, p, t, playable, autoPlay, draggable, mouseMove, '
' if (call == 1) { - // Get dummy element or add a one if none exist. + // Get dummy element or add one if none exist. var dummy = document.getElementById('dummy'); if (!dummy) { dummy = document.createElement('div'); From 7a4e38e7774dcf68e06e9cdcb5ed3ceb332c7f92 Mon Sep 17 00:00:00 2001 From: rasmniel Date: Fri, 14 Sep 2018 08:36:29 +0200 Subject: [PATCH 6/8] Outcommented console.log --- pdt360DegViewer.js | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/pdt360DegViewer.js b/pdt360DegViewer.js index a0e9d2f..81538c8 100644 --- a/pdt360DegViewer.js +++ b/pdt360DegViewer.js @@ -44,15 +44,14 @@ function initError(prop, message) { var call = 0; function pdt360DegViewer(id, n, p, t, playable, autoPlay, draggable, mouseMove, buttons, keys, scroll) { - console.log(`${call}-${id}-${playable ? 'playable ' : ''}${autoPlay ? 'autoPlay ' : ''}${draggable ? 'draggable ' : ''}${mouseMove ? 'mouseMove ' : ''}${buttons ? 'buttons ' : ''}${keys ? 'keys' : ''}${scroll ? 'scroll ' : ''}`); + // console.log(`${call}-${id}-${playable ? 'playable ' : ''}${autoPlay ? 'autoPlay ' : ''}${draggable ? 'draggable ' : ''}${mouseMove ? 'mouseMove ' : ''}${buttons ? 'buttons ' : ''}${keys ? 'keys' : ''}${scroll ? 'scroll ' : ''}`); call++; loaderNone(id); var i = 1, j = 0, move = [], mainDiv = document.querySelector(`#${id}`); mainDiv.className = 'viewer'; mainDiv.innerHTML += ``; - mainDiv.innerHTML += - '
' + mainDiv.innerHTML += '
'; if (call == 1) { // Get dummy element or add one if none exist. From c3bf0372c49b1ae716750d336de7fffebe2810bb Mon Sep 17 00:00:00 2001 From: rasmniel Date: Fri, 14 Sep 2018 09:03:16 +0200 Subject: [PATCH 7/8] Substituted template strings for browser compatibility --- pdt360DegViewer.js | 46 +++++++++++++++++++++++++++++++++++----------- 1 file changed, 35 insertions(+), 11 deletions(-) diff --git a/pdt360DegViewer.js b/pdt360DegViewer.js index 81538c8..1e00aca 100644 --- a/pdt360DegViewer.js +++ b/pdt360DegViewer.js @@ -44,13 +44,32 @@ function initError(prop, message) { var call = 0; function pdt360DegViewer(id, n, p, t, playable, autoPlay, draggable, mouseMove, buttons, keys, scroll) { - // console.log(`${call}-${id}-${playable ? 'playable ' : ''}${autoPlay ? 'autoPlay ' : ''}${draggable ? 'draggable ' : ''}${mouseMove ? 'mouseMove ' : ''}${buttons ? 'buttons ' : ''}${keys ? 'keys' : ''}${scroll ? 'scroll ' : ''}`); + var options = [ + call + ' ' + id, + (playable ? 'playable' : ''), + (autoPlay ? 'autoPlay' : ''), + (draggable ? 'draggable' : ''), + (mouseMove ? 'mouseMove' : ''), + (buttons ? 'buttons' : ''), + (keys ? 'keys' : ''), + (scroll ? 'scroll' : '') + ]; + console.log(options.join(' ').replace(/\s+/g, ' ')); + call++; loaderNone(id); var i = 1, j = 0, move = [], - mainDiv = document.querySelector(`#${id}`); + mainDiv = document.querySelector('#' + id); mainDiv.className = 'viewer'; - mainDiv.innerHTML += ``; + mainDiv.innerHTML += ''; mainDiv.innerHTML += '
'; if (call == 1) { @@ -63,11 +82,11 @@ function pdt360DegViewer(id, n, p, t, playable, autoPlay, draggable, mouseMove, mainDiv.parentNode.appendChild(dummy); } for (var k = 1; k <= n; k++) { - dummy.innerHTML += ``; + dummy.innerHTML += ''; } } - var img = document.querySelector(`#${id} .${id}`); + var img = document.querySelector('#' + id + ' .' + id); if (!playable && !autoPlay) { var touch = false; @@ -215,7 +234,8 @@ function pdt360DegViewer(id, n, p, t, playable, autoPlay, draggable, mouseMove, speed = 50; right = true; left = false; - this.parentNode.parentNode.querySelector('img').src = `${p}${i = 1}.${t}`; + i = 1; + this.parentNode.parentNode.querySelector('img').src = src(p, i, t); }); var leftBtn = document.createElement('button'); @@ -283,24 +303,24 @@ function pdt360DegViewer(id, n, p, t, playable, autoPlay, draggable, mouseMove, function prev(e) { if (i <= 1) { i = n; - e.src = `${p}${--i}.${t}`; + e.src = src(p, --i, t); nxt(e); } else - e.src = `${p}${--i}.${t}`; + e.src = src(p, --i, t); } function nxt(e) { if (i >= n) { i = 1; - e.src = `${p}${++i}.${t}`; + e.src = src(p, ++i, t); prev(e); } else - e.src = `${p}${++i}.${t}`; + e.src = src(p, ++i, t); } function loaderNone(id) { window.addEventListener('load', function () { - document.querySelector(`#${id} .loader`).style.display = 'none'; + document.querySelector('#' + id + ' .loader').style.display = 'none'; if (autoPlay) { pause = false; play(); @@ -308,3 +328,7 @@ function pdt360DegViewer(id, n, p, t, playable, autoPlay, draggable, mouseMove, }); } } + +function src(path, i, type) { + return path + i + '.' + type; +} \ No newline at end of file From 5606b72d755908d8b271da2d8a60eb6099b89eca Mon Sep 17 00:00:00 2001 From: rasmniel Date: Fri, 14 Sep 2018 09:16:26 +0200 Subject: [PATCH 8/8] Changed all template strings into regular strings for IE compatibility. --- package.json | 2 +- pdt360DegViewer.js | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/package.json b/package.json index 5b3228a..4f86390 100644 --- a/package.json +++ b/package.json @@ -1,4 +1,4 @@ { "name": "3D-Product-Viewer-JavaScript-Plugin", - "version": "1.0.0" + "version": "1.0.1" } diff --git a/pdt360DegViewer.js b/pdt360DegViewer.js index 1e00aca..df72a2a 100644 --- a/pdt360DegViewer.js +++ b/pdt360DegViewer.js @@ -44,7 +44,7 @@ function initError(prop, message) { var call = 0; function pdt360DegViewer(id, n, p, t, playable, autoPlay, draggable, mouseMove, buttons, keys, scroll) { - var options = [ + var state = [ call + ' ' + id, (playable ? 'playable' : ''), (autoPlay ? 'autoPlay' : ''), @@ -54,7 +54,7 @@ function pdt360DegViewer(id, n, p, t, playable, autoPlay, draggable, mouseMove, (keys ? 'keys' : ''), (scroll ? 'scroll' : '') ]; - console.log(options.join(' ').replace(/\s+/g, ' ')); + console.log(state.join(' ').replace(/\s+/g, ' ')); call++; loaderNone(id);