// this is an example of what the data will look like when a user imports your component window.dataJoMwI = {}; dataJoMwI['tierType'] = 'everyone'; dataJoMwI['tierDays'] = '14'; dataJoMwI['tierHours'] = '0'; dataJoMwI['tierCount'] = '6'; dataJoMwI['tierSelection'] = {"userInput":{"tier_scores":[6,5,1,5,1,5,5],"tier_item_count":1},"aggregateValues":{"tier_scores":[30,25,5,25,5,25,25],"tier_item_count":5},"userInputMeta":{"created":null,"modified":null}}; dataJoMwI['items'] = [{},{},{},{},{},{},{}]; dataJoMwI['items'][0]['image'] = {"src":"https://d1pymbn96bwdg3.cloudfront.net/uploads/1/znVNPCLM.webp","srcset":"https://d1pymbn96bwdg3.cloudfront.net/uploads/1/znVNPCLM-480w.webp 480w, https://d1pymbn96bwdg3.cloudfront.net/uploads/1/znVNPCLM.webp 512w"}; dataJoMwI['items'][1]['image'] = {"src":"https://d1pymbn96bwdg3.cloudfront.net/uploads/1/OiI2AQCv.jpg","srcset":""}; dataJoMwI['items'][2]['image'] = {"src":"https://d1pymbn96bwdg3.cloudfront.net/uploads/1/PMMSWijj.jpg","srcset":""}; dataJoMwI['items'][3]['image'] = {"src":"https://d1pymbn96bwdg3.cloudfront.net/uploads/1/N1DCjPKm.jpg","srcset":""}; dataJoMwI['items'][4]['image'] = {"src":"https://d1pymbn96bwdg3.cloudfront.net/uploads/1/jT5SKd4t.jpg","srcset":""}; dataJoMwI['items'][5]['image'] = {"src":"https://d1pymbn96bwdg3.cloudfront.net/uploads/1/aRKvNK3J.jpg","srcset":""}; dataJoMwI['items'][6]['image'] = {"src":"https://d1pymbn96bwdg3.cloudfront.net/uploads/1/tqj5RtMN.jpg","srcset":""}; dataJoMwI['items'][0]['text'] = 'Charlie Kirk'; dataJoMwI['items'][1]['text'] = 'JD'; dataJoMwI['items'][2]['text'] = 'AOC'; dataJoMwI['items'][3]['text'] = 'Tate'; dataJoMwI['items'][4]['text'] = 'Newscum'; dataJoMwI['items'][5]['text'] = 'Marco'; dataJoMwI['items'][6]['text'] = 'Trump';

