No More Posting New Topics!

If you have a question or an issue, please start a thread in our Github Discussions Forum.
This forum is closed for new threads/ topics.

Navigation

    Quasar Framework

    • Login
    • Search
    • Categories
    • Recent
    • Tags
    • Popular
    • Users
    • Groups
    • Search
    1. Home
    2. pintaf
    P
    • Profile
    • Following 0
    • Followers 0
    • Topics 2
    • Posts 10
    • Best 2
    • Groups 0

    pintaf

    @pintaf

    2
    Reputation
    14
    Profile views
    10
    Posts
    0
    Followers
    0
    Following
    Joined Last Online

    pintaf Follow

    Best posts made by pintaf

    • RE: Leaflet

      @ferrarid72

      Hi, First Run npm install vue2-leaflet leaflet --save
      and as example: this is my code for a vue page:

      <template>
        <q-page padding class="flex">
          <q-card style="flex:1">
            <l-map :zoom="zoom" :center="center">
              <l-tile-layer :url="url" :attribution="attribution"></l-tile-layer>
            </l-map>
          </q-card>
        </q-page>
      </template>
      
      <script>
      import { LMap, LTileLayer } from 'vue2-leaflet'
      import L from 'leaflet'
      import 'leaflet/dist/leaflet.css'
      
      export default {
        name: 'Map',
        components: {
          LMap,
          LTileLayer
        },
        data () {
          return {
            zoom: 13,
            center: L.latLng(47.413220, -1.219482),
            url: 'http://{s}.tile.osm.org/{z}/{x}/{y}.png',
            attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
          }
        }
      }
      </script>
      <style>
      </style>
      
      posted in Help
      P
      pintaf
    • RE: Is there a way to set the size of the Q-toggle

      Hi! As a quick hack you an use this:
      style=“transform : scale(1.3, 1.3);”
      more than one will increase size, less will reduce

      posted in Framework
      P
      pintaf

    Latest posts made by pintaf

    • RE: Object copy Stringify/parse vs Quasar.extend

      Okay that make sense.

      I should have gone see jQuery.extend() for more info.

      posted in Framework
      P
      pintaf
    • RE: Object copy Stringify/parse vs Quasar.extend

      Okay that make sense, but then it is weird that a function that can extend multiple object returns only one object. Isn’t it ?

      let newObject = extend([Boolean deepCopy], targetObj, obj, ...)
      

      For example, how would it work for several objects ?

      something like that?

      extend(true, obj1, extendedObj1, obj2, extendedObj2)
      
      posted in Framework
      P
      pintaf
    • RE: Object copy Stringify/parse vs Quasar.extend

      Hello @qyloxe.

      Well, this is quite a long an complete answer.
      This has enlighten me a bit, and since I do not use VueX, I’ll stick with Parse/Stringify.

      Thanks a lot!

      posted in Framework
      P
      pintaf
    • Object copy Stringify/parse vs Quasar.extend

      Hi there.

      Until now I’ve been using JSON.parse(JSON.Stringify(OBJ)) to deep copy.

      I recently found out the extend method of Quasar.

      One of the advantage I can see right now is the possibility to ask for deep copy or no (resulting in a shallow copy in that case I guess).

      I have several questions. For deep copy only, is it better to use the Quasar method, or the Parsing/Stringify is more efficient as Javascript native ?

      Second question. In the example the extend method returns the object, but there are several object parameters following.
      It is unclear. Maybe a little update of the documentation would help.

      posted in Framework
      P
      pintaf
    • RE: q-Tree auto-scroll to last node

      Hey.

      Thanks. but the solution I posted actually works. I do not have issues, I just wanted to share how I did things 🙂

      posted in Help
      P
      pintaf
    • RE: q-Tree auto-scroll to last node

      Well I though your proposal would be a very good solution, but it is actually not working.
      Main problems:

      • It calculate offset from top of DOM so top of quasar application. If the top of your QTree is not touching the top of your dom, then it will return invalid values (easy to solve though, by subtracting that margin between top dom and top QTree).
      • Second and main problem:
        Let’s imagine you have 100 values in your Qtree all at level/depth 0 (no children), just to make it simple. Let’s say you scrolled manually at the end of your Qtree.
        and you want programmatically scroll to the 10th. Well the 10th is above the top of dom, so your method return negative value. And a scroll value is always positive.
      posted in Help
      P
      pintaf
    • RE: q-Tree auto-scroll to last node

      Hey.

      I had more or less the same problem, I wanted to scroll a specific entry of my Qtree.
      I followed the instructions here

      but I discovered that it was scrolling only a little bit. This is because el.offsetTop return the offset to direct parent.

      So I adapted the function a littlebit:

      function scrollToElement (el) {
        const target = getScrollTarget(el);
        let offset = 0;
        while (el.id !== "YOURQTREE_ID") {
          offset += el.offsetTop;
          el = el.offsetParent;
        }
        const duration = 1000;
        setScrollPosition(target, offset, duration);
      }
      

      in order to have it working, you need to define an id on the Qtree and also the class “scroll” or others such as defined here

      and then call this function when you need it:

      scrollToElement(YOUR_ELEMENT);
      

      The only bug I see is when you’ve scrolled to the place, if you call the function again it doesn’t work perfectly.
      But it’s maybe linked to my setup as I call scrollToElement in mounted(), so I refresh the page to call again the scroll, and in this case, it goes nuts.

      It was indeed linked to the page refresh. Otherwise, no problem.

      Tell me if unclear and I’ll explain further.

      posted in Help
      P
      pintaf
    • Customizing vue2-leaflet with quasar components

      Hello All.

      As I didn’t like the default masks button (to change map layers) in vue2-leaflet, I wanted to make my own one using QBtnDropdown.

      When I click a first time, the button oppens.
      but when I click again (while oppened), it closes to opens again right after as if it was receiving two click input.

      I’ve prepared an online example:
      https://codesandbox.io/s/qbtn-in-leaflet-zupfd
      You might have to wait up to one minute for it to load.

      Try clicking on the top right button on the map.

      It’s clearly linked to the fact it’s on top of the leaflet map and probably not a bug on the component itself, but help would be appreciated!

      Thanks.

      posted in Help
      P
      pintaf
    • RE: Leaflet

      @ferrarid72

      Hi, First Run npm install vue2-leaflet leaflet --save
      and as example: this is my code for a vue page:

      <template>
        <q-page padding class="flex">
          <q-card style="flex:1">
            <l-map :zoom="zoom" :center="center">
              <l-tile-layer :url="url" :attribution="attribution"></l-tile-layer>
            </l-map>
          </q-card>
        </q-page>
      </template>
      
      <script>
      import { LMap, LTileLayer } from 'vue2-leaflet'
      import L from 'leaflet'
      import 'leaflet/dist/leaflet.css'
      
      export default {
        name: 'Map',
        components: {
          LMap,
          LTileLayer
        },
        data () {
          return {
            zoom: 13,
            center: L.latLng(47.413220, -1.219482),
            url: 'http://{s}.tile.osm.org/{z}/{x}/{y}.png',
            attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
          }
        }
      }
      </script>
      <style>
      </style>
      
      posted in Help
      P
      pintaf
    • RE: Is there a way to set the size of the Q-toggle

      Hi! As a quick hack you an use this:
      style=“transform : scale(1.3, 1.3);”
      more than one will increase size, less will reduce

      posted in Framework
      P
      pintaf