Page Forms

https://github.com/wikimedia/mediawiki-extensions-pageforms
Admin
Page Forms is a MediaWiki extension that enables creation and editing of wiki pages through...
Tokens:27,680
Snippets:421
Trust Score:9.1
Update:5 months ago
Show doc for...
Tokens:
Raw
### Install Project Dependencies

Source: https://github.com/wikimedia/mediawiki-extensions-pageforms/blob/master/libs/foreign/fullcalendar/CONTRIBUTING.md

Navigate into the cloned FullCalendar directory and install the project's dependencies using npm.

```bash
cd fullcalendar
npm install
```

--------------------------------

### Install jQuery Mousewheel with Browserify

Source: https://github.com/wikimedia/mediawiki-extensions-pageforms/blob/master/libs/foreign/jquery.mousewheel/README.md

Install the plugin and its dependencies using npm for use with Browserify.

```bash
npm install jquery-mousewheel
npm install jquery-browserify
```

--------------------------------

### JavaScript Style Guide Exceptions

Source: https://github.com/wikimedia/mediawiki-extensions-pageforms/blob/master/libs/foreign/fullcalendar/CONTRIBUTING.md

Examples demonstrating specific style guide exceptions for FullCalendar, including `else` placement, and array/object literal formatting.

```javascript
if (true) {
}
else { // please put else, else if, and catch on a separate line
}

// please write one-line array literals with a one-space padding inside
var a = [ 1, 2, 3 ];

// please write one-line object literals with a one-space padding inside
var o = { a: 1, b: 2, c: 3 };
```

--------------------------------

### Include jsTree Files

Source: https://github.com/wikimedia/mediawiki-extensions-pageforms/blob/master/libs/foreign/jstree/README.md

Include jQuery, the jsTree theme, and the jsTree source file in your HTML to get started.

```html
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/jstree/3.3.8/themes/default/style.min.css" />
<script src="//cdnjs.cloudflare.com/ajax/libs/jstree/3.3.8/jstree.min.js"></script>
```

--------------------------------

### Install Gulp CLI Globally

Source: https://github.com/wikimedia/mediawiki-extensions-pageforms/blob/master/libs/foreign/fullcalendar/CONTRIBUTING.md

Install the gulp-cli package globally to manage build tasks. This is a prerequisite for the development workflow.

```bash
npm install -g gulp-cli
```

--------------------------------

### Implement Custom jsTree Plugin

Source: https://github.com/wikimedia/mediawiki-extensions-pageforms/blob/master/libs/foreign/jstree/README.md

Demonstrates how to create and register a custom jsTree plugin. This example implements a 'conditionalselect' plugin that prevents selecting the root node.

```javascript
// conditional select
(function ($, undefined) {
  "use strict";
  $.jstree.defaults.conditionalselect = function () { return true; };
  $.jstree.plugins.conditionalselect = function (options, parent) {
    this.activate_node = function (obj, e) {
      if(this.settings.conditionalselect.call(this, this.get_node(obj))) {
        parent.activate_node.call(this, obj, e);
      }
    };
  };
})(jQuery);
$("#tree").jstree({
  "conditionalselect" : function (node) {
    return node.text === "Root node" ? false : true;
  },
  "plugins" : ["conditionalselect"]
});
```

--------------------------------

### Lint Code Style

Source: https://github.com/wikimedia/mediawiki-extensions-pageforms/blob/master/libs/foreign/fullcalendar/CONTRIBUTING.md

Automatically check the code style against the defined guide using the command-line tool. This is a required step before submitting code.

```bash
gulp lint
```

--------------------------------

### Clone FullCalendar Repository

Source: https://github.com/wikimedia/mediawiki-extensions-pageforms/blob/master/libs/foreign/fullcalendar/CONTRIBUTING.md

Clone the FullCalendar git repository to your local machine to start contributing.

```bash
git clone git://github.com/fullcalendar/fullcalendar.git
```

--------------------------------

### Development Build

Source: https://github.com/wikimedia/mediawiki-extensions-pageforms/blob/master/libs/foreign/fullcalendar/CONTRIBUTING.md

Manually rebuild the JS/CSS files for previewing changes during development.

```bash
gulp dev
```

--------------------------------

### Basic Dropdown and Autocomplete Component

Source: https://github.com/wikimedia/mediawiki-extensions-pageforms/blob/master/libs/foreign/jsuites/README.md

Demonstrates how to create a multiple and autocomplete responsive dropdown using jSuites. Ensure the jSuites library and CSS are included in your project.

