create-rejected-group-to-artboard-v02.js

var sketch = require('sketch')
var UI = require('sketch/ui')

var Page = require('sketch/dom').Page
var Artboard = require('sketch/dom').Artboard
var Group = require('sketch/dom').Group
var Text = require('sketch/dom').Text
var ShapePath = sketch.ShapePath

var document = sketch.getSelectedDocument();
var page = document.selectedPage;
var selection = document.selectedLayers;


export default function() {
    // ------------------------------------------------------------------------
    // The filepath, useful at a later date.
    // log("File in Finder: " + document.path + "\n ^ One log item");
    // ------------------------------------------------------------------------

    // log("Layer(s) selected: " + selection.length);

    // log(selection);

    // ----------------------------------------------------------------------------------------------------------
    // Get Current date and time
    // ----------------------------------------------------------------------------------------------------------
    // ----------------------------------------------------------------------------------------------------------
    // Source
    // https://www.toptal.com/software/definitive-guide-to-datetime-manipulation
    // and
    // https://phoenixnap.com/kb/how-to-get-the-current-date-and-time-javascript
    // ----------------------------------------------------------------------------------------------------------

    // Find a way to include it from utilities / date-time.js
    // --------------
    function pad(n) { // Add a 0 to Months / days / minutes / seconds
        return n < 10 ? '0' + n : n;
    }

    var today = new Date();

    var day = today.getDate();
    var month = today.getMonth();
    var year = today.getFullYear();

    var hh = today.getHours();
    var mm = today.getMinutes();
    var ss = today.getSeconds();

    var currentDateAndTime = year + '.' + pad(month + 1) + '.' + pad(day) + " - " + pad(hh) + ':' + pad(mm) + ':' + pad(ss);

    // ----------------------------------------------------------------------------------------------------------
    // End Get Current time
    // ----------------------------------------------------------------------------------------------------------

    // Make sure something is selected
    if (selection.length === 0) {
        UI.message("⚠️ For this to work, please select a layer or an artboard...");
        log('No layers selected.')
        return;
    }

    function createRejectedGroup(neededArtboard) {

        // Reference the selection
        var selectedArtboard = neededArtboard;

        // Get the width
        var artboardWidth = neededArtboard.frame.width;

        // Get the height
        var artboardHeight = neededArtboard.frame.height;

        // Create a rectangle - (mySquare is the original)
        var createRejectedHolder = new ShapePath({
            // parent: rejectedGroup,
            name: 'Holder',
            frame: {
                x: 0,
                y: 0,
                width: artboardWidth,
                height: artboardHeight
            },
            style: {
                // fills: ['#D8D8D8CC'], // #RRGGBBAA -- AA = Transparency
                // Source: https://gist.github.com/lopspower/03fb1cc0ac9f32ef38f4
                fills: ['#222222'],
                opacity: 0.90,
                borders: []
            }
        });

        // Create a text layer
        // Source: https://sketchplugins.com/d/1341-create-text-with-new-api
        var createRejectedTextXCoordinates = 50;
        var createRejectedTextWidth = artboardWidth - createRejectedTextXCoordinates * 2;

        var createRejectedTextEmoji = new Text({
            // parent: rejectedGroup,
            text: '⚠️',
            name: '⚠️ Attention', // Add the layer name, different than the text
            style: {
                alignment: Text.Alignment.center,
                fontFamily: 'Apple Color Emoji',
                fontSize: 72,
                textColor: '#dddddd',
                borders: [],
            },
            frame: {
                x: createRejectedTextXCoordinates,
                y: 100,
                width: createRejectedTextWidth,
                height: 72,
            },
        });

        var createRejectedText = new Text({
            // parent: rejectedGroup,
            text: 'Rejected...',
            name: 'Rejected', // Add the layer name, different than the text
            style: {
                alignment: Text.Alignment.center,
                fontFamily: 'Helvetica Neue',
                fontWeight: '10', // For Helvetica Neue 7 is the equivalent of Medium | The weight of the font of a Text Layer. Goes from 0 to 12, 0 being the thinest and 12 being the boldest. Not every weight are available for every fonts. When setting a font weight that does not exist for the current font family, the closest weight that exists will be set instead.
                fontSize: 24,
                lineHeight: 36,
                textColor: '#dddddd',
                borders: [],
            },
            frame: {
                x: createRejectedTextXCoordinates,
                y: 200,
                width: createRejectedTextWidth,
                height: 36,
            },
        });

        var createRejectedTextExplanation = new Text({
            // parent: rejectedGroup,
            text: 'Would be nice to add those reasons here as to know why we did not choose this iteration.',
            name: 'Rejected Text Explanation', // Add the layer name, different than the text
            style: {
                alignment: Text.Alignment.left,
                fontFamily: 'Helvetica Neue',
                fontWeight: '7', // For Helvetica Neue 7 is the equivalent of Medium | The weight of the font of a Text Layer. Goes from 0 to 12, 0 being the thinest and 12 being the boldest. Not every weight are available for every fonts. When setting a font weight that does not exist for the current font family, the closest weight that exists will be set instead.
                fontSize: 24,
                lineHeight: 36,
                textColor: '#dddddd',
                borders: [],
            },
            frame: {
                x: createRejectedTextXCoordinates,
                y: 270,
                width: createRejectedTextWidth,
                height: 36,
            },
        });

        // https://github.com/sketch-hq/SketchAPI/blob/develop/examples/resources/src/resources.js
        // ----
        // Then we want to make a new group on the page, then put a new image layer into it, and set
        // that layer to use the resource image we located earlier
        //
        // We can make layers in any container using `new Group`, `new Image`, `new Text` and so on.
        // These functions all take a single parameter which is a dictionary of properties to set
        // on the new layer. Typically you will want to set the parent of the new layer, its frame, and perhaps
        // some other properties such as its name, style, and so on.
        // eslint-disable-next-line no-new 
        // Create a group that will contain the holder and the text.
        var rejectedGroup = new Group({
            parent: selectedArtboard,
            name: "⚠️ Rejected" + " | " + currentDateAndTime,
            // name: "⚠️ Rejected",
            layers: [
                createRejectedHolder,
                createRejectedTextExplanation,
                createRejectedText,
                createRejectedTextEmoji
            ],
            // otherProperty: "value", 
        });

        rejectedGroup.adjustToFit();

        createRejectedText.sketchObject.setTextBehaviour(1); // See Automate Plugin by Ashung - Toggle_Text_Auto_And_Fixed.js and https://sketchplugins.com/d/1488-make-text-layer-fixed-size-not-just-auto-height/3
        createRejectedTextExplanation.sketchObject.setTextBehaviour(1); // See Automate Plugin by Ashung - Toggle_Text_Auto_And_Fixed.js and https://sketchplugins.com/d/1488-make-text-layer-fixed-size-not-just-auto-height/3
        createRejectedTextEmoji.adjustToFit();
        // createRejectedTextEmoji.sketchObject.setTextBehaviour(1); // See Automate Plugin by Ashung - Toggle_Text_Auto_And_Fixed.js and https://sketchplugins.com/d/1488-make-text-layer-fixed-size-not-just-auto-height/3

        UI.message("⚠️ Rejected group was created");
    }

    if (selection.length > 0) {

        selection.forEach(function(layer, i) {

            // log('Selected layers: #' + (i + 1) + '. ' + layer.name);
            // log(layer.type);

            if (layer.type == "Artboard") {
                log("Selected Layer: " + "'" + layer.name + "'" + " Belongs to: Artboard Name: " + layer.name + " | W: " + layer.frame.width + " H: " + layer.frame.height);

                createRejectedGroup(layer);
                selection.clear();

            } else {

                // log("This is NOT an artboard... This is a: " + layer.type + "\n" + "Layer Name is: " + layer.name);
                
                UI.message("⚠️ For this to work, please select an artboard...");

                var artboard = layer.getParentArtboard();

                // This works with a bug that I do not know how to fix at this time
                // If multiple layers are selected - because of the forEach in which is encased
                // it generates "⚠️ Rejected | [timeStamp]" for every selected layer

                createRejectedGroup(artboard);

                selection.clear();
            }
        });

    }
}