WordPress.org
Get WordPress

Plugin Directory

Changeset 3334980


Ignore:
Timestamp:
07/27/2025 07:32:30 PM (8 months ago)
Author:
demispatti
Message:

Updated the code

Location:
cb-parallax/tags/0.9.9
Files:
5 edited

Legend:

Unmodified
Added
Removed

  • cb-parallax/tags/0.9.9/.idea/workspace.xml

    r3330924 r3334980  
    77    <list default="true" id="4d0afb40-0a8b-4c9b-aa05-50b615bbef77" name="Changes" comment="">
    88      <change beforePath="$PROJECT_DIR$/.idea/workspace.xml" beforeDir="false" afterPath="$PROJECT_DIR$/.idea/workspace.xml" afterDir="false" />
     9      <change beforePath="$PROJECT_DIR$/public/css/public.css" beforeDir="false" afterPath="$PROJECT_DIR$/public/css/public.css" afterDir="false" />
     10      <change beforePath="$PROJECT_DIR$/public/js/public.js" beforeDir="false" afterPath="$PROJECT_DIR$/public/js/public.js" afterDir="false" />
     11      <change beforePath="$PROJECT_DIR$/vendor/smoothscroll/smoothscroll.js" beforeDir="false" afterPath="$PROJECT_DIR$/vendor/smoothscroll/smoothscroll.js" afterDir="false" />
    912    </list>
    1013    <option name="SHOW_DIALOG" value="false" />
    … …  
    2528    <option name="showLibraryContents" value="true" />
    2629  </component>
    27   <component name="PropertiesComponent">{
    28   &quot;keyToString&quot;: {
    29     &quot;ModuleVcsDetector.initialDetectionPerformed&quot;: &quot;true&quot;,
    30     &quot;RunOnceActivity.ShowReadmeOnStart&quot;: &quot;true&quot;,
    31     &quot;node.js.detected.package.eslint&quot;: &quot;true&quot;,
    32     &quot;node.js.detected.package.tslint&quot;: &quot;true&quot;,
    33     &quot;node.js.selected.package.eslint&quot;: &quot;(autodetect)&quot;,
    34     &quot;node.js.selected.package.tslint&quot;: &quot;(autodetect)&quot;,
    35     &quot;nodejs_package_manager_path&quot;: &quot;npm&quot;,
    36     &quot;vue.rearranger.settings.migration&quot;: &quot;true&quot;
     30  <component name="PropertiesComponent"><![CDATA[{
     31  "keyToString": {
     32    "ModuleVcsDetector.initialDetectionPerformed": "true",
     33    "Node.js.public.js.executor": "Debug",
     34    "RunOnceActivity.ShowReadmeOnStart": "true",
     35    "node.js.detected.package.eslint": "true",
     36    "node.js.detected.package.tslint": "true",
     37    "node.js.selected.package.eslint": "(autodetect)",
     38    "node.js.selected.package.tslint": "(autodetect)",
     39    "nodejs_package_manager_path": "npm",
     40    "vue.rearranger.settings.migration": "true"
    3741  }
    38 }</component>
     42}]]></component>
     43  <component name="RunManager">
     44    <configuration name="public.js" type="NodeJSConfigurationType" nameIsGenerated="true" path-to-js-file="public.js" typescript-loader="bundled" working-dir="$PROJECT_DIR$/public/js">
     45      <method v="2" />
     46    </configuration>
     47  </component>
    3948  <component name="SharedIndexes">
    4049    <attachedChunks>
    … …  
    8594      <workItem from="1752973638946" duration="7000" />
    8695      <workItem from="1753016362411" duration="16000" />
     96      <workItem from="1753119818017" duration="313000" />
     97      <workItem from="1753120455167" duration="598000" />
     98      <workItem from="1753122306490" duration="597000" />
     99      <workItem from="1753127905242" duration="575000" />
     100      <workItem from="1753200574308" duration="596000" />
     101      <workItem from="1753221778368" duration="865000" />
    87102    </task>
    88103    <servers />
    … …  
    91106    <option name="version" value="3" />
    92107  </component>
     108  <component name="XDebuggerManager">
     109    <breakpoint-manager>
     110      <breakpoints>
     111        <line-breakpoint enabled="true" type="javascript">
     112          <url>file://$PROJECT_DIR$/public/js/public.js</url>
     113          <line>275</line>
     114          <properties lambdaOrdinal="-1" />
     115          <option name="timeStamp" value="1" />
     116        </line-breakpoint>
     117      </breakpoints>
     118    </breakpoint-manager>
     119  </component>
    93120</project>

  • cb-parallax/tags/0.9.9/public/class-public.php

    r3330924 r3334980  
    108108            'enqueue_styles'
    109109        ], 14);
    110         //add_action('wp_enqueue_scripts', [$this, 'enqueue_scripts'], 14);
    111110        add_action('wp_enqueue_scripts', [
    112111            $this,
    … …  
    129128        wp_enqueue_style('cb-parallax-public-css', CBPARALLAX_ROOT_URL.'public/css/public.css', [], $this->version);
    130129    }
    131    
    132     /**
    133      * Registers the javascript files with WordPress.
    134      *
    135      * @return void
    136      * @since 0.9.0
    137      */
    138     public function enqueue_scripts() : void
    139     {
    140         /**
    141          * @var \WP_Post $post
    142          */ global $post;
    143        
    144         // If there is no image at all, we stop here
    145         /*if (false === (new MenuIncludes\cb_parallax_options($this->domain))->determine_image_source()) {
    146             return;
    147         }*/
    148        
    149         /**
    150          * If the image was not found, we bail early.
    151          */
    152         if (true !== $this->options->is_image_in_media_library($post)) {
    153             return;
    154         }
    155        
    156         wp_enqueue_script('jquery');
    157        
    158         //$this->set_plugin_options($post);
    159        
    160         wp_enqueue_script('cb-parallax-inc-raf-js', CBPARALLAX_ROOT_URL.'vendor/raf/raf.js', ['jquery'], $this->version, true);
    161        
    162         wp_enqueue_script('cb-parallax-inc-smoothscroll-js', CBPARALLAX_ROOT_URL.'vendor/smoothscroll/smoothscroll.js', ['jquery'], $this->version, true);
    163        
    164         // Parallax script
    165         wp_enqueue_script('cb-parallax-public-js', CBPARALLAX_ROOT_URL.'public/js/public.js', [
    166             'jquery',
    167             'cb-parallax-inc-raf-js',
    168             'cb-parallax-inc-smoothscroll-js'
    169         ], $this->version, true);
    170        
    171         // Layout script
    172         $options = get_option('cb_parallax_options');
    173         if ('1' === $options['cb_parallax_boxed_layout']) {
    174             wp_enqueue_script('cb-parallax-layout-js', CBPARALLAX_ROOT_URL.'public/js/layout.js', ['jquery'], $this->version, true);
    175         }
    176     }
     130
    177131    /**
    178132     * @return void
    … …  
    239193            'cb-parallax-inc-raf-js',
    240194            'cb-parallax-inc-smoothscroll-js'
    241         ], $this->version, true);
     195        ], /*$this->version*/ time(), true);
    242196    }
    243197}

  • cb-parallax/tags/0.9.9/public/css/public.css

    r3330924 r3334980  
    1818    background: repeat;
    1919    background-color: transparent;
     20    overflow: visible;
    2021}
    2122
    … …  
    2425    position: fixed;
    2526    background: no-repeat fixed;
    26     overflow: hidden;
     27    overflow: visible;
    2728    z-index: -2
    2829}

  • cb-parallax/tags/0.9.9/public/js/public.js

    r3330924 r3334980  
    11/*jshint esversion: 6 */
     2
     3// Main Script
    24(function($) {
    35    "use strict";
    46
    5     //let cbPublicIsMobile = true === /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ? '1' : '0';
    67    let $instance = null;
    78    let viewport = $(window);
     9
     10    //let $document = $('document');
    811
    912    function CbParallaxPublic()
    … …  
    3639            uses_assumed_background_color: '0'
    3740        };
     41        this.effect = this.cbParallaxPublic.image_options.effect_type;
    3842        this.direction = undefined !== this.cbParallaxPublic.image_options.direction ? this.cbParallaxPublic.image_options.direction : this.defaultOptions.direction;
     43        this.direction = 'Parallax' !== this.effect ? 'vertical' : this.direction;
     44
    3945        this.verticalScrollDirection = undefined !== this.cbParallaxPublic.image_options.vertical_scroll_direction ? this.cbParallaxPublic.image_options.vertical_scroll_direction : this.defaultOptions.vertical_scroll_direction;
    4046        this.horizontalScrollDirection = undefined !== this.cbParallaxPublic.image_options.horizontal_scroll_direction ? this.cbParallaxPublic.image_options.horizontal_scroll_direction : this.defaultOptions.horizontal_scroll_direction;
    … …  
    4450        this.parallaxEnabled = undefined !== this.cbParallaxPublic.plugin_options.parallax_enabled ? this.cbParallaxPublic.plugin_options.parallax_enabled : '0';
    4551        this.allowOverride = undefined !== this.cbParallaxPublic.plugin_options.allow_override ? this.cbParallaxPublic.plugin_options.allow_override : '0';
    46         //this.disableOnMobile = undefined !== this.cbParallaxPublic.plugin_options.disable_on_mobile ? this.cbParallaxPublic.plugin_options.disable_on_mobile : '0';
    4752        //
    4853        this.canParallax = undefined !== this.cbParallaxPublic.image_options.can_parallax ? this.cbParallaxPublic.image_options.can_parallax : '0';
    … …  
    6570            color: undefined !== this.cbParallaxPublic.overlay_options.overlay_color ? this.cbParallaxPublic.overlay_options.overlay_color : this.defaultOptions.overlay_color
    6671        };
    67 
    68         this.imageAspectRatio = this.getBackgroundImageAspectRatio();
     72        //this.canvasDim = [];
     73        /*this.canvasDim.x = this.getCanvasDimensions()[x];
     74        this.canvasDim.y = this.getCanvasDimensions()[y];*/
    6975        this.context = null;
    7076        this.img = null;
    71         this.parallaxfactor = '1.2';
     77        this.scaleFactor = undefined !== this.cbParallaxPublic.scale_factor ? this.cbParallaxPublic.scale_factor : 1.5;
     78        this.imageAspectRatio = null/* = this.getBackgroundImageAspectRatio()*/;
     79        this.scrollFactor = parseFloat('1.2');
     80        this.viewport = [];
     81        this.viewport.x = Math.max(document.documentElement.clientWidth || 0, window.innerWidth || 0);
     82        this.viewport.y = Math.max(document.documentElement.clientHeight || 0, window.innerHeight || 0);
    7283        $instance = this;
    7384    }
    … …  
    7788        /// Events
    7889        addEvents: function() {
    79             let viewport = $(window);
    80             if ('1' === this.canParallax && '1' === this.parallaxEnabled) {
    81                 viewport.on('scroll', {context: this}, this.parallaxOnScroll);
    82                 viewport.on('resize', {context: this}, this.parallaxOnResize);
    83             } else {
    84                 viewport.on('resize', {context: this}, this.staticBackgroundImageOnResize);
    85             }
    86         },
     90            //let viewport = $(window);
     91            if ('1' === $instance.canParallax && '1' === $instance.parallaxEnabled) {
     92                viewport.on('scroll', {context: this}, $instance.parallaxOnScroll);
     93                //viewport.on('scroll', {context: this}, $instance.actionOnScroll);
     94                viewport.on('resize', {context: this}, $instance.parallaxOnResize);
     95            }
     96        },
     97
     98        actionOnScroll: function(event) {
     99            let $this = $instance;
     100            if (undefined !== event) {
     101                $this = event.data.context;
     102            }
     103
     104            const scrollY = window.scrollY;
     105            const el = document.getElementById('cb_parallax_canvas');
     106            //const effect = 'Parallax';
     107            //const effect = 'Spiral Scroll';
     108            switch ($instance.effect) {
     109                case 'Parallax':
     110                    $this.parallaxOnScroll(event);
     111                    break;
     112                case 'Spiral Scroll':
     113                    //let a = $this.get2dTransformRatios(spiralScroll, el, scrollY);
     114                    $this.spiralScroll(el, scrollY);
     115                    break;
     116                case 'Sine Wave':
     117                    $this.sineWaveFloat(el, scrollY);
     118                    break;
     119                case 'Golden Ratio':
     120                    $this.goldenRatioScale(el, scrollY);
     121                    break;
     122                case 'Fibonacci':
     123                    $this.fibonacciPath(el, scrollY);
     124                    break;
     125                case 'Radial Outward':
     126                    $this.radialOutwardMovement(el, scrollY);
     127                    break;
     128                case 'orbital':
     129                    $this.orbitalLayers(el, scrollY);
     130                    break;
     131                case 'tornado':
     132                    $this.tornadoTwirl(el, scrollY);
     133                    break;
     134                case 'diagonal':
     135                    $this.diagonalParallax(el, scrollY);
     136                    break;
     137                case 'ocean-wave':
     138                    $this.oceanWaveLayers(el, scrollY);
     139                    break;
     140                case 'vortex':
     141                    $this.vortexInOut(el, scrollY);
     142                    break;
     143                case 'perspective-flip':
     144                    $this.perspectiveFlip(el, scrollY);
     145                    break;
     146                case 'random-drift':
     147                    $this.randomDrift(el, scrollY);
     148                    break;
     149                case 'depth-fog':
     150                    $this.depthFog(el, scrollY);
     151                    break;
     152                case 'parallax-stars':
     153                    $this.parallaxStars(el, scrollY);
     154                    break;
     155                case 'logarithmic-spiral':
     156                    $this.logarithmicSpiral(el, scrollY);
     157                    break;
     158                case 'grid-morph':
     159                    $this.gridMorph(el, scrollY);
     160                    break;
     161                case 'path-follow':
     162                    $this.pathFollowing(el, scrollY);
     163                    break;
     164                case 'magnetic':
     165                    $this.magneticEasing(el, scrollY);
     166                    break;
     167                case 'infinite-loop':
     168                    $this.infiniteLoop(el, scrollY);
     169                    break;
     170            }
     171        },
     172
     173        /*get2dTransformRatios: function(fn, el, scrollY) {
     174            let imageWidth = this.image.width;
     175            let imageHeight = this.image.height;
     176            let scrollratio = this.getScrollRatio();
     177            let a = fn(el, scrollY);
     178            let b = 2;
     179            return a;
     180        },*/
    87181
    88182        /// Init
    89183        init: function() {
    90             if ('none' !== this.image.src && '1' === this.canParallax /*&& '0' === this.disableOnMobile*/) {
    91                 this.imports = {
     184            if ('none' !== $instance.image.src && '1' === $instance.canParallax) {
     185                $instance.imports = {
    92186                    requestAnimationFrame: requestAnimationFrame
    93187                };
    94188                window.__forceSmoothScrollPolyfill__ = true;
    95                 this.addEvents();
     189
     190                //$instance.scrollFactor = $instance.getScrollRatio();
     191                $instance.imageAspectRatio = $instance.getBackgroundImageAspectRatio();
     192
     193                $instance.addEvents();
    96194            }
    97195        },
    98196
    99197        initBackground: function() {
    100             if ('none' !== this.image.src) {
    101                 if ('parallax' === this.getBackgroundMode()) {
    102                     this.initParallaxBackground();
    103                 } else {
    104                     this.initStaticBackground();
    105                 }
    106             }
    107         },
    108 
    109         initParallaxBackground: function() {
     198            if ('none' !== $instance.image.src) {
     199                //$instance.doBackground();
     200                $('html').attr('class', 'cbpHtml');
     201                $('body').attr('class', 'cbpBody');
     202                $instance.setupCanvas();
     203                $instance.setupOverlay();
     204                $instance.addCss();
     205
     206                let imageDim = $instance.getImageDimensions();
     207                //this.canvasDim = this.getCanvasDimensions();
     208                let canvasDim = $instance.getCanvasDimensions();
     209                let canvas = document.getElementById('cb_parallax_canvas');
     210                let context = canvas.getContext('2d');
     211                $instance.img = new Image();
     212                let sx = 0;
     213                let sy = 0;
     214                let sWidth = imageDim.width;
     215                let sHeight = imageDim.height;
     216                let dx = -((imageDim.width - viewport.width()) / 2).toFixed(0);
     217                let dy = 0;
     218                let dWidth = viewport.innerWidth()/*imageDim.width*/;
     219                let dHeight = viewport.innerHeight()/*Math.abs((parseInt(imageDim.height) + parseInt(imageDim.height / $instance.scrollFactor)))*/;
     220
     221                $instance.img.onload = function() {
     222                    let image = this;
     223                    context.drawImage(this, 0, 0, canvasDim.x, canvasDim.y);
     224
     225                    //context.drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight);
     226                    //context.drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight);
     227                    //context.drawImage(this, dx, dy, dWidth, dHeight);
     228                    //context.drawImage(image, 0, 0);
     229                    /*context.drawImage(
     230                        this,
     231                        /!*(-imageDim.width * 1).toFixed(0)*!/0,
     232                        /!*(-imageDim.height * 1).toFixed(0)*!/0,
     233                        (imageDim.width * 2).toFixed(0),
     234                        (imageDim.height * 2).toFixed(0),
     235                        0,
     236                        0,
     237                        (canvasDim.x * 2).toFixed(0),
     238                        (canvasDim.y * 2).toFixed(0)
     239                    );*/
     240                    $instance.doParallaxBackgroundImageMovement();
     241                    //$instance.parallaxOnResize();
     242                };
     243                $instance.img.src = $instance.image.src + '?' + encodeURIComponent(new Date().toDateString());
     244            }
     245        },
     246
     247        /*doBackground: function() {
    110248            $('html').attr('class', 'cbpHtml');
    111249            $('body').attr('class', 'cbpBody');
    112             this.setupCanvas();
    113             this.setupOverlay();
    114             this.addCss();
    115             let imageDim = this.getImageDimensions();
     250            $instance.setupCanvas();
     251            $instance.setupOverlay();
     252            $instance.addCss();
     253            let imageDim = $instance.getImageDimensions();
     254            //this.canvasDim = this.getCanvasDimensions();
     255            let canvasDim = $instance.getCanvasDimensions();
    116256            let canvas = document.getElementById('cb_parallax_canvas');
    117257            let context = canvas.getContext('2d');
    118             this.img = new Image();
    119             let $this = this;
    120 
    121             this.img.onload = function() {
     258            $instance.img = new Image();
     259            //let $this = this;
     260
     261            $instance.img.onload = function() {
    122262                context.drawImage(this, 0, 0, imageDim.width, imageDim.height);
    123                 $this.doParallaxBackgroundImage();
     263                /!*context.drawImage(
     264                    this,
     265                    /!*(-imageDim.width * 1).toFixed(0)*!/0,
     266                    /!*(-imageDim.height * 1).toFixed(0)*!/0,
     267                    (imageDim.width * 2).toFixed(0),
     268                    (imageDim.height * 2).toFixed(0),
     269                    0,
     270                    0,
     271                    (canvasDim.x * 2).toFixed(0),
     272                    (canvasDim.y * 2).toFixed(0)
     273                );*!/
     274                $instance.doParallaxBackgroundImageMovement();
     275                $instance.parallaxOnResize();
    124276            };
    125             this.img.src = this.image.src + '?' + encodeURIComponent(new Date().toDateString());
    126         },
    127 
    128         initStaticBackground: function() {
    129             this.setupOverlay();
    130             this.addCss();
    131             this.setupStaticBackgroundImageContainer();
    132         },
     277            $instance.img.src = $instance.image.src + '?' + encodeURIComponent(new Date().toDateString());
     278        },*/
    133279
    134280        setupCanvas: function() {
    135281            if (0 === $('#cb_parallax_canvas').length) {
    136                 const canvasDim = this.getCanvasDimensions();
    137                 const text = '<div id="cb_parallax_overlay"></div><canvas id="cb_parallax_canvas" class="custom-background" width="' + canvasDim.x + '" height="' + canvasDim.y + '" style="background-color: ' + this.image.backgroundColor + '"></canvas>';
     282                let canvasDim = $instance.getCanvasDimensions();
     283                const text = '<div id="cb_parallax_overlay"></div><canvas id="cb_parallax_canvas" class="custom-background" width="' + canvasDim.x + '" height="' + canvasDim.y + '" style="background-color: ' + $instance.image.backgroundColor + '"></canvas>';
     284                //const text = '<div id="cb_parallax_overlay"></div><canvas id="cb_parallax_canvas" class="custom-background"></canvas>';
    138285                $(text).insertBefore('.cbpHtml > head');
    139286            }
    … …  
    142289        setupOverlay: function() {
    143290            if (0 === $('#cb_parallax_overlay').length) {
    144                 this.overlayContainer = $('#cb_parallax_overlay');
    145                 let overlayBackgroundColor = this.cbParallaxPublic.image_options.overlay_color;
    146                 let overlayOpacity = this.extractOpacity(this.cbParallaxPublic.image_options.overlay_opacity);
    147 
    148                 this.overlayContainer.css({
    149                     'background': 'url(' + this.cbParallaxPublic.overlay_options.overlay_path + this.cbParallaxPublic.overlay_options.overlay_image + ')',
     291                $instance.overlayContainer = $('#cb_parallax_overlay');
     292                let overlayBackgroundColor = $instance.cbParallaxPublic.image_options.overlay_color;
     293                let overlayOpacity = $instance.extractOpacity($instance.cbParallaxPublic.image_options.overlay_opacity);
     294
     295                $instance.overlayContainer.css({
     296                    'background': 'url(' + $instance.cbParallaxPublic.overlay_options.overlay_path + $instance.cbParallaxPublic.overlay_options.overlay_image + ')',
    150297                    'opacity': overlayOpacity,
    151298                    'background-color': overlayBackgroundColor
    … …  
    154301        },
    155302
    156         getBackgroundMode: function() {
     303        /*getBackgroundMode: function() {
    157304            let mode = 'static';
    158305
    159             if ('1' === this.parallaxEnabled && '1' === this.canParallax) {
    160                 mode = 'parallax';
     306            if ('1' === $instance.parallaxEnabled && '1' === $instance.canParallax) {
     307                mode = 'Parallax';
    161308            }
    162309
    163310            return mode;
    164         },
     311        },*/
    165312
    166313        /// Image Scaling
    167         scaleImageVertical: function(imgWidth, imgHeight, viewportWidth, viewportHeight) {
    168             // Zielhöhe: 125% der Viewport-Höhe
    169             const targetHeight = viewportHeight * 1.25;
    170 
    171             // Berechne Skalierung, um Höhe zu erreichen
    172             const scale = targetHeight / imgHeight;
    173 
    174             // Skaliere Breite entsprechend
    175             let newWidth = imgWidth * scale;
    176             let newHeight = imgHeight * scale;
    177 
    178             // Wenn neue Breite kleiner als Viewport-Breite → anpassen
    179             if (newWidth < viewportWidth) {
    180                 const scaleW = viewportWidth / imgWidth;
    181                 newWidth = imgWidth * scaleW;
    182                 newHeight = imgHeight * scaleW;
     314        scaleImageForVerticalScrolling: function(imgW, imgH, viewportW, viewportH, scaleFactor) {
     315            const targetW = viewportW;
     316            const targetH = viewportH * scaleFactor;
     317
     318            let newW = targetW;
     319            let newH = imgH / imgW * targetW;
     320
     321            // Skalieren der Bildbreite und -höhe auf die Mindestmasse
     322            if (newH < targetH || newW < viewportW) {
     323                while (newW < viewportW || newH < targetH) {
     324                    newW += 1;
     325                    newH += 1;
     326                }
     327            }
     328
     329            return {
     330                width: newW.toFixed(0),
     331                height: newH.toFixed(0)
     332            };
     333        },
     334
     335        scaleImageForHorizontalScrolling: function(imgW, imgH, viewportW, viewportH, scaleFactor) {
     336            // Zielbreite: 125% der Viewport-Breite
     337            const targetWidth = viewportW * scaleFactor;
     338
     339            // Berechne Skalierung, um Breite zu erreichen
     340            const scale = targetWidth / imgW;
     341
     342            // Skaliere Höhe entsprechend
     343            let newWidth = imgW * scale;
     344            let newHeight = imgH * scale;
     345
     346            // Wenn neue Höhe kleiner als Viewport-Höhe → anpassen
     347            if (newHeight < viewportH) {
     348                const scaleH = viewportH / imgH;
     349                newWidth = imgW * scaleH;
     350                newHeight = imgH * scaleH;
    183351            }
    184352
    … …  
    189357        },
    190358
    191         scaleImageHorizontal: function(imgWidth, imgHeight, viewportWidth, viewportHeight) {
    192             // Zielbreite: 125% der Viewport-Breite
    193             const targetWidth = viewportWidth * 1.25;
    194 
    195             // Berechne Skalierung, um Breite zu erreichen
    196             const scale = targetWidth / imgWidth;
    197 
    198             // Skaliere Höhe entsprechend
    199             let newWidth = imgWidth * scale;
    200             let newHeight = imgHeight * scale;
    201 
    202             // Wenn neue Höhe kleiner als Viewport-Höhe → anpassen
    203             if (newHeight < viewportHeight) {
    204                 const scaleH = viewportHeight / imgHeight;
    205                 newWidth = imgWidth * scaleH;
    206                 newHeight = imgHeight * scaleH;
    207             }
    208 
    209             return {
    210                 width: newWidth.toFixed(0),
    211                 height: newHeight.toFixed(0)
    212             };
    213         },
    214 
    215359        /// Moves
    216         doParallaxBackgroundImage: function() {
    217             this.updateCanvasAlignment();
    218             this.updateParallaxAxis();
     360        doParallaxBackgroundImageMovement: function() {
     361            $instance.updateCanvasAlignment();
     362            $instance.updateParallaxAxis();
    219363            // We call this one once from here so everything is Radiohead, Everything in its right place :)
    220             this.doParallaxTranslate3DTransform(this.getParallaxTransform());
     364            $instance.doParallaxTranslate3DTransform($instance.getParallaxTransform());
    221365        },
    222366
    … …  
    224368            let element = $('#cb_parallax_canvas');
    225369
    226             if ('vertical' === this.direction) {
    227                 element.css({'left': this.getBackgroundImageHorizontalAlignment()});
    228             } else if ('horizontal' === this.direction) {
    229                 element.css({'top': this.getBackgroundImageVerticalAlignment()});
     370            if ('vertical' === $instance.direction) {
     371                element.css({'left': $instance.getBackgroundImageHorizontalAlignment()});
     372            } else if ('horizontal' === $instance.direction) {
     373                element.css({'top': $instance.getBackgroundImageVerticalAlignment()});
    230374            }
    231375        },
    … …  
    234378            let element = $("#cb_parallax_canvas");
    235379
    236             if ('vertical' === this.direction) {
    237                 if ('to bottom' === this.verticalScrollDirection) {
     380            if ('vertical' === $instance.direction) {
     381                if ('to bottom' === $instance.verticalScrollDirection) {
    238382                    element.css({
    239383                        'position': 'fixed',
    240                         'top': this.getBackgroundImageVerticalPositionInPx()
     384                        'top': $instance.getBackgroundImageVerticalPositionInPx()
    241385                    });
    242386                }
    243             } else if ('horizontal' === this.direction) {
     387            } else if ('horizontal' === $instance.direction) {
    244388                element.css({
    245389                    'position': 'fixed',
    246                     'left': this.getBackgroundImageHorizontalPositionInPx()
     390                    'left': $instance.getBackgroundImageHorizontalPositionInPx()
    247391                });
    248392            }
    249393        },
     394
     395        /*considerAdminBar: function() {
     396            if(0 !== $('#wpadminbar').length) {
     397                let posTop = $('#wpadminbar').height();
     398            }
     399           
     400        },*/
    250401
    251402        /// Image Movement
    … …  
    265416                y: null
    266417            };
    267             let ratio = this.getParallaxScrollRatio();
     418            let ratio = $instance.getScrollRatio();
    268419            let scrollingPosition = $(window).scrollTop();
    269420
    270421            // Determines the values for the transformation.
    271             if ('vertical' === this.direction) {
    272                 if ('to top' === this.verticalScrollDirection) {
     422            if ('vertical' === $instance.direction) {
     423                if ('to top' === $instance.verticalScrollDirection) {
    273424                    transform.x = 0;
    274425                    transform.y = -scrollingPosition * ratio;
    275                 } else if ('to bottom' === this.verticalScrollDirection) {
     426                } else if ('to bottom' === $instance.verticalScrollDirection) {
    276427                    transform.x = 0;
    277428                    transform.y = scrollingPosition * ratio;
    278429                }
    279             } else if ('horizontal' === this.direction) {
    280                 if ('to the left' === this.horizontalScrollDirection) {
     430            } else if ('horizontal' === $instance.direction) {
     431                if ('to the left' === $instance.horizontalScrollDirection) {
    281432                    transform.x = -scrollingPosition * ratio;
    282433                    transform.y = 0;
    283                 } else if ('to the right' === this.horizontalScrollDirection) {
     434                } else if ('to the right' === $instance.horizontalScrollDirection) {
    284435                    transform.x = scrollingPosition * ratio;
    285436                    transform.y = 0;
    … …  
    290441
    291442        parallaxOnScroll: function(event) {
    292             let $this = this;
     443            let $this = $instance;
    293444
    294445            if (undefined !== event) {
    … …  
    296447            }
    297448            $this.isScrolling = '1';
    298             $instance = $this;
    299449            requestAnimationFrame($this.scrollParallaxBackgroundImage);
    300450        },
    … …  
    309459
    310460        parallaxOnResize: function(event) {
    311             let $this = this;
    312 
     461            let $this = $instance;
     462            $this.canvasDim = $this.getCanvasDimensions();
    313463            if (undefined !== event) {
    314464                $this = event.data.context;
    315465            }
    316466            $this.isResizing = '1';
    317             $instance = $this;
    318467            requestAnimationFrame($this.resizeParallaxBackgroundImage);
    319468        },
    … …  
    333482        getBackgroundImageHorizontalAlignment: function() {
    334483            let posX = null;
    335             let canvasDim = this.getCanvasDimensions();
    336             let aspectRatio = this.getViewportAspectRatio();
    337             let landscape = aspectRatio >= this.imageAspectRatio ? '1' : '0';
    338             let portrait = aspectRatio < this.imageAspectRatio ? '1' : '0';
    339             let viewport = $(window);
    340 
    341             if ('vertical' === this.direction) {
    342                 if ('to top' === this.verticalScrollDirection) {
     484            let canvasDim = $instance.getCanvasDimensions();
     485            let aspectRatio = $instance.getViewportAspectRatio();
     486            let landscape = aspectRatio >= $instance.imageAspectRatio ? '1' : '0';
     487            let portrait = aspectRatio < $instance.imageAspectRatio ? '1' : '0';
     488            //let viewport = $(window);
     489
     490            if ('vertical' === $instance.direction) {
     491                if ('to top' === $instance.verticalScrollDirection) {
    343492                    if ('1' === landscape) {
    344493                        switch (this.horizontalAlignment) {
    … …  
    355504                        return parseInt(posX) + 'px';
    356505                    } else if ('1' === portrait) {
    357                         switch (this.horizontalAlignment) {
     506                        switch ($instance.horizontalAlignment) {
    358507                            case 'left':
    359508                                posX = '0';
    … …  
    368517                        return parseInt(posX) + 'px';
    369518                    }
    370                 } else if ('to bottom' === this.verticalScrollDirection) {
     519                } else if ('to bottom' === $instance.verticalScrollDirection) {
    371520                    if ('1' === landscape) {
    372                         switch (this.horizontalAlignment) {
     521                        switch ($instance.horizontalAlignment) {
    373522                            case 'left':
    374523                                posX = '0';
    … …  
    383532                        return parseInt(posX) + 'px';
    384533                    } else if ('1' === portrait) {
    385                         switch (this.horizontalAlignment) {
     534                        switch ($instance.horizontalAlignment) {
    386535                            case 'left':
    387536                                posX = '0';
    … …  
    402551        getBackgroundImageVerticalAlignment: function() {
    403552            let posY = null;
    404             let canvasDim = this.getCanvasDimensions();
    405             let aspectRatio = this.getViewportAspectRatio();
    406             let landscape = aspectRatio >= this.imageAspectRatio ? '1' : '0';
    407             let portrait = aspectRatio < this.imageAspectRatio ? '1' : '0';
    408             let viewport = $(window);
    409 
    410             if ('horizontal' === this.direction) {
    411                 if ('to the left' === this.horizontalScrollDirection) {
     553            let canvasDim = $instance.getCanvasDimensions();
     554            let aspectRatio = $instance.getViewportAspectRatio();
     555            let landscape = aspectRatio >= $instance.imageAspectRatio ? '1' : '0';
     556            let portrait = aspectRatio < $instance.imageAspectRatio ? '1' : '0';
     557            //let viewport = $(window);
     558
     559            if ('horizontal' === $instance.direction) {
     560                if ('to the left' === $instance.horizontalScrollDirection) {
    412561                    if ('1' === landscape) {
    413                         switch (this.verticalAlignment) {
     562                        switch ($instance.verticalAlignment) {
    414563                            case 'top':
    415564                                posY = '0';
    … …  
    425574                        return parseInt(posY) + 'px';
    426575                    } else if ('1' === portrait) {
    427                         switch (this.verticalAlignment) {
     576                        switch ($instance.verticalAlignment) {
    428577                            case 'top':
    429578                                posY = '0';
    … …  
    439588                        return parseInt(posY) + 'px';
    440589                    }
    441                 } else if ('to the right' === this.horizontalScrollDirection) {
     590                } else if ('to the right' === $instance.horizontalScrollDirection) {
    442591                    if ('1' === landscape) {
    443                         switch (this.verticalAlignment) {
     592                        switch ($instance.verticalAlignment) {
    444593                            case 'top':
    445594                                posY = '0';
    … …  
    455604                        return parseInt(posY) + 'px';
    456605                    } else if ('1' === portrait) {
    457                         switch (this.verticalAlignment) {
     606                        switch ($instance.verticalAlignment) {
    458607                            case 'top':
    459608                                posY = '0';
    … …  
    473622        },
    474623
    475         getParallaxScrollRatio: function() {
    476             let canvasDim = this.getCanvasDimensions();
     624        getScrollRatio: function() {
     625            let canvasDim = $instance.getCanvasDimensions();
    477626            let documentOffsetX = null;
    478627            let imageOffsetY = null;
    479628            let imageOffsetX = null;
    480629            let ratio = null;
    481             let viewport = $(window);
    482 
    483             if ('vertical' === this.direction) {
     630            //let viewport = $(window);
     631
     632            if ('vertical' === $instance.direction) {
    484633                documentOffsetX = $(document).innerHeight() - viewport.innerHeight();
    485634                imageOffsetY = canvasDim.y - viewport.height();
    486635                ratio = (imageOffsetY / documentOffsetX);
    487             } else if ('horizontal' === this.direction) {
     636            } else if ('horizontal' === $instance.direction) {
    488637                documentOffsetX = $(document).innerHeight() - viewport.innerHeight();
    489638                imageOffsetX = canvasDim.x - viewport.innerWidth();
    … …  
    493642        },
    494643
    495         getViewportDimensions: function() {
    496             let viewport = $('window');
    497             return {height: viewport.innerHeight(), width: viewport.innerWidth()};
    498         },
    499 
    500644        getCanvasDimensions: function() {
    501             let viewport = $(window);
    502645            let displayRatio = viewport.innerWidth() / viewport.innerHeight();
    503             let imageRatio = this.image.width / this.image.height;
     646            let imageRatio = $instance.image.width / $instance.image.height;
    504647            let imageHeight = 0;
    505648            let imageWidth = 0;
    506649
    507             if ('vertical' === this.direction) {
     650            if ('vertical' === $instance.direction) {
    508651
    509652                if (imageRatio < displayRatio) {
    510653                    imageWidth = viewport.innerWidth();
    511                     imageHeight = imageWidth / this.image.width * this.image.height;
    512                     return {x: imageWidth.toFixed(0), y: imageHeight.toFixed(0)};
     654                    imageHeight = imageWidth / $instance.image.width * $instance.image.height;
    513655                } else {
    514                     imageHeight = viewport.innerHeight() * this.parallaxfactor;
    515                     imageWidth = imageHeight / this.image.height * this.image.width;
    516                     return {x: imageWidth.toFixed(0), y: imageHeight.toFixed(0)};
     656                    imageHeight = viewport.innerHeight() * $instance.scrollFactor;
     657                    imageWidth = imageHeight / $instance.image.height * $instance.image.width;
    517658                }
    518             }
    519             if ('horizontal' === this.direction) {
     659                return {x: imageWidth.toFixed(0), y: imageHeight.toFixed(0)};
     660            }
     661            if ('horizontal' === $instance.direction) {
    520662
    521663                if (imageRatio < displayRatio) {
    522                     imageWidth = viewport.innerWidth() * this.parallaxfactor;
    523                     imageHeight = imageWidth / this.image.width * this.image.height;
    524                     return {x: imageWidth.toFixed(0), y: imageHeight.toFixed(0)};
     664                    imageWidth = viewport.innerWidth() * $instance.scrollFactor;
     665                    imageHeight = imageWidth / $instance.image.width * $instance.image.height;
    525666                } else {
    526667                    imageHeight = viewport.innerHeight();
    527                     imageWidth = imageHeight / this.image.height * this.image.width;
    528                     return {x: imageWidth.toFixed(0), y: imageHeight.toFixed(0)};
     668                    imageWidth = imageHeight / $instance.image.height * $instance.image.width;
    529669                }
     670                return {x: imageWidth.toFixed(0), y: imageHeight.toFixed(0)};
    530671            }
    531672        },
    … …  
    534675            const viewportW = window.innerWidth;
    535676            const viewportH = window.innerHeight;
    536             const imgW = this.image.width;
    537             const imgH = this.image.height;
    538 
    539             if ('vertical' === this.direction) {
    540                 return this.scaleImageVertical(imgW, imgH, viewportW, viewportH);
    541             }
    542             if ('horizontal' === this.direction) {
    543                 return this.scaleImageHorizontal(imgW, imgH, viewportW, viewportH);
     677            const imgW = parseInt($instance.image.width);
     678            const imgH = parseInt($instance.image.height);
     679            let scaleFactor = {x: 1.25, y: 1.25};
     680            if ('vertical' === $instance.direction) {
     681                return $instance.scaleImageForVerticalScrolling(imgW, imgH, viewportW, viewportH, scaleFactor.x);
     682            }
     683            if ('horizontal' === $instance.direction) {
     684                return $instance.scaleImageForHorizontalScrolling(imgW, imgH, viewportW, viewportH, scaleFactor.y);
    544685            }
    545686        },
    546687
    547688        updateCanvasDimensions: function() {
    548             let canvasDim = this.getCanvasDimensions();
     689            let canvasDim = $instance.getCanvasDimensions();
    549690            let canvas = $("#cb_parallax_canvas");
    550691            let canvasWidth = parseInt(canvasDim.x);
    … …  
    552693            canvas.width(canvasWidth);
    553694            canvas.height(canvasHeight);
    554         },
    555 
    556         setupStaticBackgroundImageContainer: function() {
    557             let canvasDim = this.getStaticBackgroundImageDimensions();
    558 
    559             $('body').css({
    560                 'background': 'url(' + this.image.src + ')',
    561                 'background-size': canvasDim.width + 'px' + ' ' + canvasDim.height + 'px',
    562                 'background-position': this.image.positionX + ' ' + this.image.positionY,
    563                 'background-attachment': this.image.backgroundAttachment,
    564                 'background-repeat': this.image.backgroundRepeat
    565             });
    566         },
    567 
    568         staticBackgroundImageOnResize: function(event) {
    569             let $this = this;
    570 
    571             if (undefined !== event) {
    572                 $this = event.data.context;
    573             }
    574             $this.isResizing = '1';
    575             $instance = $this;
    576             requestAnimationFrame($this.updateStaticBackgroundImageAlignment);
    577         },
    578 
    579         updateStaticBackgroundImageAlignment: function() {
    580             if ('1' === $instance.isResizing) {
    581                 $instance.updateStaticBackgroundImageDimensions();
    582             }
    583             $instance.isResizing = '0';
    584             requestAnimationFrame($instance.updateStaticBackgroundImageAlignment);
    585         },
    586 
    587         updateStaticBackgroundImageDimensions: function() {
    588             let canvasDim = $instance.getStaticBackgroundImageDimensions();
    589             $('body').css({'background-size': canvasDim.width + 'px' + ' ' + canvasDim.height + 'px'});
    590         },
    591 
    592         getStaticBackgroundImageDimensions: function() {
    593             let viewportSize = this.getViewportDimensions();
    594             let canvasDim = {};
    595 
    596             if (this.getViewportAspectRatio() >= this.imageAspectRatio) {
    597                 // Landscape
    598                 canvasDim.width = viewportSize.width;
    599                 canvasDim.height = canvasDim.width / this.imageAspectRatio;
    600                 return (canvasDim);
    601             } else {
    602                 // Portrait
    603                 canvasDim.height = viewportSize.height;
    604                 canvasDim.width = canvasDim.height * this.imageAspectRatio;
    605                 return canvasDim;
    606             }
    607 
    608695        },
    609696
    … …  
    626713        getBackgroundImageHorizontalPositionInPx: function() {
    627714            let posX = null;
    628             let canvasDimensions = this.getCanvasDimensions();
    629 
    630             if ('to the left' === this.horizontalScrollDirection) {
     715            let canvasDimensions = $instance.getCanvasDimensions();
     716
     717            if ('to the left' === $instance.horizontalScrollDirection) {
    631718                posX = 0;
    632719                return posX.toString() + 'px';
    633             } else if ('to the right' === this.horizontalScrollDirection) {
     720            } else if ('to the right' === $instance.horizontalScrollDirection) {
    634721                let number = $(window).innerWidth() - canvasDimensions.x;
    635722                posX = parseInt(number.toFixed());
    … …  
    640727        getBackgroundImageVerticalPositionInPx: function() {
    641728            let posY = null;
    642             let canvasDimensions = this.getCanvasDimensions();
    643 
    644             if ('to top' === this.verticalScrollDirection) {
     729            let canvasDimensions = $instance.getCanvasDimensions();
     730
     731            if ('to top' === $instance.verticalScrollDirection) {
    645732                posY = 0;
    646733                return posY.toString() + 'px';
    647             } else if ('to bottom' === this.verticalScrollDirection) {
     734            } else if ('to bottom' === $instance.verticalScrollDirection) {
    648735                let number = $(window).innerHeight() - canvasDimensions.y;
    649736                posY = parseInt(number.toFixed());
    … …  
    653740
    654741        getBackgroundImageAspectRatio: function() {
    655             let image = this.image;
    656             return image.width / image.height;
     742            let image = $instance.image;
     743            return (image.width / image.height).toFixed(2);
    657744        },
    658745
    659746        getViewportAspectRatio: function() {
    660             let viewport = $(window);
    661             return viewport.innerWidth() / viewport.innerHeight();
     747            //let viewport = $(window);
     748            return (viewport.innerWidth() / viewport.innerHeight()).toFixed(2);
    662749        },
    663750
    … …  
    665752            let result = string.match(/\d+/g);
    666753            return result[0] + "." + result[1];
     754        },
     755
     756        //////////////////////////////////////////
     757
     758        // Effects
     759        clampMovement: function(x, y, element) {
     760            const maxX = element.offsetWidth * 0.2;
     761            const maxY = element.offsetHeight * 0.2;
     762            return [
     763                Math.max(-maxX, Math.min(maxX, x)),
     764                Math.max(-maxY, Math.min(maxY, y))
     765            ];
     766        },
     767
     768        spiralScroll: function(e, s) {
     769            let r = s * 0.1, a = s * 0.01, x = r * Math.cos(a), y = r * Math.sin(a);
     770            [x, y] = $instance.clampMovement(x, y, e);
     771            e.style.transform = `translate3d(${x}px,${y}px,0)`;
     772        },
     773
     774        sineWaveFloat: function(e, s) {
     775            let a = e.offsetWidth * 0.2, x = a * Math.sin(s * 0.01), y = s * 0.5;
     776            [x, y] = $instance.clampMovement(x, y, e);
     777            e.style.transform = `translate3d(${x}px,${y}px,0)`;
     778        },
     779
     780        goldenRatioScale: function(e, s) {
     781            let scale = Math.min(1.2, 1 + s * 0.0001 * 1.618);
     782            e.style.transform = `scale(${scale})`;
     783        },
     784
     785        fibonacciPath: function(e, s) {
     786            let f = s / 100, a = f * (Math.PI / 3), r = f * 5, x = r * Math.cos(a), y = r * Math.sin(a);
     787            [x, y] = $instance.clampMovement(x, y, e);
     788            e.style.transform = `translate3d(${x}px,${y}px,0)`;
     789        },
     790
     791        radialOutwardMovement: function(e, s) {
     792            let a = Math.PI / 4, d = s * 0.3, x = d * Math.cos(a), y = d * Math.sin(a);
     793            [x, y] = $instance.clampMovement(x, y, e);
     794            e.style.transform = `translate3d(${x}px,${y}px,0)`;
     795        },
     796
     797        orbitalLayers: function(e, s) {
     798            let r = e.offsetWidth * 0.2, a = s * 0.01, x = r * Math.cos(a), y = r * Math.sin(a);
     799            [x, y] = $instance.clampMovement(x, y, e);
     800            e.style.transform = `translate3d(${x}px,${y}px,0)`;
     801        },
     802
     803        tornadoTwirl: function(e, s) {
     804            let y = s * 0.5, a = s * 0.1;
     805            [, y] = $instance.clampMovement(0, y, e);
     806            e.style.transform = `translate3d(0,${y}px,0) rotate(${a}deg)`;
     807        },
     808
     809        diagonalParallax: function(e, s) {
     810            let x = s * 0.3, y = s * 0.7;
     811            [x, y] = $instance.clampMovement(x, y, e);
     812            e.style.transform = `translate3d(${x}px,${y}px,0)`;
     813        },
     814
     815        oceanWaveLayers: function(e, s) {
     816            let a = e.offsetWidth * 0.2, x = a * Math.sin(s * 0.02), y = s * 0.4;
     817            [x, y] = $instance.clampMovement(x, y, e);
     818            e.style.transform = `translate3d(${x}px,${y}px,0)`;
     819        },
     820
     821        vortexInOut: function(e, s) {
     822            let sc = Math.min(1.2, 1 + s * 0.0002), a = s * 0.2;
     823            e.style.transform = `rotate(${a}deg) scale(${sc})`;
     824        },
     825
     826        perspectiveFlip: function(e, s) {
     827            let a = s * 0.1;
     828            e.style.transform = `rotateX(${a}deg) scale(1.2)`;
     829            e.style.transformStyle = 'preserve-3d';
     830        },
     831
     832        randomDrift: function(e, s) {
     833            let x = Math.sin(s * 0.01) * e.offsetWidth * 0.2, y = Math.cos(s * 0.01) * e.offsetHeight * 0.2;
     834            [x, y] = $instance.clampMovement(x, y, e);
     835            e.style.transform = `translate3d(${x}px,${y}px,0)`;
     836        },
     837
     838        depthFog: function(e, s) {
     839            let y = s * 0.5, b = Math.min(s * 0.01, 5);
     840            [, y] = $instance.clampMovement(0, y, e);
     841            e.style.transform = `translateY(${y}px)`;
     842            e.style.filter = `blur(${b}px)`;
     843        },
     844
     845        parallaxStars: function(e, s) {
     846            let y = s * 0.2;
     847            [, y] = $instance.clampMovement(0, y, e);
     848            e.style.transform = `translateY(${y}px)`;
     849        },
     850
     851        logarithmicSpiral: function(e, s) {
     852            let b = 0.1, t = s * 0.01, r = Math.exp(b * t) * 5, x = r * Math.cos(t), y = r * Math.sin(t);
     853            [x, y] = $instance.clampMovement(x, y, e);
     854            e.style.transform = `translate3d(${x}px,${y}px,0)`;
     855        },
     856
     857        gridMorph: function(e, s) {
     858            let sk = s * 0.05;
     859            e.style.transform = `skew(${sk}deg,${sk}deg)`;
     860        },
     861
     862        pathFollowing: function(e, s) {
     863            let t = (s % 1000) / 1000, x = 500 * Math.cos(2 * Math.PI * t), y = 500 * Math.sin(2 * Math.PI * t);
     864            [x, y] = $instance.clampMovement(x, y, e);
     865            e.style.transform = `translate3d(${x}px,${y}px,0)`;
     866        },
     867
     868        magneticEasing: function(e, s) {
     869            let x = Math.sin(s * 0.01) * e.offsetWidth * 0.2;
     870            [x] = $instance.clampMovement(x, 0, e);
     871            e.style.transform = `translateX(${x}px)`;
     872        },
     873
     874        infiniteLoop: function(e, s) {
     875            let y = s % e.offsetHeight;
     876            [, y] = $instance.clampMovement(0, y, e);
     877            e.style.transform = `translateY(${y}px)`;
    667878        }
    668879

  • cb-parallax/tags/0.9.9/vendor/smoothscroll/smoothscroll.js

    r3330924 r3334980  
    147147     * @method isScrollable
    148148     * @param {Node} el
    149      * @param {String} axis
    150149     * @returns {Boolean}
    151150     */
Note: See TracChangeset for help on using the changeset viewer.