Merge pull request #1 from nadimtuhin/develop

improvements on menu, link and minor bugfixes

app/assets.php

@@ -70,6 +70,7 @@ function onepager_enqueue_scripts()
     $asset->style('tx-colorpicker', asset("assets/css/bootstrap-colorpicker.css"));
     $asset->script('tx-iconselector', asset('assets/js/icon-selector-bootstrap.js'), ['jquery']);
     $asset->script('tx-colorpicker', asset('assets/js/bootstrap-colorpicker.js'), ['jquery']);
+    $asset->script('tx-iconselector', asset('assets/js/bootstrap-select.js'), ['jquery']);
     $asset->script('tx-bootstrap-switch', asset('assets/js/bootstrap-switch.js'), ['jquery']);
     $asset->script('tx-toastr', asset('assets/js/toastr.js'), ['jquery']);
 
@@ -99,6 +100,7 @@ function enqueueOnepagerAdminAssets()
 
   $asset->script('tx-bootstrap', asset('assets/js/bootstrap.js'), ['jquery']);
 
+  $asset->script('tx-iconselector', asset('assets/js/bootstrap-select.js'), ['jquery']);
   $asset->script('tx-iconselector', asset('assets/js/icon-selector-bootstrap.min.js'), ['jquery']);
   $asset->script('tx-colorpicker', asset('assets/js/bootstrap-colorpicker.js'), ['jquery']);
   $asset->script('tx-toastr', asset('assets/js/toastr.js'), ['jquery']);

app/bootstrap.php

@@ -86,8 +86,6 @@ function tx_set_block_groups_order() {
     "footers",
     "theme",
   ));
-
-  //  onepager()->blockManager()->setIgnoredGroups(['navbars', 'blogs']);
 }
 
 /** FIXME: NOT USED ANYWHERE YET **/

bower.json

@@ -14,7 +14,8 @@
     "bootstrap": "~3.3.5",
     "magnific-popup": "~1.0.0",
     "bootstrap-switch": "~3.3.2",
-    "fullpage.js": "~2.6.7"
+    "fullpage.js": "~2.6.7",
+    "bootstrap-select": "~1.7.3"
   },
   "devDependencies": {}
 }

engine/App/App.jsx

