CODEWITHSUNDEEP
javascriptphpphalconvolt
michaela šatarova
michaela šatarova

Reputation: 31

How to dynamically change value in .volt on screen view

I am using phalcon, .volt template

I am getting some data from database(predictability). Svg has one line starting on line 0 and finishing on 30. Another line is draw about first line and it should display some predictability

My problem is that it doesn`t look nice on small screens and I would need to change (only for mobile views 30 to 20)

I know that php itself can`t detect screen size as javascript (window.innerWidth);

<svg >
    <line x1="0" y1="0" x2="30" y2="0"  />
    <line x1="0" y1="0" x2="{{ predictability * 30 / 100 }}" y2="0"/>
</svg>

Is it possible somehow integrate JS to .volt and dynamically change fixed number 30 ?

img

Upvotes: 0

Views: 83

Answers (1)

Arthur
Arthur

Reputation: 428

You can make them work together. Let's suppose you are using Micro in Phalcon and you have defined the view service:

  1. Create in your router the path:

    $app->get('/view/home2/{size}',
  function ($size) use ($app) {
     echo $app->view->render('index/home2', 
          [
           'svgWidth' => $size
          ]);
  }
);

  2. Create view '/index/home2':

     <svg >
 <line x1="0" y1="0" x2="30" y2="0"  />
 <line x1="0" y1="0" x2="{{ predictability * <?php echo $svgWidth; ?> / 100 }}" y2="0"/>
 </svg>

In your 'index/home' page, at the beginning:

<script>
   let url = window.innerWidth < 999 ? '/view/index/15' : '/view/index/30'; //or set a switch with more options for predictability value
    window.location.replace(url);
</script>

Upvotes: 0

Related Questions