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

// Create a Group "Rejected + [Date]" at the top of the selected Artboard that contains a
// transparent layer with the text "Rejected"
// --------------------------------------------------------------------------------------------
// Reference Article
// https://medium.com/@kevingutowski/how-to-build-your-first-sketch-plugin-14c0e9e56bf0
// ----------------------------------------------------------------------------------------------------------

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

var ShapePath = sketch.ShapePath
var Group = require('sketch').Group
var Text = require('sketch').Text

// ----------------------------------------------------------------------------------------------------------
// 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 dateIsNow = today.getFullYear() + '.' + pad(today.getMonth() + 1) + '.' + pad(today.getDate());
var timeIsNow = pad(today.getHours()) + ':' + pad(today.getMinutes()) + ':' + pad(today.getSeconds());

var timeAndDateNow = dateIsNow + ' - ' + timeIsNow;

// UI.alert("Current Date and Time", timeAndDateNow);

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

// Reference the sketch document
var document = context.document;

// Reference what is selected
var selection = context.selection;

export default function loopThroughSelection() {

    function createRejectedGroup() {
        // Reference the selection
        var selectedArtboard = selection[i];

        // Get the artboard frame for dimensions
        var artboardFrame = selectedArtboard.frame();

        // Get the width
        var artboardWidth = artboardFrame.width();

        // Get the height
        var artboardHeight = artboardFrame.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" + " | " + timeAndDateNow,
            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");
    }

    log(selection.count() + " Layers selected");

    log(selection);

    selection.forEach(function(layer) {
        if (layer.parentArtboard()) {
            log("Selected Layer: " + "'" + layer.name() + "'" + " Belongs to: Artboard Name: " + layer.parentArtboard().name() + " | W: " + layer.parentArtboard().frame().width() + " H: " + layer.parentArtboard().frame().height());
        }
    });

    // Loop through the selected layers
    for (var i = 0; i < selection.count(); i++) {

        // Check to see if the layer is an artboard
        if (selection[i].class() == "MSArtboardGroup") {

            createRejectedGroup();

        } else {
            UI.message("⚠️ NO artboard Selected! Please select an artboard and try again.");
            // ToDo ---
            // --------------
            // Some magic to select the parent artboard and createRejectedGroup();
        }
    }
}

// Make sure something is selected
if (selection.count() == 0) {
    UI.message("⚠️ For this to work, please select a layer or an artboard...");
} else {
    // To-DO: Show an alert window and select the artboards that will need to include "Rejected Group"
    // Check Ashung Automate - Artboard Navigator
    // Display a list of Artboards
    // Select with a checkmark which ones need to include "rejectedGroup"
    // Apply the "rejectedGroup"
    // -----------------------------
}