// ========================================================================== // Project: Greenhouse - appPage // Copyright: ©2010 Mike Ball // ========================================================================== /*globals Greenhouse */ sc_require('views/list_item'); sc_require('views/web'); sc_require('views/tear_off_picker'); sc_require('mixins/drop_down'); sc_require('views/simple_button'); // This page has the main UI layout Greenhouse.appPage = SC.Page.design({

mainView: SC.View.design({
  layout: { top: -1, bottom: 0, left: 0, right: 0 },
  childViews: 'mainContainer toolBar'.w(),
  defaultResponder: "Greenhouse",

  mainContainer: SC.ContainerView.design({
    layout: { left: 0, top: 46, right: 0, bottom: 0 },
    nowShowing: 'pageDesigner' //Hardcoded till we add another mode like bespin
  }),

  toolBar: SC.ToolbarView.design({
    layout: { left: 0, right: 0, top: 0, height: 46 },
    anchorLocation: SC.ANCHOR_TOP,
    classNames: ['toolbar'],

    childViews: 'logo project save run title library inspector action '.w(),

    logo: SC.View.design({
      layout: {left: 20, width: 131, height: 32, centerY: -1},
      classNames: ['greenhouse-logo-s']
    }),

    project: SC.ButtonView.design({
      toolTip: "_Project".loc(),
      classNames: ['dark'],
      layout: {left: 171, width: 47, height: 24, centerY: -1},
      titleMinWidth: 37,
      hasIcon: YES,
      icon: 'projects',
      action: 'openProjectPicker'
    }),

    save: SC.ButtonView.design({
      toolTip: "_Save".loc(),
      classNames: ['dark'],
      layout: {left: 251, centerY: -1, width: 47, height: 24},
      titleMinWidth: 37,
      hasIcon: YES,
      icon: 'save',
      action: 'save'
    }),

    run: SC.ButtonView.design({
      toolTip: "_Run".loc(),
      classNames: ['dark'],
      layout: {left: 304, centerY: -1, width: 47, height: 24},
      titleMinWidth: 37,
      hasIcon: YES,
      icon: 'run',
      action: 'run'
    }),

    title: SC.LabelView.design({
      layout: {centerX: 75, centerY: -2, height: 24, width: 300 },
      classNames: ['title'],
      textAlign: SC.ALIGN_CENTER,
      valueBinding: SC.Binding.oneWay('Greenhouse.fileController.name')
    }),

    library: SC.ButtonView.design({
      toolTip: "_Library".loc(),
      classNames: ['dark'],
      layout: {right: 153, width: 47, height: 24, centerY: -1},
      titleMinWidth: 37,
      hasIcon: YES,
      icon: 'library',
      action: 'openLibrary'
    }),

    inspector: SC.ButtonView.design({
      toolTip: "_Inspector".loc(),
      classNames: ['dark'],
      layout: {right: 100, width: 47, height: 24, centerY: -1},
      titleMinWidth: 37,
      hasIcon: YES,
      icon: 'inspector',
      action: 'openInspector'
    }),

    action: SC.ButtonView.design(Greenhouse.DropDown, {
      classNames: ['dark'],
      layout: {right: 20, centerY: -1, width: 47, height: 24},
      titleMinWidth: 37,
      hasIcon: YES,
      toolTip: "_Actions".loc(),
      icon: 'actions',
      dropDown: SC.MenuPane.design({
        defaultResponder: 'Orion',
        layout: { width: 140, height: 0 },
        itemTitleKey: 'title',
        itemTargetKey: 'target',
        itemActionKey: 'action',
        itemSeparatorKey: 'isSeparator',
        itemIsEnabledKey: 'isEnabled',
        items:[
          {title: "_Run".loc(), action: 'run', isEnabled: YES},
          {title: "_Reload App".loc(), action: 'reloadIframe', isEnabled: YES},
          {title: "_Dock Library".loc(), action: 'toggleDockedLibrary', isEnabled: YES},
          {title: "_Dock Inspector".loc(), action: 'toggleDockedInspector', isEnabled: YES},
          { isSeparator: YES },
          {title: "_Page Size".loc(),
            subMenu:[
            {title: "_iPhone Hrz".loc(), action: 'resizePage', isEnabled: YES, size: {width: 480, height: 320}},
            {title: "_iPhone Vrt".loc(), action: 'resizePage', isEnabled: YES, size: {width: 320, height: 480}},
            {title: "_iPad Hrz".loc(), action: 'resizePage', isEnabled: YES, size: {width: 1024, height: 768}},
            {title: "_iPad Vrt".loc(), action: 'resizePage', isEnabled: YES, size: {height: 1024, width: 768}},
            {title: "_Full".loc(), action: 'resizePage', isEnabled: YES}

            ]
          },
          { isSeparator: YES },
          {title: "_Save".loc(), action: 'save', isEnabled: YES }
        ]
      })
    })

  })

}),

