lcms-engine 0.2.0 → 0.3.0

data/app/assets/javascripts/lcms/engine/components/materials/MaterialsList.js.jsx

@@ -1,19 +0,0 @@
-// eslint-disable-next-line no-unused-vars
-function MaterialsList(props) {
-  const materials = props.data.map(m => <li key={m.id}><strong>{m.subtitle}</strong> <a href={m.pdf_url}>{m.title}</a></li>);
-  const cssClasses = classNames('o-m-list__wrap',
-    {
-      [`o-material-wrapper--${props.subject}`]: !props.for_group,
-      ['o-material-wrapper--bg-color']: props.color,
-      ['o-material-wrapper--within-group']: props.for_group
-    }
-  );
-  return (
-    <div className={cssClasses}>
-      <h3>Materials</h3>
-      <ul className="o-m-list">
-        {materials}
-      </ul>
-    </div>
-  );
-}

data/app/assets/javascripts/lcms/engine/components/modals/DownloadModal.js.jsx

@@ -1,68 +0,0 @@
-// eslint-disable-next-line no-unused-vars
-class DownloadModal extends React.Component {
-  componentDidMount() {
-    if (this._modal) {
-      new Foundation.Reveal($(this._modal));
-    }
-  }
-
-  downloadsByCategories(downloads) {
-    if (downloads.length < 2) return null;
-    return `<li><strong>${downloads[0]}</strong>
-            ${ _.map(downloads[1], item => this.download(item)).join('\n') }</li>`;
-  }
-
-  download(download) {
-    if (!download) return;
-    const indent = download.indent ? 'u-li-indent' : '';
-    const cls = `ub-icon fa-lg file-${download.icon} ${indent}`;
-    const preview = (download.icon === 'pdf') ?
-      `<span>
-        <a href=${download.preview_url} data-turbolinks="false" target="_blank">
-          <i class="ub-icon ub-eye" aria-hidden="true"></i>
-        </a>
-      </span>` : '';
-    return `<li>
-              ${preview}
-              <i class="${cls}"></i>
-              <span>
-                <a href=${download.url} data-turbolinks="false" class="resource-attachment">${download.title}</a>
-              </span>
-            </li>`;
-  }
-
-  modalContentData() {
-    const resource = this.props.resource;
-    return `<div class="o-download-modal__title">
-              <div class="u-margin-bottom--xs">Download ${_.capitalize(resource.type.name)}</div>
-              <div class="u-hr-small"></div>
-            </div>
-            <div class="o-download-modal__content">
-              <ul class="o-resource__list o-resource__list--icons o-resource__list--${resource.subject}-base">
-                ${ _.map(resource.downloads, item => this.downloadsByCategories(item)).join('\n') }
-              </ul>
-              <div class="o-resource__cc u-margin-top--base u-margin-bottom--zero u-txt--download-copyright">
-                ${resource.copyright}
-              </div>
-            </div>
-            <button class="close-button ub-close-button" data-close aria-label="Close modal" type="button">
-              <span aria-hidden="true"><i class="ub-close"></i></span>
-            </button>`;
-  }
-
-  modalContent() {
-    return { __html: this.modalContentData() };
-  }
-
-  render() {
-    const resource = this.props.resource;
-    const modalId = `downloads-modal-${resource.id}`;
-
-    return (resource.downloads && resource.downloads.length > 0) ?
-      (
-        <div className="o-download-modal" ref={(ref) => this._modal = ref} id={modalId}
-          dangerouslySetInnerHTML={ this.modalContent() }>
-        </div>
-      ) : <div className="hide"></div>;
-  }
-}

data/app/assets/javascripts/lcms/engine/components/related-instruction/RelatedInstruction.js.jsx

