Ignore:
Timestamp:
2023-03-12T16:09:33+13:00 (13 months ago)
Author:
davidb
Message:

Changed fill-remainging height to Flex-box based

File:
1 edited

Legend:

Unmodified
Added
Removed

  • gs3-extensions/tabletop-dl/trunk/my-interact.js

    r37463 r37464  
    1 // target elements with the "draggable" class
    2 interact('.resize-drag')
    3   .draggable({
    4     // enable inertial throwing
    5     inertia: true,
    6     // keep the element within the area of it's parent
    7     modifiers: [
    8       interact.modifiers.restrictRect({
    9         restriction: 'parent',
    10         endOnly: true
    11       })
    12     ],
    13     // enable autoScroll
    14     autoScroll: true,
    15 
    16     listeners: {
    17       // call this function on every dragmove event
    18       move: dragMoveListener,
    19 
    20       // call this function on every dragend event
    21       end (event) {
    22         var textEl = event.target.querySelector('p')
    23 
    24         textEl && (textEl.textContent =
    25           'moved a distance of ' +
    26           (Math.sqrt(Math.pow(event.pageX - event.x0, 2) +
    27                      Math.pow(event.pageY - event.y0, 2) | 0))
    28             .toFixed(2) + 'px')
    29       }
    30     }
    31   })
    321
    332function dragMoveListener (event) {
    … …  
    4615
    4716
     17$(document).ready(function() {
    4818
    49 interact('.resize-drag')
    50   .resizable({
    51     // resize from all edges and corners
    52     edges: { left: true, right: true, bottom: true, top: true },
    5319
    54     listeners: {
    55       move (event) {
    56         var target = event.target
    57         var x = (parseFloat(target.getAttribute('data-x')) || 0)
    58         var y = (parseFloat(target.getAttribute('data-y')) || 0)
     20    //var resize_drag_elems = document.getElementsByClassName('resize-drag')
    5921
    60         // update the element's style
    61         target.style.width = event.rect.width + 'px'
    62         target.style.height = event.rect.height + 'px'
    63 
    64         // translate when resizing from top or left edges
    65         x += event.deltaRect.left
    66         y += event.deltaRect.top
    67 
    68         target.style.transform = 'translate(' + x + 'px,' + y + 'px)'
    69 
    70         target.setAttribute('data-x', x)
    71         target.setAttribute('data-y', y)
    72         target.textContent = Math.round(event.rect.width) + '\u00D7' + Math.round(event.rect.height)
    73       }
    74     },
    75     modifiers: [
    76       // keep the edges inside the parent
    77       interact.modifiers.restrictEdges({
    78         outer: 'parent'
    79       }),
    80 
    81       // minimum size
    82       interact.modifiers.restrictSize({
    83         min: { width: 100, height: 50 }
    84       })
    85     ],
    86 
    87     inertia: true
    88   });
     22    //var resize_drag_elem = resize_drag_elems[0];
     23   
     24    //console.log(resize_drag_elem);
     25   
     26    interact('.resize-drag')
     27    .draggable({
     28        // enable inertial throwing
     29        inertia: true,
     30        // keep the element within the area of it's parent
     31        modifiers: [
     32        interact.modifiers.restrictRect({
     33            restriction: 'parent',
     34            endOnly: true
     35        })
     36        ],
     37        // enable autoScroll
     38        autoScroll: true,
     39       
     40        listeners: {
     41        // call this function on every dragmove event
     42        move: dragMoveListener,
     43       
     44        // call this function on every dragend event
     45        end (event) {
     46            var textEl = event.target.querySelector('p')
     47           
     48            textEl && (textEl.textContent =
     49                   'moved a distance of ' +
     50                   (Math.sqrt(Math.pow(event.pageX - event.x0, 2) +
     51                      Math.pow(event.pageY - event.y0, 2) | 0))
     52                   .toFixed(2) + 'px')
     53        }
     54        }
     55    })
     56    .resizable({
     57        // resize from all edges and corners
     58        edges: { left: true, right: true, bottom: true, top: true },
     59       
     60        listeners: {
     61        move (event) {
     62            var target = event.target
     63            var x = (parseFloat(target.getAttribute('data-x')) || 0)
     64            var y = (parseFloat(target.getAttribute('data-y')) || 0)
     65           
     66            // update the element's style
     67            target.style.width = event.rect.width + 'px'
     68            target.style.height = event.rect.height + 'px'
     69           
     70            // translate when resizing from top or left edges
     71            x += event.deltaRect.left
     72            y += event.deltaRect.top
     73           
     74            target.style.transform = 'translate(' + x + 'px,' + y + 'px)'
     75           
     76            target.setAttribute('data-x', x)
     77            target.setAttribute('data-y', y)
     78            target.textContent = Math.round(event.rect.width) + '\u00D7' + Math.round(event.rect.height)
     79        }
     80        },
     81        modifiers: [
     82        // keep the edges inside the parent
     83        interact.modifiers.restrictEdges({
     84            outer: 'parent'
     85        }),
     86       
     87        // minimum size
     88        interact.modifiers.restrictSize({
     89            min: { width: 100, height: 50 }
     90        })
     91        ],
     92       
     93        inertia: true
     94    });
    8995
    9096/*
    … …  
    101107*/
    102108
    103 // this function is used later in the resizing and gesture demos
    104 window.dragMoveListener = dragMoveListener
     109
     110    // this function is used later in the resizing and gesture demos
     111    window.dragMoveListener = dragMoveListener
    105112
    106113
    … …  
    108115
    109116
    110 $(document).ready(function() {
     117
    111118   
    112119
    113 var angleScale = {
    114   angle: 0,
    115   scale: 1
    116 }
    117 var gestureArea = document.getElementById('gesture-area')
    118 var scaleElement = document.getElementById('scale-element')
    119 var resetTimeout
    120 
    121 interact(gestureArea)
    122   .gesturable({
    123     listeners: {
    124       start (event) {
    125         angleScale.angle -= event.angle
    126 
    127         clearTimeout(resetTimeout)
    128         scaleElement.classList.remove('reset')
    129       },
    130       move (event) {
    131         // document.body.appendChild(new Text(event.scale))
    132         var currentAngle = event.angle + angleScale.angle
    133         var currentScale = event.scale * angleScale.scale
    134 
    135         scaleElement.style.transform =
    136           'rotate(' + currentAngle + 'deg)' + 'scale(' + currentScale + ')'
    137 
    138         // uses the dragMoveListener from the draggable demo above
    139         dragMoveListener(event)
    140       },
    141       end (event) {
    142         angleScale.angle = angleScale.angle + event.angle
    143         angleScale.scale = angleScale.scale * event.scale
    144 
    145         //resetTimeout = setTimeout(reset, 1000)
    146         //scaleElement.classList.add('reset')
    147       }
     120    var angleScale = {
     121    angle: 0,
     122    scale: 1
    148123    }
    149   })
    150   .draggable({
    151       inertia: true,
    152       modifiers: [
    153       interact.modifiers.restrictRect({
    154               restriction: 'parent',
    155               endOnly: true
    156       })
    157       ],
    158       listeners: { move: dragMoveListener }
    159   })
    160 
     124    var gestureArea = document.getElementById('gesture-area')
     125    var scaleElement = document.getElementById('scale-element')
     126    //var resetTimeout
     127   
     128    interact(gestureArea)
     129    .gesturable({
     130        listeners: {
     131        start (event) {
     132            angleScale.angle -= event.angle
     133           
     134            //clearTimeout(resetTimeout)
     135            //scaleElement.classList.remove('reset')
     136        },
     137        move (event) {
     138            // document.body.appendChild(new Text(event.scale))
     139            var currentAngle = event.angle + angleScale.angle
     140            var currentScale = event.scale * angleScale.scale
     141           
     142            scaleElement.style.transform =
     143            'rotate(' + currentAngle + 'deg)' + 'scale(' + currentScale + ')'
     144           
     145            // uses the dragMoveListener from the draggable demo above
     146            dragMoveListener(event)
     147        },
     148        end (event) {
     149            angleScale.angle = angleScale.angle + event.angle
     150            angleScale.scale = angleScale.scale * event.scale
     151           
     152            //resetTimeout = setTimeout(reset, 1000)
     153            //scaleElement.classList.add('reset')
     154        }
     155        }
     156    })
     157    .draggable({
     158        inertia: true,
     159        modifiers: [
     160        interact.modifiers.restrictRect({
     161            restriction: 'parent',
     162            endOnly: true
     163        })
     164        ],
     165        listeners: { move: dragMoveListener }
     166    })
     167   
    161168
    162169/*
Note: See TracChangeset for help on using the changeset viewer.