lcms-engine 0.1.0

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

@@ -0,0 +1,19 @@
+// 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

@@ -0,0 +1,68 @@
+// 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

@@ -0,0 +1,72 @@
+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

@@ -0,0 +1,159 @@
+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

@@ -0,0 +1,12 @@
+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

@@ -0,0 +1,36 @@
+// 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

@@ -0,0 +1,44 @@
+//= 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

@@ -0,0 +1,22 @@
+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

@@ -0,0 +1,17 @@
+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>
+  );
+}