// Outlets to design views
designAreaView: SC.outlet('pageDesigner.designArea'),
webView: SC.outlet('pageDesigner.designArea.web'),
eventBlocker: SC.outlet('pageDesigner.designArea.eventBlocker'),

// Outlets to Docks
dockView: SC.outlet('pageDesigner.dock'),
libraryDockView: SC.outlet('pageDesigner.dock.libraryArea'),
inspectorDockView: SC.outlet('pageDesigner.dock.inspectorArea'),

pageDesigner: SC.View.design({
  layout: { left: 0, top: 0, right: 0, bottom: 0 },
  childViews: 'designArea dock'.w(),

  designArea: SC.View.design({
    layout: {top: 0, left: 0, right: 0, bottom: 0},
    classNames: ['workspace'],
    childViews: 'web eventBlocker'.w(),

    web: Greenhouse.WebView.design({
      valueBinding:'Greenhouse.targetController.appUrl'
    }),

    eventBlocker: Greenhouse.EventBlocker.design({})
  }),

  dock: SC.View.design({
    layout: {top: 0, bottom: 0, right: 0, width: 0},
    childViews: 'libraryArea inspectorArea'.w(),
    classNames: ['anchored'],

    libraryArea: SC.ContainerView.design({
      classNames: ['library-docked'],
      layout: { left: 0, top: 0, right: 0, bottom: 386 },
      nowShowing: null
    }),

    inspectorArea: SC.ContainerView.design({
      classNames: ['inspector-docked'],
      layout: { right: 0, bottom: 0, left: 0, height: 385 },
      nowShowing: null
    })
  })
}),

inspectorContentView: SC.View.design({
  childViews: 'toolbar content'.w(),

  toolbar: SC.View.design({
    layout: {top:0, left: 0, right:0, height: 28},
    isVisible: NO,
    childViews: 'title remove'.w(),
    title: SC.LabelView.design({
      layout: {centerX: 0, top: 2, height: 24, width: 50},
      title: "_Inspector".loc()
    }),

    remove: SC.View.design(Greenhouse.SimpleButton,{
      classNames: ['close-button'],
      layout: {right: 1, top: 6, width: 18, height: 17},
      action: 'closeInspector'
    })
  }),

  content: SC.TabView.design({
    layout: { left: 6, right: 6, bottom: 6, height: 368 },
    itemTitleKey: 'title',
    itemValueKey: 'value',
    nowShowing: 'Greenhouse.inspectorsPage.layoutInspector',
    items: [
      {title: "Layout", value: 'Greenhouse.inspectorsPage.layoutInspector'},
      {title: "All Properties", value: 'Greenhouse.inspectorsPage.propertiesInspector'}]
  })
}),

// inspectorTab: SC.TabView.design({
//   layout: {left: 0, right:0, bottom: 0, height:350},
//   itemTitleKey: 'title',
//   itemValueKey: 'value',
//   nowShowing: 'Greenhouse.inspectorsPage.layoutInspector',
//   items: [
//     {title: "Layout", value: 'Greenhouse.inspectorsPage.layoutInspector'},
//     {title: "All Properties", value: 'Greenhouse.inspectorsPage.propertiesInspector'}]
// }),

inspectorPickerContentView: SC.outlet('inspectorPicker.contentView'),
inspectorPicker: Greenhouse.TearOffPicker.design({
  classNames: ['gh-picker', 'inspector'],
  layout: {width: 230, height: 380},
  defaultResponder: 'Greenhouse',
  dragAction: 'floatInspector',
  contentView: SC.ContainerView.design({
    nowShowing: 'Greenhouse.appPage.inspectorContentView'
  })
}),

