we-plugin-widget

We.js we-plugin-widget plugin

Usage no npm install needed!

<script type="module">
  import wePluginWidget from 'https://cdn.skypack.dev/we-plugin-widget';
</script>

README

We.js widget plugin

npm version Build Status Coverage Status

Add widget features with API in any we.js project

Widgets are dynamic blocks how may be added in any url (layout) with regions

Installation

ẁe i we-plugin-widget

API

Add / create one widget

  $.ajax({
    headers: { 'we-widget-action': 'add' },
    url: location.pathname,
    method: 'POST',
    data: {
      widget: JSON.stringify(formData)`// new widget data`
    }
  }).then(function (html) {
    console.log('new widget html:',html);
  });

getCreateForm

  $.ajax({
    headers: { 'we-widget-action': 'getCreateForm' },
    url: location.pathname,
    method: 'POST'
  }).then(function (r) {
    console.log('html form:',r);
  });

getUpdateForm

  $.ajax({
    headers: { 'we-widget-action': 'getUpdateForm' },
    url: url,
    method: 'POST',
    data: {
      widget: JSON.stringify({ id: id }) // required
    }
  }).then(function (f) {
    console.log('html form:',r);
  });

update

  $.ajax({
    headers: { 'we-widget-action': 'update' },
    url: url+'?responseType=json',
    method: 'POST',
    data: {
      widget: JSON.stringify(formData) // data to update with widgetId
    }
  }).then(function (r) {
    console.log('updated widget data:',r);
  });

delete

    $.ajax({
      headers: { 'we-widget-action': 'delete' },
      url: location.pathname+'?responseType=json',
      method: 'POST',
      data: {
        widgetId: id
      }
    }).then(function (r) {
       console.log('deleted widget:', r);
    });

findOne

    $.ajax({
      headers: { 'we-widget-action': 'findOne' },
      url: location.pathname+'?responseType=json',
      method: 'POST',
      data: {
         widget: JSON.stringify({ id: 131231})
      }
    }).then(function (r) {
       console.log('Widget:', r.widget);
    });

find

    $.ajax({
      headers: { 'we-widget-action': 'find' },
      url: location.pathname+'?responseType=json',
      method: 'POST'
    }).then(function (r) {
       console.log('Widgets:', r);
    });

getWidgetsToSort , get widget sort form

  $.ajax({
    headers: { 'we-widget-action': 'getWidgetsToSort' },
    url: url+'?responseType=modal&skipHTML=true',
    method: 'POST',
    data: {
      params: JSON.stringify({
        regionName: regionName
      })
    }
  }).then(function (f) {
    console.log('html>', f);
  });

updateSort

    $.ajax({
      headers: { 'we-widget-action': 'updateSort' },
      url: location.pathname+'?responseType=json',
      method: 'POST',
      data: {
        params: JSON.stringify({
          regionName: regionName,
          layout: $('#we-layout').attr('data-we-layout') // layout name
        }),
        widgets: JSON.stringify(widgets)
      }
    }).then(function(r){
        console.log('updated widgets:', r.widget);
    })

getWidgetTypes

  $.ajax({
    headers: { 'we-widget-action': 'getWidgetTypes' },
    url: location.pathname,
    method: 'POST',
    data: {}
  }).then(function afterGetWidgetTypes(r) {
    console.log('widget types:', r);
  });

Links

NPM Info:

NPM

License

Under the MIT license.