feat: VivesPOS landing on Winter CMS 1.2 — theme + plugin + Dockerfile
Some checks are pending
Module sub-split / Sub-split (push) Waiting to run
Some checks are pending
Module sub-split / Sub-split (push) Waiting to run
- Base: wintercms/winter branch 1.2 (full framework) - Theme vivespos: Canvas 7 + Bootstrap 5 CDN, custom CSS - Layout: deferred GTM/GA4 tracking, JSON-LD SoftwareApplication - Partials: hero (offline-first), features, modes (offline/nube toggle), screenshots, pricing (3 planes), comparison, FAQ, CTA - Plugin VivesPOS.Site with ContactForm - Dockerfile: PHP 8.2 Apache, port 80, healthcheck - Added winter/wn-pages, blog, sitemap, seo plugins - Active theme set to vivespos
This commit is contained in:
409
modules/backend/assets/js/winter.scrollbar.js
Normal file
409
modules/backend/assets/js/winter.scrollbar.js
Normal file
@@ -0,0 +1,409 @@
|
||||
/*
|
||||
* Creates a scrollbar in a container.
|
||||
*
|
||||
* Note the element must have a height set for vertical,
|
||||
* and a width set for horizontal.
|
||||
*
|
||||
* Data attributes:
|
||||
* - data-control="scrollbar" - enables the scrollbar plugin
|
||||
*
|
||||
* JavaScript API:
|
||||
* $('#area').scrollbar()
|
||||
*
|
||||
* Dependences:
|
||||
* - Mouse Wheel plugin (mousewheel.js)
|
||||
*/
|
||||
+function ($) { "use strict";
|
||||
var Base = $.wn.foundation.base,
|
||||
BaseProto = Base.prototype
|
||||
|
||||
var Scrollbar = function (element, options) {
|
||||
|
||||
var
|
||||
$el = this.$el = $(element),
|
||||
el = $el.get(0),
|
||||
self = this,
|
||||
options = this.options = options || {},
|
||||
sizeName = this.sizeName = options.vertical ? 'height' : 'width',
|
||||
isNative = $('html').hasClass('mobile'),
|
||||
isTouch = this.isTouch = Modernizr.touchevents,
|
||||
isScrollable = this.isScrollable = false,
|
||||
isLocked = this.isLocked = false,
|
||||
eventElementName = options.vertical ? 'pageY' : 'pageX',
|
||||
dragStart = 0,
|
||||
startOffset = 0;
|
||||
|
||||
$.wn.foundation.controlUtils.markDisposable(element)
|
||||
|
||||
Base.call(this)
|
||||
|
||||
this.$el.one('dispose-control', this.proxy(this.dispose))
|
||||
|
||||
/*
|
||||
* Native (mobile) environments use overflow auto in CSS
|
||||
*/
|
||||
if (isNative) {
|
||||
return
|
||||
}
|
||||
|
||||
/*
|
||||
* Create Scrollbar
|
||||
*/
|
||||
this.$scrollbar = $('<div />').addClass('scrollbar-scrollbar')
|
||||
this.$track = $('<div />').addClass('scrollbar-track').appendTo(this.$scrollbar)
|
||||
this.$thumb = $('<div />').addClass('scrollbar-thumb').appendTo(this.$track)
|
||||
|
||||
$el
|
||||
.addClass('drag-scrollbar')
|
||||
.addClass(options.vertical ? 'vertical' : 'horizontal')
|
||||
.prepend(this.$scrollbar)
|
||||
|
||||
/*
|
||||
* Bind events
|
||||
*/
|
||||
if (isTouch) {
|
||||
this.$el.on('touchstart', function (event){
|
||||
var touchEvent = event.originalEvent;
|
||||
if (touchEvent.touches.length == 1) {
|
||||
startDrag(touchEvent.touches[0])
|
||||
event.stopPropagation()
|
||||
}
|
||||
})
|
||||
}
|
||||
else {
|
||||
this.$thumb.on('mousedown', function (event){
|
||||
startDrag(event)
|
||||
})
|
||||
this.$track.on('mouseup', function (event){
|
||||
moveDrag(event)
|
||||
})
|
||||
}
|
||||
|
||||
$el.mousewheel(function (event){
|
||||
var offset = self.options.vertical
|
||||
? ((event.deltaFactor * event.deltaY) * -1)
|
||||
: (event.deltaFactor * event.deltaX)
|
||||
|
||||
return !scrollWheel(offset * self.options.scrollSpeed)
|
||||
})
|
||||
|
||||
$el.on('oc.scrollbar.gotoStart', function(event){
|
||||
self.options.vertical
|
||||
? $el.scrollTop(0)
|
||||
: $el.scrollLeft(0)
|
||||
|
||||
self.update()
|
||||
event.stopPropagation()
|
||||
})
|
||||
|
||||
$(window).on('resize', $.proxy(this.update, this))
|
||||
$(window).on('oc.updateUi', $.proxy(this.update, this))
|
||||
|
||||
/*
|
||||
* Internal event, drag has started
|
||||
*/
|
||||
function startDrag(event) {
|
||||
$('body').addClass('drag-noselect')
|
||||
$el.trigger('oc.scrollStart')
|
||||
|
||||
dragStart = event[eventElementName]
|
||||
startOffset = self.options.vertical ? $el.scrollTop() : $el.scrollLeft()
|
||||
|
||||
if (isTouch) {
|
||||
$(window).on('touchmove.scrollbar', function(event) {
|
||||
var touchEvent = event.originalEvent
|
||||
if (moveDrag(touchEvent.touches[0]))
|
||||
event.preventDefault();
|
||||
});
|
||||
|
||||
$el.on('touchend.scrollbar', stopDrag)
|
||||
}
|
||||
else {
|
||||
$(window).on('mousemove.scrollbar', function(event){
|
||||
moveDrag(event)
|
||||
return false
|
||||
})
|
||||
|
||||
$(window).on('mouseup.scrollbar', function(){
|
||||
stopDrag()
|
||||
return false
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
* Internal event, drag is active
|
||||
*/
|
||||
function moveDrag(event) {
|
||||
self.isLocked = true;
|
||||
|
||||
var
|
||||
offset,
|
||||
dragTo = event[eventElementName]
|
||||
|
||||
// Touch devices use an inverse scrolling interface
|
||||
// with a 1:1 ratio
|
||||
if (self.isTouch) {
|
||||
offset = dragStart - dragTo
|
||||
}
|
||||
// Mouse devices use a natural scrolling interface
|
||||
// with a track:canvas ratio
|
||||
else {
|
||||
var ratio = self.getCanvasSize() / self.getViewportSize()
|
||||
offset = (dragTo - dragStart) * ratio
|
||||
}
|
||||
|
||||
self.options.vertical
|
||||
? $el.scrollTop(startOffset + offset)
|
||||
: $el.scrollLeft(startOffset + offset)
|
||||
|
||||
self.setThumbPosition()
|
||||
|
||||
return self.options.vertical
|
||||
? el.scrollTop != startOffset
|
||||
: el.scrollLeft != startOffset
|
||||
}
|
||||
|
||||
/*
|
||||
* Internal event, drag has ended
|
||||
*/
|
||||
function stopDrag() {
|
||||
$('body').removeClass('drag-noselect')
|
||||
$el.trigger('oc.scrollEnd')
|
||||
|
||||
$(window).off('.scrollbar')
|
||||
}
|
||||
|
||||
/*
|
||||
* Scroll wheel has moved by supplied offset
|
||||
*/
|
||||
|
||||
var isWebkit = $(document.documentElement).hasClass('webkit')
|
||||
|
||||
function scrollWheel(offset) {
|
||||
startOffset = self.options.vertical ? el.scrollTop : el.scrollLeft
|
||||
$el.trigger('oc.scrollStart')
|
||||
|
||||
self.options.vertical
|
||||
? $el.scrollTop(startOffset + offset)
|
||||
: $el.scrollLeft(startOffset + offset)
|
||||
|
||||
var scrolled = self.options.vertical
|
||||
? el.scrollTop != startOffset
|
||||
: el.scrollLeft != startOffset
|
||||
|
||||
self.setThumbPosition()
|
||||
if (!isWebkit) {
|
||||
if (self.endScrollTimeout !== undefined) {
|
||||
clearTimeout(self.endScrollTimeout)
|
||||
self.endScrollTimeout = undefined
|
||||
}
|
||||
|
||||
self.endScrollTimeout = setTimeout(function() {
|
||||
$el.trigger('oc.scrollEnd')
|
||||
self.endScrollTimeout = undefined
|
||||
}, 50)
|
||||
} else {
|
||||
$el.trigger('oc.scrollEnd')
|
||||
}
|
||||
|
||||
return scrolled
|
||||
}
|
||||
|
||||
/*
|
||||
* Give the DOM a second, then set the track and thumb size
|
||||
*/
|
||||
setTimeout(function() { self.update() }, 1);
|
||||
}
|
||||
|
||||
Scrollbar.prototype = Object.create(BaseProto)
|
||||
Scrollbar.prototype.constructor = Scrollbar
|
||||
|
||||
Scrollbar.prototype.dispose = function() {
|
||||
this.unregisterHandlers()
|
||||
|
||||
BaseProto.dispose.call(this)
|
||||
}
|
||||
|
||||
Scrollbar.prototype.unregisterHandlers = function() {
|
||||
|
||||
}
|
||||
|
||||
Scrollbar.DEFAULTS = {
|
||||
vertical: true,
|
||||
scrollSpeed: 2,
|
||||
animation: true,
|
||||
start: function() {},
|
||||
drag: function() {},
|
||||
stop: function() {}
|
||||
}
|
||||
|
||||
Scrollbar.prototype.update = function() {
|
||||
if (!this.$scrollbar)
|
||||
return
|
||||
|
||||
this.$scrollbar.hide()
|
||||
this.setThumbSize()
|
||||
this.setThumbPosition()
|
||||
this.$scrollbar.show()
|
||||
}
|
||||
|
||||
Scrollbar.prototype.setThumbSize = function() {
|
||||
var properties = this.calculateProperties()
|
||||
|
||||
this.isScrollable = !(properties.thumbSizeRatio >= 1);
|
||||
this.$scrollbar.toggleClass('disabled', !this.isScrollable)
|
||||
|
||||
if (this.options.vertical) {
|
||||
this.$track.height(properties.canvasSize)
|
||||
this.$thumb.height(properties.thumbSize)
|
||||
}
|
||||
else {
|
||||
this.$track.width(properties.canvasSize)
|
||||
this.$thumb.width(properties.thumbSize)
|
||||
}
|
||||
}
|
||||
|
||||
Scrollbar.prototype.setThumbPosition = function() {
|
||||
var properties = this.calculateProperties()
|
||||
|
||||
if (this.options.vertical)
|
||||
this.$thumb.css({top: properties.thumbPosition})
|
||||
else
|
||||
this.$thumb.css({left: properties.thumbPosition})
|
||||
}
|
||||
|
||||
Scrollbar.prototype.calculateProperties = function() {
|
||||
|
||||
var $el = this.$el,
|
||||
properties = {};
|
||||
|
||||
properties.viewportSize = this.getViewportSize()
|
||||
properties.canvasSize = this.getCanvasSize()
|
||||
properties.scrollAmount = (this.options.vertical) ? $el.scrollTop() : $el.scrollLeft()
|
||||
|
||||
properties.thumbSizeRatio = properties.viewportSize / properties.canvasSize
|
||||
properties.thumbSize = properties.viewportSize * properties.thumbSizeRatio
|
||||
|
||||
properties.thumbPositionRatio = properties.scrollAmount / (properties.canvasSize - properties.viewportSize)
|
||||
properties.thumbPosition = ((properties.viewportSize - properties.thumbSize) * properties.thumbPositionRatio) + properties.scrollAmount
|
||||
|
||||
if (isNaN(properties.thumbPosition))
|
||||
properties.thumbPosition = 0
|
||||
|
||||
return properties;
|
||||
}
|
||||
|
||||
Scrollbar.prototype.getViewportSize = function() {
|
||||
return (this.options.vertical)
|
||||
? this.$el.height()
|
||||
: this.$el.width();
|
||||
}
|
||||
|
||||
Scrollbar.prototype.getCanvasSize = function() {
|
||||
return (this.options.vertical)
|
||||
? this.$el.get(0).scrollHeight
|
||||
: this.$el.get(0).scrollWidth;
|
||||
}
|
||||
|
||||
Scrollbar.prototype.gotoElement = function(element, callback) {
|
||||
var $el = $(element)
|
||||
if (!$el.length)
|
||||
return;
|
||||
|
||||
var self = this,
|
||||
offset = 0,
|
||||
animated = false,
|
||||
params = {
|
||||
duration: 300,
|
||||
queue: false,
|
||||
complete: function(){
|
||||
if (callback !== undefined)
|
||||
callback()
|
||||
}
|
||||
}
|
||||
|
||||
if (!this.options.vertical) {
|
||||
offset = $el.get(0).offsetLeft - this.$el.scrollLeft()
|
||||
|
||||
if (offset < 0) {
|
||||
this.$el.animate({'scrollLeft': $el.get(0).offsetLeft}, params)
|
||||
animated = true
|
||||
} else {
|
||||
offset = $el.get(0).offsetLeft + $el.outerWidth() - (this.$el.scrollLeft() + this.$el.outerWidth())
|
||||
if (offset > 0) {
|
||||
this.$el.animate({'scrollLeft': $el.get(0).offsetLeft + $el.outerWidth() - this.$el.outerWidth()}, params)
|
||||
animated = true
|
||||
}
|
||||
}
|
||||
} else {
|
||||
offset = $el.get(0).offsetTop - this.$el.scrollTop()
|
||||
|
||||
if (this.options.animation) {
|
||||
if (offset < 0) {
|
||||
this.$el.animate({'scrollTop': $el.get(0).offsetTop}, params)
|
||||
animated = true
|
||||
} else {
|
||||
offset = $el.get(0).offsetTop - (this.$el.scrollTop() + this.$el.outerHeight())
|
||||
if (offset > 0) {
|
||||
this.$el.animate({'scrollTop': $el.get(0).offsetTop + $el.outerHeight() - this.$el.outerHeight()}, params)
|
||||
animated = true
|
||||
}
|
||||
}
|
||||
} else {
|
||||
if (offset < 0) {
|
||||
this.$el.scrollTop($el.get(0).offsetTop)
|
||||
} else {
|
||||
offset = $el.get(0).offsetTop - (this.$el.scrollTop() + this.$el.outerHeight())
|
||||
if (offset > 0)
|
||||
this.$el.scrollTop($el.get(0).offsetTop + $el.outerHeight() - this.$el.outerHeight())
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
if (!animated && callback !== undefined)
|
||||
callback()
|
||||
|
||||
return this
|
||||
}
|
||||
|
||||
Scrollbar.prototype.dispose = function() {
|
||||
this.$el = null
|
||||
this.$scrollbar = null
|
||||
this.$track = null
|
||||
this.$thumb = null
|
||||
}
|
||||
|
||||
// SCROLLBAR PLUGIN DEFINITION
|
||||
// ============================
|
||||
|
||||
var old = $.fn.scrollbar
|
||||
|
||||
$.fn.scrollbar = function (option) {
|
||||
return this.each(function () {
|
||||
var $this = $(this)
|
||||
var data = $this.data('oc.scrollbar')
|
||||
var options = $.extend({}, Scrollbar.DEFAULTS, $this.data(), typeof option == 'object' && option)
|
||||
|
||||
if (!data) $this.data('oc.scrollbar', (data = new Scrollbar(this, options)))
|
||||
if (typeof option == 'string') data[option].call($this)
|
||||
})
|
||||
}
|
||||
|
||||
$.fn.scrollbar.Constructor = Scrollbar
|
||||
|
||||
// SCROLLBAR NO CONFLICT
|
||||
// =================
|
||||
|
||||
$.fn.scrollbar.noConflict = function () {
|
||||
$.fn.scrollbar = old
|
||||
return this
|
||||
}
|
||||
|
||||
// SCROLLBAR DATA-API
|
||||
// ===============
|
||||
$(document).render(function(){
|
||||
$('[data-control=scrollbar]').scrollbar()
|
||||
})
|
||||
|
||||
}(window.jQuery);
|
||||
Reference in New Issue
Block a user