// ..........................................................
// Library Views
//
libraryContentView: SC.View.design({
  childViews: 'controlBar toolbar content'.w(),

  controlBar: SC.View.design({
    classNames: ['control-bar'],
    layout: { left: 10, right: 10, top: 12, height: 24 },
    childViews: 'search'.w(),

    search: SC.TextFieldView.design({
      classNames: ['search'],
      layout: {top: 0, centerX: 0, width: 180, height: 24 },
      valueBinding: 'Greenhouse.libraryController.search'
    })
  }),

  toolbar: SC.View.design({
    layout: {top:0, left: 0, right:0, height: 28},
    isVisible: NO,
    childViews: 'remove'.w(),
    remove: SC.View.design(Greenhouse.SimpleButton,{
      classNames: ['close-button'],
      layout: {right: 1, top: 6, width: 18, height: 17},
      action: 'closeLibrary'
    })
  }),

  content: SC.View.design({
    classNames: ['content'],
    layout: { top: 49, bottom: 11, left: 8, right: 8 },
    childViews: 'library addCustomView removeCustomView'.w(),

    library: SC.ScrollView.design({
      classNames: ['library-list'],
      layout: {top: 0, bottom: 32, left: 0, right: 0 },
      hasHorizontalScroller: NO,
      contentView: SC.ListView.design({
        rowHeight: 36,
        isEditable: NO,
        contentValueKey: 'name',
        contentBinding: 'Greenhouse.libraryController.arrangedObjects',
        selectionBinding: 'Greenhouse.libraryController.selection',
        delegate: Greenhouse.libraryController,
        canReorderContent: YES,
        dragDidBegin: function(drag, loc) {
          Greenhouse.sendAction('cancel');
        }
      })
    }),

    removeCustomView: SC.ButtonView.design({
      classNames: ['dark'],
      layout: { bottom: 1, right: 70, height: 24, width: 70 },
      titleMinWidth: 0,
      hasIcon: NO,
      isEnabledBinding: 'Greenhouse.libraryController*selection.firstObject.canEdit',
      title: "_Remove".loc(),
      action: 'removeCustomView'
    }),

    addCustomView: SC.ButtonView.design({
      classNames: ['dark'],
      layout: { bottom: 1, right: 0, height: 24, width: 50 },
      titleMinWidth: 0,
      hasIcon: NO,
      title: "_Add".loc(),
      action: 'newCustomView'
    })
  })
}),

libraryPickerContentView: SC.outlet('libraryPicker.contentView'),
libraryPicker: Greenhouse.TearOffPicker.design({
  classNames: ['gh-picker'],
  layout: {width: 230, height: 400},
  dragAction: 'floatLibrary',
  defaultResponder: 'Greenhouse',
  contentView: SC.ContainerView.design({
    nowShowing: 'Greenhouse.appPage.libraryContentView'
  })
}),

// ..........................................................
// Project Views
//
projectPicker: SC.PickerPane.design({
  classNames: ['gh-picker'],
  layout: {width: 200, height: 500},
  defaultResponder: 'Greenhouse',
  computeAnchorRect: function(anchor) {
    var ret = SC.offset(anchor); // get x & y
    var cq = SC.$(anchor);
    var wsize = SC.RootResponder.responder.computeWindowSize() ;
    ret.width = cq.outerWidth();
    ret.height = (wsize.height-ret.y) < cq.outerHeight() ? (wsize.height-ret.y) : cq.outerHeight();
    ret.y = ret.y -11;
    return ret ;
  },
  modalPaneDidClick: function(evt) {
    var f = this.get("frame");
    if(!this.clickInside(f, evt)){
      Greenhouse.sendAction('cancel');
    }
    return YES ;
  },
  contentView: SC.View.design({
    childViews: 'controlBar fileList'.w(),

    controlBar: SC.View.design({
      classNames: ['control-bar'],
      layout: { left: 10, right: 10, top: 12, height: 24 },
      childViews: 'addPage'.w(),

      addPage: SC.ButtonView.design({
        classNames: ['dark'],
        layout: { width: 90, height: 24, left: 0 },
        titleMinWidth: 0,
        hasIcon: NO,
        title: "_Add Page...".loc(),
        action: 'newPageFile'
      })
    }),

    fileList: SC.ScrollView.design({
      classNames: ['content'],
      layout: { top: 49, bottom: 11, left: 8, right: 8 },
      hasHorizontalScroller: NO,
      contentView: SC.ListView.design({
        exampleView: Greenhouse.ListItem,
        isEditable: NO,
        canEditContent: YES,
        actOnSelect: YES,
        //canReorderContent: YES,
        deelegate: Greenhouse.filesController,
        contentValueKey: 'name',
        contentBinding: 'Greenhouse.filesController.arrangedObjects',
        selectionBinding: 'Greenhouse.filesController.selection',
        action: 'selectFile'
     })
    })

    // fileActions: SC.ButtonView.design(Greenhouse.DropDown, {
    //   layout: { bottom: 5, left: 10, height: 24, width: 35 },
    //   titleMinWidth: 0,
    //   hasIcon: NO,
    //   title: '+',
    //   icon: 'file-actions-icon',
    //   dropDown: SC.MenuPane.design({
    //     defaultResponder: 'Greenhouse',
    //     contentView: SC.View.design({}),
    //     layout: { width: 140, height: 0 },
    //     itemTitleKey: 'title',
    //     itemActionKey: 'action',
    //     itemSeparatorKey: 'isSeparator',
    //     itemIsEnabledKey: 'isEnabled',
    //     items: [
    //       { title: "_New File".loc(), action: 'newFile', isEnabled: YES },
    //       { title: "_New Page File".loc(), action: 'newPageFile', isEnabled: YES },
    //       { title: "_New Folder".loc(), action: 'newFolder', isEnabled: YES },
    //       { title: "_Delete".loc(), action: 'deleteFile', isEnabled: YES }
    //
    //     ]
    //   })
    // })
  })
})

});