Options
All
  • Public
  • Public/Protected
  • All
Menu

Interface SnapPuzzleOptions

Options for the plugin

All the options could be updated using the jquery ui widget method

Please note, when some options are updated, the markup of the widget is re-created and the progress of the puzzle will be lost.

example

For example

$("someSelector").snapPuzzle("option","rows",4);

For multiple options Because set options could reconstruct the component, if more that one option will be provided, pass an object instead of key-value

example

Multiple options

  • $("someSelector").snapPuzzle("option",{
   columns:4,
   rows:2,
   backgroundInSlots:false
});

Hierarchy

  • SnapPuzzleOptions

Index

Properties

Methods

Properties

Optional appendPiecesTo

appendPiecesTo: Element | JQuery | string

Where to append the puzzle pieces By default the list will be appended to the pieces container If this option is provided, createPiecesContainer will not be invoked

Optional backgroundInSlots

backgroundInSlots: boolean

Add the background to the slots

default

true

Optional classes

classes: object

Css classes to use.

Update this option will reconstruct the markup and the progress will be lost.

Type declaration

  • Optional backgroundInSlots?: string

    Class for the wrapper when the backgroundInSlots option is true

    default

    c-snap-puzzle--slots-background

  • Optional completed?: string

    Class for the wrapper and the root element for when the puzzle is completed

    default

    c-snap-puzzle--completed

  • Optional disabled?: string

    Class for the disabled state

    default

    c-snap-puzzle--disabled

  • Optional feedbackOnHover?: string

    Class for the wrapper when the feedbackOnHover option is true

    default

    c-snap-puzzle--feedback-on-hover

  • Optional piece?: string

    Class for the pieces

    default

    c-snap-puzzle__piece

  • Optional pieceCorrect?: string

    Class for the piece when has been dropped or is hover a correct slot

    default

    c-snap-puzzle__piece--correct

  • Optional pieceDisabled?: string

    Class for the disabled pieces

    default

    c-snap-puzzle__piece--disabled

  • Optional pieceIncorrect?: string

    Class for the piece when has been dropped or is hover an incorrect slot

    default

    c-snap-puzzle__piece--incorrect

  • Optional piecesContainer?: string

    Class for the pieces container

    default

    c-snap-puzzle__pieces-container

  • Optional root?: string

    Root element

    default

    c-snap-puzzle__image

  • Optional slot?: string

    Class for the slots

    default

    c-snap-puzzle__slot

  • Optional slotCorrect?: string

    Class for the slot when the correct piece is hover or has been dropped

    default

    c-snap-puzzle__slot--correct

  • Optional slotDisabled?: string

    Class for the disabled slots

    default

    c-snap-puzzle__slot--disabled

  • Optional slotHasPiece?: string

    Class for the slots when have a piece placed

    default

    c-snap-puzzle__slot--has-piece

  • Optional slotIncorrect?: string

    Class for the slot when the incorrect piece is hover or has been dropped

    default

    c-snap-puzzle__slot--incorrect

  • slotsContainer: any

    Class for the slots container

    default

    c-snap-puzzle__slots-container

  • Optional wrapper?: string

    Class for the wrapper

    default

    c-snap-puzzle

columns

columns: number

Num of columns for the puzzle. Update this option will reconstruct the markup and the progress will be lost

Optional disabled

disabled: boolean

Disable the widget

default

false

Optional feedbackOnHover

feedbackOnHover: boolean

Add the feedback class to the piece when is above the correct or incorrect slot

see

[[classes.pieceIncorrect]]

see

[[classes.pieceCorrect]]

default

false

Optional height

height: number

Initial height of the image. If it's provided, will be used for the initialization instead of wait for the image to be loaded

Optional hints

hints: number

Number of pieces to resolve from the beginning

default

0

Optional namespace

namespace: string

Namespace for events. Update this option will reconstruct the markup and the progress will be lost

default

jq-crossword

Optional onlyDropOnValid

onlyDropOnValid: boolean

If true, the pieces only could be dropped in the correct slots. If the piece is dropped in an incorrect slot, will be reverted to the previous position

default

false

Optional randomPieceStartPosition

randomPieceStartPosition: boolean

Randomize the starting position of the pieces

default

false

rows

rows: number

Num of rows for the puzzle. Update this option will reconstruct the markup and the progress will be lost

Optional width

width: number

Initial width of the image. If it's provided, will be used for the initialization instead of wait for the image to be loaded

Methods

Optional createPiece

  • createPiece(): JQuery

  • Override the default creation of each piece. The piece is the draggable item of the puzzle

    example
    $(".puzzle").snapPuzzle({
     createPiece:()=>{
         return $(`<div class="my-custom-element"></div>`);
     }
})
    see

    [[SnapPuzzleWrapper._createPiece]]

    Returns JQuery

Optional createPiecesContainer

  • createPiecesContainer(): JQuery

  • Override the default creation of the pieces container

    example
    $(".puzzle").snapPuzzle({
     createPiecesContainer:()=>{
         return $(`<div class="my-custom-element"></div>`);
     }
})
    see

    [[SnapPuzzleWrapper._createPiecesContainer]]

    Returns JQuery

Optional createSlot

  • createSlot(): JQuery

  • Override the default creation of each slot. The slot is where the piece of the puzzle could be dropped

    example
    $(".puzzle").snapPuzzle({
     createSlot:()=>{
         return $(`<div class="my-custom-element"></div>`);
     }
})
    see

    [[SnapPuzzleWrapper._createSlot]]

    Returns JQuery

Optional createSlotsContainer

  • createSlotsContainer(): JQuery

  • Override the default creation of the slots container The slots container will be appended to the wrapper

    example
    $(".puzzle").snapPuzzle({
     createSlotsContainer:()=>{
         return $(`<div class="my-custom-element"></div>`);
     }
})
    see

    [[SnapPuzzleWrapper._createSlotsContainer]]

    Returns JQuery

Optional createWrapper

  • createWrapper(): JQuery

  • Override the default creation of the wrapper

    example
    $(".puzzle").snapPuzzle({
     createWrapper:()=>{
         return $(`<div class="my-custom-element"></div>`);
     }
})
    see

    [[SnapPuzzleWrapper._createWrapper]]

    Returns JQuery

Generated using TypeDoc