Docs Other-features

Other Features

Spoova framework has some custom static files that provides some form of help in front-end development. This include the local css library along with some few javascript helper functions and plugins. Although these are not necessarily always required for development, in some cases, they could however provide some form of help when building light applications. Some of the core essential plugins are loaded by default in the core resource res.php file and their absence may cause issues within the framework.

In-built Css Utility classes
Spoova comes with its own list of simple css utility classes to handle designs such as flex boxes, fluid boxes, grids items, form classes, borders, paddings, margins, colors and backgrounds and so on. These utility classes are provided as first hand help to make development faster. Devlopers can learn about more on these utility classes from here.

In-built Javascript Files and Functions
Spoova does not have a javascript library of its own. However, it comes with helper functions which may prove useful in development. Although no internal library exists, spoova favors Jquery over other libraries and some of the helper functions and plugins depend on it. While some of these are discussed under integerations below, you can learn more from here.

Other Integerated Functionalities
Integerated functions are activities that are built into the framework which may have their dependencies on external libraries, javascript functions or even css utility classes. These integrations are mostly done using predefined element attributes and they require the loading of the default resource files through the @res(':headers') or @load('headers') template directives. Learn more from here.

Integerated: Lazy-Loading Images
As an added feature, spoova manages lazy-loading of images through javascript along with a specifically reserved html attribute data-src. If the data-src attribute is added to any html element, then lazy-loading is applied to that element. The data-src can be applied in this way: 
  <img data-src="http://site.com/some-image.jpg" >
  
  <div data-src="http://site.com/some-image.jpg" ></div>
In the above, both the img and div class will be resolved differently into the code below respectively. 
  <img src="http://site.com/some-image.jpg" data-src="http://site.com/some-image.jpg" >

  <div style="background-image:url('http://site.com/some-image.jpg')" data-src="http://site.com/some-image.jpg"></div>
From the code above, we can conclude that div elements are assigned a backround-image css property while img elements are assigned the src attribute. If we are working within our template files, we can also apply the domurl() directive to assign a url value to the href attribute.

Integerated: Smooth Page Scrolling
A special feature for managing page scroll is the data-scroll and data-scroll-hash attributes. These attributes helps to scroll to an element having an id attribute value that matches the supplied value of these attributes. Since the data-scroll-hash attibute performs both the function of data-scroll and even more extended features, this attribute alone will be discussed. The only major difference between these two attributes is that data-scroll-hash works for the current page hash as an extended feature. Other relative attributes that can be applied on these attributes are data-plus , data-minus which are used for adding or subtracting from target scroll point. There is also the data-delay which set a timeout before the scroll is executed.
Example 1: data-scroll-hash
  Test URL:
  https://some-site.com#someid
  
  Test Button:
  <button data-scroll-hash>click btn</button> 
  
  Target HTML Element:
  <div id="someid"></div>
In the above, using the test url as current page url. If the button is clicked, the url hash string "someid" will be obtained. Once this is done, then the page will scroll to div element because it has a value id="someid"


Example 2: data-scroll-hash with link
  Test URL:
  https://some-site.com#someid
  
  Test Button:
  <a href="#newhash" data-scroll-hash>click link</a> 
  
  Target HTML Element:
  <div id="newhash"></div>
In the above, once the link is clicked, the page url hashstring will change to newhash. Once this is done, the new hash string will be used as the target id of the element to be scrolled to.


Example 3: data-scroll-hash integerations with hashRunner()
  Test URL:
  https://some-site.com#someid
  
  Test Link Button:
  <a href="#someid" data-scroll-hash="someid">click link</a> 
  
  Target HTML Element:
  <div id="someid"></div> 
  
  Target Script:
  <script id="someid">
      
    hashRunner('data-scroll-hash');
    
  </script>
In the above, if the current page url is the test url above, if a user scrolls off from the div element and reloads the page, the hashRunner() function will re-scroll back to that div element. This might be useful to help a user return back to the target element once the page is reloaded.