<commit_before>define(
  'ephox.alloy.demo.LongpressDemo',

  [
    'ephox.alloy.api.behaviour.Positioning',
    'ephox.alloy.api.component.GuiFactory',
    'ephox.alloy.api.system.Attachment',
    'ephox.alloy.api.system.Gui',
    'ephox.alloy.api.ui.InlineView',
    'ephox.alloy.api.ui.TieredMenu',
    'ephox.alloy.construct.EventHandler',
    'ephox.alloy.demo.DemoSink',
    'ephox.alloy.demo.HtmlDisplay',
    'ephox.katamari.api.Fun',
    'ephox.katamari.api.Option',
    'ephox.katamari.api.Result',
    'ephox.sugar.api.node.Element',
    'ephox.sugar.api.properties.Class',
    'global!document'
  ],

  function (Positioning, GuiFactory, Attachment, Gui, InlineView, TieredMenu, EventHandler, DemoSink, HtmlDisplay, Fun, Option, Result, Element, Class, document) {
    return function () {
      var gui = Gui.create();
      var body = Element.fromDom(document.body);
      Class.add(gui.element(), 'gui-root-demo-container');
      Attachment.attachSystem(body, gui);

      var sink = DemoSink.make();
      gui.add(sink);

      var inlineComp = GuiFactory.build(
        InlineView.sketch({
          uid: 'inline-comp',
          dom: {
            tag: 'div'
          },
          lazySink: Fun.constant(Result.value(sink))
        })
      );

      var inlineMenu = TieredMenu.sketch({
        dom: {
          tag: 'div'
        },

        onEscape: function () {
          console.log('inline.menu.escape');
          return Option.some(true);
        },

        onExecute: function () {
          console.log('inline.menu.execute')
        },
        members: { 
          item: {
            munge: function (itemSpec) {
              return {
                dom: {
                  tag: 'div',
                  attributes: {
                    'data-value': itemSpec.data.value
                  },
                  classes: [ 'alloy-item' ],
                  innerHtml: itemSpec.data.text
                },
                components: [ ]
              };              
            }
          },
          menu: {
            munge: function (menuSpec) {
              return {
                dom: {
                  tag: 'div',
                  attributes: {
                    'data-value': menuSpec.value
                  },
                  classes: [ 'alloy-menu' ]
                },
                components: [ ],
                shell: true
              };
            }
          }
        },

        onOpenMenu: function (sandbox, menu) {
          // handled by inline view itself
        },

        onOpenSubmenu: function (sandbox, item, submenu) {
          Positioning.position(sink, {
            anchor: 'submenu',
            item: item,
            bubble: Option.none()
          }, submenu);

        },

        data: {
          expansions: {
            'gamma': 'gamma-menu'
          },
          menus: {
            dog: {
              value: 'dog',
              items: [
                { type: 'item', data: { value: 'alpha', text: 'Alpha', 'item-class': 'alpha' } },
                { type: 'item', data: { value: 'beta', text: 'Beta', 'item-class': 'beta' } },
                { type: 'item', data: { value: 'gamma', text: 'Gamma', 'item-class': 'gamma' } },
                { type: 'item', data: { value: 'delta', text: 'Delta', 'item-class': 'delta' } }

              ],
              textkey: 'Dog'
            },
            'gamma-menu': {
              value: 'gamma-menu',
              items: [
                { type: 'item', data: { value: 'gamma-1', text: 'Gamma-1', 'item-class': 'gamma-1' } },
                { type: 'item', data: { value: 'gamma-2', text: 'Gamma-2', 'item-class': 'gamma-2' } },
              ],
              textkey: 'gamma-menu'
            }
          },
          primary: 'dog'
        },

        markers: {
          item: 'alloy-item',
          selectedItem: 'alloy-selected-item',
          menu: 'alloy-menu',
          selectedMenu: 'alloy-selected-menu',
          backgroundMenu: 'alloy-background-menu'
        }
      });
      
      var button1 = HtmlDisplay.section(
        gui,
        'This button is a <code>button</code> tag with an image',
        {
          dom: {
            tag: 'div'
          },
          components: [
            GuiFactory.premade(sink),
            {
              dom: {
                tag: 'button',
                innerHtml: 'Menu button'
              },
              events: {
                'longpress': EventHandler.nu({
                  run: function (component, simulatedEvent) {
                    console.log('simulatedEvent', simulatedEvent.event());
                    
                    InlineView.showAt(inlineComp, {
                      anchor: 'makeshift',
                      x: simulatedEvent.event().x(),
                      y: simulatedEvent.event().y()
                    }, inlineMenu);
                  }
                }),

                'touchmove': EventHandler.nu({
                  run: function (component, simulatedEvent) {
                    var e = simulatedEvent.event().raw().touches[0];
                    console.log('e', e.clientX, e.clientY);
                    var elem = Element.fromDom(document.elementFromPoint(e.clientX, e.clientY));
                    console.log('elem' ,elem);
                    // var elem = document.elementFromPoint(simulatedEvent.event().raw().touchX, simulatedEvent.event().raw().touchY
                    component.getSystem().triggerEvent('mouseover', elem, {
                      target: Fun.constant(elem),
                      x: Fun.constant(e.clientX),
                      y: Fun.constant(e.clientY)
                    });
                  }
                }),

                'touchend': EventHandler.nu({
                  run: function (component, simulatedEvent) {
                    InlineView.hide(inlineComp);
                  }
                })<commit_msg>TM-34: executing on selected item<commit_after>define(
  'ephox.alloy.demo.LongpressDemo',

  [
    'ephox.alloy.api.behaviour.Highlighting',
    'ephox.alloy.api.behaviour.Positioning',
    'ephox.alloy.api.component.GuiFactory',
    'ephox.alloy.api.component.Memento',
    'ephox.alloy.api.events.SystemEvents',
    'ephox.alloy.api.system.Attachment',
    'ephox.alloy.api.system.Gui',
    'ephox.alloy.api.ui.InlineView',
    'ephox.alloy.api.ui.TieredMenu',
    'ephox.alloy.construct.EventHandler',
    'ephox.alloy.demo.DemoSink',
    'ephox.alloy.demo.HtmlDisplay',
    'ephox.katamari.api.Fun',
    'ephox.katamari.api.Option',
    'ephox.katamari.api.Result',
    'ephox.sugar.api.node.Element',
    'ephox.sugar.api.properties.Class',
    'global!document'
  ],

  function (
    Highlighting, Positioning, GuiFactory, Memento, SystemEvents, Attachment, Gui, InlineView, TieredMenu, EventHandler, DemoSink, HtmlDisplay, Fun, Option,
    Result, Element, Class, document
  ) {
    return function () {
      var gui = Gui.create();
      var body = Element.fromDom(document.body);
      Class.add(gui.element(), 'gui-root-demo-container');
      Attachment.attachSystem(body, gui);

      var sink = DemoSink.make();
      gui.add(sink);

      var inlineComp = GuiFactory.build(
        InlineView.sketch({
          uid: 'inline-comp',
          dom: {
            tag: 'div'
          },
          lazySink: Fun.constant(Result.value(sink))
        })
      );

      var inlineMenu = Memento.record(
        TieredMenu.sketch({
          dom: {
            tag: 'div'
          },

          onEscape: function () {
            console.log('inline.menu.escape');
            return Option.some(true);
          },

          onExecute: function () {
            console.log('inline.menu.execute')
          },
          members: { 
            item: {
              munge: function (itemSpec) {
                return {
                  dom: {
                    tag: 'span',
                    attributes: {
                      'data-value': itemSpec.data.value
                    },
                    classes: [ 'alloy-item' ],
                    innerHtml: itemSpec.data.text,
                    styles: {
                      background: 'black',
                      color: 'white',
                      'border-radius': '50%',
                      padding: '20px',
                      margin: '5px'
                    }
                  },
                  components: [ ]
                };              
              }
            },
            menu: {
              munge: function (menuSpec) {
                return {
                  dom: {
                    tag: 'div',
                    attributes: {
                      'data-value': menuSpec.value
                    },
                    styles: {
                      display: 'flex'
                    },
                    classes: [ 'alloy-menu' ]
                  },
                  components: [ ],
                  shell: true
                };
              }
            }
          },

          onOpenMenu: function (sandbox, menu) {
            // handled by inline view itself
          },

          onOpenSubmenu: function (sandbox, item, submenu) {
            Positioning.position(sink, {
              anchor: 'submenu',
              item: item,
              bubble: Option.none()
            }, submenu);

          },

          data: {
            expansions: { },
            menus: {
              dog: {
                value: 'dog',
                items: [
                  { type: 'item', data: { value: 'alpha', text: 'Alpha', 'item-class': 'alpha' } },
                  { type: 'item', data: { value: 'beta', text: 'Beta', 'item-class': 'beta' } }

                ],
                textkey: 'Dog'
              }
            },
            primary: 'dog'
          },

          markers: {
            item: 'alloy-item',
            selectedItem: 'alloy-selected-item',
            menu: 'alloy-menu',
            selectedMenu: 'alloy-selected-menu',
            backgroundMenu: 'alloy-background-menu'
          }
        })
      );
      
      var button1 = HtmlDisplay.section(
        gui,
        'This button is a <code>button</code> tag with an image',
        {
          dom: {
            tag: 'div'
          },
          components: [
            // GuiFactory.premade(sink),
            {
              dom: {
                tag: 'button',
                innerHtml: 'Menu button'
              },
              events: {
                'longpress': EventHandler.nu({
                  run: function (component, simulatedEvent) {
                    console.log('simulatedEvent', simulatedEvent.event());
                    
                    InlineView.showAt(inlineComp, {
                      anchor: 'makeshift',
                      x: simulatedEvent.event().x(),
                      y: simulatedEvent.event().y()
                    }, inlineMenu.asSpec());
                  }
                }),

                'touchmove': EventHandler.nu({
                  run: function (component, simulatedEvent) {
                    var e = simulatedEvent.event().raw().touches[0];
                    var elem = Element.fromDom(document.elementFromPoint(e.clientX, e.clientY));
                    component.getSystem().triggerEvent('mouseover', elem, {
                      target: Fun.constant(elem),
                      x: Fun.constant(e.clientX),
                      y: Fun.constant(e.clientY)
                    });
                  }
                }),

                'touchend': EventHandler.nu({
                  run: function (component, simulatedEvent) {
                    var e = simulatedEvent.event().raw().touches[0];
                    inlineMenu.getOpt(component).each(function (menu) {
                      Highlighting.getHighlighted(menu).each(function (activeMenu) {
                        Highlighting.getHighlighted(activeMenu).each(function (item) {
                          console.log('found item', item.element().dom());
                          component.getSystem().triggerEvent(SystemEvents.execute(), item.element(), {
                            target: Fun.constant(item.element())
                          });
                        });
                      });
                    });
                    InlineView.hide(inlineComp);

                  }
                })
{'fraction_non_alphanumeric': 0.12842122160687053, 'fraction_numerical': 0.0014447387430772936, 'mean_word_length': 1.2045293701344657, 'pattern_counts': {'":': 0, '<': 7, '<?xml version=': 0, '>': 7, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '5003080', 'n_tokens_mistral': 3493, 'n_tokens_neox': 3326, 'n_words': 570}