### Install OOUI Library and Initialize Project Source: https://github.com/wikimedia/oojs-ui/blob/master/demos/tutorials/index.html Provides step-by-step shell commands to create a new project directory, navigate into it, initialize a Node.js project with npm, and install the OOJS UI library as a dependency. ```Shell mkdir ooui-tutorial cd ooui-tutorial npm init npm install oojs-ui --save ``` -------------------------------- ### Start Local PHP Web Server Source: https://github.com/wikimedia/oojs-ui/blob/master/README.md This command starts a simple built-in PHP web server, serving content from the current directory on 'localhost' at port 80. It's useful for quickly testing web pages or applications locally without needing a full-fledged web server setup. ```bash php -S localhost:80 ``` -------------------------------- ### HTML Setup for OOJS UI ToDo App Source: https://github.com/wikimedia/oojs-ui/blob/master/demos/tutorials/collection/basics1/contents.html This HTML snippet demonstrates how to include necessary OOJS, OOJS UI, and Wikimedia UI theme libraries, along with custom CSS and JavaScript files, to set up the basic structure of a ToDo application. It defines the head section for script and stylesheet imports and a simple body with a wrapper div and a main heading. ```HTML

Demo ToDo app with OOUI

``` -------------------------------- ### Run OOUI Demos Locally Source: https://github.com/wikimedia/oojs-ui/blob/master/README.md This command starts a local server or script to display the suite of OOUI demos. It allows developers to interact with and test various components and features of the library in a live environment. ```bash npm run-script demos ``` -------------------------------- ### Install Dependencies and Run Tests for OOJS-UI Release Source: https://github.com/wikimedia/oojs-ui/blob/master/README.md Performs a clean installation of NPM dependencies, updates Composer dependencies, and executes both NPM and Composer tests to ensure package stability before release. ```bash $ npm ci && composer update && npm test && composer test ``` -------------------------------- ### Install OOUI Development Dependencies Source: https://github.com/wikimedia/oojs-ui/blob/master/README.md This command installs all development dependencies specified in the 'package.json' file for the OOUI project. It's crucial for setting up the development environment, enabling tasks like building, testing, and linting. ```bash npm install ``` -------------------------------- ### Initialize OOUI Demo Application with Piwik Tracking Source: https://github.com/wikimedia/oojs-ui/blob/master/demos/index.html This JavaScript code initializes the OOUI demo application, managing its lifecycle based on URL changes and browser history. It includes conditional Piwik (Matomo) tracking setup for 'doc.wikimedia.org' to monitor page views and link clicks. The script ensures proper demo setup, destruction, and state restoration, including scroll position and URL hash navigation. ```JavaScript if ( location.host === 'doc.wikimedia.org' ) { /* eslint-disable */ const _paq = window._paq || []; _paq.push(['trackPageView']); _paq.push(['enableLinkTracking']); (function() { const u="https://piwik.wikimedia.org/"; _paq.push(['setTrackerUrl', u+'piwik.php']); _paq.push(['setSiteId', '21']); const d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0]; g.async=true; g.defer=true; g.src=u+'piwik.js'; s.parentNode.insertBefore(g,s); })(); /* eslint-enable */ } $( function () { let lastQuery = location.search; OO.ui.isDemo = true; function setup() { const prevPage = OO.ui.demo ? OO.ui.demo.mode.page : null, scrollPos = $( window ).scrollTop(); const oldDemo = OO.ui.demo; if ( oldDemo ) { if ( lastQuery === location.search ) { return false; } oldDemo.destroy(); } lastQuery = location.search; const newDemo = new Demo(); newDemo.initialize().then( function () { $( document.body ).append( newDemo.$element ); newDemo.setup(); // Scroll to fragment if provided const hash = location.hash.slice( 1 ); if ( hash ) { const elem = document.getElementById( hash ); if ( elem ) { elem.scrollIntoView(); } } if ( prevPage === newDemo.mode.page && scrollPos ) { // Restore scroll position from before we destroyed the demo $( window ).scrollTop( scrollPos ); } }, function () { // Demo contains an error message which should be displayed $( document.body ).append( newDemo.$element ); } ); OO.ui.demo = newDemo; } setup(); $( window ).on( 'popstate', setup ); } ); ``` -------------------------------- ### Install OOUI Library via npm Source: https://github.com/wikimedia/oojs-ui/blob/master/README.md This command installs the OOUI JavaScript UI library using npm, the Node.js package manager. It fetches the latest version of the library and its dependencies, making it available for use in your project. ```bash npm install oojs-ui ``` -------------------------------- ### Navigate to OOUI Project Directory Source: https://github.com/wikimedia/oojs-ui/blob/master/README.md This command changes the current directory to the newly cloned 'oojs-ui' repository. It's a necessary step before performing further development tasks like installing dependencies or building the library. ```bash cd oojs-ui ``` -------------------------------- ### JavaScript Initialization and Syntax Highlighting with Prism.js Source: https://github.com/wikimedia/oojs-ui/blob/master/demos/tutorials/collection/basics1/contents.html This JavaScript snippet initializes a Tutorials.Toolbar component and appends it to the navigation element. It also iterates through all elements with classes 'line-numbers' and 'language-javascript' to apply syntax highlighting using the Prism.js library, ensuring code blocks are properly formatted and readable. ```JavaScript $( function () { const toolbar = new Tutorials.Toolbar(); // eslint-disable-next-line no-jquery/no-global-selector $( 'nav' ).append( toolbar.$element ); // eslint-disable-next-line no-jquery/no-global-selector $( '.line-numbers.language-javascript' ).each( ( i, el ) => { Prism.highlightElement( el ); } ); } ); ``` -------------------------------- ### Initialize OOUI Toolbar and Apply Syntax Highlighting Source: https://github.com/wikimedia/oojs-ui/blob/master/demos/tutorials/index.html A JavaScript snippet that executes on document ready, initializing a Tutorials.Toolbar and appending it to the navigation. It also uses Prism.js to highlight code blocks with the class .line-numbers.language-javascript. ```JavaScript $( function () { const toolbar = new Tutorials.Toolbar(); // eslint-disable-next-line no-jquery/no-global-selector $( 'nav' ).append( toolbar.$element ); // eslint-disable-next-line no-jquery/no-global-selector $( '.line-numbers.language-javascript' ).each( ( i, el ) => { Prism.highlightElement( el ); } ); } ); ``` -------------------------------- ### Initialize OOUI Toolbar and Highlight Code Blocks (JavaScript) Source: https://github.com/wikimedia/oojs-ui/blob/master/demos/tutorials/collection/basics2/contents.html This JavaScript snippet, executed on document ready, initializes a `Tutorials.Toolbar` and appends it to the navigation element. It also iterates through JavaScript code blocks with specific classes to apply syntax highlighting using the Prism.js library. ```JavaScript $( function () { const toolbar = new Tutorials.Toolbar(); // eslint-disable-next-line no-jquery/no-global-selector $( 'nav' ).append( toolbar.$element ); // eslint-disable-next-line no-jquery/no-global-selector $( '.line-numbers.language-javascript' ).each( ( i, el ) => { Prism.highlightElement( el ); } ); } ); ``` -------------------------------- ### Basic HTML Structure for OOUI ToDo App Source: https://github.com/wikimedia/oojs-ui/blob/master/demos/tutorials/collection/basics1/contents.html This HTML file sets up the basic page for the ToDo application, including meta tags, title, and links to necessary jQuery, OOjs, OOUI, and custom application files (CSS and JavaScript). It defines a `wrapper` div where the application UI will be injected. ```HTML ToDo OOUI

Demo ToDo app with OOUI

``` -------------------------------- ### Initialize ToDo App and Handle Item Events Source: https://github.com/wikimedia/oojs-ui/blob/master/demos/tutorials/collection/basics2/contents.html Initializes the ToDo application, handling 'enter' events on the input to add new items and 'choose' events on the list to display item details, including creation time. ```javascript $( function () { // ... code ... input.on( 'enter', function () { // ... code ... // Add the item list.addItems( [ new ToDoItemWidget( { data: input.getValue(), label: input.getValue(), creationTime: Date.now() } ) ] ); } ); // ... code ... list.on( 'choose', function ( item ) { info.setLabel( item.getData() + ' (' + item.getPrettyCreationTime() + ')' ); } ); // ... code ... } ); ``` -------------------------------- ### Complete ToDo App HTML Structure (index.html) Source: https://github.com/wikimedia/oojs-ui/blob/master/demos/tutorials/collection/basics1/contents.html This is the full HTML boilerplate for `index.html`, including meta tags, title, description, viewport settings, and script inclusions for jQuery and OOjs, forming the foundation of the ToDo application. ```HTML ToDo OOUI ``` -------------------------------- ### Configure Initial OOjs UI Widgets (JavaScript) Source: https://github.com/wikimedia/oojs-ui/blob/master/demos/tutorials/collection/basics1/contents.html This JavaScript snippet initializes the `TextInputWidget` with a placeholder and the `SelectWidget` with a custom CSS class, setting up the basic structure and initial appearance of the ToDo app. ```JavaScript $( function () { const input = new OO.ui.TextInputWidget( { placeholder: 'Add a ToDo item' } ), list = new OO.ui.SelectWidget( { classes: [ 'todo-list' ] } ); // code continues... } ); ``` -------------------------------- ### Update HTML and JavaScript for ToDoListWidget Integration Source: https://github.com/wikimedia/oojs-ui/blob/master/demos/tutorials/collection/basics2/contents.html Shows how to include the new `ToDoListWidget.js` file in `index.html` and update the application's initialization script to instantiate and use the `ToDoListWidget`. ```html ``` ```javascript $( function () { // ... code ... list = new ToDoListWidget( { classes: [ 'todo-list' ] } ), // ... code ... } ); ``` -------------------------------- ### Complete init.js for ToDo App Initialization Logic Source: https://github.com/wikimedia/oojs-ui/blob/master/demos/tutorials/collection/basics2/contents.html This JavaScript file contains the core initialization logic for the ToDo application. It instantiates `TextInputWidget`, `ToDoListWidget`, and `LabelWidget`, handles the 'enter' keypress event on the input to add new items (with duplicate and empty input validation), and updates an info label based on chosen list items. Finally, it appends all UI elements to the DOM. ```JavaScript $( function () { const input = new OO.ui.TextInputWidget( { placeholder: 'Add a ToDo item' } ), list = new ToDoListWidget( { classes: [ 'todo-list' ] } ), info = new OO.ui.LabelWidget( { label: 'Information', classes: [ 'todo-info' ] } ); // Respond to 'enter' keypress input.on( 'enter', function () { // Check for duplicates and prevent empty input if ( list.findItemFromData( input.getValue() ) || input.getValue() === '' ) { input.$element.addClass( 'todo-error' ); return; } input.$element.removeClass( 'todo-error' ); list.on( 'choose', function ( item ) { info.setLabel( item.getData() + ' (' + item.getPrettyCreationTime() + ')' ); } ); // Add the item list.addItems( [ new ToDoItemWidget( { data: input.getValue(), label: input.getValue(), creationTime: Date.now() } ) ] ); input.setValue( '' ); } ); // Append the app widgets $( '.wrapper' ).append( input.$element, list.$element, info.$element ); } ); ``` -------------------------------- ### Complete ToDo App Logic (assets/init.js) Source: https://github.com/wikimedia/oojs-ui/blob/master/demos/tutorials/collection/basics1/contents.html This comprehensive JavaScript code for `assets/init.js` integrates all functionalities: widget initialization, input validation, item addition, input clearing, and appending UI elements to the DOM for the ToDo application. ```JavaScript $( function () { const input = new OO.ui.TextInputWidget( { placeholder: 'Add a ToDo item' } ), list = new OO.ui.SelectWidget( { classes: [ 'todo-list' ] } ); // Respond to 'enter' keypress input.on( 'enter', function () { // Check for duplicates and prevent empty input if ( list.findItemFromData( input.getValue() ) || input.getValue() === '' ) { input.$element.addClass( 'todo-error' ); return; } input.$element.removeClass( 'todo-error' ); // Add the item list.addItems( [ new OO.ui.OptionWidget( { data: input.getValue(), label: input.getValue() } ) ] ); input.setValue( '' ); } ); // Append the app widgets $( '.wrapper' ).append( input.$element, list.$element ); } ); ``` -------------------------------- ### Complete index.html for ToDo App Structure Source: https://github.com/wikimedia/oojs-ui/blob/master/demos/tutorials/collection/basics2/contents.html This HTML file provides the complete structural foundation for the ToDo application. It includes meta information, links to external libraries like jQuery, OOjs, and OOjs UI, and references to the custom CSS and JavaScript files (`todo.css`, `ToDoItemWidget.js`, `ToDoListWidget.js`, `init.js`) that compose the application. ```HTML ToDo OOUI

Demo ToDo app with OOUI

``` -------------------------------- ### Initialize OOUI TextInput and Select Widgets Source: https://github.com/wikimedia/oojs-ui/blob/master/demos/tutorials/collection/basics1/contents.html This JavaScript snippet, intended for `assets/init.js`, initializes an `OO.ui.TextInputWidget` for user input and an `OO.ui.SelectWidget` for displaying a list of items. It appends the `$element` property of these widgets to the `.wrapper` div in the HTML, making them visible on the page. ```JavaScript $( function () { const input = new OO.ui.TextInputWidget(), list = new OO.ui.SelectWidget(); // Append to the wrapper $( '.wrapper' ).append( input.$element, list.$element ); } ); ``` -------------------------------- ### Initialize OOUI Widgets for ToDo App Display Source: https://github.com/wikimedia/oojs-ui/blob/master/demos/tutorials/collection/basics2/contents.html This JavaScript snippet initializes core OOUI widgets for a ToDo application. It creates a TextInputWidget for adding items, a SelectWidget to list items, and a LabelWidget to display item information. These widgets are then appended to the DOM within a '.wrapper' element. ```JavaScript $( function () { const input = new OO.ui.TextInputWidget( { placeholder: 'Add a ToDo item' } ), list = new OO.ui.SelectWidget( { classes: [ 'todo-list' ] } ), info = new OO.ui.LabelWidget( { label: 'Information', classes: [ 'todo-info' ] } ); // ... code ... // Append the app widgets $( '.wrapper' ).append( input.$element, list.$element, info.$element ); } ); ``` -------------------------------- ### Complete ToDoItemWidget.js Class Definition Source: https://github.com/wikimedia/oojs-ui/blob/master/demos/tutorials/collection/basics2/contents.html This JavaScript file defines the `ToDoItemWidget` class, which extends `OO.ui.OptionWidget`. It includes a constructor to set up the widget with a creation time and a 'Delete' button. The button's click event is connected to `onDeleteButtonClick` (defined elsewhere in the tutorial), and the widget's DOM element is styled and appended with the button. ```JavaScript const ToDoItemWidget = function ( config ) { config = config || {}; ToDoItemWidget.super.call( this, config ); this.creationTime = config.creationTime; this.deleteButton = new OO.ui.ButtonWidget( { label: 'Delete' } ); this.$element .addClass( 'todo-itemWidget' ) .append( this.deleteButton.$element ); this.deleteButton.connect( this, { click: 'onDeleteButtonClick' } ); }; OO.inheritClass( ToDoItemWidget, OO.ui.OptionWidget ); ToDoItemWidget.prototype.getCreationTime = function () { return this.creationTime; }; ToDoItemWidget.prototype.getPrettyCreationTime = function () { const time = new Date( this.creationTime ), ``` -------------------------------- ### Build OOUI Library with Grunt Source: https://github.com/wikimedia/oojs-ui/blob/master/README.md This command executes the 'build' task defined in the Gruntfile, compiling and preparing the OOUI library for distribution. It processes source files, generates minified versions, and handles other build-related operations. ```bash grunt build ``` -------------------------------- ### Prepare Release Branch for OOJS-UI Source: https://github.com/wikimedia/oojs-ui/blob/master/README.md Updates the local Git remote and creates a new `release` branch based on `origin/master` for the OOJS-UI package release process. ```bash $ git remote update $ git checkout -B release -t origin/master ``` -------------------------------- ### Include Custom ToDoItemWidget Script in HTML Source: https://github.com/wikimedia/oojs-ui/blob/master/demos/tutorials/collection/basics2/contents.html This HTML snippet shows how to include the custom ToDoItemWidget.js file into the index.html page. This script defines a new class that extends OO.ui.OptionWidget to add more functionality to ToDo items. ```HTML ``` -------------------------------- ### Commit Changes for OOUI Update Source: https://github.com/wikimedia/oojs-ui/blob/master/README.md After making changes related to an OOUI update, use these Git commands to stage all modified files and create a new commit. ```bash git add -u git commit ``` -------------------------------- ### Update OOJS-UI Package Version (NPM) Source: https://github.com/wikimedia/oojs-ui/blob/master/README.md Increments the package version number (e.g., patch or minor) using NPM, without creating a Git tag, as part of the release preparation. ```bash $ npm version patch --git-tag-version=false ``` -------------------------------- ### Handle Delete Button Click for ToDoItemWidget (JavaScript) Source: https://github.com/wikimedia/oojs-ui/blob/master/demos/tutorials/collection/basics2/contents.html This JavaScript method, part of the `ToDoItemWidget` prototype, emits a 'delete' event when its associated button is clicked. It's typically used to signal the removal of a ToDo item from a list. ```JavaScript ToDoItemWidget.prototype.onDeleteButtonClick = function () { this.emit( 'delete' ); }; ``` -------------------------------- ### Validate Input for Duplicates and Empty Values (JavaScript) Source: https://github.com/wikimedia/oojs-ui/blob/master/demos/tutorials/collection/basics1/contents.html This JavaScript code updates the input's 'enter' event handler to prevent adding duplicate or empty items to the list. It adds a 'todo-error' class to the input for invalid entries. ```JavaScript // Respond to 'enter' keypress input.on( 'enter', function () { // Check for duplicates and prevent empty input if ( list.findItemFromData( input.getValue() ) || input.getValue() === '' ) { input.$element.addClass( 'todo-error' ); return; } input.$element.removeClass( 'todo-error' ); // Add the item list.addItems( [ new OO.ui.OptionWidget( { data: input.getValue(), label: input.getValue() } ) ] ); } ); ``` -------------------------------- ### Standard Commit Message Format for OOUI Updates Source: https://github.com/wikimedia/oojs-ui/blob/master/README.md This is the required format for commit messages when updating the OOUI version. It includes the new version number, release notes URL, associated bug tickets, and a 'Depends-On' header linking to the mediawiki/vendor commit. ```txt Update OOUI to v1.2.34 Release notes: https://gerrit.wikimedia.org/g/oojs/ui/+/v1.2.34/History.md Bug: T123456 Bug: T234567 Depends-On: I12345678901234567890 ``` -------------------------------- ### Define Error Styling for Invalid Input (CSS) Source: https://github.com/wikimedia/oojs-ui/blob/master/demos/tutorials/collection/basics1/contents.html This CSS rule sets the background color of the input field to red when the 'todo-error' class is applied, visually indicating an invalid input state to the user. ```CSS .todo-error input { background-color: #ff9696; } ``` -------------------------------- ### Clear Input Field After Item Addition (JavaScript) Source: https://github.com/wikimedia/oojs-ui/blob/master/demos/tutorials/collection/basics1/contents.html This JavaScript modification adds `input.setValue( '' );` after an item is added to the list, automatically clearing the input field and preparing it for the next entry. ```JavaScript // ...code list.addItems( [ new OO.ui.OptionWidget( { data: input.getValue(), label: input.getValue() } ) ] ); input.setValue( '' ); } ); ``` === COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.