this.handleItemClick( itemIndex ) } onDragStart={(event) => this.handleDragStart( event, itemIndex ) } onDragEnd={ this.handleDragEnd } > {userAgreed && !isCommentDisplay_dataJoMwI() && !isDefaultImageScreenshot_dataJoMwI() && ( you agreed )} {showImage && (

)} {item.text && ( {item.text} )} {showAverage && averageScore !== null && !isCommentDisplay_dataJoMwI() && !isDefaultImageScreenshot_dataJoMwI() && ( { averageScore.toFixed( 1 ) } )}

); } renderBoard( placements, disabled, showAverage ) { const items = this.getItems(); const tierKeys = getTierKeys_dataJoMwI(); const userPlacements = getUserPlacements_dataJoMwI( this.state.storeData, items.length ); const emptyDropText = this.getEmptyDropText(); const hasSelectedItem = this.state.selectedItemIndex !== null; const showAgreeLegend = !this.state.agreeLegendDismissed && this.hasVisibleAgreeBadges( placements, showAverage ); const screenshotUnrankedItems = []; if ( isDefaultImageScreenshot_dataJoMwI() ) { for ( let i = 0; i < items.length; i++ ) { if (!placements[i]) { screenshotUnrankedItems.push( this.renderItem( items[i], i, true, false, false ) ); } } } return (

{showAgreeLegend && (

= you agreed

)} {tierKeys.map( (tierKey) => { const rowItems = []; for ( let i = 0; i < items.length; i++ ) { if ( placements[i] === tierKey ) { rowItems.push( this.renderItem( items[i], i, disabled, showAverage, showAverage && !isCommentDisplay_dataJoMwI() && !isDefaultImageScreenshot_dataJoMwI() && this.state.viewMode === "poll" && this.hasUserSubmitted() && userPlacements[i] === tierKey ) ); } } const isActive = this.state.activeDropTier === tierKey; const showOverlay = this.shouldShowDropOverlayForTier( tierKey ); return (

{tierKey}

this.handleZoneClick( tierKey ) } onDragOver={(event) => this.handleDragOver( event, tierKey ) } onDragLeave={ this.handleDragLeave } onDrop={(event) => this.handleDrop( event, tierKey ) } > { rowItems.length > 0 ? rowItems : null } {showOverlay && ( { emptyDropText } )}

); } )} { isDefaultImageScreenshot_dataJoMwI() && screenshotUnrankedItems.length > 0 && (

Unranked

{ screenshotUnrankedItems }

) }

); } renderPoolTools( keepVisible ) { if ( this.state.mode !== "edit" && !keepVisible ) { return null; } return (

); } renderGateMessage( extraClassName ) { if ( !this.shouldGateCommunityResults() ) { return null; } return (

Submit ranking to see poll results.

); } renderPool( placements, disabled ) { const items = this.getItems(); const poolItems = []; const emptyDropText = this.getEmptyDropText(); const hasSelectedItem = this.state.selectedItemIndex !== null; const showOverlay = this.shouldShowDropOverlayForTier( "" ); const keepPoolToolsVisible = this.state.showEditControlsContent && !this.shouldShowEditControls(); for ( let i = 0; i < items.length; i++ ) { if (!placements[i]) { poolItems.push( this.renderItem( items[i], i, disabled, false, false ) ); } } return (

{ this.renderGateMessage( "JoMwI-tier-gate-message--mobile" ) }

{ this.showPreviewPool() ? "Items to rank" : "Unranked" }

{!this.showPreviewPool() && this.renderPoolTools( keepPoolToolsVisible )} { this.renderGateMessage( "JoMwI-tier-gate-message--desktop" ) }

this.handleZoneClick( "" ) } onDragOver={(event) => this.handleDragOver( event, "" ) } onDragLeave={ this.handleDragLeave } onDrop={(event) => this.handleDrop( event, "" ) } > { poolItems.length > 0 ? poolItems : null } {showOverlay && ( { emptyDropText } )}

); } showViewToggle() { return ( !isCommentDisplay_dataJoMwI() && !isDefaultImageScreenshot_dataJoMwI() && this.getTierType() === "everyone" && this.hasUserSubmitted() ); } showPreviewPool() { return ( !isDefaultImageScreenshot_dataJoMwI() && isListDisplay_dataJoMwI() && this.shouldGateCommunityResults() ); } renderViewToggle() { if ( !this.showViewToggle() ) { return null; } const isModeDisplay = this.state.mode === "display"; const renderViewToggleClass = isModeDisplay ? "JoMwI-tier-view-toggle" : "JoMwI-tier-view-toggle JoMwI-tier-view-toggle-edit-mode"; return (

); } renderActions( disabled, keepEditActionsVisible ) { const expired = isExpired_dataJoMwI(); const hasUserSubmitted = this.hasUserSubmitted(); const tierType = this.getTierType(); if ( isDefaultImageScreenshot_dataJoMwI() ) { return null; } if ( isInitializePost_dataJoMwI() ) { return null; } if ( isCommentDisplay_dataJoMwI() ) { return null; } if ( isListDisplay_dataJoMwI() ) { return null; } if ( this.state.mode === "edit" || keepEditActionsVisible ) { return (

{this.state.toastText ? ( this.renderToast() ) : ( <> {this.hasRankedDraftItems() && ( )} {!this.shouldGateCommunityResults() && ( )} )}

); } if (expired) { return null; } if ( tierType === "creator" ) { return null; } if ( tierType === "everyone" && this.state.mode === "display" ) { return null; } const label = hasUserSubmitted ? "Edit Your Ranking" : "Submit Your Ranking"; return (

); } renderCreateTierCta() { if ( !this.showCreateTierCta() ) { return null; } return (

Make your own

); } renderToast() { if ( !this.state.toastText ) { return null; } return (

{ this.state.toastText }

); } renderDisplayPromptOverlay() { if ( !this.state.displayPromptOpen ) { return null; } if ( !isPostDisplay_dataJoMwI() ) { return null; } if ( isCommentDisplay_dataJoMwI() ) { return null; } if ( isDefaultImageScreenshot_dataJoMwI() ) { return null; } const promptConfig = this.getDisplayPromptConfig(); return (

event.stopPropagation() } >

{ promptConfig.message }

{promptConfig.showPrimary && ( )}

); } render() { const placements = this.getPlacementsForRender(); const tierType = this.getTierType(); const expired = isExpired_dataJoMwI(); const lockedMessage = this.getLockedMessage(); const disabled = this.state.mode !== "edit" || this.state.saving || !this.canEdit(); const totalSubmissions = getSubmissionCount_dataJoMwI( this.state.storeData && this.state.storeData.aggregateValues ? this.state.storeData.aggregateValues : {} ); const formattedTotalSubmissions = formatSubmissionCount_dataJoMwI( totalSubmissions ); const modeText = tierType !== "creator" ? "Public Poll" : !isPostAuthor_dataJoMwI() ? "View Only Mode (Set by the OP)" : "Your Tier List"; const showAverage = !isCommentDisplay_dataJoMwI() && !isDefaultImageScreenshot_dataJoMwI() && this.state.mode === "display" && tierType === "everyone" && this.state.viewMode === "poll" && totalSubmissions > 0 && !this.shouldGateCommunityResults(); const keepEditControlsVisible = this.state.showEditControlsContent && !this.shouldShowEditControls(); return (

{!isCommentDisplay_dataJoMwI() && !isDefaultImageScreenshot_dataJoMwI() && (

{this.showMetaActionButton() && ( )} { this.renderViewToggle() }

{tierType === "creator" && !isPostAuthor_dataJoMwI() && ( )} {!this.showViewToggle() && modeText} {tierType === "everyone" && ( <> {!this.showViewToggle() ? " · " : ""} { formattedTotalSubmissions } {" submission"} { totalSubmissions === 1 ? "" : "s" } )}

{this.showTopRightText() && (

{" "} { getTopRightText_dataJoMwI() }

)}

{this.state.showEditControlsContent && ( <> {this.renderPool( placements, this.state.mode !== "edit" ? true : disabled )} {this.renderActions( disabled, keepEditControlsVisible )} )}

{this.renderBoard( placements, disabled, showAverage )} {this.showCreatorPendingMessage() && (

Pending: OP has not submitted tier yet.

)} {lockedMessage && (

{lockedMessage.icon && ( )} { lockedMessage.text }

)} {!!this.state.statusText && (

{ this.state.statusText }

)} { this.renderCreateTierCta() } { this.renderDisplayPromptOverlay() }

); } } ReactDOM.render( , document.getElementById( "dataJoMwI-root" ) );

Tier List Poll

About

Preview

Trending Posts with this component