@@ -1,72 +0,0 @@
-class RelatedInstruction extends React.Component {
-  constructor(props) {
-    super(props);
-
-    this.state = {
-      id: props.id,
-      resourceType: props.resource_type || 'Resource',
-      instructions: props.instructions,
-      expandedInstructions: [],
-      expanded: false,
-      hasMore: props.has_more,
-    };
-  }
-
-  fetch() {
-    return $.getJSON(Routes.lcms_engine_related_instruction_path(this.state.id, {expanded: !this.state.expanded})).then(response => {
-      let sum = 0;
-      let sliceIdx = _.findIndex(response.instructions,
-        item => { sum += item.instruction_type === 'instruction' ? 2 : 1;
-          return sum > 4; }
-      );
-      if (sliceIdx == -1) sliceIdx = response.instructions.length;
-      const newState = { instructions:  _.take(response.instructions, sliceIdx),
-        expandedInstructions:  _.slice(response.instructions, sliceIdx),
-        hasMore: false,
-        expanded: true
-      };
-      this.setState(_.assign({}, this.state, newState));
-    })
-  }
-
-  handleBtnClick(evt) {
-    this.fetch();
-  }
-
-  render () {
-    const allInstructionsPath = Routes.lcms_engine_enhance_instruction_index_path();
-    const instructions = this.state.instructions.map(
-        item => <InstructionCard key={item.id} item={item} />
-    );
-    const expandedInstructions = this.state.expandedInstructions.map(
-        item => <InstructionCard key={item.id} item={item} />
-    );
-    const actions = (this.state.instructions.length == 0) ?
-      <p className="o-related-instruction__empty u-txt--teaser">
-        There are no related guides or videos. To see all our guides, please visit the Enhance Instruction section <a href={allInstructionsPath}>here</a>.
-      </p> :
-      <ul className="o-related-instruction__actions">
-        { this.state.hasMore ?
-          <li><a className="o-ub-btn o-ub-btn--yellow u-margin-bottom--zero" onClick={this.handleBtnClick.bind(this)}>More Instruction</a></li>
-          : false
-        }
-        <li><a className="o-ub-btn o-ub-btn--2bordered-gray u-margin-bottom--zero" href={allInstructionsPath}>See All Guides</a></li>
-      </ul>;
-
-    return (
-      <div className="o-related-instruction o-page__module u-pd-content--xlarge">
-        <h2 className="o-related-instruction__title">Related Guides and Multimedia</h2>
-        <p className="o-related-instruction__teaser u-txt--teaser">
-          Our professional learning resources include teaching guides, videos, and podcasts that build educators' knowledge of content related to the standards and their application in the classroom.
-        </p>
-        <div className="o-related-instruction__list o-page__wrap--row-nest u-padding-top--gutter">
-          {instructions}
-        </div>
-        <div className="o-related-instruction__list">
-          {expandedInstructions}
-        </div>
-        {actions}
-      </div>
-     );
-   }
-}

data/app/assets/javascripts/lcms/engine/components/search-dropdown/SearchDropdown.js.jsx

