diff --git a/infoLoader.js b/infoLoader.js
index f8fb2e3..5ad044e 100644
--- a/infoLoader.js
+++ b/infoLoader.js
@@ -1,98 +1,90 @@
-document.querySelectorAll('.hover-group').forEach((group) => {
- group.addEventListener('mouseover', function () {
- //this.querySelector('.info-text').setAttribute('visibility', 'visible');
- });
- group.addEventListener('mouseout', function () {
- // this.querySelector('.info-text').setAttribute('visibility', 'hidden');
- });
-});
+// infoLoader.js
-document.querySelector('#North-Studio').addEventListener('click', function () {
- document.querySelector('#info-title').innerHTML = `Faculty List`;
- document.querySelector('#info-content').innerHTML = `Greg Shakar
- John Henry Thompson
- Sarah Rothberg
- Sharon De La Cruz
- Blair Simmons
-
- Katherine Dillon
- Dan O'Sullivan
- Daniel Shiffman
- Pedro Oliveira
- MK Skitka
-
- Dave Stein
- Armon Naeini
- Shuang Cai
- Oscar Durand
- Caren Ye
`;
-});
+document.addEventListener('DOMContentLoaded', function() {
+ const infoTitle = document.querySelector('#info-title');
+ const infoContent = document.querySelector('#info-content');
-document.querySelector('#South-Studio').addEventListener('click', function () {
- document.querySelector('#info-title').innerHTML = `Faculty List`;
- document.querySelector('#info-content').innerHTML = `Ali Santana
- Marianne Petit
- David Rios
- Yeseul Song
- Tom Igoe
- Mimi Yin
- Daniel Rozin
- Maya Williams
- Gracy Whelihan
- Tuan Huang
- Zoe Cohen
- Suraj Barthy
- Bianca Gan
- Michelle Binyan Xu
- Isaiah Bayas
`;
-});
+ const infoData = {
+ 'North-Studio': {
+ title: 'Faculty List',
+ content: `Greg Shakar
+ John Henry Thompson
+ Sarah Rothberg
+ Sharon De La Cruz
+ Blair Simmons
+ Katherine Dillon
+ Dan O'Sullivan
+ Daniel Shiffman
+ Pedro Oliveira
+ MK Skitka
+ Dave Stein
+ Armon Naeini
+ Shuang Cai
+ Oscar Durand
+ Caren Ye
`
+ },
+ 'South-Studio': {
+ title: 'Faculty List',
+ content: `Ali Santana
+ Marianne Petit
+ David Rios
+ Yeseul Song
+ Tom Igoe
+ Mimi Yin
+ Daniel Rozin
+ Maya Williams
+ Gracy Whelihan
+ Tuan Huang
+ Zoe Cohen
+ Suraj Barthy
+ Bianca Gan
+ Michelle Binyan Xu
+ Isaiah Bayas
`
+ },
+ 'DocLab': {
+ title: 'Doc Lab',
+ content: `The Documentation Lab is a fully stocked, student-run client service for ITP/IMA student. Our team of mentors are available by appointment to help you present your project in the best possible light.
+ If you're interested in documenting your project, please take a few minutes and fill out our Doc Lab Intake Form.
+ Once you've submitted the requested information you'll receive an automated reply with more information on how to book an appointment.
`
+ },
+ 'HyperLab': {
+ title: 'Hyper Lab',
+ content: `The Hyper Lab is a set of small spaces and computers that can be reserved for XR experimentation, project development which requires significant GPU-usage, and trying out VR experiences. The Hyper Lab is made up of four spaces, each with their own usage, equipment, reservation links, and community expectations. They include a Standing and sitting VR lab as well as a Develop and rendering labs.`
+ },
+ 'ER': {
+ title: 'The ER',
+ content: `The Equipment Room is stocked with laptops, photography equipment, and an assortment of cables for all needs. This includes but is not limited to, HDMI, USB converters, Apple and Windows chargers. This is all on a checkout basis through staff working at the ER.`
+ },
+ 'CodingLab': {
+ title: 'Coding Lab',
+ content: `The Coding Lab is a student-run help desk where NYU students can get help with their code. The students in the lab have experience with software such as HTML, CSS, Javascript, C++ and Python. It also uses software like Unreal, Unity and Blender`
+ },
+ 'Shop': {
+ title: 'The Shop',
+ content: `The shop is equipped with 3 Ultimaker S3 3D printers, 2 Epilog Mini laser cutters, as well as one Epilog Pro. There is also a full wood fabrication shop with machines such as 4 Axis CNCs and Bandsaws. As well as a soft lab for sewing and embroidery, and a soldering area.`
+ },
+ 'DesignLab': {
+ title: 'Design Lab',
+ content: `The Design Lab is a student and resident-run organization at ITP/IMA where students can get help with all design-related needs, including traditional graphic design and related practices (UX/UI, product design), as well as fabrication (including vinyl and UV printing services), and project development. Design Lab staff's primary focus is to support students through 1:1 help in office hours, or in groups by leading workshops on basic design software tools, such as Photoshop, Illustrator, InDesign, and Figma, as well as other relevant tools and processes.`
+ }
+ };
-document.querySelector('#DocLab').addEventListener('click', function () {
- document.querySelector('#info-title').innerHTML = `Doc Lab`;
- document.querySelector(
- '#info-content'
- ).innerHTML = `The Documentation Lab is a fully stocked, student-run client service for ITP/IMA student. Our team of mentors are available by appointment to help you present your project in the best possible light.
+ function updateInfo(infoKey) {
+ const info = infoData[infoKey];
+ if (info) {
+ infoTitle.innerHTML = info.title;
+ infoContent.innerHTML = info.content;
+ }
+ }
- If you’re interested in documenting your project, please take a few minutes and fill out our Doc Lab Intake Form.
-
- Once you’ve submitted the requested information you’ll receive an automated reply with more information on how to book an appointment.
`;
-});
+ // Export the updateInfo function so it can be called from script.js
+ window.updateInfo = updateInfo;
-document.querySelector('#HyperLab').addEventListener('click', function () {
- document.querySelector('#info-title').innerHTML = `Hyper Lab`;
- document.querySelector(
- '#info-content'
- ).innerHTML = `The Hyper Lab is a set of small spaces and computers that can be reserved for XR experimentation, project development which requires significant GPU-usage, and trying out VR experiences. The Hyper Lab is made up of four spaces, each with their own usage, equipment, reservation links, and community expectations. They include a Standing and sitting VR lab as well as a Develop and rendering labs.`;
-});
-
-document.querySelector('#ER').addEventListener('click', function () {
- document.querySelector('#info-title').innerHTML = `The ER`;
- document.querySelector(
- '#info-content'
- ).innerHTML = `The Equipment Room is stocked with laptops, photography equipment, and an assortment of cables for all needs. This includes but is not limited to, HDMI, USB converters, Apple and Windows chargers. This is all on a checkout basis through staff working at the ER.`;
-});
-
-document.querySelector('#CodingLab').addEventListener('click', function () {
- document.querySelector('#info-title').innerHTML = `Coding Lab`;
- document.querySelector(
- '#info-content'
- ).innerHTML = `The Coding Lab is a student-run help desk where NYU students can get help with their code. The students in the lab have experience with software such as HTML, CSS, Javascript, C++ and Python. It also uses software like Unreal, Unity and Blender`;
-});
-
-document.querySelector('#Shop').addEventListener('click', function () {
- document.querySelector('#info-title').innerHTML = `The Shop`;
- document.querySelector(
- '#info-content'
- ).innerHTML = `The shop is equipped with 3 Ultimaker S3 3D printers, 2 Epilog Mini laser cutters, as well as one Epilog Pro. There is also a full wood fabrication shop with machines such as 4 Axis CNCs and Bandsaws. As well as a soft lab for sewing and embroidery, and a soldering area.
-
- `;
-});
-
-document.querySelector('#DesignLab').addEventListener('click', function () {
- document.querySelector('#info-title').innerHTML = `Design Lab`;
- document.querySelector(
- '#info-content'
- ).innerHTML = `The Design Lab is a student and resident-run organization at ITP/IMA where students can get help with all design-related needs, including traditional graphic design and related practices (UX/UI, product design), as well as fabrication (including vinyl and UV printing services), and project development. Design Lab staff’s primary focus is to support students through 1:1 help in office hours, or in groups by leading workshops on basic design software tools, such as Photoshop, Illustrator, InDesign, and Figma, as well as other relevant tools and processes.
-
- `;
+ // Add click listeners to all hover-group elements
+ document.querySelectorAll('.hover-group').forEach(element => {
+ element.addEventListener('click', function(e) {
+ const infoKey = this.id;
+ updateInfo(infoKey);
+ });
+ });
});
\ No newline at end of file
diff --git a/style.css b/style.css
index 2cd0ad2..78c9d98 100644
--- a/style.css
+++ b/style.css
@@ -12,8 +12,7 @@ body {
}
main {
- min-height: 100vh;
- padding: 1rem;
+ max-height: 100vh;
}
#layout-container {
diff --git a/zoomSVG.js b/zoomSVG.js
index d13c9be..aa9b6c0 100644
--- a/zoomSVG.js
+++ b/zoomSVG.js
@@ -1,3 +1,5 @@
+// script.js
+
let currentZoom = 1;
const zoomStep = 0.1;
const maxZoom = 5;
@@ -6,6 +8,8 @@ let isDragging = false;
let startX, startY, translateX = 0, translateY = 0;
let lastTap = 0;
let pinchStartDistance = 0;
+let dragStartTime = 0;
+const clickThreshold = 200; // milliseconds
function setupZoomPanControls() {
const svgContainer = document.getElementById('svg-container');
@@ -42,7 +46,7 @@ function setupZoomPanControls() {
svg.addEventListener('dragstart', (e) => e.preventDefault());
function preventDefaultTouch(e) {
- if (!e.target.closest('.zoom-button') && !e.target.closest('.hover-group') && !e.target.closest('#info-container')) {
+ if (!e.target.closest('.zoom-button') && !e.target.closest('#info-container')) {
e.preventDefault();
}
}
@@ -82,33 +86,47 @@ function setupZoomPanControls() {
function handleTouchEnd(e) {
if (e.target.closest('#info-container')) return;
preventDefaultTouch(e);
- if (e.touches.length === 0) {
- endDrag();
- }
+ endDrag(e);
}
function startDrag(e) {
- if (e.target.closest('.zoom-button') || e.target.closest('.hover-group') || e.target.closest('#info-container')) return;
+ if (e.target.closest('.zoom-button') || e.target.closest('#info-container')) return;
isDragging = true;
startX = e.clientX || e.touches[0].clientX;
startY = e.clientY || e.touches[0].clientY;
+ dragStartTime = new Date().getTime();
svg.style.cursor = 'grabbing';
}
function drag(e) {
- if (!isDragging || e.target.closest('#info-container')) return;
- const x = e.clientX || e.touches[0].clientX;
- const y = e.clientY || e.touches[0].clientY;
- const dx = (x - startX) / currentZoom;
- const dy = (y - startY) / currentZoom;
- translateX += dx;
- translateY += dy;
- startX = x;
- startY = y;
- updateSvgTransform();
+ if (!isDragging) return;
+ const currentTime = new Date().getTime();
+ const dragDuration = currentTime - dragStartTime;
+
+ if (dragDuration > clickThreshold) {
+ const x = e.clientX || e.touches[0].clientX;
+ const y = e.clientY || e.touches[0].clientY;
+ const dx = (x - startX) / currentZoom;
+ const dy = (y - startY) / currentZoom;
+ translateX += dx;
+ translateY += dy;
+ startX = x;
+ startY = y;
+ updateSvgTransform();
+ }
}
- function endDrag() {
+ function endDrag(e) {
+ if (isDragging) {
+ const dragDuration = new Date().getTime() - dragStartTime;
+ if (dragDuration <= clickThreshold) {
+ // This was a click, not a drag
+ const clickedElement = e.target.closest('.hover-group');
+ if (clickedElement && window.updateInfo) {
+ window.updateInfo(clickedElement.id);
+ }
+ }
+ }
isDragging = false;
svg.style.cursor = 'grab';
}