```html
<html>
<script src="https://bossanova.uk/jsuites/v2/jsuites.js"></script>
<link rel="stylesheet" href="https://bossanova.uk/jsuites/v2/jsuites.css" type="text/css" />

<div id="dropdown1"></div>

<script>
jSuites.dropdown(document.getElementById('dropdown1'), {
    data:[
        'City of London',
        'City of Westminster',
        'Kensington and Chelsea',
        'Hammersmith and Fulham', // (...)
        ],
    autocomplete:true,
    multiple:true,
    width:'280px',
});
</script>
</html>
```

--------------------------------

### Build Distributable Files

Source: https://github.com/wikimedia/mediawiki-extensions-pageforms/blob/master/libs/foreign/fullcalendar/CONTRIBUTING.md

Generate the final distributable JS/CSS files in the `./dist/` directory after development is complete.

```bash
gulp dist
```

--------------------------------

### Server Response for AJAX Data

Source: https://github.com/wikimedia/mediawiki-extensions-pageforms/blob/master/libs/foreign/jstree/README.md

Example of the JSON response expected from the server when populating jsTree via AJAX, including node IDs.

```json
[
  {
    "id":1,"text":"Root node","children":[
      {"id":2,"text":"Child node 1"},
      {"id":3,"text":"Child node 2"}
    ]
  }
]
```

--------------------------------

### Advanced check_callback Function for Modifications

Source: https://github.com/wikimedia/mediawiki-extensions-pageforms/blob/master/libs/foreign/jstree/README.md

Implements a custom 'check_callback' function to control node modifications. This example prevents moving nodes above or below the root while allowing all other operations.

```javascript
$"#tree".jstree({
  "core" : {
    "check_callback" : function (operation, node, parent, position, more) {
      if(operation === "copy_node" || operation === "move_node") {
        if(parent.id === "#") {
          return false; // prevent moving a child above or below the root
        }
      },
      return true; // allow everything else
    }
  },
  "plugins" : ["dnd","contextmenu"]
});
```

--------------------------------

### Basic jsTree Initialization

Source: https://github.com/wikimedia/mediawiki-extensions-pageforms/blob/master/libs/foreign/jstree/README.md

Initializes a jsTree instance with a configuration object. The object contains core settings and a list of active plugins.

```javascript
$"#tree".jstree({ /* config object goes here */ });
```

--------------------------------

### jsTree Initialization with Contextmenu Plugin

Source: https://github.com/wikimedia/mediawiki-extensions-pageforms/blob/master/libs/foreign/jstree/README.md

Initializes a jsTree instance with 'check_callback' enabled for modifications and activates the 'contextmenu' plugin for right-click actions.

```javascript
$"#tree".jstree({
  "core" : { "check_callback" : true }, // so that modifying operations work
  "plugins" : ["contextmenu"]
});
```

--------------------------------

### Get selected node text in jstree

Source: https://github.com/wikimedia/mediawiki-extensions-pageforms/blob/master/libs/foreign/jstree/README.md

Extend the 'changed.jstree' event handler to retrieve and log the text of the selected node. This can be done using either `data.instance.get_selected(true)[0].text` or `data.instance.get_node(data.selected[0]).text`.

```javascript
$('#container').on("changed.jstree", function (e, data) {
  console.log(data.instance.get_selected(true)[0].text);
  console.log(data.instance.get_node(data.selected[0]).text);
});
```

--------------------------------

### Initialize Jspreadsheet CE Table

Source: https://github.com/wikimedia/mediawiki-extensions-pageforms/blob/master/libs/foreign/jspreadsheet/README.md

Initialize a Jspreadsheet CE table by providing data and column definitions. This example demonstrates various column types including text, dropdown, calendar, image, checkbox, numeric, and color.

```javascript
var data = [
    ['Jazz', 'Honda', '2019-02-12', '', true, '$ 2.000,00', '#777700'],
    ['Civic', 'Honda', '2018-07-11', '', true, '$ 4.000,01', '#007777'],
];

jspreadsheet(document.getElementById('spreadsheet'), {
    data:data,
    columns: [
        { type: 'text', title:'Car', width:120 },
        { type: 'dropdown', title:'Make', width:200, source:[ "Alfa Romeo", "Audi", "Bmw" ] },
        { type: 'calendar', title:'Available', width:200 },
        { type: 'image', title:'Photo', width:120 },
        { type: 'checkbox', title:'Stock', width:80 },
        { type: 'numeric', title:'Price', width:100, mask:'$ #.##,00', decimal:',' },
        { type: 'color', width:100, render:'square', }
     ]
});
```

