Changeset 7219
- Timestamp:
- 10/21/18 18:20:13 (6 years ago)
- File:
-
- 1 edited
Legend:
- Unmodified
- Added
- Removed
-
SRUAggregator/trunk/src/main/resources/assets/js/components/corpusview.jsx
r7148 r7219 13 13 languageMap: PT.object.isRequired, 14 14 }, 15 16 getInitialState() { 17 return { 18 viewSelected: false, // only show the selected collections 19 //showDisabled: false, // dont hide items with {visible = false} // implemented, but out commented feature... 20 } 21 }, 15 22 16 23 toggleSelection: function (corpus, e) { … … 20 27 this.stop(e); 21 28 }, 22 29 30 toggleViewSelected(evt) { 31 this.setState( (st)=> ({viewSelected:!st.viewSelected}) ); 32 }, 33 toggleShowDisabled(evt) { 34 this.setState( (st)=> ({showDisabled:!st.showDisabled}) ); 35 }, 36 37 toggleDescExpansion: function (corpus) { 38 corpus.descExpanded = !corpus.descExpanded; 39 this.props.corpora.update(); 40 }, 41 23 42 toggleExpansion: function (corpus) { 24 43 corpus.expanded = !corpus.expanded; … … 27 46 28 47 selectAll: function(value) { 29 this.props.corpora.recurse(function(c) { c.selected = value; }); 48 // select all _visible_ 49 this.props.corpora.recurse(function(c) { c.visible ? c.selected = value : false }); 30 50 this.props.corpora.update(); 31 51 }, … … 128 148 return false; 129 149 } 130 return <div className="expansion-handle" style={{}}>150 return <div className="expansion-handle" onClick={this.toggleExpansion.bind(this, corpus)}> 131 151 <a> 132 152 {corpus.expanded ? … … 145 165 .join(", "); 146 166 }, 147 148 renderFilteredMessage: function() { 167 168 shouldShowItem(level, corpus) { 169 if (this.state.viewSelected && !corpus.selected) { 170 return false; 171 } 172 if (!this.state.showDisabled && !corpus.visible) { 173 return false; 174 } 175 // normal search filter. 176 if (level === 0 && corpus.priority <= 0) { 177 return false; 178 } 179 180 return true; 181 }, 182 183 renderFilteredMessage() { 149 184 var total = 0; 150 185 var visible = 0; 151 this.props.corpora.recurse( function(corpus){152 if (corpus.visible ) {186 this.props.corpora.recurse((corpus) => { 187 if (corpus.visible || this.state.showDisabled) { 153 188 total ++; 154 if ( corpus.priority > 0) {189 if (this.shouldShowItem(0, corpus)) { 155 190 visible++; 156 191 } … … 160 195 return false; 161 196 } 197 if (visible === 0) { 198 return false; // we do have an "empty" message anyway 199 } 162 200 return <div> Showing {visible} out of {total} (sub)collections. </div>; 163 201 }, 164 202 165 203 renderCorpus: function(level, minmaxp, corpus) { 166 if (! corpus.visible || corpus.priority <= 0) {167 return false;204 if (!this.shouldShowItem(level, corpus)) { 205 return; 168 206 } 169 207 … … 174 212 var color = minmaxp[0] === minmaxp[1] ? 'transparent' : 'hsl('+hue+', 50%, 50%)'; 175 213 var priorityStyle = {paddingBottom: 4, paddingLeft: 2, borderBottom: '3px solid '+color }; 176 var expansive = corpus. expanded ? {overflow:'hidden'}214 var expansive = corpus.descExpanded ? {overflow:'hidden'} 177 215 : {whiteSpace:'nowrap', overflow:'hidden', textOverflow: 'ellipsis'}; 178 216 return <div className={corpusContainerClass} key={corpus.id}> 179 <div className="row corpus" onClick={this.toggle Expansion.bind(this, corpus)}>217 <div className="row corpus" onClick={this.toggleDescExpansion.bind(this, corpus)}> 180 218 <div className="col-sm-1 vcenter"> 181 219 <div className="inline" style={priorityStyle} onClick={this.toggleSelection.bind(this,corpus)}> … … 211 249 </div>; 212 250 }, 213 214 render: function() { 215 var minmaxp = this.getMinMaxPriority(); 251 252 renderCorpList() { 253 var minmaxp = this.getMinMaxPriority(); 254 255 const corpListRender = []; 256 257 // this is so we get a non-undefined items .length in corpListRender. 258 this.props.corpora.corpora.forEach( c => { 259 var rend = this.renderCorpus(0, minmaxp, c); 260 if (rend) corpListRender.push(rend); 261 }); 262 263 return <div className="corpusview-corpora"> 264 { corpListRender.length > 0 ? corpListRender : 265 <h3 className="aligncenter">{ 266 this.state.viewSelected ? "No collections selected yet!" : "No collections found." 267 }</h3> 268 } 269 </div> 270 271 }, 272 273 render() { 274 var selectedCount = 0; 275 //var disabledCount = 0; 276 this.props.corpora.recurse( c => { 277 if (c.selected && c.visible) selectedCount++; 278 //if (c.selected) selectedCount++; 279 //if (!c.visible) disabledCount++; 280 }); 281 282 216 283 return <div style={{margin: "0 30px"}}> 217 284 <div className="row"> 285 {/* 218 286 <div className="float-left inline"> 219 <h3 style={{marginTop: 10}}>287 <h3 style={{marginTop: 0}}> 220 288 {this.props.corpora.getSelectedMessage()} 221 289 </h3> 222 290 </div> 291 */} 292 293 <div className="float-left inline corpusview-filter-buttons"> 294 <div className="btn-group btn-group-toggle" > 295 296 <label className={"btn btn-light btn " + (this.state.viewSelected ? 'active':'inactive')} onClick={this.toggleViewSelected} title="View selected collections"> 297 <span className={this.state.viewSelected ? "glyphicon glyphicon-check" : "glyphicon glyphicon-unchecked"} /> View selected ({selectedCount}) 298 </label> 299 {/* 300 <label className={"btn btn-light btn-sm " + (this.state.showDisabled ? 'active':'inactive')} onClick={this.toggleShowDisabled} label="Toggle showing of collections disabled in this search mode"> 301 <span className={this.state.showDisabled ? "glyphicon glyphicon-check" : "glyphicon glyphicon-unchecked"} /> Show disabled ({disabledCount}) 302 </label> 303 */} 304 </div> 305 </div> 306 223 307 <div className="float-right inline"> 224 308 <button className="btn btn-default" style={{ marginRight: 10 }} onClick={this.selectAll.bind(this,true)}> … … 234 318 </div> 235 319 </div> 236 237 {this.props.corpora.corpora.map(this.renderCorpus.bind(this, 0, minmaxp))} 320 {this.renderCorpList()} 238 321 </div>; 239 322 }
Note: See TracChangeset
for help on using the changeset viewer.