obojobo-chunks-question-bank - npm Package Compare versions

Comparing version 15.1.1 to 16.0.0-alpha.0

adapter.js

@@ -5,2 +5,3 @@ const Adapter = {
 		model.setStateProp('select', 'sequential', p => p, ['sequential', 'random', 'random-unseen'])
+		model.setStateProp('collapsed', false)
 	},
@@ -11,2 +12,3 @@
 		clone.modelState.select = model.modelState.select
+		clone.modelState.collapsed = model.modelState.collapsed
 	},
@@ -17,2 +19,3 @@
 		json.content.select = model.modelState.select
+		json.content.collapsed = model.modelState.collapsed
 	}
@@ -19,0 +22,0 @@ }

converter.js

@@ -47,3 +47,4 @@ import Common from 'obojobo-document-engine/src/scripts/common'
 			choose: getChooseValue(node.content.chooseAll, node.content.choose),
-			select: node.content.select
+			select: node.content.select,
+			collapsed: node.content.collapsed
 		})
@@ -50,0 +51,0 @@ }

editor-component.js

@@ -19,2 +19,3 @@ import './viewer-component.scss'
 const QUESTION_NODE = 'ObojoboDraft.Chunks.Question'
+const QUESTION_BANK_NODE = 'ObojoboDraft.Chunks.QuestionBank'
 
@@ -46,4 +47,17 @@ const stopPropagation = event => {
 		this.displayImportQuestionModal = this.displayImportQuestionModal.bind(this)
+
+		this.toggleCollapsed = this.toggleCollapsed.bind(this)
+		this.changeCollapseForAllChildren = this.changeCollapseForAllChildren.bind(this)
+		this.collapseAll = this.collapseAll.bind(this)
+		this.expandAll = this.expandAll.bind(this)
 	}
 
+	toggleCollapsed() {
+		const { editor, element } = this.props
+		const path = ReactEditor.findPath(editor, element)
+		const collapsed = !element.content.collapsed
+
+		Transforms.setNodes(editor, { content: { ...element.content, collapsed } }, { at: path })
+	}
+
 	updateNodeFromState() {
@@ -105,3 +119,3 @@ const content = this.props.element.content
 
-	displaySettings(editor, element) {
+	displaySettings(element) {
 		const radioGroupName = `${element.id}-choose`
@@ -195,4 +209,20 @@ return (
 
+	changeCollapseForAllChildren(collapsed) {
+		const { editor, element } = this.props
+		element.children.forEach(c => {
+			const path = ReactEditor.findPath(editor, c)
+
+			Transforms.setNodes(editor, { content: { ...c.content, collapsed } }, { at: path })
+		})
+	}
+
+	collapseAll() {
+		this.changeCollapseForAllChildren(true)
+	}
+	expandAll() {
+		this.changeCollapseForAllChildren(false)
+	}
+
 	render() {
-		const { editor, element, children } = this.props
+		const { element, children } = this.props
 		const contentDescription = [
@@ -206,15 +236,61 @@ {
 		]
+		const className =
+			'obojobo-draft--chunks--question-bank editor-bank' +
+			` is-${element.content.collapsed ? 'collapsed' : 'not-collapsed'}`
 
+		let numQs = 0
+		let numQBs = 0
+		if (element.children && element.children.length) {
+			element.children.forEach(c => {
+				if (c.type === QUESTION_NODE) numQs++
+				if (c.type === QUESTION_BANK_NODE) numQBs++
+			})
+		}
+
 		return (
 			<Node {...this.props} contentDescription={contentDescription}>
-				<div className={'obojobo-draft--chunks--question-bank editor-bank'}>
-					<Button className="delete-button" onClick={this.remove}>
-						&times;
-					</Button>
-					{this.displaySettings(editor, element, element.content)}
-					{children}
-					<div className="button-bar" contentEditable={false}>
-						<Button onClick={this.addQuestion}>Add Question</Button>
-						<Button onClick={this.addQuestionBank}>Add Question Bank</Button>
+				<div className={className}>
+					{element.content.collapsed ? (
+						''
+					) : (
+						<div className="button-parent child-buttons">
+							<Button onClick={this.collapseAll}>Collapse All</Button>
+							<Button onClick={this.expandAll}>Expand All</Button>
+						</div>
+					)}
+					<div className="button-parent bank-buttons">
+						<Button
+							className="collapse-button"
+							onClick={this.toggleCollapsed}
+							contentEditable={false}
+						>
+							{element.content.collapsed ? '+' : '-'}
+						</Button>
+						<Button className="delete-button" onClick={this.remove} contentEditable={false}>
+							&times;
+						</Button>
 					</div>
+					{element.content.collapsed ? (
+						<div
+							className="flipper clickable-label"
+							contentEditable={false}
+							onClick={this.toggleCollapsed}
+						>
+							<label className="collapsed-summary">
+								{numQs > 0 && `${numQs} Question${numQs > 1 ? 's ' : ' '}`}
+								{numQs > 0 && numQBs > 0 ? 'and ' : ''}
+								{numQBs > 0 && `${numQBs} Question Bank${numQBs > 1 ? 's ' : ' '}`}
+								&nbsp;(Click to Expand)
+							</label>
+						</div>
+					) : (
+						<React.Fragment>
+							{this.displaySettings(element)}
+							{children}
+							<div className="button-bar" contentEditable={false}>
+								<Button onClick={this.addQuestion}>Add Question</Button>
+								<Button onClick={this.addQuestionBank}>Add Question Bank</Button>
+							</div>
+						</React.Fragment>
+					)}
 				</div>
@@ -221,0 +297,0 @@ </Node>

package.json

 {
 	"name": "obojobo-chunks-question-bank",
-	"version": "15.1.1",
+	"version": "16.0.0-alpha.0",
 	"license": "AGPL-3.0-only",
@@ -30,3 +30,3 @@ "description": "QuestionBank chunk for Obojobo",
 	"peerDependencies": {
-		"obojobo-lib-utils": "^15.1.1"
+		"obojobo-lib-utils": "^16.0.0-alpha.0"
 	},
@@ -62,3 +62,3 @@ "jest": {
 	},
-	"gitHead": "9393e30a7c4df61baf134de3dc4591ed77e625e9"
+	"gitHead": "942c44847e996a50dbcd0aa0e0f3351f23d35543"
 }

New alerts

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

67550

increased by5.72%

Lines of code

798

increased by10.07%

Worsened metrics

Number of low quality alerts

2

increased by100%

No dependency changes