Configurable Portfolio Component For Angular

Description:

A simple Angular component that allows you to create a responsive, configurable Portfolio on the app.

Usage:

In your html:

<ng-portfolio items="items" areas="areas" generic-config="genericConfig"></ng-portfolio>

Create items to be presented in the portfolio.

[
 {
     //VALUE OPTIONS
       //base usage
     "value": "value to be showed",
       //Use %i% as a placeholder to set in your value, icons
       //i suggest to use font-awesome as icon library
     "value": "this string will contain an icon here --> %i%",
       //to set icon class, it becomes: " string.. <i class="fa fa-html5"></i>"
     "icon": "fa fa-html5",
     
     //FONT
       //To use font-family(css attribute) import a font in your css
       //example: @import url("https://fonts.googleapis.com/css?family=Audiowide");
     "font": "'Audiowide', cursive",
       //font dimension
     "fontSize": "0.8em",
     
     //IMAGE
     "image": "./imgs/hamburg.jpg",
       //SHADE IMAGE
     "shadeFocus": true,
     
     //ZOOM OPTIONS
       //to set zoom operation on item
     "focusScale": 1.6,
       //to set the zoom center, 50% 50% is default (item center)
     "focusCenter": "50% 50%",
     
     //BACKGROUND OPTIONS
       //set text color
     "textColor": "#f96855",
       //set background color
     "backgroundColor": "#FFFA5C",
     
     //HOVER OPTIONS
       //on hover set text color
     "hoverTextColor": "#f96855",
       //on hover set background color
     "hoverBackgroundColor": "#FFFA5C",
     
     //ANIMATIONS
       //set animation time on all properties
       //default for image: "0,5s" else is disabled
     "animationTime": "0.9s",
     
     //ID
       //All items have an id (html id)
       //by default items passed by "items" attribute are sequencially named as "item1", "item2", "item3" etc..
       //But you can override default configuration with:
     "id": "myId",
       //so, for example you can have "item1", "myId", "item3" (if you set id attribute on second items config)
       
      //SUBITEMS
       //In subitems you can set recoursive items configuration
     "subitems": [ 
           //items..
           {
               "value": "%i%",
               "icon": "fa fa-linkedin-square",
               "fontSize": "1.2em"
               //item attributes..
           },
           {
               "id": "mySubId",
               "subitems":[...]
           },
           ...
       ],
      //by default subitems are sequencially named as "(parent id)-sub1", "(parent id)-mySubId", "(parent id)-sub3" etc..
      
     //AREAS
       //look point 2 "areas"
     "areas":[
           ["item1", "item2", "item3"], 
           ["item1", "item2", "item3"]
      ]
       
     //GENERICCONFIG
       //look point 3 "generic-config"
     
     //CALLBACKS
       //use this sintax to pass a callback
       //in a configuration (object/json)
     "callback": {
           "name": "navigate",
           "params": ["http://www.hamburg.com/"]
     },
     "callback": function(..){....}
       //differences: 
       //To use "callback: function(){..}", you have to set callback with a function in your js, 
       //so you have to manipulate your config.
       //to use "callback: { name: "fn name", params: ["param1", "param2", etc..]}" you don't have to set any 
       //functions to your config, just set in your controller $scope (direct parent of this directive) your function, 
       //es: $scope.navifate = function(url){..};  
 }
]

Configuration options.

//Use generic-config to set generic default behavior of your main portfolio layer or subitems
  //all this options can be overridden by item options.
  
  //STRUCTURE OPTIONS
   //Set portfolio columns, or subitems columns
   //if areas row elements are more than nCols value, nCols is overridden 
  "nCols": 3, 
   //Set portfolio row size, or subitems row size
   //by default is 200px
  "sizeRow": "1fr", 
   //set gap between items
   //by default a media query set general portfolio gap as
   //20px(sreen 1200px+), 10px(sreen 768px+), 0px(sreen 0px+) 
  "gap": "10px",
  
  //BACKGROUND OPTIONS
   //set text color
 "textColor": "#f96855",
   //set background color
 "backgroundColor": "#FFFA5C",

 //HOVER OPTIONS
   //on hover set text color
 "hoverTextColor": "#f96855",
   //on hover set background color
 "hoverBackgroundColor": "#FFFA5C",

 //ANIMATIONS
   //set animation time on all properties
   //default for image: "0,5s" else is disabled
 "animationTime": "0.9s", 
                  
   //FONT
   //To use font-family(css attribute) import a font in your css
   //example: @import url("https://fonts.googleapis.com/css?family=Audiowide");
 "font": "'Audiowide', cursive",
   //font dimension
 "fontSize": "0.8em",

Preview: