vegana/bin/docs/assets/articles/docsPage/engine.creator.function.json

vegana is a container based js framework

{
  "template": [
    "2iyza824km4ibz4b"
  ],
  "rows": {
    "2iyza824km4ibz4b": {
      "id": "2iyza824km4ibz4b",
      "template": [
        "2iyza824km4ic17v",
        "2iyza824km4ic6ii",
        "2iyza824km4ic8pv"
      ],
      "containers": {
        "2iyza824km4ic17v": {
          "id": "2iyza824km4ic17v",
          "field": {
            "type": "heading",
            "data": {
              "value": "Vegana Creator Function Api"
            }
          }
        },
        "2iyza824km4ic6ii": {
          "id": "2iyza824km4ic6ii",
          "field": {
            "type": "paragraph",
            "data": {
              "value": "this api attaches function which is triggered by context like a div will have a function that will trigger on click and string input will trigger on key input.\nyou can pass functionData property this will be passed as a argument to the trigger function so you can use it later.\nthe dom elements which can return a value will give a value argument after the id element."
            }
          }
        },
        "2iyza824km4ic8pv": {
          "id": "2iyza824km4ic8pv",
          "field": {
            "type": "code",
            "data": {
              "value": "\n/*==============================\n\tnon value trigger\n==============================*/\n/*\n\t\n    triggerFunction(id,functionData,event);\n\t\n*/\n    \n/*==============================\n\tvalue trigger\n==============================*/    \n/*\n\t\n    triggerFunction(id,value,functionData,event);\n\t\n*/\n    \n/*==============================\n\tfunction data\n==============================*/       \n\nengine.make.div({\n\tparent:pageId,\n    text:\"function data example\",\n    \n    //--------------------------\n    //this data is passed to the trigger function on event.\n    //this field is not required\n    \n    functionData:{some:true},\n    \n    //--------------------------\n\n    function:(id,functionData,event)=>{/*do something*/}\n});\n\n/*==============================\n\tdiv function\n==============================*/\n\nengine.make.div({\n\tparent:pageId,\n    text:\"click me\",\n    functionData:{\n    \tsome:true\n    },\n    function:(id,functionData,event)=>{\n    \n    \t//id is the elemt id\n        //functionData is the data passed above\n        //event is a defualt dom event\n        \n        console.log(\"i was clicked\");\n        \n    }\n});\n\n/*==============================\n\tstring input function\n==============================*/\n\nengine.make.input({\n\tparent:pageId,\n    type:'string',\n    placeholder:\"text goes here\",\n    functionData:{\n    \tsome:true\n    },\n    function:(id,value,functionData,event)=>{\n    \n    \t//id is the elemt id\n        //value is a string\n        //functionData is the data passed above\n        //event is a defualt dom event\n        \n        console.log(`some string : ${value}`);\n        \n    }\n});\n\n/*==============================\n\tnumber input function\n==============================*/\n\nengine.make.input({\n\tparent:pageId,\n    type:'number',\n    placeholder:\"number goes here\",\n    functionData:{\n    \tsome:true\n    },\n    function:(id,value,functionData,event)=>{\n    \n    \t//id is the elemt id\n        //value is a number\n        //functionData is the data passed above\n        //event is a defualt dom event\n        \n        console.log(`some number : ${value}`);\n        \n    }\n});\n"
            }
          }
        }
      }
    }
  },
  "title": "Vegana Api : Engine Make Creator Function",
  "discription": "vegana creator api to trigger a function on relevant event.",
  "keywords": "vegana,api,engine,make,creator,function"
}