@@ -6,6 +6,8 @@ const SectionViewCollection = require('./components/section-view/SectionViewColl
 const _                     = require('underscore');
 const cx = require('classnames');
 
+require("../../assets/css/bootstrap-select.css");
+
 let App = React.createClass({
   getInitialState() {
     return AppStore.getAll();
@@ -16,6 +18,8 @@ let App = React.createClass({
   },
 
   componentDidUpdate: function(prevProps, prevState) {
+    this._bindPlugins();
+
     if(this.state.collapseSidebar !== prevState.collapseSidebar){
       this._setSidebarCollapseClass(this.state.collapseSidebar);
     }
@@ -25,14 +29,25 @@ let App = React.createClass({
     this._setSidebarCollapseClass(this.state.collapseSidebar);
     this._unsavedAlert();
     this._addBuildClassToBody();
+    this._bindPlugins();
 
     AppStore.addChangeListener(this._onChange);
   },
 
   componentWillUnmount() {
+    this._unbindPlugins();
+
     AppStore.removeChangeListener(this._onChange);
   },
 
+  _bindPlugins(){
+    jQuery('select.form-control').selectpicker();
+    jQuery('[data-toggle="tooltip"]').tooltip()
+  },
+  _unbindPlugins(){
+    jQuery('select.form-control').unbind();
+    jQuery('[data-toggle="tooltip"]').unbind()
+  },
   _unsavedAlert(){
     jQuery(window).on('beforeunload', ()=> {
       if (this.state.isDirty) {

engine/App/AppStore.js

@@ -1,28 +1,28 @@
 const $ = jQuery; //jshint ignore: line
-const _                  = require('underscore');
-const assign             = require('object-assign');
-const AppDispatcher      = require('./AppDispatcher.js');
-const Constants          = require('./AppConstants.js');
+const _ = require('underscore');
+const assign = require('object-assign');
+const AppDispatcher = require('./AppDispatcher.js');
+const Constants = require('./AppConstants.js');
 const SectionTransformer = require('../shared/lib/SectionTransformer.js');
-const ShouldSync         = require('../shared/lib/ShouldSync.js');
-const Activity           = require('../shared/lib/Activity.js');
-const ODataStore         = require('../shared/lib/ODataStore.js');
-const BaseStore          = require('./BaseStore.js');
-const SyncService        = require('./AppSyncService.js');
+const ShouldSync = require('../shared/lib/ShouldSync.js');
+const Activity = require('../shared/lib/Activity.js');
+const ODataStore = require('../shared/lib/ODataStore.js');
+const BaseStore = require('./BaseStore.js');
+const SyncService = require('./AppSyncService.js');
 
 require('../shared/lib/_mixins.js');
 
 
 // data storage
-let _collapseSidebar    = false;
-let _blocks             = ODataStore.blocks;
-let _sections           = SectionTransformer.misitifySections(ODataStore.sections, ODataStore.blocks);
-let _blockState         = {open: false};
-let _menuState          = {id: null, index: null, title: null};
-let _sidebarTabState    = {active: 'op-sections'};
+let _collapseSidebar = false;
+let _blocks = ODataStore.blocks;
+let _sections = SectionTransformer.misitifySections(ODataStore.sections, ODataStore.blocks);
+let _blockState = {open: false};
+let _menuState = {id: null, index: null, title: null};
+let _sidebarTabState = {active: 'op-sections'};
 let _activeSectionIndex = null;
-let _savedSections      = _prepareForDirtyCheck(_sections);
-let AUTO_SAVE_DELAY     = 500;
+let _savedSections = _prepareForDirtyCheck(_sections);
+let AUTO_SAVE_DELAY = 500;
 
 let shouldLiveSectionsSync = ShouldSync(_sections, 'sections');
 let shouldSectionsSync = ShouldSync(_sections, 'sections');
@@ -31,11 +31,11 @@ let inactive = Activity(AUTO_SAVE_DELAY);
 let syncService = SyncService(ODataStore.pageId, inactive, shouldSectionsSync);
 let liveService = SyncService(null, inactive, shouldLiveSectionsSync);
 
-function collapseSidebar(collapse){
+function collapseSidebar(collapse) {
   _collapseSidebar = collapse;
 }
 
-function _prepareForDirtyCheck(section){
+function _prepareForDirtyCheck(section) {
   return JSON.stringify(SectionTransformer.simplifySections(section));
 }
 
@@ -93,8 +93,8 @@ function removeSection(index) {
 }
 
 
-function updateTitle(index, previousTitle, newTitle){
-  let section   = _.copy(_sections[index]);
+function updateTitle(index, previousTitle, newTitle) {
+  let section = _.copy(_sections[index]);
   section.title = newTitle;
 
   if ('untitled section' === previousTitle) {
@@ -104,21 +104,23 @@ function updateTitle(index, previousTitle, newTitle){
   updateSection(index, section);
 }
 
-function getUniqueSectionId (sections, index, title) {
+function getUniqueSectionId(sections, index, title) {
   let id = _.dasherize(title); //make es4 compatible
 
-  while (! _.isUniquePropInArray(sections, index, id, 'id')) {
+  while (!_.isUniquePropInArray(sections, index, 'id', id)) {
     id = id + 1;
   }
 
+  console.log(id);
+
   return id;
 }
 
 function sectionSynced(index, res) {
   let section;
 
   _sections[index] = _.copy(_sections[index]);
-  section          = _sections[index];
+  section = _sections[index];
 
   section.content = SectionTransformer.getLiveModeHTML(section.livemode, res.content);
   SectionTransformer.appendStyleToDOM(section.id, res.style);
@@ -130,14 +132,14 @@ let AppStore = assign({}, BaseStore, {
   // public methods used by Controller-View to operate on data
   getAll() {
     return {
-      blocks            : _blocks,
-      isDirty           : this.isDirty(),
-      sections          : _sections,
-      menuState         : _menuState,
-      collapseSidebar   : _collapseSidebar,
-      sidebarTabState   : _sidebarTabState,
-      blockState        : _blockState,
-      activeSection     : _sections[_activeSectionIndex],
+      blocks: _blocks,
+      isDirty: this.isDirty(),
+      sections: _sections,
+      menuState: _menuState,
+      collapseSidebar: _collapseSidebar,
+      sidebarTabState: _sidebarTabState,
+      blockState: _blockState,
+      activeSection: _sections[_activeSectionIndex],
       activeSectionIndex: _activeSectionIndex
     };
   },
@@ -248,7 +250,7 @@ let AppStore = assign({}, BaseStore, {
 
       case actions.RELOAD_BLOCKS:
         //FIXME: its not a place for business logic
-        syncService.reloadBlocks().then((blocks)=>{
+        syncService.reloadBlocks().then((blocks)=> {
           _blocks = blocks;
           AppStore.emitChange();
         });

engine/App/components/section-list/Section.jsx

@@ -72,12 +72,15 @@ let Section = React.createClass({
       <div className={classes}>
         <SectionTitle title={title} index={index} >
           <h3 onClick={this.handleScrollIntoView}>
-            <span className="section-handle"><span className="fa fa-ellipsis-v"></span><span className="fa fa-ellipsis-v"></span></span> {title}
+            <span className="section-handle">
+              <span className="fa fa-ellipsis-v"></span><span className="fa fa-ellipsis-v"></span>
+            </span>
+            {title}
           </h3>
         </SectionTitle>
         <div className="action-btns">
           <span className="fa fa-edit" onClick={this.handleEditSection} data-toggle="tooltip" title="Edit"></span>
-          <span className="fa fa-link" onClick={this.handleAddToMenu} data-toggle="tooltip" title="Link Menu"></span>
+          {/*<span className="fa fa-link" onClick={this.handleAddToMenu} data-toggle="tooltip" title="Link Menu"></span>*/}
           <span className="fa fa-copy" onClick={this.handleDuplicateSection} data-toggle="tooltip" title="Copy"></span>
           <span className="fa fa-trash-o" onClick={this.handleRemoveSection} data-toggle="tooltip" title="Delete"></span>
         </div>

engine/App/components/sidebar/AddToMenu.jsx

@@ -1,50 +1,59 @@
-// const swal            = require('sweetalert');
 const $ = jQuery; //jshint ignore: line
-const PureComponent = require('react/lib/ReactComponentWithPureRenderMixin');
-const React         = require("react");
-const _             = require("underscore");
-const Button        = require('react-bootstrap/lib/Button');
-const Input         = require("../../../shared/components/form/Input.jsx");
-const ODataStore    = require('../../../shared/lib/ODataStore.js');
-const notify        = require('../../../shared/lib/notify.js');
-const AppStore      = require('../../AppStore.js');
-const AppActions    = require('../../AppActions.js');
-
+const PureComponent = require("react/lib/ReactComponentWithPureRenderMixin");
+const React = require("react");
+const _ = require("underscore");
+const Button = require("react-bootstrap/lib/Button");
+const Input = require("../../../shared/components/form/Input.jsx");
+const ODataStore = require("../../../shared/lib/ODataStore.js");
+const notify = require("../../../shared/lib/notify.js");
+const AppStore = require("../../AppStore.js");
+const AppActions = require("../../AppActions.js");
 
 
 let AddToMenu = React.createClass({
   mixins: [PureComponent],
+  propTypes: {
+    menu: React.PropTypes.number,
+    index: React.PropTypes.number,
+    id: React.PropTypes.string,
+    title: React.PropTypes.string
+  },
+
 
   getInitialState(){
     return {
       isValid: false
     };
   },
 
+  componentDidUpdate(prevProps, prevState) {
+    this.isFormValid();
+  },
+
   isFormValid(){
-    let itemId   = this.refs.itemId.getValue();
+    let itemId = this.refs.itemId.getValue();
     let sections = _.map(AppStore.getAll().sections, function (section) {
       return section.id;
     });
 
     sections.splice(this.props.index, 1);
-
-    let isValid = sections.indexOf(itemId) === -1 && this.refs.menuId.getValue();
+    let isValid = sections.indexOf(itemId) === -1 && this.props.menu ? true : false;
 
     this.setState({isValid});
   },
 
   handleSubmit(){
     let sectionIndex = this.props.index;
-    let data         = {
-      action   : 'onepager_menu_add',
-      menuId   : this.refs.menuId.getValue(), //jshint ignore:line
-      itemId   : this.refs.itemId.getValue(), //jshint ignore:line
-      itemTitle: this.refs.itemTitle.getValue() //jshint ignore:line
+    let data = {
+      action: "onepager_menu_add",
+      menuId: this.props.menu,
+      itemId: this.refs.itemId.getValue(),
+      itemTitle: this.refs.itemTitle.getValue()
     };
 
     let section = _.copy(AppStore.getAll().sections[sectionIndex]);
-    section.id  = data.itemId;
+    section.id = data.itemId;
+    section.title = data.itemTitle;
     section.key = data.itemId;
 
 
@@ -61,53 +70,39 @@ let AddToMenu = React.createClass({
   },
 
   render(){
-    let section = this.props.section;
-    let title   = section.title;
-    let id      = section.id;
+    let {title, id} = this.props;
 
     let fields = [
       {
-        type    : "menu",
-        id      : "menu",
-        value   : "",
-        label   : "Menu Position",
-        ref     : "menuId",
-        onChange: this.isFormValid
-      },
-      {
-        type       : "text",
-        id         : "name",
-        value      : title,
-        label      : "Menu name",
-        ref        : "itemTitle",
+        type: "text",
+        id: "name",
+        value: title,
+        label: "Menu name",
+        ref: "itemTitle",
         placeholder: "Item name",
-        onChange   : this.isFormValid
+        onChange: this.isFormValid
       },
       {
-        type       : "text",
-        id         : "id",
-        value      : id,
-        label      : "Menu ID",
-        ref        : "itemId",
+        type: "text",
+        id: "id",
+        value: id,
+        label: "Menu ID",
+        ref: "itemId",
         addonBefore: "#",
         placeholder: "Item Id",
-        onChange   : this.isFormValid
+        onChange: this.isFormValid
       }
     ];
 
     return (
       <div>
-        <Button bsStyle='primary' className="btn--back" onClick={this.props.closeMenuScreen}>
-          <span className="fa fa-arrow-left"></span> Back
-        </Button>
-
         {
           fields.map(field=> {
             return <Input key={field.value+field.id} ref={field.ref} options={field} onChange={field.onChange}/>;
           })
         }
 
-        <Button bsStyle='primary' disabled={!this.state.isValid} onClick={this.handleSubmit}>Add to Menu</Button>
+        <Button bsStyle="primary" disabled={!this.state.isValid} onClick={this.handleSubmit}>Add to Menu</Button>
       </div>
     );
   }