Hello from Hono on Val Town!

This content is from index.html.

\n \n \n\n",[158],"535d6900-0b25-11f0-aeda-569c3dd06744","baraja.html","17c0e6f6-0b25-11f0-b16b-569c3dd06744",12,["D",1743091538867],"\n\n\n\n\n \n \n \n Baraja: Card Deck with Focus Spread\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n\n\n\n\n

Card Deck with Focus Spread

\n\n

\n \n \n

\n \n

\n\n \n \n \n \n\n\n",[165],"92e7e32a-0b25-11f0-ae7b-569c3dd06744","js","92e7e406-0b25-11f0-ae7b-569c3dd06744",15,["D",1743091645459],"directory",[172],"8eb27702-0b25-11f0-9cb8-569c3dd06744","css","8eb277b6-0b25-11f0-9cb8-569c3dd06744",14,["D",1743091638418],[179],"pulls","branches","forks","envVars",{"_191":61,"_193":61},"connections",{"_191":61,"_192":61},"count","unfilledCount","emptyCount",{"_41":178,"_31":179,"_29":180,"_134":-5,"_39":40,"_38":181,"_136":56,"_36":261,"_13":61,"_33":176,"_34":-5,"_23":24,"_140":-5,"_207":262,"_26":263},{"_41":253,"_31":254,"_29":255,"_134":180,"_39":40,"_38":256,"_136":56,"_36":257,"_13":138,"_33":20,"_34":258,"_23":24,"_140":-5,"_207":259,"_26":260},{"_41":245,"_31":246,"_29":247,"_134":180,"_39":40,"_38":248,"_136":56,"_36":249,"_13":138,"_33":20,"_34":250,"_23":24,"_140":-5,"_207":251,"_26":252},{"_41":237,"_31":238,"_29":239,"_134":180,"_39":40,"_38":240,"_136":56,"_36":241,"_13":138,"_33":20,"_34":242,"_23":24,"_140":-5,"_207":243,"_26":244},{"_41":171,"_31":172,"_29":173,"_134":-5,"_39":40,"_38":174,"_136":56,"_36":234,"_13":61,"_33":176,"_34":-5,"_23":24,"_140":-5,"_207":235,"_26":236},{"_41":226,"_31":227,"_29":228,"_134":173,"_39":40,"_38":229,"_136":24,"_36":230,"_13":138,"_33":20,"_34":231,"_23":24,"_140":-5,"_207":232,"_26":233},{"_41":222,"_31":32,"_29":30,"_134":173,"_39":40,"_38":14,"_136":24,"_36":223,"_13":61,"_33":20,"_34":35,"_23":24,"_140":-5,"_207":224,"_26":225},{"_41":164,"_31":165,"_29":166,"_134":-5,"_39":40,"_38":167,"_136":56,"_36":219,"_13":160,"_33":20,"_34":169,"_23":24,"_140":-5,"_207":220,"_26":221},{"_41":157,"_31":158,"_29":159,"_134":-5,"_39":40,"_38":160,"_136":56,"_36":216,"_13":138,"_33":20,"_34":162,"_23":24,"_140":-5,"_207":217,"_26":218},{"_41":150,"_31":151,"_29":152,"_134":-5,"_39":40,"_38":153,"_136":56,"_36":213,"_13":138,"_33":20,"_34":155,"_23":24,"_140":-5,"_207":214,"_26":215},{"_41":142,"_31":143,"_29":54,"_134":-5,"_39":40,"_38":144,"_136":24,"_36":210,"_13":146,"_33":147,"_34":148,"_23":24,"_140":-5,"_207":211,"_26":212},{"_41":131,"_31":132,"_29":133,"_134":-5,"_39":40,"_38":135,"_136":56,"_36":206,"_13":138,"_33":20,"_34":139,"_23":24,"_140":-5,"_207":208,"_26":209},["D",1743091133644],"children",[],[132],["D",1743091612293],[],[143],["D",1743091143193],[],[151],["D",1743091117111],[],[158],["D",1743091538867],[],[165],"d21256f2-0b25-11f0-b791-569c3dd06744",["D",1743091751453],[],[172,32],"b9b3265e-0b25-11f0-9afc-569c3dd06744","jquery.baraja.cs","b87a13ec-0b25-11f0-b421-569c3dd06744",23,["D",1743091710560],"/**\n * jquery.baraja.js v1.0.0\n * http://www.codrops.com\n *\n * Licensed under the MIT license.\n * http://www.opensource.org/licenses/mit-license.php\n * \n * Copyright 2012, Codrops\n * http://www.codrops.com\n */\n; (function ($, window, undefined) {\n\n 'use strict';\n\n // global\n var Modernizr = window.Modernizr;\n\n jQuery.fn.reverse = [].reverse;\n\n $.Baraja = function (options, element) {\n\n this.$el = $(element);\n this._init(options);\n\n };\n\n // the options\n $.Baraja.defaults = {\n // if we want to specify a selector that triggers the next() function. example: '#baraja-nav-next'\n nextEl: '',\n // if we want to specify a selector that triggers the previous() function\n prevEl: '',\n // default transition speed\n speed: 300,\n // default transition easing\n easing: 'ease-in-out'\n };\n\n $.Baraja.prototype = {\n\n _init: function (options) {\n\n // options\n this.options = $.extend(true, {}, $.Baraja.defaults, options);\n\n var transEndEventNames = {\n 'WebkitTransition': 'webkitTransitionEnd',\n 'MozTransition': 'transitionend',\n 'OTransition': 'oTransitionEnd',\n 'msTransition': 'MSTransitionEnd',\n 'transition': 'transitionend'\n };\n this.transEndEventName = transEndEventNames[Modernizr?.prefixed('transition')];\n\n this._setDefaultFanSettings();\n\n this.$items = this.$el.children('li');\n this.itemsCount = this.$items.length;\n if (this.itemsCount === 0) {\n return false;\n }\n // support for CSS Transitions\n this.supportTransitions = Modernizr?.csstransitions;\n // opened/closed deck\n this.closed = true;\n // lowest value for the z-index given to the items\n this.itemZIndexMin = 1000;\n // sets the item's z-index value\n this._setStack();\n // initialize some events\n this._initEvents();\n\n },\n _setDefaultFanSettings: function () {\n\n this.fanSettings = {\n // speed for opening/closing\n speed: 500,\n // easing for opening/closing\n easing: 'ease-out',\n // difference/range of possible angles that the items will have\n // example: with range:90 and center:false the first item\n // will have 0deg and the last one 90deg;\n // if center:true, then the first one will have 45deg\n // and the last one -45deg; in both cases the difference is 90deg\n range: 90,\n // this defines the position of the first item \n // (to the right, to the left)\n // and its angle (clockwise / counterclockwise)\n direction: 'right',\n // transform origin:\n // you can also pass a minX and maxX, meaning the left value \n // will vary between minX and maxX \n origin: { x: 25, y: 100 },\n // additional translation of each item\n translation: 0,\n // if the cards should be centered after the transform \n // is applied\n center: true,\n // add a random factor to the final transform\n scatter: false\n };\n\n },\n _validateDefaultFanSettings: function (settings) {\n\n if (!settings.origin) {\n settings.origin = this.fanSettings.origin;\n }\n else {\n settings.origin.x = settings.origin.x || this.fanSettings.origin.x;\n settings.origin.y = settings.origin.y || this.fanSettings.origin.y;\n }\n settings.speed = settings.speed || this.fanSettings.speed;\n settings.easing = settings.easing || this.fanSettings.easing;\n settings.direction = settings.direction || this.fanSettings.direction;\n settings.range = settings.range || this.fanSettings.range;\n settings.translation = settings.translation || this.fanSettings.translation;\n if (settings.center == undefined) {\n settings.center = this.fanSettings.center\n }\n if (settings.scatter == undefined) {\n settings.scatter = this.fanSettings.scatter\n }\n\n this.direction = settings.direction;\n\n return settings;\n\n },\n _setStack: function ($items) {\n\n var self = this;\n $items = $items || this.$items;\n\n $items.each(function (i) {\n\n $(this).css('z-index', self.itemZIndexMin + self.itemsCount - 1 - i);\n\n });\n\n },\n _updateStack: function ($el, dir) {\n\n var currZIndex = Number($el.css('z-index')),\n newZIndex = dir === 'next' ? this.itemZIndexMin - 1 : this.itemZIndexMin + this.itemsCount,\n extra = dir === 'next' ? '+=1' : '-=1';\n\n $el.css('z-index', newZIndex);\n\n this.$items.filter(function () {\n\n var zIdx = Number($(this).css('z-index')),\n cond = dir === 'next' ? zIdx < currZIndex : zIdx > currZIndex\n\n return cond;\n\n }).css('z-index', extra);\n\n },\n _initEvents: function () {\n\n var self = this;\n\n // Default behavior: clicking on a card will bring it to front\n this._enableClick2Top();\n\n if (this.options.nextEl !== '') {\n\n $(this.options.nextEl).on('click.baraja', function () {\n\n self._navigate('next');\n return false;\n\n });\n\n }\n\n if (this.options.prevEl !== '') {\n\n $(this.options.prevEl).on('click.baraja', function () {\n\n self._navigate('prev');\n return false;\n\n });\n\n }\n\n },\n _resetTransition: function ($el) {\n\n $el.css({\n '-webkit-transition': 'none',\n '-moz-transition': 'none',\n '-ms-transition': 'none',\n '-o-transition': 'none',\n 'transition': 'none'\n });\n\n },\n _setOrigin: function ($el, x, y) {\n\n $el.css('transform-origin', x + '% ' + y + '%');\n\n },\n _setTransition: function ($el, prop, speed, easing, delay) {\n\n if (!this.supportTransitions) {\n return false;\n }\n if (!prop) {\n prop = 'all';\n }\n if (!speed) {\n speed = this.options.speed;\n }\n if (!easing) {\n easing = this.options.easing;\n }\n if (!delay) {\n delay = 0;\n }\n\n var styleCSS = '';\n\n prop === 'transform' ?\n styleCSS = {\n '-webkit-transition': '-webkit-transform ' + speed + 'ms ' + easing + ' ' + delay + 'ms',\n '-moz-transition': '-moz-transform ' + speed + 'ms ' + easing + ' ' + delay + 'ms',\n '-ms-transition': '-ms-transform ' + speed + 'ms ' + easing + ' ' + delay + 'ms',\n '-o-transition': '-o-transform ' + speed + 'ms ' + easing + ' ' + delay + 'ms',\n 'transition': 'transform ' + speed + 'ms ' + easing + ' ' + delay + 'ms'\n } :\n styleCSS = {\n '-webkit-transition': prop + ' ' + speed + 'ms ' + easing + ' ' + delay + 'ms',\n '-moz-transition': prop + ' ' + speed + 'ms ' + easing + ' ' + delay + 'ms',\n '-ms-transition': prop + ' ' + speed + 'ms ' + easing + ' ' + delay + 'ms',\n '-o-transition': prop + ' ' + speed + 'ms ' + easing + ' ' + delay + 'ms',\n 'transition': prop + ' ' + speed + 'ms ' + easing + ' ' + delay + 'ms'\n }\n\n $el.css(styleCSS);\n\n },\n _applyTransition: function ($el, styleCSS, fncomplete, force) {\n\n if (this.supportTransitions) {\n\n if (fncomplete) {\n\n $el.on(this.transEndEventName, fncomplete);\n\n if (force) {\n fncomplete.call();\n }\n\n }\n\n setTimeout(function () { $el.css(styleCSS); }, 25);\n\n }\n else {\n\n $el.css(styleCSS);\n\n if (fncomplete) {\n\n fncomplete.call();\n\n }\n\n }\n\n },\n _navigate: function (dir) {\n\n this.closed = false;\n\n var self = this,\n extra = 15,\n cond = dir === 'next' ? self.itemZIndexMin + self.itemsCount - 1 : self.itemZIndexMin,\n $item = this.$items.filter(function () {\n\n return Number($(this).css('z-index')) === cond;\n\n }),\n translation = dir === 'next' ? $item.outerWidth(true) + extra : $item.outerWidth(true) * -1 - extra,\n rotation = dir === 'next' ? 5 : 5 * -1;\n\n this._setTransition($item, 'transform', this.options.speed, this.options.easing);\n\n this._applyTransition($item, { transform: 'translate(' + translation + 'px) rotate(' + rotation + 'deg)' }, function () {\n\n $item.off(self.transEndEventName);\n self._updateStack($item, dir);\n\n self._applyTransition($item, { transform: 'translate(0px) rotate(0deg)' }, function () {\n\n $item.off(self.transEndEventName);\n self.isAnimating = false;\n self.closed = true;\n\n });\n\n });\n\n },\n _move2front: function ($item) {\n\n this.isAnimating = true;\n\n var self = this,\n isTop = Number($item.css('z-index')) === this.itemZIndexMin + this.itemsCount - 1,\n callback = isTop ? function () { self.isAnimating = false; } : function () { return false; },\n $item = isTop ? null : $item;\n\n // if it's the one with higher z-index, just close the baraja\n if (!this.closed) {\n\n this._close(callback, $item);\n\n }\n else {\n\n this._fan();\n\n }\n\n if (isTop) {\n return false;\n }\n\n this._resetTransition($item);\n this._setOrigin($item, 50, 50);\n\n $item.css({\n opacity: 0,\n transform: 'scale(2) translate(100px) rotate(20deg)'\n });\n\n this._updateStack($item, 'prev');\n\n setTimeout(function () {\n\n self._setTransition($item, 'all', self.options.speed, 'ease-in');\n self._applyTransition($item, { transform: 'none', opacity: 1 }, function () {\n\n $item.off(self.transEndEventName);\n self.isAnimating = false;\n\n });\n\n }, this.options.speed / 2);\n\n },\n _close: function (callback, $item) {\n\n var self = this,\n $items = self.$items,\n force = this.closed ? true : false;\n\n if ($item) {\n $items = $items.not($item);\n }\n\n this._applyTransition($items, { transform: 'none' }, function () {\n\n self.closed = true;\n $items.off(self.transEndEventName);\n self._resetTransition($items);\n setTimeout(function () {\n\n self._setOrigin($items, 50, 50);\n\n if (callback) {\n callback.call();\n }\n\n }, 25);\n\n }, force);\n\n },\n _fan: function (settings) {\n\n var self = this;\n\n this.closed = false;\n\n settings = this._validateDefaultFanSettings(settings || {});\n\n // set transform origins\n // if minX and maxX are passed:\n if (settings.origin.minX && settings.origin.maxX) {\n\n var max = settings.origin.maxX, min = settings.origin.minX,\n stepOrigin = (max - min) / this.itemsCount;\n\n this.$items.each(function (i) {\n\n var $el = $(this),\n pos = self.itemsCount - 1 - (Number($el.css('z-index')) - self.itemZIndexMin),\n originX = pos * (max - min + stepOrigin) / self.itemsCount + min;\n\n if (settings.direction === 'left') {\n\n originX = max + min - originX;\n\n }\n\n self._setOrigin($(this), originX, settings.origin.y);\n\n });\n\n }\n else {\n\n this._setOrigin(this.$items, settings.origin.x, settings.origin.y);\n\n }\n\n this._setTransition(this.$items, 'transform', settings.speed, settings.easing);\n\n var stepAngle = settings.range / (this.itemsCount - 1),\n stepTranslation = settings.translation / (this.itemsCount - 1),\n cnt = 0;\n\n this.$items.each(function (i) {\n\n var $el = $(this),\n pos = self.itemsCount - 1 - (Number($el.css('z-index')) - self.itemZIndexMin),\n val = settings.center ? settings.range / 2 : settings.range,\n angle = val - stepAngle * pos,\n position = stepTranslation * (self.itemsCount - pos - 1);\n\n if (settings.direction === 'left') {\n\n angle *= -1;\n position *= -1;\n\n }\n\n if (settings.scatter) {\n\n var extraAngle = Math.floor(Math.random() * stepAngle),\n extraPosition = Math.floor(Math.random() * stepTranslation);\n\n // not for the first item..\n if (pos !== self.itemsCount - 1) {\n\n angle = settings.direction === 'left' ? angle + extraAngle : angle - extraAngle;\n position = settings.direction === 'left' ? position - extraPosition : position + extraPosition;\n\n }\n\n }\n\n // save..\n $el.data({ translation: position, rotation: angle });\n\n self._applyTransition($el, { transform: 'translate(' + position + 'px) rotate(' + angle + 'deg)' }, function () {\n\n ++cnt;\n $el.off(self.transEndEventName);\n\n if (cnt === self.itemsCount - 1) {\n self.isAnimating = false;\n }\n\n });\n\n });\n\n },\n // adds new elements to the deck\n _add: function ($elems) {\n\n var self = this,\n newElemsCount = $elems.length, cnt = 0;\n\n $elems.css('opacity', 0).appendTo(this.$el);\n\n // reset\n this.$items = this.$el.children('li');\n this.itemsCount = this.$items.length;\n\n // set z-indexes\n this._setStack($elems);\n\n // animate new items\n $elems.css('transform', 'scale(1.8) translate(200px) rotate(15deg)').reverse().each(function (i) {\n\n var $el = $(this);\n\n self._setTransition($el, 'all', 500, 'ease-out', i * 200);\n self._applyTransition($el, { transform: 'none', opacity: 1 }, function () {\n\n ++cnt;\n\n $el.off(self.transEndEventName);\n self._resetTransition($el);\n\n if (cnt === newElemsCount) {\n self.isAnimating = false;\n }\n\n });\n\n });\n\n },\n _allowAction: function () {\n\n return this.itemsCount > 1;\n\n },\n _prepare: function (callback) {\n\n var self = this;\n\n if (!this.closed) {\n\n this._close(function () {\n\n callback.call();\n\n });\n\n }\n else {\n\n callback.call();\n\n }\n\n },\n _dispatch: function (action, args) {\n\n var self = this;\n\n if (((action === this._fan || action === this._navigate) && !this._allowAction()) || this.isAnimating) {\n return false;\n }\n\n this.isAnimating = true;\n\n this._prepare(function () {\n\n action.call(self, args);\n\n });\n\n },\n // public method: closes the deck\n close: function (settings) {\n\n if (this.isAnimating) {\n return false;\n }\n this._close();\n\n },\n // public method: shows next item\n next: function () {\n\n this._dispatch(this._navigate, 'next');\n\n },\n // public method: shows previous item\n previous: function () {\n\n this._dispatch(this._navigate, 'prev');\n\n },\n // public method: opens the deck\n fan: function (settings) {\n\n this._dispatch(this._fan, settings);\n\n },\n // public method: adds new elements\n add: function ($elems) {\n\n this._dispatch(this._add, $elems);\n\n },\n // Fix the naming to avoid recursion\n _enableClick2Top: function() {\n var self = this;\n \n // First unbind any existing click handlers to avoid duplicates\n this.$el.off('click.baraja-click2top', 'li');\n \n // Then add the click handler for move to front\n this.$el.on('click.baraja-click2top', 'li', function() {\n if (!self.isAnimating) {\n self._move2front($(this));\n }\n });\n },\n \n // Fix the naming to avoid recursion\n _disableClick2Top: function() {\n this.$el.off('click.baraja-click2top', 'li');\n },\n \n // Public method to enable click to top (uses private method)\n enableClick2Top: function() {\n this._enableClick2Top();\n return this;\n },\n \n // Public method to disable click to top (uses private method)\n disableClick2Top: function() {\n this._disableClick2Top();\n return this;\n },\n \n // Add getter for isAnimating state\n getIsAnimating: function() {\n return this.isAnimating;\n },\n\n enableFlipping: function() {\n var self = this;\n \n // Remove any existing flip handlers first\n this.disableFlipping();\n \n // Only allow flipping on the focused/center card\n this.$el.on('click.cardflip', 'li.focus-center', function(e) {\n var $card = $(this);\n // var $front = $card.find('.card-front'); // No longer needed\n // var $back = $card.find('.card-back'); // No longer needed\n\n // Prevent flip if clicking interactive elements on the back\n // Updated selector to check within .card-back-content\n if ($card.hasClass('flipped') && $(e.target).closest('.card-back-content a, .card-back-content img').length) {\n // Allow default link/image behavior on the back\n return; \n }\n \n // Prevent flip if clicking interactive elements on the front (if any added later)\n // Updated selector to check within .card-content\n if (!$card.hasClass('flipped') && $(e.target).closest('.card-content a').length) {\n // Allow default link behavior if front has links\n return;\n }\n\n // Optional: Prevent flip back if clicking image on the back (already covered above)\n // if ($card.hasClass('flipped') && $(e.target).closest('.card-back img').length) {\n // return; \n // }\n\n e.stopPropagation(); // Prevent click bubbling to other handlers like _move2front\n\n // Toggle the flipped class on the LI element - CSS handles the rest\n $card.toggleClass('flipped'); \n\n // REMOVE z-index manipulation\n /*\n if (!$card.hasClass('flipped')) {\n // Flip to back: Set z-index before adding class\n $front.css('z-index', 1); \n $back.css('z-index', 2); \n $card.addClass('flipped');\n } else {\n // Flip to front: Set z-index before removing class\n $back.css('z-index', 1); \n $front.css('z-index', 2); \n $card.removeClass('flipped');\n }\n */\n });\n \n return this;\n },\n \n disableFlipping: function() {\n this.$el.off('click.cardflip');\n return this;\n }\n\n };\n\n var logError = function (message) {\n\n if (window.console) {\n\n window.console.error(message);\n\n }\n\n };\n\n $.fn.baraja = function (options) {\n\n var instance = $.data(this, 'baraja');\n\n if (typeof options === 'string') {\n\n var args = Array.prototype.slice.call(arguments, 1);\n\n this.each(function () {\n\n if (!instance) {\n\n logError(\"cannot call methods on baraja prior to initialization; \" +\n \"attempted to call method '\" + options + \"'\");\n return;\n\n }\n\n if (!$.isFunction(instance[options]) || options.charAt(0) === \"_\") {\n\n logError(\"no such method '\" + options + \"' for baraja instance\");\n return;\n\n }\n\n instance[options].apply(instance, args);\n\n });\n\n }\n else {\n\n this.each(function () {\n\n if (instance) {\n\n instance._init();\n\n }\n else {\n\n instance = $.data(this, 'baraja', new $.Baraja(options, this));\n\n }\n\n });\n\n }\n\n // Make isAnimating accessible\n if (instance) {\n instance.isAnimating = instance.isAnimating || false;\n }\n\n return instance;\n\n };\n\n})(jQuery, window);\n\n\n$.Baraja.prototype.enableDragScroll = function (options) {\n var self = this;\n var $el = this.$el;\n var $container = $el.parent();\n var containerWidth = $container.width();\n var isDragging = false;\n var startX, currentX;\n var $cards = $el.children('li');\n var cardCount = $cards.length;\n var currentFocusIndex = 0; // Track the current focused card\n var lastFocusIndex = 0; // Track the last focus index for smooth transitions\n\n // Default options that can be overridden\n var settings = $.extend({\n dragThreshold: 10, // Minimum pixel movement to be considered a drag\n effectiveWidthFactor: 5.4, // Factor to multiply container width for effective dragging area\n paddingOffsetFactor: 0.02, // Factor to calculate padding offset (as percentage of container width)\n transitionDuration: 300, // Transition duration in ms\n transitionEasing: 'ease-out', // Transition easing function\n scaleUpFactor: 1.1, // Scale factor for focused card\n focusYOffset: -40, // Y-offset for focused card (in px)\n cardSpacing: 50, // Spacing between cards (in px)\n baseRotation: 5, // Base rotation angle for cards\n invertSwipe: true, // Invert swipe direction (true = swipe right to see left cards)\n dragSensitivity: 0.5 // How sensitive the drag is (higher = more cards per pixel)\n }, options || {});\n\n var moveDetected = false;\n var dragDistance = 0; // Track accumulated drag distance\n\n // Remove any existing drag interactions first\n this.disableDragScroll();\n\n // Find initially focused card if any\n $cards.each(function(i) {\n if($(this).hasClass('focus-center')) {\n currentFocusIndex = i;\n lastFocusIndex = i;\n }\n });\n\n // Function to update card display based on relative movement\n function updateCardFocus(deltaX) {\n if (self.isAnimating) return;\n\n // Calculate how much to change the focus index based on movement\n // The sensitivity factor determines how many pixels = 1 card change\n var cardChangeThreshold = containerWidth / (cardCount * settings.dragSensitivity);\n \n // Track cumulative drag distance\n dragDistance += deltaX;\n \n // Calculate how many cards to move (can be fractional)\n var cardShift = -dragDistance / cardChangeThreshold;\n \n if (settings.invertSwipe) {\n cardShift = -cardShift;\n }\n \n // Calculate new focus index with bounds checking\n var newFocusIndex = Math.max(0, Math.min(cardCount - 1, \n lastFocusIndex + Math.round(cardShift)));\n \n // Only update if the focus index has changed\n if (newFocusIndex !== currentFocusIndex) {\n currentFocusIndex = newFocusIndex;\n self._applyFocusSpread(currentFocusIndex, settings);\n }\n }\n\n // Helper function to apply focus spread\n self._applyFocusSpread = function (focusIndex, settings) {\n // Remove any existing focus classes\n $cards.removeClass('focus-left focus-right focus-center');\n\n // Apply focus classes and transformations to each card\n $cards.each(function (i) {\n var $card = $(this);\n var transitionStyle = 'all ' + settings.transitionDuration + 'ms ' + settings.transitionEasing;\n\n if (i < focusIndex) {\n // Cards to the left\n var leftPosition = -100 - (focusIndex - i) * settings.cardSpacing;\n var leftRotation = -settings.baseRotation - (focusIndex - i) * 2;\n\n $card.addClass('focus-left').css({\n 'transition': transitionStyle,\n 'transform': 'translate(' + leftPosition + 'px, 0px) rotate(' + leftRotation + 'deg)'\n });\n }\n else if (i > focusIndex) {\n // Cards to the right\n var rightPosition = 100 + (i - focusIndex) * settings.cardSpacing;\n var rightRotation = settings.baseRotation + (i - focusIndex) * 2;\n\n $card.addClass('focus-right').css({\n 'transition': transitionStyle,\n 'transform': 'translate(' + rightPosition + 'px, 0px) rotate(' + rightRotation + 'deg)'\n });\n }\n else {\n // Center card (focused)\n $card.addClass('focus-center').css({\n 'transition': transitionStyle,\n 'transform': 'translate(0px, ' + settings.focusYOffset + 'px) rotate(0deg) scale(' + settings.scaleUpFactor + ')'\n });\n }\n });\n };\n\n // Add click handler for cards\n $el.on('click.cardclick', 'li', function (e) {\n // Only trigger click if we didn't detect movement (not dragging)\n if (!moveDetected) {\n var $clicked = $(this);\n var clickedIndex = $cards.index($clicked);\n currentFocusIndex = clickedIndex;\n lastFocusIndex = clickedIndex;\n self._applyFocusSpread(clickedIndex, settings);\n }\n\n // Reset move detection for next interaction\n moveDetected = false;\n });\n\n // Mouse events\n $el.on('mousedown.dragscroll', function (e) {\n isDragging = true;\n moveDetected = false;\n startX = e.pageX;\n currentX = startX;\n dragDistance = 0; // Reset drag distance on new drag\n $el.css('cursor', 'grabbing');\n e.preventDefault();\n });\n\n $(document).on('mousemove.dragscroll', function (e) {\n if (isDragging) {\n var previousX = currentX;\n currentX = e.pageX;\n var deltaX = currentX - previousX; // Calculate change since last move\n \n // Only consider it a drag if moved more than the threshold\n if (Math.abs(currentX - startX) > settings.dragThreshold) {\n moveDetected = true;\n updateCardFocus(deltaX);\n }\n\n e.preventDefault();\n }\n });\n\n $(document).on('mouseup.dragscroll mouseleave.dragscroll', function () {\n if (isDragging) {\n isDragging = false;\n lastFocusIndex = currentFocusIndex; // Save the current focus as last focus\n $el.css('cursor', 'grab');\n }\n });\n\n // Touch events\n $el.on('touchstart.dragscroll', function (e) {\n isDragging = true;\n moveDetected = false;\n var touch = e.originalEvent.touches[0];\n startX = touch.pageX;\n currentX = startX;\n dragDistance = 0; // Reset drag distance on new drag\n });\n\n $(document).on('touchmove.dragscroll', function (e) {\n if (isDragging) {\n var touch = e.originalEvent.touches[0];\n var previousX = currentX;\n currentX = touch.pageX;\n var deltaX = currentX - previousX; // Calculate change since last move\n \n // Only consider it a drag if moved more than the threshold\n if (Math.abs(currentX - startX) > settings.dragThreshold) {\n moveDetected = true;\n updateCardFocus(deltaX);\n e.preventDefault(); // Only prevent default when we're actually dragging\n }\n }\n });\n\n $(document).on('touchend.dragscroll touchcancel.dragscroll', function () {\n if (isDragging) {\n isDragging = false;\n lastFocusIndex = currentFocusIndex; // Save the current focus as last focus\n }\n });\n\n // Initialize the first display\n self._applyFocusSpread(currentFocusIndex, settings);\n\n return this;\n};\n\n// Method to remove drag scroll event listeners\n$.Baraja.prototype.disableDragScroll = function () {\n this.$el.off('mousedown.dragscroll touchstart.dragscroll click.cardclick');\n $(document).off('mousemove.dragscroll touchmove.dragscroll');\n $(document).off('mouseup.dragscroll mouseleave.dragscroll touchend.dragscroll touchcancel.dragscroll');\n return this;\n};",[],[172,227],["D",1743091645459],[199,200],[172],"a84c7cc6-0b25-11f0-8b05-569c3dd06744","demo.css","a7490aa6-0b25-11f0-a923-569c3dd06744",20,["D",1743091681363],"/* General Demo Style */\n@import url(http://fonts.googleapis.com/css?family=Lato:300,400,700);\n\n*,\n*:after,\n*:before {\n\t-webkit-box-sizing: border-box;\n\t-moz-box-sizing: border-box;\n\tbox-sizing: border-box;\n\tpadding: 0;\n\tmargin: 0;\n}\n\nhtml { \n\theight: 100%; \n\tfont-size: 62.5%;\n}\n\n/* Clearfix hack by Nicolas Gallagher: http://nicolasgallagher.com/micro-clearfix-hack/ */\n.clearfix:before,\n.clearfix:after {\n\tcontent: \" \";\n\tdisplay: table;\n}\n\n.clearfix:after {\n\tclear: both;\n}\n\n.clearfix {\n\t*zoom: 1;\n}\n\nbody {\n\tfont-family: 'Lato', Calibri, Arial, sans-serif;\n\tbackground: #fff url(../images/bg.jpg);\n\tfont-weight: 300;\n\tfont-size: 14px; \n\tfont-size: 1.4rem;\n\tcolor: #333;\n\t-webkit-font-smoothing: antialiased;\n\toverflow-y: scroll;\n\toverflow-x: hidden;\n}\n\na {\n\tcolor: #555;\n\ttext-decoration: none;\n}\n\n.container {\n\twidth: 100%;\n\tposition: relative;\n}\n\n.clr {\n\tclear: both;\n\tpadding: 0;\n\theight: 0;\n\tmargin: 0;\n}\n\n.container > header,\n.main {\n\twidth: 80%;\n\tmax-width: 960px;\n\tmargin: 0 auto;\n\tpadding: 0 30px;\n}\n\n.container > header {\n\tpadding: 30px;\n}\n\n.container > header h1 {\n\tmargin: 0;\n\tfont-weight: 700;\n\tcolor: #333;\n\tfloat: left;\n\tfont-size: 36px; \n\tfont-size: 3.6rem;\n\tline-height: 46px; \n\tline-height: 4.6rem;\n}\n\n.container > header h1 span {\n\tdisplay: block;\n\tcolor: #444;\n\tfont-size: 20px;\n\tline-height: 28px;\n\tline-height: 2.8rem;\n\tfont-weight: 300;\n\ttext-shadow: 0 1px 0 rgba(255,255,255,0.5);\n}\n\n/* Header Style */\n.codrops-top {\n\tfont-size: 11px; \n\tfont-size: 1.1rem;\n\tline-height: 24px; \n\tline-height: 2.4rem;\n\tbackground: #fff;\n\tbackground: rgba(255, 255, 255, 0.5);\n\ttext-transform: uppercase;\n\tz-index: 9999;\n\tposition: relative;\n\tbox-shadow: 1px 0px 2px rgba(0,0,0,0.2);\n}\n\n.codrops-top a {\n\tpadding: 0px 10px;\n\tletter-spacing: 1px;\n\tcolor: #333;\n\tfont-weight: 400;\n\ttext-shadow: 0 -1px 0 #fff;\n\tdisplay: inline-block;\n}\n\n.codrops-top a:hover {\n\tbackground: rgba(255,255,255,0.8);\n\tcolor: #000;\n}\n\n.codrops-top span.right {\n\tfloat: right;\n}\n\n.codrops-top span.right a {\n\tfloat: left;\n\tdisplay: block;\n}\n\n.support-note {\n\tclear: both;\n}\n\n.support-note span{\n\tcolor: #ac375d;\n\tfont-size: 16px;\n\tfont-size: 1.6rem;\n\tdisplay: none;\n\tfont-weight: bold;\n\ttext-align: center;\n\tpadding: 5px 0;\n}\n\n.actions {\n\twidth: 100%;\n\tpadding: 0 0 20px 0;\n}\n\n.actions span {\n\tbox-shadow: 0 1px 1px rgba(0,0,0,0.2);\n\tbackground: #fff;\n\tcolor: #888;\n\tfont-weight: 700;\n\tfont-size: 12px;\n\tfont-size: 1.2rem;\n\ttext-align: center;\n\tdisplay: inline-block;\n\tcursor: pointer;\n\tpadding: 5px 10px;\n\ttext-transform: uppercase;\n\tmargin: 3px;\n\tborder-radius: 3px;\n\n}\n\n.actions span:hover {\n\tbackground: #f7f7f7;\n}\n\n.actions span:active {\n\tbackground: #aaa;\n\tcolor: #fff;\n\tbox-shadow: 0 1px 1px rgba(255,255,255,0.5);\n}\n\n.actions span.disabled {\n\topacity: 0.8;\n\tcolor: #ddd;\n}\n\n.light {\n\tpadding: 60px 0 250px;\n}\n\n.light span {\n\tbackground: #aaa;\n\tcolor: #fff;\n\ttext-shadow: 0 1px 1px rgba(0,0,0,0.3);\n\tbox-shadow: inset 0 1px 1px rgba(0,0,0,0.2), 0 1px 1px rgba(255,255,255,0.8);\n}\n\n.light span:hover {\n\tbackground: #444;\n}\n\n#nav-prev, #nav-next {\n\twidth: 30px;\n\theight: 30px;\n\tfont-size: 18px;\n\tline-height: 20px;\n}\n\n#close {\n\tfloat: right;\n}",[],[179,238],"ad179312-0b25-11f0-b791-569c3dd06744","custom.css","a3187fd4-0b25-11f0-9721-569c3dd06744",21,["D",1743091689408],".baraja-demo {\n\twidth: 200px;\n\tmargin: 30px auto;\n\tcolor: #aaa;\n}\n\n.no-js .baraja-demo {\n\twidth: auto;\n}\n\n.baraja-demo h4 {\n\tcolor: #666;\n\tfont-size: 14px;\n\tpadding: 8px 10px 5px;\n\tmargin: 20px 3px 5px;\n\tborder-bottom: 1px solid #f0f0f0;\n}\n\n.baraja-demo p {\n\tfont-size: 12px;\n\tfont-weight: 700;\n\tpadding: 0 10px;\n\tmargin: 0px 3px 0;\n}\n\n/* .baraja-demo ul.baraja-container li {\n\tborder-radius: 10px;\n\tpadding: 5px;\n\tbox-shadow: inset 0 0 0 1px rgba(0,0,0,0.08);\n\t-webkit-user-select: none;\n\t-khtml-user-select: none;\n\t-moz-user-select: none;\n\t-ms-user-select: none;\n\tuser-select: none;\n} */\n\n/* .baraja-demo li img {\n\tdisplay: block;\n\tmargin: 0 auto;\n\twidth: 100%;\n\tborder-radius: 10px 10px 0 0;\n} */",[],[179,246],"9cf1f09a-0b25-11f0-8b05-569c3dd06744","baraja.css","9a805e46-0b25-11f0-8642-569c3dd06744",17,["D",1743091662318],"ul.baraja-container {\n\twidth: 200px;\n\theight: 310px;\n\tmargin: 0 auto 30px;\n\tposition: relative;\n\tpadding: 0;\n\tlist-style-type: none;\n}\n\nul.baraja-container li {\n\twidth: 100%;\n\theight: 100%;\n\tmargin: 0;\n\tposition: absolute;\n\ttop: 0;\n\tleft: 0;\n\tcursor: pointer;\n\tbackground: transparent;\n\tpointer-events: auto;\n\tbox-shadow: none;\n}\n\n/* ul.baraja-container li:hover .card-inner {\n box-shadow: 0 5px 15px rgba(0,0,0,0.3);\n} */\n\nul.baraja-container li.focused .card-inner {\n box-shadow: 0 10px 25px rgba(0,0,0,0.35);\n}\n\n.no-js ul.baraja-container {\n\twidth: auto;\n\theight: auto;\n\ttext-align: center;\n}\n\n.no-js ul.baraja-container li {\n\tposition: relative;\n\tdisplay: inline-block;\n\twidth: 200px;\n\theight: 310px;\n\tmargin: 10px;\n}\n\n/* Add styles for the new inner wrapper */\n.card-inner {\n position: relative;\n width: 100%;\n height: 100%;\n transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);\n transform-style: preserve-3d;\n perspective: 1000px;\n background: #fff;\n box-shadow: 0 1px 5px rgba(0,0,0,0.2);\n border-radius: 6px;\n}\n\n/* Add these new styles for card flipping */\n.card-front,\n.card-back {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n -webkit-backface-visibility: hidden;\n backface-visibility: hidden;\n border-radius: inherit;\n}\n\n.card-front {\n z-index: 2; /* Front side is above back side by default */\n transform: rotateY(0deg);\n background: white;\n}\n\n.card-back {\n z-index: 1; /* Back side below front by default */\n transform: rotateY(180deg);\n background: white;\n display: block !important;\n padding: 20px;\n box-sizing: border-box;\n overflow-y: auto;\n -webkit-overflow-scrolling: touch;\n max-height: 100%;\n}\n\n/* Apply flip rotation to the inner wrapper */\nli.flipped .card-inner {\n transform: rotateY(180deg);\n}\n\n/* Scrollbar styling for the back of the card */\n.card-back::-webkit-scrollbar {\n width: 8px;\n}\n\n.card-back::-webkit-scrollbar-track {\n background: #f1f1f1;\n border-radius: 4px;\n}\n\n.card-back::-webkit-scrollbar-thumb {\n background: #888;\n border-radius: 4px;\n}\n\n.card-back::-webkit-scrollbar-thumb:hover {\n background: #555;\n}\n\n/* Allow text selection and interaction on card content */\n.card-content,\n.card-back-content {\n user-select: text;\n -webkit-user-select: text;\n pointer-events: auto;\n}\n\n/* Make images on the back interactive */\n.card-back img {\n cursor: pointer !important;\n pointer-events: auto !important;\n transition: opacity 0.2s;\n}\n\n.card-back img:hover {\n opacity: 0.9;\n}",[],[179,254],["D",1743091638418],[195,196,197],[179],["D",1743023426975],{"_95":94,"_102":98},{"_95":94,"_96":-5,"_97":98,"_18":52,"_99":100,"_101":24},{"_13":84,"_31":85,"_41":40,"_86":42,"_87":-5,"_88":-5,"_89":-5,"_90":-5,"_91":-5,"_92":43,"_93":94},"ctx",{"_77":-5,"_121":301,"_302":303,"_304":305,"_306":24,"_307":24,"_308":24,"_309":56,"_310":-5,"_311":-7,"_312":-7,"_313":61,"_314":24,"_315":24,"_316":-5,"_317":24,"_318":24,"_319":24,"_320":-5},"ENV",{"_272":273,"_274":275,"_276":85,"_277":278,"_279":280,"_281":282,"_283":284,"_285":286,"_287":288,"_289":290,"_291":292,"_293":294,"_295":296,"_297":298,"_299":300},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","e87eb04e707cf64e7e532c8e8ec395f209e17f15","RENDER_GIT_BRANCH","POSTHOG_API_TOKEN","phc_nmoyuAkStEZuUp69rYlg1DZgrIt19Gx0Y4Hwf8tGgJP","POSTHOG_API_HOST","https://wart.val.town","WEB_API_TEMPLATE","https://{val}.web.val.run","APP_URL","https://www.val.town","MODULE_URL","https://esm.town","VANITY_WEB_API_TEMPLATE","https://{label}.val.run/","DENOLS_URL","https://lsp.val.town","NODE_ENV","production","CLOUDFLARE_TURNSTILE_SITE_KEY","0x4AAAAAACtaIZJH7s9rBMZ6","GOOGLE_CLIENT_ID","875989696899-jtsqkhlbdv5jrlsk8631p7ipjg3c6o62.apps.googleusercontent.com","STRIPE_PUBLISHABLE_KEY","pk_live_51N2zvWEpZTTLipIkVEwXrUG9AT0yeOOEYxszarZT1jpsZV58Ly6wlg3SltZpHN26CUalOBmUSY7adQRQiSkCZz2500qSXNkf8Y","API_URL","https://api.val.town",[],"preferencesKeybindings","default","preferencesTheme","light","preferencesFixers","preferencesCopilot","preferencesSelectionAi","preferencesCloseBrackets","preferencesChatPanelState","preferencesDprint","preferencesDenofmt","notificationCount","flagDenols","isBusinessOrgMember","businessOrgHandle","isBusinessOrgAdmin","isHigherTownieTier","navCollapsed","currentOrgId"]

Diff · v26