Widget:Carousel - Revision history

Ajhg at 21:43, 20 March 2025

2025-03-20T21:43:57Z

2025-03-20T12:00:22Z

2025-03-20T11:59:24Z

← Older revision		Revision as of 11:59, 20 March 2025
Line 117:		Line 117:
	let totalItems = $carouselItems.length;		let totalItems = $carouselItems.length;

			$(".carousel-container .loadSpinner").hide();
	$carouselItems.hide().eq(currentIndex).show();		$carouselItems.hide().eq(currentIndex).show();

Line 191:		Line 192:
	box-sizing: border-box;		box-sizing: border-box;
	text-align: center;		text-align: center;
			visibility: hidden;
	}		}

Line 245:		Line 247:
	</style>		</style>
	<div class="carousel-container">		<div class="carousel-container">
			<div class="loadSpinner"></div>
	<button class="carousel-prev"> ◀︎ </button>		<button class="carousel-prev"> ◀︎ </button>
	<button class="carousel-next"> ▶︎︎ </button>		<button class="carousel-next"> ▶︎︎ </button>
	</div>		</div>

2025-03-18T03:47:13Z

← Older revision		Revision as of 03:47, 18 March 2025
Line 227:		Line 227:
	justify-content: center;		justify-content: center;
	z-index: 20;		z-index: 20;
	box-shadow: 2px 2px ~~5px~~ 2px rgba(0,0,0,.25),~~0px 0px 5px~~ 2px rgba(0,0,0,.25) ~~inset~~;		box-shadow: 2px 2px 2px rgba(0,0,0,.25),-2px -2px 2px 2px rgba(255,255,255,.25);
	}		}

2025-03-18T03:40:02Z

← Older revision		Revision as of 03:40, 18 March 2025
Line 12:		Line 12:
	mw.loader.using(['mediawiki.api', 'jquery']).then(()=>{		mw.loader.using(['mediawiki.api', 'jquery']).then(()=>{
	// Make the API query to fetch pages for carousel		// Make the API query to fetch pages for carousel
	var category = "~~SimpleProjects~~";		var category = "<!--{$category\|escape:'url'}-->";
	var carouselData = [];		var carouselData = [];

2025-03-18T03:32:00Z

← Older revision		Revision as of 03:32, 18 March 2025
Line 179:		Line 179:
	box-shadow: 5px 5px 5px rgba(0,0,0,0.125) inset, -5px -5px 5px 0px rgba(255,255,255,0.5) inset;		box-shadow: 5px 5px 5px rgba(0,0,0,0.125) inset, -5px -5px 5px 0px rgba(255,255,255,0.5) inset;
	border-radius: 1em;		border-radius: 1em;
			height: 400px;
	}		}

2025-03-18T03:29:11Z

← Older revision		Revision as of 03:29, 18 March 2025
Line 80:		Line 80:
	Promise.all(requests).then(function () {		Promise.all(requests).then(function () {
	// Call the function to display carousel		// Call the function to display carousel
	displayCarousel(carouselData);		//displayCarousel(carouselData);
	//console.log(carouselData);		//console.log(carouselData);
			initializeCarousel();
	});		});
	});		});

2025-03-18T03:26:59Z

← Older revision		Revision as of 03:26, 18 March 2025
Line 1:		Line 1:
	<script>		<script>
	function addItem(url,image,title){		function addItem(url,image,title){
	let item = µ('+div',µ('.carousel-container'));		let item = µ('+div',µ('.carousel-container')[0]);
	item.className = 'carousel-item';		item.className = 'carousel-item';
	item.innerHTML = `<a href="${url}">		item.innerHTML = `<a href="${url}">

2025-03-18T03:15:27Z

← Older revision		Revision as of 03:15, 18 March 2025
Line 63:		Line 63:
	// Store carousel item data in carouselData array		// Store carousel item data in carouselData array
	if (imgUrl) {		if (imgUrl) {
			console.log(page.title);
	addItem(pageUrl, imgUrl, page.title);		addItem(pageUrl, imgUrl, page.title);
	//carouselData.push({ pageUrl: pageUrl, imgUrl: imgUrl, title: page.title });		//carouselData.push({ pageUrl: pageUrl, imgUrl: imgUrl, title: page.title });

2025-03-18T03:13:12Z

← Older revision		Revision as of 03:13, 18 March 2025
Line 1:		Line 1:
	<script>		<script>
			function addItem(url,image,title){
			let item = µ('+div',µ('.carousel-container'));
			item.className = 'carousel-item';
			item.innerHTML = `<a href="${url}">
			<img src="${image}" alt="Carousel Image">
			</a>
			<div class="carousel-title">${title}</div>`;
			};

	function loadCarouselData() {		function loadCarouselData() {
	mw.loader.using(['mediawiki.api', 'jquery']).then(()=>{		mw.loader.using(['mediawiki.api', 'jquery']).then(()=>{
Line 54:		Line 63:
	// Store carousel item data in carouselData array		// Store carousel item data in carouselData array
	if (imgUrl) {		if (imgUrl) {
	carouselData.push({ pageUrl: pageUrl, imgUrl: imgUrl, title: page.title });		addItem(pageUrl, imgUrl, page.title);
			//carouselData.push({ pageUrl: pageUrl, imgUrl: imgUrl, title: page.title });
	}		}
	});		});
Line 60:		Line 70:
	// Store carousel item data		// Store carousel item data
	if (imgUrl) {		if (imgUrl) {
	carouselData.push({ pageUrl: pageUrl, imgUrl: imgUrl, title: page.title });		//carouselData.push({ pageUrl: pageUrl, imgUrl: imgUrl, title: page.title });
			addItem(pageUrl, imgUrl, page.title);
	}		}
	}		}