@@ -1,159 +0,0 @@
-class SearchDropdown extends React.Component {
-  constructor(props) {
-    super(props);
-
-    this.perPage = 5;
-
-    this.state = this.emptyState();
-  }
-
-  emptyState() {
-    return {
-      resources: [],
-      num_items: 0,
-      total_hits: 0,
-      visible: false,
-      selected: null,
-      isSearching: false
-    };
-  }
-
-  componentDidMount() {
-    this.props.searchBus.on('focus', this.onFocus, this);
-    this.props.searchBus.on('keyup', this.onKeyUp, this);
-
-    this.boundOnClickDocument = this.onClickDocument.bind(this);
-    document.addEventListener('click', this.boundOnClickDocument);
-  }
-
-  componentWillUnmount() {
-    this.props.searchBus.off('focus', this.onFocus, this);
-    this.props.searchBus.off('keyup', this.onKeyUp, this);
-    document.removeEventListener('click', this.boundOnClickDocument);
-  }
-
-  componentWillReceiveProps(nextProps) {
-    const searchTerm = nextProps.filterbar.search_term;
-    const searchHasChanged = searchTerm !== this.props.filterbar.search_term;
-    const searchExists = _.isString(searchTerm);
-    const searchIsEmpty = !searchExists || searchTerm.trim() === '';
-
-    if (searchHasChanged && (!searchExists || searchIsEmpty)) {
-      let newState = this.emptyState();
-      newState.visible = true;
-      this.setState(newState);
-    } else {
-      // Search, grades or subjects changed
-      const hasChanged = !this.naiveCompare(
-        nextProps.filterbar,
-        this.props.filterbar
-      );
-      if (!searchIsEmpty && hasChanged) {
-        this.fetch(nextProps);
-      }
-    }
-  }
-
-  onClickDocument(e) {
-    const container = this.props.searchContainer();
-    if (!container) return;
-
-    if (!container.contains(e.target)) {
-      this.setInvisible();
-    }
-  }
-
-  onFocus() {
-    this.setVisible();
-  }
-
-  onKeyUp(e) {
-    const resLength = this.state.resources.length;
-
-    if (resLength == 0) {
-      return;
-    }
-
-    let selected = this.state.selected;
-
-    const keyCode = e.keyCode;
-
-    if (keyCode === 38) {
-      // Up
-      if (selected === null) {
-        selected = 0;
-      }
-      selected = selected > 0 ? selected-1 : resLength-1;
-    } else if (keyCode == 40) {
-      // Down
-      if (selected !== null) {
-        selected = (selected != resLength-1) ? selected+1 : 0;
-      } else {
-        selected = 0;
-      }
-    } else if (keyCode == 13) {
-      Turbolinks.visit(this.state.resources[selected].path);
-      return;
-    }
-
-    this.setState({ ...this.state, selected: selected });
-  }
-
-  setVisible() {
-    this.setState({ ...this.state, visible: true });
-  }
-
-  setInvisible() {
-    this.setState({ ...this.state, visible: false });
-  }
-
-  buildStateFromResponse(response) {
-    const newState = {
-      ...this.emptyState(),
-      visible: true,
-      resources: response.results,
-      num_items: response.pagination.num_items,
-      total_hits: response.pagination.total_hits
-    };
-
-    return newState;
-  }
-
-  naiveCompare(a, b) {
-    return JSON.stringify(a) === JSON.stringify(b);
-  }
-
-  fetch(props = this.props) {
-    this.setState({ ...this.state, isSearching: true });
-
-    const url = Routes.lcms_engine_search_path({
-      per_page: this.perPage,
-      search_term: props.filterbar.search_term,
-      grades: props.filterbar.grades,
-      subjects: props.filterbar.subjects
-    });
-
-    return $.getJSON(url).then(response => {
-      if (window.ga) {
-        ga('send', 'pageview', url);
-      }
-      this.setState(this.buildStateFromResponse(response));
-    });
-  }
-
-  render() {
-    const results = this.state.visible ?
-      <div className='o-search-dropdown'>
-        <SearchDropdownResults
-          resources={this.state.resources}
-          num_items={this.state.num_items}
-          total_hits={this.state.total_hits}
-          search_term={this.props.filterbar.search_term}
-          isSearching={this.state.isSearching}
-          selected={this.state.selected} />
-      </div>
-      : <div className="hide"></div>;
-
-    return results;
-  }
-}

data/app/assets/javascripts/lcms/engine/components/search-dropdown/SearchDropdownResult.js.jsx

@@ -1,12 +0,0 @@
-function SearchDropdownResult(props) {
-  const classes = classNames({
-    'o-search-dropdown-result': true,
-    'o-search-dropdown-result__selected': props.selected
-  });
-
-  return (
-    <a className={classes} href={props.resource.path}>
-      <strong>{props.resource.type_name}:</strong> {props.resource.title}
-    </a>
-  );
-}

data/app/assets/javascripts/lcms/engine/components/search-dropdown/SearchDropdownResults.js.jsx

