TypeScript jQuery Callbacks Examples

Example #1

File: services.areas.ts Project: lawliet29/mp.backend

const defaultAreaService : AreaService = (() => {
    let elementaryAreas : { [id : number]: ElementaryArea } 
        = safeParse(window.localStorage.getItem(ELEMENTARY_LOCAL_STORAGE_KEY));
        
    const elementaryCallbacks = $.Callbacks();
    var editArea : ElementaryArea;
    let count = _.max(_.values(elementaryAreas).map((a : ElementaryArea) => a.id)) + 1;
    if (isNaN(count)) {
        count = 1;
    }
    
    $
    .get('http://localhost:8009/elementaryAreas/')
    .then(data => {
        elementaryAreas = data;
        elementaryCallbacks.fire(_.clone(elementaryAreas));
    });
    
    const getElementaryAreas = () => _.clone(elementaryAreas);
    
    const triggerAreasChange = () => { elementaryCallbacks.fire(getElementaryAreas()) };
    
    return {
        getElementaryAreas,
        addElementaryArea: function(area : ElementaryArea, id? : number) {
            const index = id || count++; 
            const newArea = _.clone(area);
            newArea.id = index;
            elementaryAreas[index] = newArea;
            elementaryCallbacks.fire(getElementaryAreas());
        },
        removeElementaryArea: function(id) {
            delete elementaryAreas[id];
            elementaryCallbacks.fire(getElementaryAreas());
        },
        onAreasChange: callback => elementaryCallbacks.add(callback),
        addPoint: (id, point) => elementaryAreas[id].points.push(point),
        setEditArea: id => {
            ToolService.setTool("draw");
            editArea = elementaryAreas[id];
            // TODO: make proper edit here
            editArea.points = [];
            editArea.polygon = Shapes.Polygon(editArea.points, false);
        },
        getCurrentEditArea: () => editArea,
        clearEditArea: () => {
            ToolService.setTool("selection");
            editArea = null;
        },
        setHighlight: function(id, highlight) {
            elementaryAreas[id].hover = highlight;
            elementaryAreas[id].polygon.color = highlight ? 'rgba(77, 163, 44, 0.4)' : null;
            triggerAreasChange();    
        },
        triggerAreasChange
    }
})();

Example #2

File: services.toolService.ts Project: lawliet29/mp.backend

    "selection": {
        icon: "pointing up",
        name: "Указатель"
    },
    "edit": {
        icon: "edit",
        name: "Редактирование участка"
    },
    "draw": {
        icon: "pencil",
        name: "Рисование участка"
    }
}

var currentTool : Tool = _.keys(Tools)[0] as Tool;
const toolChangeCallbacks = $.Callbacks();

export interface ToolService {
    getTools() : ToolsType
    getCurrentTool() : Tool
    setTool(t : Tool)
    onToolChanged(callback : (Tool) => void)
}

const ToolServiceImplementation : ToolService = {
    getTools() { return _.cloneDeep(Tools) },
    getCurrentTool() { return currentTool },
    setTool(t: Tool) {
        currentTool = t;
        toolChangeCallbacks.fire(currentTool);
    },

Example #3

File: services.mapLoader.ts Project: lawliet29/mp.backend

import * as $ from 'jquery'

type ImageLoadedCallback = (HTMLImageElement) => void;

const MAP_KEY = 'map_image';

export interface MapLoader {
    load: (HTMLInputElement) => void
    onMapLoaded: (ImageLoadedCallback) => void
    getCurrentMap: (() => HTMLImageElement)
}

const mapCallbacks = $.Callbacks();
var currentMap : HTMLImageElement = null;

const MapLoaderImplementation : MapLoader = {
    load: (input : HTMLInputElement) => {
        const $input = $(input);
        $input.unbind('change');
        $input.change(event => {
            let file = input.files[0];
            let reader = new FileReader();
            reader.onload = img => {
                let element = document.createElement("img");
                element.src = reader.result;
                currentMap = element;
                mapCallbacks.fire(element);
            }
            reader.readAsDataURL(file);
        });
        $input.click();