--------------------------------

### Watch for File Changes

Source: https://github.com/wikimedia/mediawiki-extensions-pageforms/blob/master/libs/foreign/fullcalendar/CONTRIBUTING.md

Run a script that automatically recompiles the project whenever a source file is saved. This is useful for continuous development.

```bash
gulp watch
```

--------------------------------

### jsTree Initialization with Drag and Drop Plugin

Source: https://github.com/wikimedia/mediawiki-extensions-pageforms/blob/master/libs/foreign/jstree/README.md

Initializes a jsTree instance with 'check_callback' enabled for modifications and activates the 'dnd' plugin for drag and drop functionality.

```javascript
$"#tree".jstree({
  "core" : { "check_callback" : true }, // so that operations work
  "plugins" : ["dnd"]
});
```

--------------------------------

### jsTree Initialization with Checkbox Plugin

Source: https://github.com/wikimedia/mediawiki-extensions-pageforms/blob/master/libs/foreign/jstree/README.md

Initializes a jsTree instance and activates the 'checkbox' plugin to render checkboxes for node selection.

```javascript
$"#tree".jstree({
  "plugins" : ["checkbox"]
});
```

--------------------------------

### jsTree Configuration with Core and Plugins

Source: https://github.com/wikimedia/mediawiki-extensions-pageforms/blob/master/libs/foreign/jstree/README.md

Configures a jsTree instance with specific core options like disabling multiple selections and theme settings, and activates the 'state' plugin.

```javascript
$"#tree".jstree({
  "core" : {
    "multiple" : false,
    "themes" : {
      "dots" : false
    }
  },
  "plugins" : ["state"]
});
```

--------------------------------

### Use jQuery Mousewheel Helper Method

Source: https://github.com/wikimedia/mediawiki-extensions-pageforms/blob/master/libs/foreign/jquery.mousewheel/README.md

Utilize the .mousewheel() helper method for a more concise way to bind mousewheel events.

```javascript
// using the event helper
$('#my_elem').mousewheel(function(event) {
    console.log(event.deltaX, event.deltaY, event.deltaFactor);
});
```

--------------------------------

### Configure Browserify for jQuery Mousewheel

Source: https://github.com/wikimedia/mediawiki-extensions-pageforms/blob/master/libs/foreign/jquery.mousewheel/README.md

Set up Browserify in your server-side Node.js code to bundle jQuery and the mousewheel plugin.

```javascript
var express = require('express');
var app = express.createServer();

app.use(require('browserify')({
    require : [ 'jquery-browserify', 'jquery-mousewheel' ]
}));
```

--------------------------------

### Populate Tree with HTML

Source: https://github.com/wikimedia/mediawiki-extensions-pageforms/blob/master/libs/foreign/jstree/README.md

Render a jsTree by selecting a container element with an unordered list and invoking the .jstree() function.

```html
<div id="container">
  <ul>
    <li>Root node
      <ul>
        <li>Child node 1</li>
        <li>Child node 2</li>
      </ul>
    </li>
  </ul>
</div>
<script>
$(function() {
  $('#container').jstree();
});
</script>
```

--------------------------------

### jsTree Initialization with Massload Plugin

Source: https://github.com/wikimedia/mediawiki-extensions-pageforms/blob/master/libs/foreign/jstree/README.md

Configures a jsTree instance for lazy loading with AJAX, activating the 'massload' plugin for loading multiple nodes at once and the 'state' plugin to preserve tree state.

```javascript
$"#tree".jstree({
  "core" : {
    "data" : { .. AJAX config .. }
  },
  "massload" : {
    "url" : "/some/path",
    "data" : function (nodes) {
      return { "ids" : nodes.join(",") };
    }
  },
  "plugins" : [ "massload", "state" ]
});
```

--------------------------------

### Enabling Modifications with check_callback

Source: https://github.com/wikimedia/mediawiki-extensions-pageforms/blob/master/libs/foreign/jstree/README.md

Enables all modifications (drag'n'drop, create, rename, delete) by setting 'core.check_callback' to true and activating 'dnd' and 'contextmenu' plugins.

```javascript
$"#tree".jstree({
  "core" : {
    "check_callback" : true,
  },
  "plugins" : ["dnd","contextmenu"]
});
```
Tokens:
Raw