@@ -1,36 +0,0 @@
-// eslint-disable-next-line no-unused-vars
-function SearchDropdownResults(props) {
-  const resultCls = 'o-search-dropdown-result';
-  const resultMoreCls = 'o-search-dropdown-result o-search-dropdown-result--more';
-
-  if (props.resources.length === 0) {
-    if (props.isSearching) {
-      return <div className={resultCls}>Searching...</div>;
-    } else if (props.search_term && props.search_term.length > 0) {
-      return <div className={resultCls}>Nothing found.</div>;
-    }
-    return <div className={resultCls}>Enter terms to start searching.</div>;
-  }
-
-  const results = props.resources.map((resource, idx) => {
-    const key = `${resource.curriculum_id}_${resource.id}`;
-    return <SearchDropdownResult
-      key={key}
-      resource={resource}
-      selected={props.selected === idx} />;
-  });
-
-  const showMore = (
-    <a className={resultMoreCls}
-      href={Routes.lcms_engine_search_path({ search_term: props.search_term })}>
-      Show more results...
-    </a>
-  );
-
-  return (
-    <div>
-      {results}
-      {showMore}
-    </div>
-  );
-}

data/app/assets/javascripts/lcms/engine/components/search/SearchPage.js.jsx

@@ -1,44 +0,0 @@
-//= require ./searchPageWrapper.js
-
-function SearchPage(props) {
-  const searchResults = (props.data.length === 0) ?
-    <SearchResultsEmpty searchTerm={props.filterbar.search_term} /> :
-
-    <SearchResults
-      resources={props.data}
-      current_page={props.current_page}
-      per_page={props.per_page}
-      total_hits={props.total_hits} />;
-
-  return (
-    <div>
-      <div className="u-bg--base-gradient">
-        <div className="o-page">
-          <div className="o-page__module">
-            <div className="o-filterbar-title">
-              <h2>Search results</h2>
-              <div className="o-filterbar-title__subheader">
-                Filter by subject or grade, or search to reveal assets.
-              </div>
-            </div>
-            <FilterbarResponsive
-              onUpdate={props.handleFilterBar}
-              searchLabel='Search the site'
-              withFacets={true}
-              withSearch={true}
-              {...props.filterbar} />
-          </div>
-        </div>
-      </div>
-      <div className="o-page o-page--margin-bottom">
-        <div className="o-page__module">
-          {searchResults}
-          {props.pagination}
-        </div>
-      </div>
-    </div>
-  );
-}
-
-// eslint-disable-next-line no-unused-vars,no-undef
-const SearchPageComponent = searchPageWrapper(SearchPage);

data/app/assets/javascripts/lcms/engine/components/search/SearchResult.js.jsx

@@ -1,22 +0,0 @@
-function SearchResult(props) {
-  const breadcrumb = props.resource.breadcrumbs ?
-          <span className='o-search-results__subheader'><span className='s-bullet'></span>{props.resource.breadcrumbs}</span>
-          : null;
-  const colorCode = colorCodeCss(props.resource.subject, props.resource.grade);
-  return (
-    <li className='o-search-results__item'>
-      <a href={props.resource.path}>
-        <div className={`cs-txt--${colorCode}`}>
-          <span className='o-search-results__header'>{props.resource.type_name}</span>
-          {breadcrumb}
-        </div>
-        <div className='o-search-results__title'>
-          {props.resource.title}
-        </div>
-        <div className='o-search-results__teaser'>
-          {props.resource.teaser}
-        </div>
-      </a>
-    </li>
-  );
-}

data/app/assets/javascripts/lcms/engine/components/search/SearchResults.js.jsx

@@ -1,17 +0,0 @@
-function SearchResults(props) {
-  return (
-    <div className='o-search-results'>
-      <SearchResultsHeader
-        current_page={props.current_page}
-        per_page={props.per_page}
-        num_items={props.resources.length}
-        total_hits={props.total_hits} />
-
-      <ul className='o-search-results__list'>
-        {props.resources.map((resource) => {
-          return <SearchResult key={resource.id} resource={resource} />
-        })}
-      </ul>
-    </div>
-  );
-}