diff --git a/CHANGELOG.rst b/CHANGELOG.rst index 3a9eb76165..952a0dfd9b 100644 --- a/CHANGELOG.rst +++ b/CHANGELOG.rst @@ -22,6 +22,8 @@ Studio: Switched to loading Javascript using require.js Studio: Better feedback during the course import process +Studio: Improve drag and drop on the course overview and subsection views. + LMS: Add split testing functionality for internal use. CMS: Add edit_course_tabs management command, providing a primitive diff --git a/cms/djangoapps/contentstore/features/course-overview.py b/cms/djangoapps/contentstore/features/course-overview.py index 375e3d934e..d0f73bd400 100644 --- a/cms/djangoapps/contentstore/features/course-overview.py +++ b/cms/djangoapps/contentstore/features/course-overview.py @@ -133,5 +133,5 @@ def reorder_subsections(_step): ele.action_chains.drag_and_drop_by_offset( ele._element, 0, - 10 + 25 ).perform() diff --git a/cms/static/coffee/spec/main.coffee b/cms/static/coffee/spec/main.coffee index 39214fd6a7..bffa49052d 100644 --- a/cms/static/coffee/spec/main.coffee +++ b/cms/static/coffee/spec/main.coffee @@ -1,5 +1,5 @@ requirejs.config({ - paths: { + paths: { "gettext": "xmodule_js/common_static/js/test/i18n", "mustache": "xmodule_js/common_static/js/vendor/mustache", "codemirror": "xmodule_js/common_static/js/vendor/CodeMirror/codemirror", @@ -32,9 +32,10 @@ requirejs.config({ "squire": "xmodule_js/common_static/js/vendor/Squire", "jasmine-stealth": "xmodule_js/common_static/js/vendor/jasmine-stealth", "jasmine.async": "xmodule_js/common_static/js/vendor/jasmine.async", + "draggabilly": "xmodule_js/common_static/js/vendor/draggabilly.pkgd", "coffee/src/ajax_prefix": "xmodule_js/common_static/coffee/src/ajax_prefix" - }, + } shim: { "gettext": { exports: "gettext" @@ -145,6 +146,7 @@ define([ "coffee/spec/views/section_spec", "coffee/spec/views/course_info_spec", "coffee/spec/views/feedback_spec", "coffee/spec/views/metadata_edit_spec", "coffee/spec/views/module_edit_spec", + "coffee/spec/views/overview_spec", "coffee/spec/views/textbook_spec", "coffee/spec/views/upload_spec", # these tests are run separate in the cms-squire suite, due to process diff --git a/cms/static/coffee/spec/views/module_edit_spec.coffee b/cms/static/coffee/spec/views/module_edit_spec.coffee index 99b4dd65d2..157fb18e6a 100644 --- a/cms/static/coffee/spec/views/module_edit_spec.coffee +++ b/cms/static/coffee/spec/views/module_edit_spec.coffee @@ -5,7 +5,6 @@ define ["coffee/src/views/module_edit", "xmodule"], (ModuleEdit) -> @stubModule = jasmine.createSpy("Module") @stubModule.id = 'stub-id' - setFixtures """
  • @@ -19,7 +18,7 @@ define ["coffee/src/views/module_edit", "xmodule"], (ModuleEdit) -> Edit Delete
    - +
    diff --git a/cms/static/coffee/spec/views/overview_spec.coffee b/cms/static/coffee/spec/views/overview_spec.coffee index d2ccc0deb0..c78b127470 100644 --- a/cms/static/coffee/spec/views/overview_spec.coffee +++ b/cms/static/coffee/spec/views/overview_spec.coffee @@ -1,240 +1,381 @@ -describe "Course Overview", -> +define ["js/views/overview", "js/views/feedback_notification", "sinon", "js/base"], +(OverviewDragger, Notification, sinon) -> - beforeEach -> - _.each ["/static/js/vendor/date.js", "/static/js/vendor/timepicker/jquery.timepicker.js", "/jsi18n/", "/static/js/vendor/draggabilly.pkgd.js"], (path) -> - appendSetFixtures """ - - """ + describe "Course Overview", -> + beforeEach -> + _.each ["/static/js/vendor/date.js", "/static/js/vendor/timepicker/jquery.timepicker.js", "/jsi18n/", "/static/js/vendor/draggabilly.pkgd.js"], (path) -> + appendSetFixtures """ + + """ + + appendSetFixtures """ +
    + + Will Release: 06/12/2013 at 04:00 UTC + + Edit +
    + """ + + appendSetFixtures """ +
    +
    +

    Section Release Date

    +
    +
    + + +
    +
    + + +
    +
    +

    On the date set above, this section – – will be released to students. Any units marked private will only be visible to admins.

    +
    +
    + SaveCancel +
    +
    + """ + + appendSetFixtures """ +
    + +
    + """ + + appendSetFixtures """ +
      +
    1. +
        +
      1. +
      2. +
      3. +
      +
      2. +
    2. +
        +
      1. +
      +
      3. +
    3. +
        + +
      + """ + + spyOn(window, 'saveSetSectionScheduleDate').andCallThrough() + # Have to do this here, as it normally gets bound in document.ready() + $('a.save-button').click(saveSetSectionScheduleDate) + $('a.delete-section-button').click(deleteSection) + $(".edit-subsection-publish-settings .start-date").datepicker() - appendSetFixtures """ -
      - - Will Release: 06/12/2013 at 04:00 UTC - - Edit -
      - """ + @notificationSpy = spyOn(Notification.Mini.prototype, 'show').andCallThrough() + window.analytics = jasmine.createSpyObj('analytics', ['track']) + window.course_location_analytics = jasmine.createSpy() + @xhr = sinon.useFakeXMLHttpRequest() + requests = @requests = [] + @xhr.onCreate = (req) -> requests.push(req) - appendSetFixtures """ -
      -
      -

      Section Release Date

      -
      -
      - - -
      -
      - - -
      -
      -

      On the date set above, this section – – will be released to students. Any units marked private will only be visible to admins.

      -
      -
      - SaveCancel -
      -
      - """ + OverviewDragger.makeDraggable( + '.unit', + '.unit-drag-handle', + 'ol.sortable-unit-list', + 'li.branch, article.subsection-body' + ) + + afterEach -> + delete window.analytics + delete window.course_location_analytics + @notificationSpy.reset() + + it "should save model when save is clicked", -> + $('a.edit-button').click() + $('a.save-button').click() + expect(saveSetSectionScheduleDate).toHaveBeenCalled() - appendSetFixtures """ -
      - -
      - """ + it "should show a confirmation on save", -> + $('a.edit-button').click() + $('a.save-button').click() + expect(@notificationSpy).toHaveBeenCalled() - appendSetFixtures """ -
      -
        -
      1. -
      2. -
      3. -
      -
      - -
        -
      1. -
      - -
      -
        -
        - """#" + it "should delete model when delete is clicked", -> + $('a.delete-section-button').click() + $('a.action-primary').click() + expect(@requests[0].url).toEqual('/delete_item') - spyOn(window, 'saveSetSectionScheduleDate').andCallThrough() - # Have to do this here, as it normally gets bound in document.ready() - $('a.save-button').click(saveSetSectionScheduleDate) - $('a.delete-section-button').click(deleteSection) - $(".edit-subsection-publish-settings .start-date").datepicker() + it "should not delete model when cancel is clicked", -> + $('a.delete-section-button').click() + $('a.action-secondary').click() + expect(@requests.length).toEqual(0) - @notificationSpy = spyOn(CMS.Views.Notification.Mini.prototype, 'show').andCallThrough() - window.analytics = jasmine.createSpyObj('analytics', ['track']) - window.course_location_analytics = jasmine.createSpy() - @xhr = sinon.useFakeXMLHttpRequest() - requests = @requests = [] - @xhr.onCreate = (req) -> requests.push(req) + it "should show a confirmation on delete", -> + $('a.delete-section-button').click() + $('a.action-primary').click() + expect(@notificationSpy).toHaveBeenCalled() + + describe "findDestination", -> + it "correctly finds the drop target of a drag", -> + $ele = $('#unit-1') + $ele.offset( + top: $ele.offset().top + 10, left: $ele.offset().left + ) + destination = OverviewDragger.findDestination($ele, 1) + expect(destination.ele).toBe($('#unit-2')) + expect(destination.attachMethod).toBe('before') + + it "can drag and drop across section boundaries, with special handling for first element", -> + $ele = $('#unit-1') + $ele.offset( + top: $('#unit-4').offset().top + 8 + left: $ele.offset().left + ) + destination = OverviewDragger.findDestination($ele, 1) + expect(destination.ele).toBe($('#unit-4')) + # Dragging down into first element, we have a fudge factor makes it easier to drag at beginning. + expect(destination.attachMethod).toBe('before') + # Now past the "fudge factor". + $ele.offset( + top: $('#unit-4').offset().top + 12 + left: $ele.offset().left + ) + destination = OverviewDragger.findDestination($ele, 1) + expect(destination.ele).toBe($('#unit-4')) + expect(destination.attachMethod).toBe('after') + + it "can drag and drop across section boundaries, with special handling for last element", -> + $ele = $('#unit-4') + $ele.offset( + top: $('#unit-3').offset().bottom + 4 + left: $ele.offset().left + ) + destination = OverviewDragger.findDestination($ele, -1) + expect(destination.ele).toBe($('#unit-3')) + # Dragging down up into last element, we have a fudge factor makes it easier to drag at beginning. + expect(destination.attachMethod).toBe('after') + # Now past the "fudge factor". + $ele.offset( + top: $('#unit-3').offset().top + 4 + left: $ele.offset().left + ) + destination = OverviewDragger.findDestination($ele, -1) + expect(destination.ele).toBe($('#unit-3')) + expect(destination.attachMethod).toBe('before') + + it "can drag into an empty list", -> + $ele = $('#unit-1') + $ele.offset( + top: $('#subsection-3').offset().top + 10 + left: $ele.offset().left + ) + destination = OverviewDragger.findDestination($ele, 1) + expect(destination.ele).toBe($('#subsection-list-3')) + expect(destination.attachMethod).toBe('prepend') + + it "reports a null destination on a failed drag", -> + $ele = $('#unit-1') + $ele.offset( + top: $ele.offset().top + 200, left: $ele.offset().left + ) + destination = OverviewDragger.findDestination($ele, 1) + expect(destination).toEqual( + ele: null + attachMethod: "" + ) + + it "can drag into a collapsed list", -> + $('#subsection-2').addClass('collapsed') + $ele = $('#unit-2') + $ele.offset( + top: $('#subsection-2').offset().top + 3 + left: $ele.offset().left + ) + destination = OverviewDragger.findDestination($ele, 1) + expect(destination.ele).toBe($('#subsection-list-2')) + expect(destination.parentList).toBe($('#subsection-2')) + expect(destination.attachMethod).toBe('prepend') + + describe "onDragStart", -> + it "sets the dragState to its default values", -> + expect(OverviewDragger.dragState).toEqual({}) + # Call with some dummy data + OverviewDragger.onDragStart( + {element: $('#unit-1')}, + null, + null + ) + expect(OverviewDragger.dragState).toEqual( + dropDestination: null, + attachMethod: '', + parentList: null, + lastY: 0, + dragDirection: 0 + ) + + it "collapses expanded elements", -> + expect($('#subsection-1')).not.toHaveClass('collapsed') + OverviewDragger.onDragStart( + {element: $('#subsection-1')}, + null, + null + ) + expect($('#subsection-1')).toHaveClass('collapsed') + expect($('#subsection-1')).toHaveClass('expand-on-drop') + + describe "onDragMove", -> + it "adds the correct CSS class to the drop destination", -> + $ele = $('#unit-1') + dragY = $ele.offset().top + 10 + dragX = $ele.offset().left + $ele.offset( + top: dragY, left: dragX + ) + OverviewDragger.onDragMove( + {element: $ele, dragPoint: + {y: dragY}}, '', {clientX: dragX} + ) + expect($('#unit-2')).toHaveClass('drop-target drop-target-before') + expect($ele).toHaveClass('valid-drop') + + it "does not add CSS class to the drop destination if out of bounds", -> + $ele = $('#unit-1') + dragY = $ele.offset().top + 10 + $ele.offset( + top: dragY, left: $ele.offset().left + ) + OverviewDragger.onDragMove( + {element: $ele, dragPoint: + {y: dragY}}, '', {clientX: $ele.offset().left - 3} + ) + expect($('#unit-2')).not.toHaveClass('drop-target drop-target-before') + expect($ele).not.toHaveClass('valid-drop') + + it "scrolls up if necessary", -> + scrollSpy = spyOn(window, 'scrollBy').andCallThrough() + OverviewDragger.onDragMove( + {element: $('#unit-1')}, '', {clientY: 2} + ) + expect(scrollSpy).toHaveBeenCalledWith(0, -10) + + it "scrolls down if necessary", -> + height = Math.max(window.innerHeight, 100); + spyOn(window, 'innerHeight').andReturn(height) + scrollSpy = spyOn(window, 'scrollBy').andCallThrough() + OverviewDragger.onDragMove( + {element: $('#unit-1')}, '', {clientY: (height - 5)} + ) + expect(scrollSpy).toHaveBeenCalledWith(0, 10) + + describe "onDragEnd", -> + beforeEach -> + @reorderSpy = spyOn(OverviewDragger, 'handleReorder') - CMS.Views.Draggabilly.makeDraggable( - '.unit', - '.unit-drag-handle', - 'ol.sortable-unit-list', - 'li.branch, article.subsection-body' - ) + afterEach -> + @reorderSpy.reset() - afterEach -> - delete window.analytics - delete window.course_location_analytics - @notificationSpy.reset() + it "calls handleReorder on a successful drag", -> + OverviewDragger.dragState.dropDestination = $('#unit-2') + OverviewDragger.dragState.attachMethod = "before" + OverviewDragger.dragState.parentList = $('#subsection-1') + $('#unit-1').offset( + top: $('#unit-1').offset().top + 10 + left: $('#unit-1').offset().left + ) + OverviewDragger.onDragEnd( + {element: $('#unit-1')}, + null, + {clientX: $('#unit-1').offset().left} + ) + expect(@reorderSpy).toHaveBeenCalled() - it "should save model when save is clicked", -> - $('a.edit-button').click() - $('a.save-button').click() - expect(saveSetSectionScheduleDate).toHaveBeenCalled() + it "clears out the drag state", -> + OverviewDragger.onDragEnd( + {element: $('#unit-1')}, + null, + null + ) + expect(OverviewDragger.dragState).toEqual({}) - it "should show a confirmation on save", -> - $('a.edit-button').click() - $('a.save-button').click() - expect(@notificationSpy).toHaveBeenCalled() + it "sets the element to the correct position", -> + OverviewDragger.onDragEnd( + {element: $('#unit-1')}, + null, + null + ) + # Chrome sets the CSS to 'auto', but Firefox uses '0px'. + expect(['0px', 'auto']).toContain($('#unit-1').css('top')) + expect(['0px', 'auto']).toContain($('#unit-1').css('left')) - it "should delete model when delete is clicked", -> - deleteSpy = spyOn(window, '_deleteItem').andCallThrough() - $('a.delete-section-button').click() - $('a.action-primary').click() - expect(deleteSpy).toHaveBeenCalled() - expect(@requests[0].url).toEqual('/delete_item') + it "expands an element if it was collapsed on drag start", -> + $('#subsection-1').addClass('collapsed') + $('#subsection-1').addClass('expand-on-drop') + OverviewDragger.onDragEnd( + {element: $('#subsection-1')}, + null, + null + ) + expect($('#subsection-1')).not.toHaveClass('collapsed') + expect($('#subsection-1')).not.toHaveClass('expand-on-drop') - it "should not delete model when cancel is clicked", -> - deleteSpy = spyOn(window, '_deleteItem').andCallThrough() - $('a.delete-section-button').click() - $('a.action-secondary').click() - expect(@requests.length).toEqual(0) + it "expands a collapsed element when something is dropped in it", -> + $('#subsection-2').addClass('collapsed') + OverviewDragger.dragState.dropDestination = $('#list-2') + OverviewDragger.dragState.attachMethod = "prepend" + OverviewDragger.dragState.parentList = $('#subsection-2') + OverviewDragger.onDragEnd( + {element: $('#unit-1')}, + null, + {clientX: $('#unit-1').offset().left} + ) + expect($('#subsection-2')).not.toHaveClass('collapsed') - it "should show a confirmation on delete", -> - $('a.delete-section-button').click() - $('a.action-primary').click() - expect(@notificationSpy).toHaveBeenCalled() + describe "AJAX", -> + beforeEach -> + @requests = requests = [] + @xhr = sinon.useFakeXMLHttpRequest() + @xhr.onCreate = (xhr) -> requests.push(xhr) - describe "findDestination", -> - it "correctly finds the drop target of a drag", -> - $ele = $('#unit-1') - $ele.offset( - top: $ele.offset().top + 10, left: $ele.offset().left - ) - destination = CMS.Views.Draggabilly.findDestination($ele) - expect(destination.ele).toBe($('#unit-2')) - expect(destination.attachMethod).toBe('before') + @savingSpies = spyOnConstructor(Notification, "Mini", + ["show", "hide"]) + @savingSpies.show.andReturn(@savingSpies) + @clock = sinon.useFakeTimers() - it "can drag and drop across section boundaries", -> - $ele = $('#unit-1') - $ele.offset( - top: $('#unit-4').offset().top + 10 - left: $ele.offset().left - ) - destination = CMS.Views.Draggabilly.findDestination($ele) - expect(destination.ele).toBe($('#unit-4')) - expect(destination.attachMethod).toBe('after') + afterEach -> + @xhr.restore() + @clock.restore() - it "can drag into an empty list", -> - $ele = $('#unit-1') - $ele.offset( - top: $('#list-3').offset().top + 10 - left: $ele.offset().left - ) - destination = CMS.Views.Draggabilly.findDestination($ele) - expect(destination.ele).toBe($('#list-3')) - expect(destination.attachMethod).toBe('prepend') - - it "reports a null destination on a failed drag", -> - $ele = $('#unit-1') - $ele.offset( - top: $ele.offset().top + 200, left: $ele.offset().left - ) - destination = CMS.Views.Draggabilly.findDestination($ele) - expect(destination).toEqual( - ele: null - attachMethod: "" - ) - - describe "onDragStart", -> - it "sets the dragState to its default values", -> - expect(CMS.Views.Draggabilly.dragState).toEqual({}) - # Call with some dummy data - CMS.Views.Draggabilly.onDragStart( - {element: $('#unit-1')}, - null, - null - ) - expect(CMS.Views.Draggabilly.dragState).toEqual( - dropDestination: null, - expandTimer: null, - toExpand: null, - attachMethod: '', - parentList: null - ) - - describe "onDragMove", -> - it "clears the expand timer state", -> - timerSpy = spyOn(window, 'clearTimeout').andCallThrough() - $ele = $('#unit-1') - $ele.offset( - top: $ele.offset().top + 10 - left: $ele.offset().left - ) - CMS.Views.Draggabilly.onDragMove( - {element: $ele}, - null, - null - ) - expect(timerSpy).toHaveBeenCalled() - timerSpy.reset() - - it "adds the correct CSS class to the drop destination", -> - $ele = $('#unit-1') - $ele.offset( - top: $ele.offset().top + 10, left: $ele.offset().left - ) - CMS.Views.Draggabilly.onDragMove( - {element: $ele}, - '', - '' - ) - expect($('#unit-2')).toHaveClass('drop-target drop-target-before') - - describe "onDragEnd", -> - beforeEach -> - @reorderSpy = spyOn(CMS.Views.Draggabilly, 'handleReorder') - - afterEach -> - @reorderSpy.reset() - - it "calls handleReorder on a successful drag", -> - $('#unit-1').offset( - top: $('#unit-1').offset().top + 10 - left: $('#unit-1').offset().left - ) - CMS.Views.Draggabilly.onDragEnd( - {element: $('#unit-1')}, - null, - {x: $('#unit-1').offset().left} - ) - expect(@reorderSpy).toHaveBeenCalled() - - it "clears out the drag state", -> - CMS.Views.Draggabilly.onDragEnd( - {element: $('#unit-1')}, - null, - null - ) - expect(CMS.Views.Draggabilly.dragState).toEqual({}) - - it "sets the element to the correct position", -> - CMS.Views.Draggabilly.onDragEnd( - {element: $('#unit-1')}, - null, - null - ) - # Chrome sets the CSS to 'auto', but Firefox uses '0px'. - expect(['0px', 'auto']).toContain($('#unit-1').css('top')) - expect(['0px', 'auto']).toContain($('#unit-1').css('left')) + it "should send an update on reorder", -> + OverviewDragger.dragState.dropDestination = $('#unit-4') + OverviewDragger.dragState.attachMethod = "after" + OverviewDragger.dragState.parentList = $('#subsection-2') + # Drag Unit 1 from Subsection 1 to the end of Subsection 2. + $('#unit-1').offset( + top: $('#unit-4').offset().top + 10 + left: $('#unit-4').offset().left + ) + OverviewDragger.onDragEnd( + {element: $('#unit-1')}, + null, + {clientX: $('#unit-1').offset().left} + ) + expect(@requests.length).toEqual(2) + expect(@savingSpies.constructor).toHaveBeenCalled() + expect(@savingSpies.show).toHaveBeenCalled() + expect(@savingSpies.hide).not.toHaveBeenCalled() + savingOptions = @savingSpies.constructor.mostRecentCall.args[0] + expect(savingOptions.title).toMatch(/Saving/) + expect($('#unit-1')).toHaveClass('was-dropped') + # We expect 2 requests to be sent-- the first for removing Unit 1 from Subsection 1, + # and the second for adding Unit 1 to the end of Subsection 2. + expect(@requests[0].requestBody).toEqual('{"id":"subsection-1-id","children":["second-unit-id","third-unit-id"]}') + @requests[0].respond(200) + expect(@savingSpies.hide).not.toHaveBeenCalled() + expect(@requests[1].requestBody).toEqual('{"id":"subsection-2-id","children":["fourth-unit-id","first-unit-id"]}') + @requests[1].respond(200) + expect(@savingSpies.hide).toHaveBeenCalled() + # Class is removed in a timeout. + @clock.tick(1001) + expect($('#unit-1')).not.toHaveClass('was-dropped') diff --git a/cms/static/js/base.js b/cms/static/js/base.js index 1f188026cb..98c793de35 100644 --- a/cms/static/js/base.js +++ b/cms/static/js/base.js @@ -863,5 +863,8 @@ function saveSetSectionScheduleDate(e) { saving.hide(); }); } + // Add to window object for unit test (overview_spec). + window.saveSetSectionScheduleDate = saveSetSectionScheduleDate; + window.deleteSection = deleteSection; }); // end require() diff --git a/cms/static/js/hesitate.js b/cms/static/js/hesitate.js deleted file mode 100644 index a9c4be093b..0000000000 --- a/cms/static/js/hesitate.js +++ /dev/null @@ -1,52 +0,0 @@ -/* - * Create a HesitateEvent and assign it as the event to execute: - * $(el).on('mouseEnter', CMS.HesitateEvent( expand, 'mouseLeave').trigger); - * It calls the executeOnTimeOut function with the event.currentTarget after the configurable timeout IFF the cancelSelector event - * did not occur on the event.currentTarget. - * - * More specifically, when trigger is called (triggered by the event you bound it to), it starts a timer - * which the cancelSelector event will cancel or if the timer finished, it executes the executeOnTimeOut function - * passing it the original event (whose currentTarget s/b the specific ele). It never accumulates events; however, it doesn't hurt for your - * code to minimize invocations of trigger by binding to mouseEnter v mouseOver and such. - * - * NOTE: if something outside of this wants to cancel the event, invoke cachedhesitation.untrigger(null | anything); - */ - -define(["jquery"], function($) { - var HesitateEvent = function(executeOnTimeOut, cancelSelector, onlyOnce) { - this.executeOnTimeOut = executeOnTimeOut; - this.cancelSelector = cancelSelector; - this.timeoutEventId = null; - this.originalEvent = null; - this.onlyOnce = (onlyOnce === true); - }; - - HesitateEvent.DURATION = 800; - - HesitateEvent.prototype.trigger = function(event) { - if (event.data.timeoutEventId == null) { - event.data.timeoutEventId = window.setTimeout( - function() { event.data.fireEvent(event); }, - HesitateEvent.DURATION); - event.data.originalEvent = event; - $(event.data.originalEvent.delegateTarget).on(event.data.cancelSelector, event.data, event.data.untrigger); - } - }; - - HesitateEvent.prototype.fireEvent = function(event) { - event.data.timeoutEventId = null; - $(event.data.originalEvent.delegateTarget).off(event.data.cancelSelector, event.data.untrigger); - if (event.data.onlyOnce) $(event.data.originalEvent.delegateTarget).off(event.data.originalEvent.type, event.data.trigger); - event.data.executeOnTimeOut(event.data.originalEvent); - }; - - HesitateEvent.prototype.untrigger = function(event) { - if (event.data.timeoutEventId) { - window.clearTimeout(event.data.timeoutEventId); - $(event.data.originalEvent.delegateTarget).off(event.data.cancelSelector, event.data.untrigger); - } - event.data.timeoutEventId = null; - }; - - return HesitateEvent; -}); diff --git a/cms/static/js/views/overview.js b/cms/static/js/views/overview.js index d111e2672d..c7902028e3 100644 --- a/cms/static/js/views/overview.js +++ b/cms/static/js/views/overview.js @@ -1,262 +1,322 @@ -CMS.Views.Draggabilly = { - droppableClasses: 'drop-target drop-target-prepend drop-target-before drop-target-after', +define(["jquery", "jquery.ui", "gettext", "js/views/feedback_notification", "draggabilly"], + function ($, ui, gettext, NotificationView, Draggabilly) { - /* - * Determine information about where to drop the currently dragged - * element. Returns the element to attach to and the method of - * attachment ('before', 'after', or 'prepend'). - */ - findDestination: function(ele) { - var eleY = ele.offset().top; - var containers = $(ele.data('droppable-class')); + var overviewDragger = { + droppableClasses: 'drop-target drop-target-prepend drop-target-before drop-target-after', + validDropClass: "valid-drop", + expandOnDropClass: "expand-on-drop", - for(var i = 0; i < containers.length; i++) { - var container = $(containers[i]); - // Exclude the 'new unit' buttons, and make sure we don't - // prepend an element to itself - var siblings = container.children().filter(function () { - return $(this).data('id') !== undefined && !$(this).is(ele); - }); - // If the container is collapsed, check to see if the - // element is on top of its parent list -- don't check the - // position of the container - var parentList = container.parents(ele.data('parent-location-selector')).first(); - if(parentList.hasClass('collapsed')) { - if(Math.abs(eleY - parentList.offset().top) < 50) { - return { - ele: container, - attachMethod: 'prepend', - parentList: parentList - }; - } - } - // Otherwise, do check the container - else { - // If the list is empty, we should prepend to it, - // unless both elements are at the same location -- - // this prevents the user from being unable to expand - // a section - var containerY = container.offset().top; - if(siblings.length == 0 && - containerY != eleY && - Math.abs(eleY - containerY) < 50) { - return { - ele: container, - attachMethod: 'prepend' - }; - } - // Otherwise the list is populated, and we should attach before/after a sibling - else { - for(var j = 0; j < siblings.length; j++) { - var $sibling = $(siblings[j]); - var siblingY = $sibling.offset().top; - // Subtract 1 to be sure that we test if this - // element is actually on top of the sibling, - // rather than next to it. This prevents - // saving when expanding/collapsing a list. - if(Math.abs(eleY - siblingY) < ele.height() - 1) { + /* + * Determine information about where to drop the currently dragged + * element. Returns the element to attach to and the method of + * attachment ('before', 'after', or 'prepend'). + */ + findDestination: function (ele, yChange) { + var eleY = ele.offset().top; + var containers = $(ele.data('droppable-class')); + + for (var i = 0; i < containers.length; i++) { + var container = $(containers[i]); + // Exclude the 'new unit' buttons, and make sure we don't + // prepend an element to itself + var siblings = container.children().filter(function () { + return $(this).data('id') !== undefined && !$(this).is(ele); + }); + // If the container is collapsed, check to see if the + // element is on top of its parent list -- don't check the + // position of the container + var parentList = container.parents(ele.data('parent-location-selector')).first(); + if (parentList.hasClass('collapsed')) { + if (Math.abs(eleY - parentList.offset().top) < 10) { return { - ele: $sibling, - attachMethod: siblingY > eleY ? 'before' : 'after' + ele: container, + attachMethod: 'prepend', + parentList: parentList }; } } + // Otherwise, do check the container + else { + // If the list is empty, we should prepend to it, + // unless both elements are at the same location -- + // this prevents the user from being unable to expand + // a section + var containerY = container.offset().top; + if (siblings.length == 0 && + containerY != eleY && + Math.abs(eleY - containerY) < 50) { + return { + ele: container, + attachMethod: 'prepend' + }; + } + // Otherwise the list is populated, and we should attach before/after a sibling + else { + for (var j = 0; j < siblings.length; j++) { + var $sibling = $(siblings[j]); + var siblingY = $sibling.offset().top; + var siblingHeight = $sibling.height(); + var siblingYEnd = siblingY + siblingHeight; + + // Facilitate dropping into the beginning or end of a list + // (coming from opposite direction) via a "fudge factor". Math.min is for Jasmine test. + var fudge = Math.min(Math.ceil(siblingHeight / 2), 20); + // Dragging up into end of list. + if (j == siblings.length - 1 && yChange < 0 && Math.abs(eleY - siblingYEnd) <= fudge) { + return { + ele: $sibling, + attachMethod: 'after' + }; + } + // Dragging down into beginning of list. + else if (j == 0 && yChange > 0 && Math.abs(eleY - siblingY) <= fudge) { + return { + ele: $sibling, + attachMethod: 'before' + }; + } + else if (eleY >= siblingY && eleY <= siblingYEnd) { + return { + ele: $sibling, + attachMethod: eleY - siblingY <= siblingHeight / 2 ? 'before' : 'after' + }; + } + } + } + } } - } - } - // Failed drag - return { - ele: null, - attachMethod: '' - } - }, + // Failed drag + return { + ele: null, + attachMethod: '' + } + }, - // Information about the current drag. - dragState: {}, + // Information about the current drag. + dragState: {}, - onDragStart: function(draggie, event, pointer) { - var ele = $(draggie.element); - this.dragState = { - // Which element will be dropped into/onto on success - dropDestination: null, - // Timer if we're hovering over a collapsed section - expandTimer: null, - // The list which will be expanded on hover - toExpand: null, - // How we attach to the destination: 'before', 'after', 'prepend' - attachMethod: '', - // If dragging to an empty section, the parent section - parentList: null - }; - }, + onDragStart: function (draggie, event, pointer) { + var ele = $(draggie.element); + this.dragState = { + // Which element will be dropped into/onto on success + dropDestination: null, + // How we attach to the destination: 'before', 'after', 'prepend' + attachMethod: '', + // If dragging to an empty section, the parent section + parentList: null, + // The y location of the last dragMove event (to determine direction). + lastY: 0, + // The direction the drag is moving in (negative means up, positive down). + dragDirection: 0 + }; + if (!ele.hasClass('collapsed')) { + ele.addClass('collapsed'); + ele.find('.expand-collapse-icon').addClass('expand').removeClass('collapse'); + // onDragStart gets called again after the collapse, so we can't just store a variable in the dragState. + ele.addClass(this.expandOnDropClass); + } + }, - onDragMove: function(draggie, event, pointer) { - var ele = $(draggie.element); - var destinationInfo = this.findDestination(ele); - var destinationEle = destinationInfo.ele; - var parentList = this.dragState.parentList = destinationInfo.parentList; - // Clear the timer if we're not hovering over any element - if(!parentList) { - clearTimeout(this.dragState.expandTimer); - } - // If we're hovering over a new element, clear the timer and - // set a new one - else if(!this.dragState.toExpand || parentList[0] !== this.dragState.toExpand[0]) { - clearTimeout(this.dragState.expandTimer); - this.dragState.expandTimer = setTimeout(function() { - parentList.removeClass('collapsed'); - parentList.find('.expand-collapse-icon').removeClass('expand').addClass('collapse'); - }, 400); - this.dragState.toExpand = parentList; - } - // Clear out the old destination - if(this.dragState.dropDestination) { - this.dragState.dropDestination.removeClass(this.droppableClasses); - } - // Mark the new destination - if(destinationEle) { - ele.addClass('valid-drop'); - destinationEle.addClass('drop-target drop-target-' + destinationInfo.attachMethod); - this.dragState.attachMethod = destinationInfo.attachMethod; - this.dragState.dropDestination = destinationEle; - } - }, + onDragMove: function (draggie, event, pointer) { + // Handle scrolling of the browser. + var scrollAmount = 0; + var dragBuffer = 10; + if (window.innerHeight - dragBuffer < pointer.clientY) { + scrollAmount = dragBuffer; + } + else if (dragBuffer > pointer.clientY) { + scrollAmount = -(dragBuffer); + } + if (scrollAmount !== 0) { + window.scrollBy(0, scrollAmount); + return; + } - onDragEnd: function(draggie, event, pointer) { - var ele = $(draggie.element); - var destination = this.dragState.dropDestination; + var yChange = draggie.dragPoint.y - this.dragState.lastY; + if (yChange !== 0) { + this.dragState.direction = yChange; + } + this.dragState.lastY = draggie.dragPoint.y; - // If the drag succeeded, rearrange the DOM and send the result. - if(destination && pointer.x >= ele.offset().left - && pointer.x < ele.offset().left + ele.width()) { - // Make sure we don't drop into a collapsed element - if(this.dragState.parentList) { - this.dragState.parentList.removeClass('collapsed'); - } - var method = this.dragState.attachMethod; - destination[method](ele); - this.handleReorder(ele); - ele.removeClass('valid-drop'); - } - // If the drag failed, send it back - else { - $('.was-dragging').removeClass('was-dragging'); - ele.addClass('was-dragging'); - } + var ele = $(draggie.element); + var destinationInfo = this.findDestination(ele, this.dragState.direction); + var destinationEle = destinationInfo.ele; + this.dragState.parentList = destinationInfo.parentList; - // Everything in its right place - ele.css({ - top: 'auto', - left: 'auto' - }); + // Clear out the old destination + if (this.dragState.dropDestination) { + this.dragState.dropDestination.removeClass(this.droppableClasses); + } + // Mark the new destination + if (destinationEle && this.pointerInBounds(pointer, ele)) { + ele.addClass(this.validDropClass); + destinationEle.addClass('drop-target drop-target-' + destinationInfo.attachMethod); + this.dragState.attachMethod = destinationInfo.attachMethod; + this.dragState.dropDestination = destinationEle; + } + else { + ele.removeClass(this.validDropClass); + this.dragState.attachMethod = ''; + this.dragState.dropDestination = null; + } + }, - // Clear dragging state in preparation for the next event. - if(this.dragState.dropDestination) { - this.dragState.dropDestination.removeClass(this.droppableClasses); - } - clearTimeout(this.dragState.expandTimer); - this.dragState = {}; - }, + onDragEnd: function (draggie, event, pointer) { + var ele = $(draggie.element); + var destination = this.dragState.dropDestination; - /* - * Find all parent-child changes and save them. - */ - handleReorder: function(ele) { - var parentSelector = ele.data('parent-location-selector'); - var childrenSelector = ele.data('child-selector'); - var newParentEle = ele.parents(parentSelector).first(); - var newParentID = newParentEle.data('id'); - var oldParentID = ele.data('parent-id'); - // If the parent has changed, update the children of the old parent. - if(oldParentID !== newParentID) { - // Find the old parent element. - var oldParentEle = $(parentSelector).filter(function() { - return $(this).data('id') === oldParentID; - }); - this.saveItem(oldParentEle, childrenSelector, function() { - ele.data('parent-id', newParentID); - }); - } - var saving = new CMS.Views.Notification.Mini({ - title: gettext('Saving…') - }); - saving.show(); - this.saveItem(newParentEle, childrenSelector, function() { - saving.hide(); - }); - }, + // Clear dragging state in preparation for the next event. + if (destination) { + destination.removeClass(this.droppableClasses); + } + ele.removeClass(this.validDropClass); - /* - * Actually save the update to the server. Takes the element - * representing the parent item to save, a CSS selector to find - * its children, and a success callback. - */ - saveItem: function(ele, childrenSelector, success) { - // Find all current child IDs. - var children = _.map( - ele.find(childrenSelector), - function(child) { - return $(child).data('id'); - } - ); - $.ajax({ - url: '/save_item', - type: 'POST', - dataType: 'json', - contentType: 'application/json', - data: JSON.stringify({ - id: ele.data('id'), - children: children - }), - success: success - }); - }, + // If the drag succeeded, rearrange the DOM and send the result. + if (destination && this.pointerInBounds(pointer, ele)) { + // Make sure we don't drop into a collapsed element + if (this.dragState.parentList) { + this.expandElement(this.dragState.parentList); + } + var method = this.dragState.attachMethod; + destination[method](ele); + this.handleReorder(ele); + } + // If the drag failed, send it back + else { + $('.was-dragging').removeClass('was-dragging'); + ele.addClass('was-dragging'); + } - /* - * Make `type` draggable using `handleClass`, able to be dropped - * into `droppableClass`, and with parent type - * `parentLocationSelector`. - */ - makeDraggable: function(type, handleClass, droppableClass, parentLocationSelector) { - _.each( - $(type), - function(ele) { - // Remember data necessary to reconstruct the parent-child relationships - $(ele).data('droppable-class', droppableClass); - $(ele).data('parent-location-selector', parentLocationSelector); - $(ele).data('child-selector', type); - var draggable = new Draggabilly(ele, { - handle: handleClass, - axis: 'y' + if (ele.hasClass(this.expandOnDropClass)) { + this.expandElement(ele); + ele.removeClass(this.expandOnDropClass); + } + + // Everything in its right place + ele.css({ + top: 'auto', + left: 'auto' }); - draggable.on('dragStart', _.bind(CMS.Views.Draggabilly.onDragStart, CMS.Views.Draggabilly)); - draggable.on('dragMove', _.bind(CMS.Views.Draggabilly.onDragMove, CMS.Views.Draggabilly)); - draggable.on('dragEnd', _.bind(CMS.Views.Draggabilly.onDragEnd, CMS.Views.Draggabilly)); - } - ); - } -}; -$(document).ready(function() { - // Section - CMS.Views.Draggabilly.makeDraggable( - '.courseware-section', - '.section-drag-handle', - '.courseware-overview', - 'article.courseware-overview' - ); - // Subsection - CMS.Views.Draggabilly.makeDraggable( - '.id-holder', - '.subsection-drag-handle', - '.subsection-list > ol', - '.courseware-section' - ); - // Unit - CMS.Views.Draggabilly.makeDraggable( - '.unit', - '.unit-drag-handle', - 'ol.sortable-unit-list', - 'li.branch, article.subsection-body' - ); -}); + this.dragState = {}; + }, + + pointerInBounds: function (pointer, ele) { + return pointer.clientX >= ele.offset().left && pointer.clientX < ele.offset().left + ele.width(); + }, + + expandElement: function (ele) { + ele.removeClass('collapsed'); + ele.find('.expand-collapse-icon').removeClass('expand').addClass('collapse'); + }, + + /* + * Find all parent-child changes and save them. + */ + handleReorder: function (ele) { + var parentSelector = ele.data('parent-location-selector'); + var childrenSelector = ele.data('child-selector'); + var newParentEle = ele.parents(parentSelector).first(); + var newParentID = newParentEle.data('id'); + var oldParentID = ele.data('parent-id'); + // If the parent has changed, update the children of the old parent. + if (oldParentID !== newParentID) { + // Find the old parent element. + var oldParentEle = $(parentSelector).filter(function () { + return $(this).data('id') === oldParentID; + }); + this.saveItem(oldParentEle, childrenSelector, function () { + ele.data('parent-id', newParentID); + }); + } + var saving = new NotificationView.Mini({ + title: gettext('Saving…') + }); + saving.show(); + ele.addClass('was-dropped'); + // Timeout interval has to match what is in the CSS. + setTimeout(function () { + ele.removeClass('was-dropped'); + }, 1000); + this.saveItem(newParentEle, childrenSelector, function () { + saving.hide(); + }); + }, + + /* + * Actually save the update to the server. Takes the element + * representing the parent item to save, a CSS selector to find + * its children, and a success callback. + */ + saveItem: function (ele, childrenSelector, success) { + // Find all current child IDs. + var children = _.map( + ele.find(childrenSelector), + function (child) { + return $(child).data('id'); + } + ); + $.ajax({ + url: '/save_item', + type: 'POST', + dataType: 'json', + contentType: 'application/json', + data: JSON.stringify({ + id: ele.data('id'), + children: children + }), + success: success + }); + }, + + /* + * Make `type` draggable using `handleClass`, able to be dropped + * into `droppableClass`, and with parent type + * `parentLocationSelector`. + */ + makeDraggable: function (type, handleClass, droppableClass, parentLocationSelector) { + _.each( + $(type), + function (ele) { + // Remember data necessary to reconstruct the parent-child relationships + $(ele).data('droppable-class', droppableClass); + $(ele).data('parent-location-selector', parentLocationSelector); + $(ele).data('child-selector', type); + var draggable = new Draggabilly(ele, { + handle: handleClass, + axis: 'y' + }); + draggable.on('dragStart', _.bind(overviewDragger.onDragStart, overviewDragger)); + draggable.on('dragMove', _.bind(overviewDragger.onDragMove, overviewDragger)); + draggable.on('dragEnd', _.bind(overviewDragger.onDragEnd, overviewDragger)); + } + ); + } + }; + + $(document).ready(function () { + // Section + overviewDragger.makeDraggable( + '.courseware-section', + '.section-drag-handle', + '.courseware-overview', + 'article.courseware-overview' + ); + // Subsection + overviewDragger.makeDraggable( + '.id-holder', + '.subsection-drag-handle', + '.subsection-list > ol', + '.courseware-section' + ); + // Unit + overviewDragger.makeDraggable( + '.unit', + '.unit-drag-handle', + 'ol.sortable-unit-list', + 'li.branch, article.subsection-body' + ); + }); + + return overviewDragger; + }); diff --git a/cms/static/js_test.yml b/cms/static/js_test.yml index f44d9dbbda..989441fdb6 100644 --- a/cms/static/js_test.yml +++ b/cms/static/js_test.yml @@ -51,6 +51,7 @@ lib_paths: - xmodule_js/common_static/js/vendor/CodeMirror/codemirror.js - xmodule_js/src/xmodule.js - xmodule_js/common_static/js/test/i18n.js + - xmodule_js/common_static/js/vendor/draggabilly.pkgd.js # Paths to source JavaScript files src_paths: diff --git a/cms/static/sass/_base.scss b/cms/static/sass/_base.scss index 93c2c0fa6f..7735a83297 100644 --- a/cms/static/sass/_base.scss +++ b/cms/static/sass/_base.scss @@ -528,9 +528,9 @@ p, ul, ol, dl { .new-subsection-item, .new-policy-item { @include grey-button; - margin: 5px 8px; - padding: 3px 10px 4px 10px; - font-size: 10px; + @include font-size(10); + margin: ($baseline/2); + padding: 3px ($baseline/2) 4px ($baseline/2); .new-folder-icon, .new-policy-icon, diff --git a/cms/static/sass/_shame.scss b/cms/static/sass/_shame.scss index 85d133af1f..3c765bea93 100644 --- a/cms/static/sass/_shame.scss +++ b/cms/static/sass/_shame.scss @@ -3,7 +3,7 @@ // ==================== // view - dashboard -body.dashboard { +.view-dashboard { // elements - authorship controls .wrapper-authorshiprights { @@ -22,6 +22,35 @@ body.dashboard { } } +// ==================== + +.view-unit { + + .unit-location .draggable-drop-indicator { + display: none; //needed to not show DnD UI (UI is shared across both views) + } +} + +// ==================== + +// needed to override ui-window styling for dragging state (outline selectors get too specific) +.courseware-section.is-dragging { + box-shadow: 0 1px 2px 0 $shadow-d1 !important; + border: 1px solid $gray-d3 !important; +} + +.courseware-section.is-dragging.valid-drop { + border-color: $blue-s1 !important; + box-shadow: 0 1px 2px 0 $blue-t2 !important; +} + +// ==================== + +// needed for poorly scoped margin rules on all content elements +.branch .sortable-unit-list { + margin-bottom: 0; +} + // yes we have no boldness today - need to fix the resets body strong, @@ -29,12 +58,13 @@ body b { font-weight: 700; } -// known things to do (paint the fence, sand the floor, wax on/off) // ==================== -// known things to do (paint the fence, sand the floor, wax on/off): +/* known things to do (paint the fence, sand the floor, wax on/off): -// * centralize and move form styling into forms.scss - cms/static/sass/views/_textbooks.scss and cms/static/sass/views/_settings.scss -// * move dialogue styles into cms/static/sass/elements/_modal.scss -// * use the @include placeholder Bourbon mixin (http://bourbon.io/docs/#placeholder) for any placeholder styling +* centralize and move form styling into forms.scss - cms/static/sass/views/_textbooks.scss and cms/static/sass/views/_settings.scss +* move dialogue styles into cms/static/sass/elements/_modal.scss +* use the @include placeholder Bourbon mixin (http://bourbon.io/docs/#placeholder) for any placeholder styling + +*/ diff --git a/cms/static/sass/_variables.scss b/cms/static/sass/_variables.scss index 18ecdf7fef..a3b6a90b5c 100644 --- a/cms/static/sass/_variables.scss +++ b/cms/static/sass/_variables.scss @@ -173,7 +173,8 @@ $tmg-f3: 0.125s; // ==================== // specific UI -$notification-height: ($baseline*10); +$ui-notification-height: ($baseline*10); +$ui-update-color: $blue-l4; // ==================== diff --git a/cms/static/sass/assets/_anims.scss b/cms/static/sass/assets/_anims.scss index 6e69f6c3df..8b66032e68 100644 --- a/cms/static/sass/assets/_anims.scss +++ b/cms/static/sass/assets/_anims.scss @@ -140,22 +140,22 @@ } 90% { - @include transform(translateY(-($notification-height))); + @include transform(translateY(-($ui-notification-height))); } 100% { - @include transform(translateY(-($notification-height*0.99))); + @include transform(translateY(-($ui-notification-height*0.99))); } } // notifications slide down @include keyframes(notificationSlideDown) { 0% { - @include transform(translateY(-($notification-height*0.99))); + @include transform(translateY(-($ui-notification-height*0.99))); } 10% { - @include transform(translateY(-($notification-height))); + @include transform(translateY(-($ui-notification-height))); } 100% { @@ -211,3 +211,39 @@ %anim-bounceOut { @include animation(bounceOut $tmg-f1 ease-in-out 1); } + + +// ==================== + + +// flash +@include keyframes(flash) { + 0%, 100% { + opacity: 1.0; + } + + 50% { + opacity: 0.0; + } +} + +// canned animation - use if you want out of the box/non-customized anim +%anim-flash { + @include animation(flash $tmg-f1 ease-in-out 1); +} + +// flash - double +@include keyframes(flashDouble) { +0%, 50%, 100% { + opacity: 1.0; +} + +25%, 75% { + opacity: 0.0; + } + } + +// canned animation - use if you want out of the box/non-customized anim +%anim-flashDouble { + @include animation(flashDouble $tmg-f1 ease-in-out 1); +} \ No newline at end of file diff --git a/cms/static/sass/elements/_controls.scss b/cms/static/sass/elements/_controls.scss index 3aa1d0ff8b..30a3a8561b 100644 --- a/cms/static/sass/elements/_controls.scss +++ b/cms/static/sass/elements/_controls.scss @@ -200,3 +200,83 @@ %view-live-button { @extend %t-action4; } + +// ==================== + +// UI: drag handles +.drag-handle { + + &:hover, &:focus { + cursor: move; + } +} + +// UI: elem is draggable +.is-draggable { + @include transition(border-color $tmg-f2 ease-in-out 0, box-shadow $tmg-f2 ease-in-out 0); + position: relative; + + .draggable-drop-indicator { + @extend %ui-depth3; + @include transition(opacity $tmg-f2 linear 0s); + @include size(100%, auto); + position: absolute; + border-top: 1px solid $blue-l1; + opacity: 0.0; + + *[class^="icon-caret"] { + @extend %t-icon5; + position: absolute; + top: -12px; + left: -($baseline/4); + color: $blue-s1; + } + } + + .draggable-drop-indicator-before { + top: -($baseline/2); + } + + .draggable-drop-indicator-after { + bottom: -($baseline/2); + } +} + +// UI: drag state - is dragging +.is-dragging { + @extend %ui-depth4; + left: -($baseline/4); + box-shadow: 0 1px 2px 0 $shadow-d1; + cursor: move; + opacity: 0.65; + border: 1px solid $gray-d3; + + // UI: condition - valid drop + &.valid-drop { + border-color: $blue-s1; + box-shadow: 0 1px 2px 0 $blue-t2; + } +} + +// UI: drag state - was dragging +.was-dragging { + @include transition(transform $tmg-f2 ease-in-out 0); +} + +// UI: drag target +.drop-target { + + &.drop-target-before { + + > .draggable-drop-indicator-before { + opacity: 1.0; + } + } + + &.drop-target-after { + + > .draggable-drop-indicator-after { + opacity: 1.0; + } + } +} diff --git a/cms/static/sass/elements/_system-feedback.scss b/cms/static/sass/elements/_system-feedback.scss index 188fd28251..6864d9ced4 100644 --- a/cms/static/sass/elements/_system-feedback.scss +++ b/cms/static/sass/elements/_system-feedback.scss @@ -712,7 +712,7 @@ // notification showing/hiding .wrapper-notification { - bottom: -($notification-height); + bottom: -($ui-notification-height); // varying animations &.is-shown { diff --git a/cms/static/sass/views/_outline.scss b/cms/static/sass/views/_outline.scss index 0f2625b497..7a787bb5f0 100644 --- a/cms/static/sass/views/_outline.scss +++ b/cms/static/sass/views/_outline.scss @@ -137,394 +137,388 @@ .courseware-section { - position: relative; - background: #fff; - border-radius: 3px; - border: 1px solid $mediumGrey; - margin-top: 15px; - padding-bottom: 12px; - box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1); + @extend %ui-window; + @include transition(background $tmg-avg ease-in-out 0); + position: relative; + margin-top: ($baseline); + padding-bottom: ($baseline/2); - &:first-child { - margin-top: 0; - } + &.collapsed { + padding-bottom: 0; + } - &.collapsed { - padding-bottom: 0; - } + label { + float: left; + line-height: 29px; + } - label { - float: left; - line-height: 29px; - } + .datepair { + float: left; + margin-left: 10px; + } - .datepair { - float: left; - margin-left: 10px; - } + .section-published-date { + position: absolute; + top: 19px; + right: 80px; + padding: 4px 10px; + border-radius: 3px; + background: $lightGrey; + text-align: right; - .section-published-date { - position: absolute; - top: 19px; - right: 80px; - padding: 4px 10px; + .published-status { + @include font-size(12); + margin-right: 15px; + + strong { + font-weight: bold; + } + } + + .schedule-button { + @include blue-button; + } + + .edit-button { + @include blue-button; + } + + .schedule-button, + .edit-button { + @include font-size(11); + padding: 3px 15px 5px; + } + } + + .datepair .date, + .datepair .time { + @include font-size(13); + box-shadow: none; + padding-left: 0; + padding-right: 0; + border: none; + background: none; + font-weight: bold; + color: $blue; + cursor: pointer; + } + + .datepair .date { + width: 80px; + } + + .datepair .time { + width: 65px; + } + + &.collapsed .subsection-list, + .collapsed .subsection-list, + .collapsed > ol { + display: none !important; + } + + header { + min-height: 75px; + @include clearfix(); + + .item-details, .section-published-date { + + } + + .item-details { + display: inline-block; + padding: 20px 0 10px 0; + @include clearfix(); + + .section-name { + @include font-size(19); + float: left; + margin-right: 10px; + width: 350px; + font-weight: bold; + color: $blue; + } + + .section-name-span { + @include transition(color $tmg-f2 linear 0s); + cursor: pointer; + + &:hover { + color: $orange; + } + } + + .section-name-edit { + position: relative; + width: 400px; + background: $white; + + input { + @include font-size(16); + } + + .save-button { + @include blue-button; + padding: 7px 20px 7px; + margin-right: 5px; + } + + .cancel-button { + @include white-button; + padding: 7px 20px 7px; + } + } + + .section-published-date { + float: right; border-radius: 3px; background: $lightGrey; - text-align: right; .published-status { - @include font-size(12); - margin-right: 15px; + @include font-size(12); + margin-right: 15px; - strong { - font-weight: bold; - } + strong { + font-weight: bold; + } } .schedule-button { - @include blue-button; + @include blue-button; } .edit-button { - @include blue-button; + @include blue-button; } .schedule-button, .edit-button { - @include font-size(11); - padding: 3px 15px 5px; - } - } - - .datepair .date, - .datepair .time { - @include font-size(13); - box-shadow: none; - padding-left: 0; - padding-right: 0; - border: none; - background: none; - font-weight: bold; - color: $blue; - cursor: pointer; - } - - .datepair .date { - width: 80px; - } - - .datepair .time { - width: 65px; - } - - &.collapsed .subsection-list, - .collapsed .subsection-list, - .collapsed > ol { - display: none !important; - } - - header { - min-height: 75px; - @include clearfix(); - - .item-details, .section-published-date { - + @include font-size(11); + padding: 0 15px 2px 15px; + } } - .item-details { - display: inline-block; - padding: 20px 0 10px 0; - @include clearfix(); + .gradable-status { + position: absolute; + top: 20px; + right: 70px; + width: 145px; - .section-name { - @include font-size(19); - float: left; - margin-right: 10px; - width: 350px; - font-weight: bold; + .status-label { + @include font-size(12); + border-radius: 3px; + position: absolute; + top: 0; + right: 2px; + display: none; + width: 100px; + padding: 10px 35px 10px 10px; + background: $lightGrey; + color: $lightGrey; + text-align: right; + font-weight: bold; + line-height: 16px; + } + + .menu-toggle { + z-index: 10; + position: absolute; + top: 2px; + right: 5px; + padding: 5px; + color: $lightGrey; + + &:hover, &.is-active { color: $blue; } - .section-name-span { - @include transition(color $tmg-f2 linear 0s); - cursor: pointer; - - &:hover { - color: $orange; - } - } - - .section-name-edit { - position: relative; - width: 400px; - background: $white; - - input { - @include font-size(16); } - .save-button { - @include blue-button; - padding: 7px 20px 7px; - margin-right: 5px; - } - - .cancel-button { - @include white-button; - padding: 7px 20px 7px; - } - } - - .section-published-date { - float: right; - border-radius: 3px; - background: $lightGrey; - - .published-status { + .menu { @include font-size(12); - margin-right: 15px; - - strong { - font-weight: bold; - } - } - - .schedule-button { - @include blue-button; - } - - .edit-button { - @include blue-button; - } - - .schedule-button, - .edit-button { - @include font-size(11); - padding: 0 15px 2px 15px; - } - } - - .gradable-status { + @include transition(opacity $tmg-f2 linear 0s, display $tmg-f2 linear 0s); + border-radius: 4px; + box-shadow: 0 1px 2px rgba(0, 0, 0, .2); + z-index: 1; + display: none; + opacity: 0.0; position: absolute; - top: 20px; - right: 70px; - width: 145px; - - .status-label { - @include font-size(12); - border-radius: 3px; - position: absolute; - top: 0; - right: 2px; - display: none; - width: 100px; - padding: 10px 35px 10px 10px; - background: $lightGrey; - color: $lightGrey; - text-align: right; - font-weight: bold; - line-height: 16px; - } - - .menu-toggle { - z-index: 10; - position: absolute; - top: 2px; - right: 5px; - padding: 5px; - color: $lightGrey; - - &:hover, &.is-active { - color: $blue; - } - - } - - .menu { - @include font-size(12); - @include transition(opacity $tmg-f2 linear 0s, display $tmg-f2 linear 0s); - border-radius: 4px; - box-shadow: 0 1px 2px rgba(0, 0, 0, .2); - z-index: 1; - display: none; - opacity: 0.0; - position: absolute; - top: -1px; - left: 2px; - margin: 0; - padding: 8px 12px; - background: $white; - border: 1px solid $mediumGrey; + top: -1px; + left: 2px; + margin: 0; + padding: 8px 12px; + background: $white; + border: 1px solid $mediumGrey; - li { - width: 115px; - margin-bottom: 3px; - padding-bottom: 3px; - border-bottom: 1px solid $lightGrey; + li { + width: 115px; + margin-bottom: 3px; + padding-bottom: 3px; + border-bottom: 1px solid $lightGrey; - &:last-child { - margin-bottom: 0; - padding-bottom: 0; - border: none; + &:last-child { + margin-bottom: 0; + padding-bottom: 0; + border: none; - a { - color: $darkGrey; - } + a { + color: $darkGrey; } } - - a { - - &.is-selected { - font-weight: bold; - } - } - } - - // dropdown state - &.is-active { - - .menu { - z-index: 1000; - display: block; - opacity: 1.0; } + a { - .menu-toggle { - z-index: 10000; - } + &.is-selected { + font-weight: bold; + } + } } - // set state - &.is-set { + // dropdown state + &.is-active { - .menu-toggle { - color: $blue; - } - - .status-label { + .menu { + z-index: 1000; display: block; - color: $blue; + opacity: 1.0; } - } - float: left; - padding: 21px 0 0; + + .menu-toggle { + z-index: 10000; + } } + + // set state + &.is-set { + + .menu-toggle { + color: $blue; + } + + .status-label { + display: block; + color: $blue; + } + } + + float: left; + padding: 21px 0 0; } + } - .item-actions { - margin-top: 21px; - margin-right: 12px; + .item-actions { + margin-top: 21px; + margin-right: 12px; - .edit-button, - .delete-button { - margin-top: -3px; - } - } - - .expand-collapse-icon { - @include transition(none); - float: left; - margin: 25px 6px 16px 16px; - - &.expand { - background-position: 0 0; - } - - &.collapsed { - - } - } - - .drag-handle { - margin-left: 11px; - } - } - - h3 { - @include font-size(19); - font-weight: 700; - color: $blue; - } - - .section-name-span { - @include transition(color $tmg-f2 linear 0s); - cursor: pointer; - - &:hover { - color: $orange; - } - } - - .section-name-form { - margin-bottom: 15px; - } - - .section-name-edit { - input { - @include font-size(16); - } - - .save-button { - @include blue-button; - padding: 7px 20px 7px; - margin-right: 5px; - } - - .cancel-button { - @include white-button; - padding: 7px 20px 7px; - } - } - - h4 { - @include font-size(12); - color: #878e9d; - - strong { - font-weight: bold; - } - } - - .list-header { - @include linear-gradient(top, transparent, rgba(0, 0, 0, .1)); - background-color: #ced2db; - border-radius: 3px 3px 0 0; - } - - .subsection-list { - margin: 0 12px; - - > ol { - @include tree-view; - border-top-width: 0; - } - } - - &.new-section { - - header { - @include clearfix(); - height: auto; - } - - .expand-collapse-icon { - visibility: hidden; - } - - .item-details { - padding: 25px 0 0 0; - - .section-name { - float: none; - width: 100%; + .edit-button, + .delete-button { + margin-top: -3px; } + } + + .expand-collapse-icon { + @include transition(none); + float: left; + margin: 25px 6px 16px 16px; + + &.expand { + background-position: 0 0; + } + + &.collapsed { + + } + } + + .drag-handle { + margin-left: 11px; + } + } + + h3 { + @include font-size(19); + font-weight: 700; + color: $blue; + } + + .section-name-span { + @include transition(color $tmg-f2 linear 0s); + cursor: pointer; + + &:hover { + color: $orange; + } + } + + .section-name-form { + margin-bottom: 15px; + } + + .section-name-edit { + input { + @include font-size(16); + } + + .save-button { + @include blue-button; + padding: 7px 20px 7px; + margin-right: 5px; + } + + .cancel-button { + @include white-button; + padding: 7px 20px 7px; + } + } + + h4 { + @include font-size(12); + color: #878e9d; + + strong { + font-weight: bold; + } + } + + .list-header { + @include linear-gradient(top, transparent, rgba(0, 0, 0, .1)); + background-color: #ced2db; + border-radius: 3px 3px 0 0; + } + + .subsection-list { + margin: 0 12px; + + > ol { + @include tree-view; + border-top-width: 0; + } + } + + &.new-section { + + header { + @include clearfix(); + height: auto; + } + + .expand-collapse-icon { + visibility: hidden; + } + + .item-details { + padding: 25px 0 0 0; + + .section-name { + float: none; + width: 100%; } - } + } + } } .toggle-button-sections { @@ -675,36 +669,75 @@ color: $darkGrey; } - // ==================== + // UI: DnD - specific elems/cases - section + .courseware-section { - // UI: drag handles - .section-drag-handle, .draggable { + .draggable-drop-indicator-before { + top: -($baseline/2); + } - &:hover, &:focus { - cursor: move; + .draggable-drop-indicator-after { + bottom: -13px; + } + + // CASE: DnD - empty subsection with unit dropping + .drop-target-prepend .draggable-drop-indicator-initial { + opacity: 1.0; + } + + // STATE: was dropped + &.was-dropped { + background-color: $ui-update-color; } } - // UI: drag states - .is-dragging { - @extend .ui-depth4; - box-shadow: 0 1px 2px 0 $blue-t2; - cursor: move; - opacity: 0.80; - border-color: $blue; + // UI: DnD - specific elems/cases - subsection + .courseware-subsection { + + .draggable-drop-indicator-before { + top: 0; + } + + .draggable-drop-indicator-after { + bottom: 0; + } + + // CASE: DnD - empty subsection with unit dropping + .drop-target-prepend .draggable-drop-indicator-initial { + opacity: 1.0; + } + + // STATE: was dropped + &.was-dropped { + + > .section-item { + background-color: $ui-update-color !important; // nasty, but needed for specificity + } + } } - // UI: drag target - .drop-target { - background: $blue-t0 !important; + // UI: DnD - specific elems/cases - unit + .courseware-unit { - - &.drop-target-before { - border-top: ($baseline/5) solid $blue; + .draggable-drop-indicator-before { + top: 0; } - &.drop-target-after { - border-bottom: ($baseline/5) solid $blue; + .draggable-drop-indicator-after { + bottom: 0; } + + // STATE: was dropped + &.was-dropped { + + > .section-item { + background-color: $ui-update-color !important; // nasty, but needed for specificity + } + } + } + + // UI: DnD - specific elems/cases - empty parents splint + .ui-splint-indicator { + position: relative; } } diff --git a/cms/static/sass/views/_subsection.scss b/cms/static/sass/views/_subsection.scss index 97353d919b..d6da939115 100644 --- a/cms/static/sass/views/_subsection.scss +++ b/cms/static/sass/views/_subsection.scss @@ -400,4 +400,21 @@ } } } + + // UI: DnD - specific elems/cases - units + .courseware-unit { + + .draggable-drop-indicator-before { + top: 0; + } + + .draggable-drop-indicator-after { + bottom: 0; + } + } + + // UI: DnD - specific elems/cases - empty parents initial drop indicator + .draggable-drop-indicator-initial { + display: none; + } } diff --git a/cms/static/sass/views/_unit.scss b/cms/static/sass/views/_unit.scss index 9a4eb16e52..7c8a531cdc 100644 --- a/cms/static/sass/views/_unit.scss +++ b/cms/static/sass/views/_unit.scss @@ -415,6 +415,19 @@ body.course.unit,.view-unit { margin-left: 0; } } + + // UI: DnD - specific elems/cases - unit + .courseware-unit { + + // STATE: was dropped + &.was-dropped { + + > .section-item { + background-color: $ui-update-color !important; // nasty, but needed for specificity + } + } + } + // ==================== // Component Editing diff --git a/cms/templates/base.html b/cms/templates/base.html index a27cac7760..e8e92e2b6b 100644 --- a/cms/templates/base.html +++ b/cms/templates/base.html @@ -65,7 +65,8 @@ var require = { "jquery.tinymce": "js/vendor/tiny_mce/jquery.tinymce", "mathjax": "https://edx-static.s3.amazonaws.com/mathjax-MathJax-727332c/MathJax.js?config=TeX-MML-AM_HTMLorMML-full", "xmodule": "/xmodule/xmodule", - "utility": "js/src/utility" + "utility": "js/src/utility", + "draggabilly": "js/vendor/draggabilly.pkgd" }, shim: { "gettext": { diff --git a/cms/templates/component.html b/cms/templates/component.html index 7496e85b18..07ab92c592 100644 --- a/cms/templates/component.html +++ b/cms/templates/component.html @@ -31,6 +31,6 @@ ${_("Edit")} ${_("Delete")} - + ${preview} diff --git a/cms/templates/overview.html b/cms/templates/overview.html index ee445041f0..f075fd4e17 100644 --- a/cms/templates/overview.html +++ b/cms/templates/overview.html @@ -82,7 +82,7 @@ require(["domReady!", "jquery", "js/models/location", "js/models/section", "js/v
        - +
        @@ -140,8 +140,11 @@ require(["domReady!", "jquery", "js/models/location", "js/models/section", "js/v
        % for section in sections: -
        -
        +
        + + <%include file="widgets/_ui-dnd-indicator-before.html" /> + +
        @@ -169,6 +172,7 @@ require(["domReady!", "jquery", "js/models/location", "js/models/section", "js/v
        +
        @@ -177,10 +181,13 @@ require(["domReady!", "jquery", "js/models/location", "js/models/section", "js/v ${_("New Subsection")}
        -
          +
            % for subsection in section.get_children(): - % endfor +
          1. + <%include file="widgets/_ui-dnd-indicator-initial.html" /> +
        + + <%include file="widgets/_ui-dnd-indicator-after.html" /> % endfor diff --git a/cms/templates/settings_discussions_faculty.html b/cms/templates/settings_discussions_faculty.html deleted file mode 100644 index a3c57860b8..0000000000 --- a/cms/templates/settings_discussions_faculty.html +++ /dev/null @@ -1,429 +0,0 @@ -<%! from django.utils.translation import ugettext as _ %> - -<%inherit file="base.html" /> -<%block name="title">${_("Schedule and details")} -<%block name="bodyclass">is-signedin course view-settings - - -<%namespace name='static' file='static_content.html'/> -<%! -from contentstore import utils -%> - - -<%block name="jsextra"> - - - - - - -<%block name="content"> - -
        -
        -

        ${_("Settings")}

        -
        -
        - -
        -

        ${_("Faculty")}

        - -
        -
        -

        ${_("Faculty Members")}

        - ${_("Individuals instructing and helping with this course")} -
        - -
        -
        -
          -
        • -
          - -
          - -
          -
          - -
          - -
          - -
          -
          - -
          - -
          -
          -
          - ${_("Delete Faculty Photo")} -
          -
          -
          -
          - -
          - -
          - - ${_("A brief description of your education, experience, and expertise")} -
          -
          - - ${_("Delete Faculty Member")} -
          • - -
        • -
          - -
          - -
          -
          - -
          - -
          - -
          -
          - -
          - -
          -
          - - ${_("Upload Faculty Photo")} - - ${_("Max size: 30KB")} -
          -
          -
          - -
          - -
          -
          - - ${_("A brief description of your education, experience, and expertise")} -
          -
          -
          -
          • -
        - - - ${_("New Faculty Member")} - -
        -
        -
        - -
        - -
        -

        ${_("Problems")}

        - -
        -
        -

        ${_("General Settings")}

        - ${_("Course-wide settings for all problems")} -
        - -
        -

        ${_("Problem Randomization:")}

        - -
        -
        - - -
        - - ${_("randomize all problems")} -
        -
        - -
        - - -
        - - ${_("do not randomize problems")} -
        -
        - -
        - - -
        - - ${_("randomize problems per student")} -
        -
        -
        -
        - -
        -

        ${_("Show Answers:")}

        - -
        -
        - - -
        - - ${_("Answers will be shown after the number of attempts has been met")} -
        -
        - -
        - - -
        - - ${_("Answers will never be shown, regardless of attempts")} -
        -
        -
        -
        - -
        - - -
        -
        - - ${_('Students will this have this number of chances to answer a problem. To set infinite atttempts, use "0"')} -
        -
        -
        -
        - -
        -
        -

        [${_("Assignment Type Name")}]

        -
        - -
        -

        ${_("Problem Randomization:")}

        - -
        -
        - - -
        - - ${_("randomize all problems")} -
        -
        - -
        - - -
        - - ${_("do not randomize problems")} -
        -
        - -
        - - -
        - - ${_("randomize problems per student")} -
        -
        -
        -
        - -
        -

        ${_("Show Answers:")}

        - -
        -
        - - -
        - - ${_("Answers will be shown after the number of attempts has been met")} -
        -
        - -
        - - -
        - - ${_("Answers will never be shown, regardless of attempts")} -
        -
        -
        -
        - -
        - - -
        -
        - - ${_('Students will this have this number of chances to answer a problem. To set infinite atttempts, use "0"')} -
        -
        -
        -
        -
        - -
        -

        ${_("Discussions")}

        - -
        -
        -

        ${_("General Settings")}

        - ${_("Course-wide settings for online discussion")} -
        - -
        -

        ${_("Anonymous Discussions:")}

        - -
        -
        - - -
        - - ${_("Students and faculty will be able to post anonymously")} -
        -
        - -
        - - -
        - - ${_("Posting anonymously is not allowed. Any previous anonymous posts will be reverted to non-anonymous")} -
        -
        -
        -
        - -
        -

        ${_("Anonymous Discussions:")}

        - -
        -
        - - -
        - - ${_("Students and faculty will be able to post anonymously")} -
        -
        - -
        - - -
        - - ${_("This option is disabled since there are previous discussions that are anonymous.")} -
        -
        -
        -
        - -
        -

        ${_("Discussion Categories")}

        - -
        - - - - ${_("New Discussion Category")} - -
        -
        -
        -
        -
        -
        -
        -
        -
        - diff --git a/cms/templates/static-pages.html b/cms/templates/static-pages.html index 4086f55e09..ce1307905c 100644 --- a/cms/templates/static-pages.html +++ b/cms/templates/static-pages.html @@ -18,21 +18,21 @@ ${_("Course Info")}
        - +
      1. ${_("Textbook")}
        - +
      2. ${_("Syllabus")}
        - +
        3. diff --git a/cms/templates/widgets/_ui-dnd-indicator-after.html b/cms/templates/widgets/_ui-dnd-indicator-after.html new file mode 100644 index 0000000000..256e7926ff --- /dev/null +++ b/cms/templates/widgets/_ui-dnd-indicator-after.html @@ -0,0 +1 @@ + diff --git a/cms/templates/widgets/_ui-dnd-indicator-before.html b/cms/templates/widgets/_ui-dnd-indicator-before.html new file mode 100644 index 0000000000..e76f19c043 --- /dev/null +++ b/cms/templates/widgets/_ui-dnd-indicator-before.html @@ -0,0 +1 @@ + diff --git a/cms/templates/widgets/_ui-dnd-indicator-initial.html b/cms/templates/widgets/_ui-dnd-indicator-initial.html new file mode 100644 index 0000000000..5ab8fddfe2 --- /dev/null +++ b/cms/templates/widgets/_ui-dnd-indicator-initial.html @@ -0,0 +1 @@ + diff --git a/cms/templates/widgets/units.html b/cms/templates/widgets/units.html index 3e913eb01f..c4409b92b6 100644 --- a/cms/templates/widgets/units.html +++ b/cms/templates/widgets/units.html @@ -11,7 +11,10 @@ This def will enumerate through a passed in subsection and list all of the units subsection_units = subsection.get_children() %> % for unit in subsection_units: -
      3. +
      4. + + <%include file="_ui-dnd-indicator-before.html" /> + <% unit_state = compute_unit_state(unit) if unit.location == selected: @@ -19,7 +22,7 @@ This def will enumerate through a passed in subsection and list all of the units else: selected_class = '' %> -
        +
        ${unit.display_name_with_default} @@ -27,12 +30,17 @@ This def will enumerate through a passed in subsection and list all of the units % if actions:
        +
        % endif
        + + <%include file="_ui-dnd-indicator-after.html" />
        5. % endfor
      5. + <%include file="_ui-dnd-indicator-initial.html" /> + New Unit diff --git a/common/static/js/vendor/draggabilly.pkgd.js b/common/static/js/vendor/draggabilly.pkgd.js index 6091fd6926..75337fd1a3 100644 --- a/common/static/js/vendor/draggabilly.pkgd.js +++ b/common/static/js/vendor/draggabilly.pkgd.js @@ -19,69 +19,69 @@ ( function( window ) { -'use strict'; + 'use strict'; // class helper functions from bonzo https://github.com/ded/bonzo -function classReg( className ) { - return new RegExp("(^|\\s+)" + className + "(\\s+|$)"); -} + function classReg( className ) { + return new RegExp("(^|\\s+)" + className + "(\\s+|$)"); + } // classList support for class management // altho to be fair, the api sucks because it won't accept multiple classes at once -var hasClass, addClass, removeClass; + var hasClass, addClass, removeClass; -if ( 'classList' in document.documentElement ) { - hasClass = function( elem, c ) { - return elem.classList.contains( c ); - }; - addClass = function( elem, c ) { - elem.classList.add( c ); - }; - removeClass = function( elem, c ) { - elem.classList.remove( c ); - }; -} -else { - hasClass = function( elem, c ) { - return classReg( c ).test( elem.className ); - }; - addClass = function( elem, c ) { - if ( !hasClass( elem, c ) ) { - elem.className = elem.className + ' ' + c; + if ( 'classList' in document.documentElement ) { + hasClass = function( elem, c ) { + return elem.classList.contains( c ); + }; + addClass = function( elem, c ) { + elem.classList.add( c ); + }; + removeClass = function( elem, c ) { + elem.classList.remove( c ); + }; + } + else { + hasClass = function( elem, c ) { + return classReg( c ).test( elem.className ); + }; + addClass = function( elem, c ) { + if ( !hasClass( elem, c ) ) { + elem.className = elem.className + ' ' + c; + } + }; + removeClass = function( elem, c ) { + elem.className = elem.className.replace( classReg( c ), ' ' ); + }; } - }; - removeClass = function( elem, c ) { - elem.className = elem.className.replace( classReg( c ), ' ' ); - }; -} -function toggleClass( elem, c ) { - var fn = hasClass( elem, c ) ? removeClass : addClass; - fn( elem, c ); -} + function toggleClass( elem, c ) { + var fn = hasClass( elem, c ) ? removeClass : addClass; + fn( elem, c ); + } -var classie = { - // full names - hasClass: hasClass, - addClass: addClass, - removeClass: removeClass, - toggleClass: toggleClass, - // short names - has: hasClass, - add: addClass, - remove: removeClass, - toggle: toggleClass -}; + var classie = { + // full names + hasClass: hasClass, + addClass: addClass, + removeClass: removeClass, + toggleClass: toggleClass, + // short names + has: hasClass, + add: addClass, + remove: removeClass, + toggle: toggleClass + }; // transport -if ( typeof define === 'function' && define.amd ) { - // AMD - define( classie ); -} else { - // browser global - window.classie = classie; -} + if ( typeof define === 'function' && define.amd ) { + // AMD + define("classie", classie); + } else { + // browser global + window.classie = classie; + } })( window ); @@ -97,518 +97,532 @@ if ( typeof define === 'function' && define.amd ) { ( function( window ) { -'use strict'; + 'use strict'; -var docElem = document.documentElement; + var docElem = document.documentElement; -var bind = function() {}; + var bind = function() {}; -if ( docElem.addEventListener ) { - bind = function( obj, type, fn ) { - obj.addEventListener( type, fn, false ); - }; -} else if ( docElem.attachEvent ) { - bind = function( obj, type, fn ) { - obj[ type + fn ] = fn.handleEvent ? - function() { - var event = window.event; - // add event.target - event.target = event.target || event.srcElement; - fn.handleEvent.call( fn, event ); - } : - function() { - var event = window.event; - // add event.target - event.target = event.target || event.srcElement; - fn.call( obj, event ); - }; - obj.attachEvent( "on" + type, obj[ type + fn ] ); - }; -} - -var unbind = function() {}; - -if ( docElem.removeEventListener ) { - unbind = function( obj, type, fn ) { - obj.removeEventListener( type, fn, false ); - }; -} else if ( docElem.detachEvent ) { - unbind = function( obj, type, fn ) { - obj.detachEvent( "on" + type, obj[ type + fn ] ); - try { - delete obj[ type + fn ]; - } catch ( err ) { - // can't delete window object properties - obj[ type + fn ] = undefined; + if ( docElem.addEventListener ) { + bind = function( obj, type, fn ) { + obj.addEventListener( type, fn, false ); + }; + } else if ( docElem.attachEvent ) { + bind = function( obj, type, fn ) { + obj[ type + fn ] = fn.handleEvent ? + function() { + var event = window.event; + // add event.target + event.target = event.target || event.srcElement; + fn.handleEvent.call( fn, event ); + } : + function() { + var event = window.event; + // add event.target + event.target = event.target || event.srcElement; + fn.call( obj, event ); + }; + obj.attachEvent( "on" + type, obj[ type + fn ] ); + }; } - }; -} -var eventie = { - bind: bind, - unbind: unbind -}; + var unbind = function() {}; + + if ( docElem.removeEventListener ) { + unbind = function( obj, type, fn ) { + obj.removeEventListener( type, fn, false ); + }; + } else if ( docElem.detachEvent ) { + unbind = function( obj, type, fn ) { + obj.detachEvent( "on" + type, obj[ type + fn ] ); + try { + delete obj[ type + fn ]; + } catch ( err ) { + // can't delete window object properties + obj[ type + fn ] = undefined; + } + }; + } + + var eventie = { + bind: bind, + unbind: unbind + }; // transport -if ( typeof define === 'function' && define.amd ) { - // AMD - define( eventie ); -} else { - // browser global - window.eventie = eventie; -} + if ( typeof define === 'function' && define.amd ) { + // AMD + define("eventie", eventie); + } else { + // browser global + window.eventie = eventie; + } })( this ); /*! - * docReady - * Cross browser DOMContentLoaded event emitter - */ - -/*jshint browser: true, strict: true, undef: true, unused: true*/ -/*global define: false */ - -( function( window ) { - -'use strict'; - -var document = window.document; -// collection of functions to be triggered on ready -var queue = []; - -function docReady( fn ) { - // throw out non-functions - if ( typeof fn !== 'function' ) { - return; - } - - if ( docReady.isReady ) { - // ready now, hit it - fn(); - } else { - // queue function when ready - queue.push( fn ); - } -} - -docReady.isReady = false; - -// triggered on various doc ready events -function init( event ) { - // bail if IE8 document is not ready just yet - var isIE8NotReady = event.type === 'readystatechange' && document.readyState !== 'complete'; - if ( docReady.isReady || isIE8NotReady ) { - return; - } - docReady.isReady = true; - - // process queue - for ( var i=0, len = queue.length; i < len; i++ ) { - var fn = queue[i]; - fn(); - } -} - -function defineDocReady( eventie ) { - eventie.bind( document, 'DOMContentLoaded', init ); - eventie.bind( document, 'readystatechange', init ); - eventie.bind( window, 'load', init ); - - return docReady; -} - -// transport -if ( typeof define === 'function' && define.amd ) { - // AMD - define( [ 'eventie' ], defineDocReady ); -} else { - // browser global - window.docReady = defineDocReady( window.eventie ); -} - -})( this ); - -/*! - * EventEmitter v4.1.1 - git.io/ee + * EventEmitter v4.2.4 - git.io/ee * Oliver Caldwell * MIT license * @preserve */ -(function (exports) { - // Place the script in strict mode - 'use strict'; +(function () { + 'use strict'; - /** - * Class for managing events. - * Can be extended to provide event functionality in other classes. - * - * @class Manages event registering and emitting. - */ - function EventEmitter() {} + /** + * Class for managing events. + * Can be extended to provide event functionality in other classes. + * + * @class EventEmitter Manages event registering and emitting. + */ + function EventEmitter() {} - // Shortcuts to improve speed and size + // Shortcuts to improve speed and size - // Easy access to the prototype - var proto = EventEmitter.prototype, - nativeIndexOf = Array.prototype.indexOf ? true : false; + // Easy access to the prototype + var proto = EventEmitter.prototype; - /** - * Finds the index of the listener for the event in it's storage array. - * - * @param {Function} listener Method to look for. - * @param {Function[]} listeners Array of listeners to search through. - * @return {Number} Index of the specified listener, -1 if not found - * @api private - */ - function indexOfListener(listener, listeners) { - // Return the index via the native method if possible - if (nativeIndexOf) { - return listeners.indexOf(listener); - } + /** + * Finds the index of the listener for the event in it's storage array. + * + * @param {Function[]} listeners Array of listeners to search through. + * @param {Function} listener Method to look for. + * @return {Number} Index of the specified listener, -1 if not found + * @api private + */ + function indexOfListener(listeners, listener) { + var i = listeners.length; + while (i--) { + if (listeners[i].listener === listener) { + return i; + } + } - // There is no native method - // Use a manual loop to find the index - var i = listeners.length; - while (i--) { - // If the listener matches, return it's index - if (listeners[i] === listener) { - return i; - } - } + return -1; + } - // Default to returning -1 - return -1; - } + /** + * Alias a method while keeping the context correct, to allow for overwriting of target method. + * + * @param {String} name The name of the target method. + * @return {Function} The aliased method + * @api private + */ + function alias(name) { + return function aliasClosure() { + return this[name].apply(this, arguments); + }; + } - /** - * Fetches the events object and creates one if required. - * - * @return {Object} The events storage object. - * @api private - */ - proto._getEvents = function () { - return this._events || (this._events = {}); - }; + /** + * Returns the listener array for the specified event. + * Will initialise the event object and listener arrays if required. + * Will return an object if you use a regex search. The object contains keys for each matched event. So /ba[rz]/ might return an object containing bar and baz. But only if you have either defined them with defineEvent or added some listeners to them. + * Each property in the object response is an array of listener functions. + * + * @param {String|RegExp} evt Name of the event to return the listeners from. + * @return {Function[]|Object} All listener functions for the event. + */ + proto.getListeners = function getListeners(evt) { + var events = this._getEvents(); + var response; + var key; - /** - * Returns the listener array for the specified event. - * Will initialise the event object and listener arrays if required. - * Will return an object if you use a regex search. The object contains keys for each matched event. So /ba[rz]/ might return an object containing bar and baz. But only if you have either defined them with defineEvent or added some listeners to them. - * Each property in the object response is an array of listener functions. - * - * @param {String|RegExp} evt Name of the event to return the listeners from. - * @return {Function[]|Object} All listener functions for the event. - */ - proto.getListeners = function (evt) { - // Create a shortcut to the storage object - // Initialise it if it does not exists yet - var events = this._getEvents(), - response, - key; + // Return a concatenated array of all matching events if + // the selector is a regular expression. + if (typeof evt === 'object') { + response = {}; + for (key in events) { + if (events.hasOwnProperty(key) && evt.test(key)) { + response[key] = events[key]; + } + } + } + else { + response = events[evt] || (events[evt] = []); + } - // Return a concatenated array of all matching events if - // the selector is a regular expression. - if (typeof evt === 'object') { - response = {}; - for (key in events) { - if (events.hasOwnProperty(key) && evt.test(key)) { - response[key] = events[key]; - } - } - } - else { - response = events[evt] || (events[evt] = []); - } + return response; + }; - return response; - }; + /** + * Takes a list of listener objects and flattens it into a list of listener functions. + * + * @param {Object[]} listeners Raw listener objects. + * @return {Function[]} Just the listener functions. + */ + proto.flattenListeners = function flattenListeners(listeners) { + var flatListeners = []; + var i; - /** - * Fetches the requested listeners via getListeners but will always return the results inside an object. This is mainly for internal use but others may find it useful. - * - * @param {String|RegExp} evt Name of the event to return the listeners from. - * @return {Object} All listener functions for an event in an object. - */ - proto.getListenersAsObject = function (evt) { - var listeners = this.getListeners(evt), - response; + for (i = 0; i < listeners.length; i += 1) { + flatListeners.push(listeners[i].listener); + } - if (listeners instanceof Array) { - response = {}; - response[evt] = listeners; - } + return flatListeners; + }; - return response || listeners; - }; + /** + * Fetches the requested listeners via getListeners but will always return the results inside an object. This is mainly for internal use but others may find it useful. + * + * @param {String|RegExp} evt Name of the event to return the listeners from. + * @return {Object} All listener functions for an event in an object. + */ + proto.getListenersAsObject = function getListenersAsObject(evt) { + var listeners = this.getListeners(evt); + var response; - /** - * Adds a listener function to the specified event. - * The listener will not be added if it is a duplicate. - * If the listener returns true then it will be removed after it is called. - * If you pass a regular expression as the event name then the listener will be added to all events that match it. - * - * @param {String|RegExp} evt Name of the event to attach the listener to. - * @param {Function} listener Method to be called when the event is emitted. If the function returns true then it will be removed after calling. - * @return {Object} Current instance of EventEmitter for chaining. - */ - proto.addListener = function (evt, listener) { - var listeners = this.getListenersAsObject(evt), - key; + if (listeners instanceof Array) { + response = {}; + response[evt] = listeners; + } - for (key in listeners) { - if (listeners.hasOwnProperty(key) && - indexOfListener(listener, listeners[key]) === -1) { - listeners[key].push(listener); - } - } + return response || listeners; + }; - // Return the instance of EventEmitter to allow chaining - return this; - }; + /** + * Adds a listener function to the specified event. + * The listener will not be added if it is a duplicate. + * If the listener returns true then it will be removed after it is called. + * If you pass a regular expression as the event name then the listener will be added to all events that match it. + * + * @param {String|RegExp} evt Name of the event to attach the listener to. + * @param {Function} listener Method to be called when the event is emitted. If the function returns true then it will be removed after calling. + * @return {Object} Current instance of EventEmitter for chaining. + */ + proto.addListener = function addListener(evt, listener) { + var listeners = this.getListenersAsObject(evt); + var listenerIsWrapped = typeof listener === 'object'; + var key; - /** - * Alias of addListener - */ - proto.on = proto.addListener; + for (key in listeners) { + if (listeners.hasOwnProperty(key) && indexOfListener(listeners[key], listener) === -1) { + listeners[key].push(listenerIsWrapped ? listener : { + listener: listener, + once: false + }); + } + } - /** - * Defines an event name. This is required if you want to use a regex to add a listener to multiple events at once. If you don't do this then how do you expect it to know what event to add to? Should it just add to every possible match for a regex? No. That is scary and bad. - * You need to tell it what event names should be matched by a regex. - * - * @param {String} evt Name of the event to create. - * @return {Object} Current instance of EventEmitter for chaining. - */ - proto.defineEvent = function (evt) { - this.getListeners(evt); - return this; - }; + return this; + }; - /** - * Uses defineEvent to define multiple events. - * - * @param {String[]} evts An array of event names to define. - * @return {Object} Current instance of EventEmitter for chaining. - */ - proto.defineEvents = function (evts) - { - for (var i = 0; i < evts.length; i += 1) { - this.defineEvent(evts[i]); - } - return this; - }; + /** + * Alias of addListener + */ + proto.on = alias('addListener'); - /** - * Removes a listener function from the specified event. - * When passed a regular expression as the event name, it will remove the listener from all events that match it. - * - * @param {String|RegExp} evt Name of the event to remove the listener from. - * @param {Function} listener Method to remove from the event. - * @return {Object} Current instance of EventEmitter for chaining. - */ - proto.removeListener = function (evt, listener) { - var listeners = this.getListenersAsObject(evt), - index, - key; + /** + * Semi-alias of addListener. It will add a listener that will be + * automatically removed after it's first execution. + * + * @param {String|RegExp} evt Name of the event to attach the listener to. + * @param {Function} listener Method to be called when the event is emitted. If the function returns true then it will be removed after calling. + * @return {Object} Current instance of EventEmitter for chaining. + */ + proto.addOnceListener = function addOnceListener(evt, listener) { + return this.addListener(evt, { + listener: listener, + once: true + }); + }; - for (key in listeners) { - if (listeners.hasOwnProperty(key)) { - index = indexOfListener(listener, listeners[key]); + /** + * Alias of addOnceListener. + */ + proto.once = alias('addOnceListener'); - if (index !== -1) { - listeners[key].splice(index, 1); - } - } - } + /** + * Defines an event name. This is required if you want to use a regex to add a listener to multiple events at once. If you don't do this then how do you expect it to know what event to add to? Should it just add to every possible match for a regex? No. That is scary and bad. + * You need to tell it what event names should be matched by a regex. + * + * @param {String} evt Name of the event to create. + * @return {Object} Current instance of EventEmitter for chaining. + */ + proto.defineEvent = function defineEvent(evt) { + this.getListeners(evt); + return this; + }; - // Return the instance of EventEmitter to allow chaining - return this; - }; + /** + * Uses defineEvent to define multiple events. + * + * @param {String[]} evts An array of event names to define. + * @return {Object} Current instance of EventEmitter for chaining. + */ + proto.defineEvents = function defineEvents(evts) { + for (var i = 0; i < evts.length; i += 1) { + this.defineEvent(evts[i]); + } + return this; + }; - /** - * Alias of removeListener - */ - proto.off = proto.removeListener; + /** + * Removes a listener function from the specified event. + * When passed a regular expression as the event name, it will remove the listener from all events that match it. + * + * @param {String|RegExp} evt Name of the event to remove the listener from. + * @param {Function} listener Method to remove from the event. + * @return {Object} Current instance of EventEmitter for chaining. + */ + proto.removeListener = function removeListener(evt, listener) { + var listeners = this.getListenersAsObject(evt); + var index; + var key; - /** - * Adds listeners in bulk using the manipulateListeners method. - * If you pass an object as the second argument you can add to multiple events at once. The object should contain key value pairs of events and listeners or listener arrays. You can also pass it an event name and an array of listeners to be added. - * You can also pass it a regular expression to add the array of listeners to all events that match it. - * Yeah, this function does quite a bit. That's probably a bad thing. - * - * @param {String|Object|RegExp} evt An event name if you will pass an array of listeners next. An object if you wish to add to multiple events at once. - * @param {Function[]} [listeners] An optional array of listener functions to add. - * @return {Object} Current instance of EventEmitter for chaining. - */ - proto.addListeners = function (evt, listeners) { - // Pass through to manipulateListeners - return this.manipulateListeners(false, evt, listeners); - }; + for (key in listeners) { + if (listeners.hasOwnProperty(key)) { + index = indexOfListener(listeners[key], listener); - /** - * Removes listeners in bulk using the manipulateListeners method. - * If you pass an object as the second argument you can remove from multiple events at once. The object should contain key value pairs of events and listeners or listener arrays. - * You can also pass it an event name and an array of listeners to be removed. - * You can also pass it a regular expression to remove the listeners from all events that match it. - * - * @param {String|Object|RegExp} evt An event name if you will pass an array of listeners next. An object if you wish to remove from multiple events at once. - * @param {Function[]} [listeners] An optional array of listener functions to remove. - * @return {Object} Current instance of EventEmitter for chaining. - */ - proto.removeListeners = function (evt, listeners) { - // Pass through to manipulateListeners - return this.manipulateListeners(true, evt, listeners); - }; + if (index !== -1) { + listeners[key].splice(index, 1); + } + } + } - /** - * Edits listeners in bulk. The addListeners and removeListeners methods both use this to do their job. You should really use those instead, this is a little lower level. - * The first argument will determine if the listeners are removed (true) or added (false). - * If you pass an object as the second argument you can add/remove from multiple events at once. The object should contain key value pairs of events and listeners or listener arrays. - * You can also pass it an event name and an array of listeners to be added/removed. - * You can also pass it a regular expression to manipulate the listeners of all events that match it. - * - * @param {Boolean} remove True if you want to remove listeners, false if you want to add. - * @param {String|Object|RegExp} evt An event name if you will pass an array of listeners next. An object if you wish to add/remove from multiple events at once. - * @param {Function[]} [listeners] An optional array of listener functions to add/remove. - * @return {Object} Current instance of EventEmitter for chaining. - */ - proto.manipulateListeners = function (remove, evt, listeners) { - // Initialise any required variables - var i, - value, - single = remove ? this.removeListener : this.addListener, - multiple = remove ? this.removeListeners : this.addListeners; + return this; + }; - // If evt is an object then pass each of it's properties to this method - if (typeof evt === 'object' && !(evt instanceof RegExp)) { - for (i in evt) { - if (evt.hasOwnProperty(i) && (value = evt[i])) { - // Pass the single listener straight through to the singular method - if (typeof value === 'function') { - single.call(this, i, value); - } - else { - // Otherwise pass back to the multiple function - multiple.call(this, i, value); - } - } - } - } - else { - // So evt must be a string - // And listeners must be an array of listeners - // Loop over it and pass each one to the multiple method - i = listeners.length; - while (i--) { - single.call(this, evt, listeners[i]); - } - } + /** + * Alias of removeListener + */ + proto.off = alias('removeListener'); - // Return the instance of EventEmitter to allow chaining - return this; - }; + /** + * Adds listeners in bulk using the manipulateListeners method. + * If you pass an object as the second argument you can add to multiple events at once. The object should contain key value pairs of events and listeners or listener arrays. You can also pass it an event name and an array of listeners to be added. + * You can also pass it a regular expression to add the array of listeners to all events that match it. + * Yeah, this function does quite a bit. That's probably a bad thing. + * + * @param {String|Object|RegExp} evt An event name if you will pass an array of listeners next. An object if you wish to add to multiple events at once. + * @param {Function[]} [listeners] An optional array of listener functions to add. + * @return {Object} Current instance of EventEmitter for chaining. + */ + proto.addListeners = function addListeners(evt, listeners) { + // Pass through to manipulateListeners + return this.manipulateListeners(false, evt, listeners); + }; - /** - * Removes all listeners from a specified event. - * If you do not specify an event then all listeners will be removed. - * That means every event will be emptied. - * You can also pass a regex to remove all events that match it. - * - * @param {String|RegExp} [evt] Optional name of the event to remove all listeners for. Will remove from every event if not passed. - * @return {Object} Current instance of EventEmitter for chaining. - */ - proto.removeEvent = function (evt) { - var type = typeof evt, - events = this._getEvents(), - key; + /** + * Removes listeners in bulk using the manipulateListeners method. + * If you pass an object as the second argument you can remove from multiple events at once. The object should contain key value pairs of events and listeners or listener arrays. + * You can also pass it an event name and an array of listeners to be removed. + * You can also pass it a regular expression to remove the listeners from all events that match it. + * + * @param {String|Object|RegExp} evt An event name if you will pass an array of listeners next. An object if you wish to remove from multiple events at once. + * @param {Function[]} [listeners] An optional array of listener functions to remove. + * @return {Object} Current instance of EventEmitter for chaining. + */ + proto.removeListeners = function removeListeners(evt, listeners) { + // Pass through to manipulateListeners + return this.manipulateListeners(true, evt, listeners); + }; - // Remove different things depending on the state of evt - if (type === 'string') { - // Remove all listeners for the specified event - delete events[evt]; - } - else if (type === 'object') { - // Remove all events matching the regex. - for (key in events) { - if (events.hasOwnProperty(key) && evt.test(key)) { - delete events[key]; - } - } - } - else { - // Remove all listeners in all events - delete this._events; - } + /** + * Edits listeners in bulk. The addListeners and removeListeners methods both use this to do their job. You should really use those instead, this is a little lower level. + * The first argument will determine if the listeners are removed (true) or added (false). + * If you pass an object as the second argument you can add/remove from multiple events at once. The object should contain key value pairs of events and listeners or listener arrays. + * You can also pass it an event name and an array of listeners to be added/removed. + * You can also pass it a regular expression to manipulate the listeners of all events that match it. + * + * @param {Boolean} remove True if you want to remove listeners, false if you want to add. + * @param {String|Object|RegExp} evt An event name if you will pass an array of listeners next. An object if you wish to add/remove from multiple events at once. + * @param {Function[]} [listeners] An optional array of listener functions to add/remove. + * @return {Object} Current instance of EventEmitter for chaining. + */ + proto.manipulateListeners = function manipulateListeners(remove, evt, listeners) { + var i; + var value; + var single = remove ? this.removeListener : this.addListener; + var multiple = remove ? this.removeListeners : this.addListeners; - // Return the instance of EventEmitter to allow chaining - return this; - }; + // If evt is an object then pass each of it's properties to this method + if (typeof evt === 'object' && !(evt instanceof RegExp)) { + for (i in evt) { + if (evt.hasOwnProperty(i) && (value = evt[i])) { + // Pass the single listener straight through to the singular method + if (typeof value === 'function') { + single.call(this, i, value); + } + else { + // Otherwise pass back to the multiple function + multiple.call(this, i, value); + } + } + } + } + else { + // So evt must be a string + // And listeners must be an array of listeners + // Loop over it and pass each one to the multiple method + i = listeners.length; + while (i--) { + single.call(this, evt, listeners[i]); + } + } - /** - * Emits an event of your choice. - * When emitted, every listener attached to that event will be executed. - * If you pass the optional argument array then those arguments will be passed to every listener upon execution. - * Because it uses `apply`, your array of arguments will be passed as if you wrote them out separately. - * So they will not arrive within the array on the other side, they will be separate. - * You can also pass a regular expression to emit to all events that match it. - * - * @param {String|RegExp} evt Name of the event to emit and execute listeners for. - * @param {Array} [args] Optional array of arguments to be passed to each listener. - * @return {Object} Current instance of EventEmitter for chaining. - */ - proto.emitEvent = function (evt, args) { - var listeners = this.getListenersAsObject(evt), - i, - key, - response; + return this; + }; - for (key in listeners) { - if (listeners.hasOwnProperty(key)) { - i = listeners[key].length; + /** + * Removes all listeners from a specified event. + * If you do not specify an event then all listeners will be removed. + * That means every event will be emptied. + * You can also pass a regex to remove all events that match it. + * + * @param {String|RegExp} [evt] Optional name of the event to remove all listeners for. Will remove from every event if not passed. + * @return {Object} Current instance of EventEmitter for chaining. + */ + proto.removeEvent = function removeEvent(evt) { + var type = typeof evt; + var events = this._getEvents(); + var key; - while (i--) { - // If the listener returns true then it shall be removed from the event - // The function is executed either with a basic call or an apply if there is an args array - response = args ? listeners[key][i].apply(null, args) : listeners[key][i](); - if (response === true) { - this.removeListener(evt, listeners[key][i]); - } - } - } - } + // Remove different things depending on the state of evt + if (type === 'string') { + // Remove all listeners for the specified event + delete events[evt]; + } + else if (type === 'object') { + // Remove all events matching the regex. + for (key in events) { + if (events.hasOwnProperty(key) && evt.test(key)) { + delete events[key]; + } + } + } + else { + // Remove all listeners in all events + delete this._events; + } - // Return the instance of EventEmitter to allow chaining - return this; - }; + return this; + }; - /** - * Alias of emitEvent - */ - proto.trigger = proto.emitEvent; + /** + * Alias of removeEvent. + * + * Added to mirror the node API. + */ + proto.removeAllListeners = alias('removeEvent'); - /** - * Subtly different from emitEvent in that it will pass its arguments on to the listeners, as opposed to taking a single array of arguments to pass on. - * As with emitEvent, you can pass a regex in place of the event name to emit to all events that match it. - * - * @param {String|RegExp} evt Name of the event to emit and execute listeners for. - * @param {...*} Optional additional arguments to be passed to each listener. - * @return {Object} Current instance of EventEmitter for chaining. - */ - proto.emit = function (evt) { - var args = Array.prototype.slice.call(arguments, 1); - return this.emitEvent(evt, args); - }; + /** + * Emits an event of your choice. + * When emitted, every listener attached to that event will be executed. + * If you pass the optional argument array then those arguments will be passed to every listener upon execution. + * Because it uses `apply`, your array of arguments will be passed as if you wrote them out separately. + * So they will not arrive within the array on the other side, they will be separate. + * You can also pass a regular expression to emit to all events that match it. + * + * @param {String|RegExp} evt Name of the event to emit and execute listeners for. + * @param {Array} [args] Optional array of arguments to be passed to each listener. + * @return {Object} Current instance of EventEmitter for chaining. + */ + proto.emitEvent = function emitEvent(evt, args) { + var listeners = this.getListenersAsObject(evt); + var listener; + var i; + var key; + var response; + + for (key in listeners) { + if (listeners.hasOwnProperty(key)) { + i = listeners[key].length; + + while (i--) { + // If the listener returns true then it shall be removed from the event + // The function is executed either with a basic call or an apply if there is an args array + listener = listeners[key][i]; + + if (listener.once === true) { + this.removeListener(evt, listener.listener); + } + + response = listener.listener.apply(this, args || []); + + if (response === this._getOnceReturnValue()) { + this.removeListener(evt, listener.listener); + } + } + } + } + + return this; + }; + + /** + * Alias of emitEvent + */ + proto.trigger = alias('emitEvent'); + + /** + * Subtly different from emitEvent in that it will pass its arguments on to the listeners, as opposed to taking a single array of arguments to pass on. + * As with emitEvent, you can pass a regex in place of the event name to emit to all events that match it. + * + * @param {String|RegExp} evt Name of the event to emit and execute listeners for. + * @param {...*} Optional additional arguments to be passed to each listener. + * @return {Object} Current instance of EventEmitter for chaining. + */ + proto.emit = function emit(evt) { + var args = Array.prototype.slice.call(arguments, 1); + return this.emitEvent(evt, args); + }; + + /** + * Sets the current value to check against when executing listeners. If a + * listeners return value matches the one set here then it will be removed + * after execution. This value defaults to true. + * + * @param {*} value The new value to check for when executing listeners. + * @return {Object} Current instance of EventEmitter for chaining. + */ + proto.setOnceReturnValue = function setOnceReturnValue(value) { + this._onceReturnValue = value; + return this; + }; + + /** + * Fetches the current value to check against when executing listeners. If + * the listeners return value matches this one then it should be removed + * automatically. It will return true by default. + * + * @return {*|Boolean} The current value to check for or the default, true. + * @api private + */ + proto._getOnceReturnValue = function _getOnceReturnValue() { + if (this.hasOwnProperty('_onceReturnValue')) { + return this._onceReturnValue; + } + else { + return true; + } + }; + + /** + * Fetches the events object and creates one if required. + * + * @return {Object} The events storage object. + * @api private + */ + proto._getEvents = function _getEvents() { + return this._events || (this._events = {}); + }; + + // Expose the class either via AMD, CommonJS or the global object + if (typeof define === 'function' && define.amd) { + define("EventEmitter", function () { + return EventEmitter; + }); + } + else if (typeof module === 'object' && module.exports){ + module.exports = EventEmitter; + } + else { + this.EventEmitter = EventEmitter; + } +}.call(this)); - // Expose the class either via AMD or the global object - if (typeof define === 'function' && define.amd) { - define(function () { - return EventEmitter; - }); - } - else { - exports.EventEmitter = EventEmitter; - } -}(this)); /*! * getStyleProperty by kangax * http://perfectionkills.com/feature-testing-css-properties/ @@ -619,49 +633,49 @@ if ( typeof define === 'function' && define.amd ) { ( function( window ) { -'use strict'; + 'use strict'; -var prefixes = 'Webkit Moz ms Ms O'.split(' '); -var docElemStyle = document.documentElement.style; + var prefixes = 'Webkit Moz ms Ms O'.split(' '); + var docElemStyle = document.documentElement.style; -function getStyleProperty( propName ) { - if ( !propName ) { - return; - } + function getStyleProperty( propName ) { + if ( !propName ) { + return; + } - // test standard property first - if ( typeof docElemStyle[ propName ] === 'string' ) { - return propName; - } + // test standard property first + if ( typeof docElemStyle[ propName ] === 'string' ) { + return propName; + } - // capitalize - propName = propName.charAt(0).toUpperCase() + propName.slice(1); + // capitalize + propName = propName.charAt(0).toUpperCase() + propName.slice(1); - // test vendor specific properties - var prefixed; - for ( var i=0, len = prefixes.length; i < len; i++ ) { - prefixed = prefixes[i] + propName; - if ( typeof docElemStyle[ prefixed ] === 'string' ) { - return prefixed; + // test vendor specific properties + var prefixed; + for ( var i=0, len = prefixes.length; i < len; i++ ) { + prefixed = prefixes[i] + propName; + if ( typeof docElemStyle[ prefixed ] === 'string' ) { + return prefixed; + } + } } - } -} // transport -if ( typeof define === 'function' && define.amd ) { - // AMD - define( function() { - return getStyleProperty; - }); -} else { - // browser global - window.getStyleProperty = getStyleProperty; -} + if ( typeof define === 'function' && define.amd ) { + // AMD + define("getStyleProperty", function() { + return getStyleProperty; + }); + } else { + // browser global + window.getStyleProperty = getStyleProperty; + } })( window ); /** - * getSize v1.1.3 + * getSize v1.1.4 * measure size of elements */ @@ -670,176 +684,176 @@ if ( typeof define === 'function' && define.amd ) { ( function( window, undefined ) { -'use strict'; + 'use strict'; // -------------------------- helpers -------------------------- // -var defView = document.defaultView; + var defView = document.defaultView; -var getStyle = defView && defView.getComputedStyle ? - function( elem ) { - return defView.getComputedStyle( elem, null ); - } : - function( elem ) { - return elem.currentStyle; - }; + var getStyle = defView && defView.getComputedStyle ? + function( elem ) { + return defView.getComputedStyle( elem, null ); + } : + function( elem ) { + return elem.currentStyle; + }; // get a number from a string, not a percentage -function getStyleSize( value ) { - var num = parseFloat( value ); - // not a percent like '100%', and a number - var isValid = value.indexOf('%') === -1 && !isNaN( num ); - return isValid && num; -} + function getStyleSize( value ) { + var num = parseFloat( value ); + // not a percent like '100%', and a number + var isValid = value.indexOf('%') === -1 && !isNaN( num ); + return isValid && num; + } // -------------------------- measurements -------------------------- // -var measurements = [ - 'paddingLeft', - 'paddingRight', - 'paddingTop', - 'paddingBottom', - 'marginLeft', - 'marginRight', - 'marginTop', - 'marginBottom', - 'borderLeftWidth', - 'borderRightWidth', - 'borderTopWidth', - 'borderBottomWidth' -]; + var measurements = [ + 'paddingLeft', + 'paddingRight', + 'paddingTop', + 'paddingBottom', + 'marginLeft', + 'marginRight', + 'marginTop', + 'marginBottom', + 'borderLeftWidth', + 'borderRightWidth', + 'borderTopWidth', + 'borderBottomWidth' + ]; -function getZeroSize() { - var size = { - width: 0, - height: 0, - innerWidth: 0, - innerHeight: 0, - outerWidth: 0, - outerHeight: 0 - }; - for ( var i=0, len = measurements.length; i < len; i++ ) { - var measurement = measurements[i]; - size[ measurement ] = 0; - } - return size; -} + function getZeroSize() { + var size = { + width: 0, + height: 0, + innerWidth: 0, + innerHeight: 0, + outerWidth: 0, + outerHeight: 0 + }; + for ( var i=0, len = measurements.length; i < len; i++ ) { + var measurement = measurements[i]; + size[ measurement ] = 0; + } + return size; + } -function defineGetSize( getStyleProperty ) { + function defineGetSize( getStyleProperty ) { // -------------------------- box sizing -------------------------- // -var boxSizingProp = getStyleProperty('boxSizing'); -var isBoxSizeOuter; + var boxSizingProp = getStyleProperty('boxSizing'); + var isBoxSizeOuter; -/** - * WebKit measures the outer-width on style.width on border-box elems - * IE & Firefox measures the inner-width - */ -( function() { - if ( !boxSizingProp ) { - return; - } + /** + * WebKit measures the outer-width on style.width on border-box elems + * IE & Firefox measures the inner-width + */ + ( function() { + if ( !boxSizingProp ) { + return; + } - var div = document.createElement('div'); - div.style.width = '200px'; - div.style.padding = '1px 2px 3px 4px'; - div.style.borderStyle = 'solid'; - div.style.borderWidth = '1px 2px 3px 4px'; - div.style[ boxSizingProp ] = 'border-box'; + var div = document.createElement('div'); + div.style.width = '200px'; + div.style.padding = '1px 2px 3px 4px'; + div.style.borderStyle = 'solid'; + div.style.borderWidth = '1px 2px 3px 4px'; + div.style[ boxSizingProp ] = 'border-box'; - var body = document.body || document.documentElement; - body.appendChild( div ); - var style = getStyle( div ); + var body = document.body || document.documentElement; + body.appendChild( div ); + var style = getStyle( div ); - isBoxSizeOuter = getStyleSize( style.width ) === 200; - body.removeChild( div ); -})(); + isBoxSizeOuter = getStyleSize( style.width ) === 200; + body.removeChild( div ); + })(); // -------------------------- getSize -------------------------- // -function getSize( elem ) { - // use querySeletor if elem is string - if ( typeof elem === 'string' ) { - elem = document.querySelector( elem ); - } + function getSize( elem ) { + // use querySeletor if elem is string + if ( typeof elem === 'string' ) { + elem = document.querySelector( elem ); + } - // do not proceed on non-objects - if ( !elem || typeof elem !== 'object' || !elem.nodeType ) { - return; - } + // do not proceed on non-objects + if ( !elem || typeof elem !== 'object' || !elem.nodeType ) { + return; + } - var style = getStyle( elem ); + var style = getStyle( elem ); - // if hidden, everything is 0 - if ( style.display === 'none' ) { - return getZeroSize(); - } + // if hidden, everything is 0 + if ( style.display === 'none' ) { + return getZeroSize(); + } - var size = {}; - size.width = elem.offsetWidth; - size.height = elem.offsetHeight; + var size = {}; + size.width = elem.offsetWidth; + size.height = elem.offsetHeight; - var isBorderBox = size.isBorderBox = !!( boxSizingProp && - style[ boxSizingProp ] && style[ boxSizingProp ] === 'border-box' ); + var isBorderBox = size.isBorderBox = !!( boxSizingProp && + style[ boxSizingProp ] && style[ boxSizingProp ] === 'border-box' ); - // get all measurements - for ( var i=0, len = measurements.length; i < len; i++ ) { - var measurement = measurements[i]; - var value = style[ measurement ]; - var num = parseFloat( value ); - // any 'auto', 'medium' value will be 0 - size[ measurement ] = !isNaN( num ) ? num : 0; - } + // get all measurements + for ( var i=0, len = measurements.length; i < len; i++ ) { + var measurement = measurements[i]; + var value = style[ measurement ]; + var num = parseFloat( value ); + // any 'auto', 'medium' value will be 0 + size[ measurement ] = !isNaN( num ) ? num : 0; + } - var paddingWidth = size.paddingLeft + size.paddingRight; - var paddingHeight = size.paddingTop + size.paddingBottom; - var marginWidth = size.marginLeft + size.marginRight; - var marginHeight = size.marginTop + size.marginBottom; - var borderWidth = size.borderLeftWidth + size.borderRightWidth; - var borderHeight = size.borderTopWidth + size.borderBottomWidth; + var paddingWidth = size.paddingLeft + size.paddingRight; + var paddingHeight = size.paddingTop + size.paddingBottom; + var marginWidth = size.marginLeft + size.marginRight; + var marginHeight = size.marginTop + size.marginBottom; + var borderWidth = size.borderLeftWidth + size.borderRightWidth; + var borderHeight = size.borderTopWidth + size.borderBottomWidth; - var isBorderBoxSizeOuter = isBorderBox && isBoxSizeOuter; + var isBorderBoxSizeOuter = isBorderBox && isBoxSizeOuter; - // overwrite width and height if we can get it from style - var styleWidth = getStyleSize( style.width ); - if ( styleWidth !== false ) { - size.width = styleWidth + - // add padding and border unless it's already including it - ( isBorderBoxSizeOuter ? 0 : paddingWidth + borderWidth ); - } + // overwrite width and height if we can get it from style + var styleWidth = getStyleSize( style.width ); + if ( styleWidth !== false ) { + size.width = styleWidth + + // add padding and border unless it's already including it + ( isBorderBoxSizeOuter ? 0 : paddingWidth + borderWidth ); + } - var styleHeight = getStyleSize( style.height ); - if ( styleHeight !== false ) { - size.height = styleHeight + - // add padding and border unless it's already including it - ( isBorderBoxSizeOuter ? 0 : paddingHeight + borderHeight ); - } + var styleHeight = getStyleSize( style.height ); + if ( styleHeight !== false ) { + size.height = styleHeight + + // add padding and border unless it's already including it + ( isBorderBoxSizeOuter ? 0 : paddingHeight + borderHeight ); + } - size.innerWidth = size.width - ( paddingWidth + borderWidth ); - size.innerHeight = size.height - ( paddingHeight + borderHeight ); + size.innerWidth = size.width - ( paddingWidth + borderWidth ); + size.innerHeight = size.height - ( paddingHeight + borderHeight ); - size.outerWidth = size.width + marginWidth; - size.outerHeight = size.height + marginHeight; + size.outerWidth = size.width + marginWidth; + size.outerHeight = size.height + marginHeight; - return size; -} + return size; + } -return getSize; + return getSize; -} + } // transport -if ( typeof define === 'function' && define.amd ) { - // AMD - define( [ 'get-style-property' ], defineGetSize ); -} else { - // browser global - window.getSize = defineGetSize( window.getStyleProperty ); -} + if ( typeof define === 'function' && define.amd ) { + // AMD + define("getSize", [ 'getStyleProperty' ], defineGetSize ); + } else { + // browser global + window.getSize = defineGetSize( window.getStyleProperty ); + } })( window ); @@ -851,521 +865,512 @@ if ( typeof define === 'function' && define.amd ) { ( function( window ) { -'use strict'; + 'use strict'; // vars -var document = window.document; + var document = window.document; // -------------------------- helpers -------------------------- // // extend objects -function extend( a, b ) { - for ( var prop in b ) { - a[ prop ] = b[ prop ]; - } - return a; -} + function extend( a, b ) { + for ( var prop in b ) { + a[ prop ] = b[ prop ]; + } + return a; + } -function noop() {} + function noop() {} // ----- get style ----- // -var defView = document.defaultView; + var defView = document.defaultView; -var getStyle = defView && defView.getComputedStyle ? - function( elem ) { - return defView.getComputedStyle( elem, null ); - } : - function( elem ) { - return elem.currentStyle; - }; + var getStyle = defView && defView.getComputedStyle ? + function( elem ) { + return defView.getComputedStyle( elem, null ); + } : + function( elem ) { + return elem.currentStyle; + }; // http://stackoverflow.com/a/384380/182183 -var isElement = ( typeof HTMLElement === 'object' ) ? - function isElementDOM2( obj ) { - return obj instanceof HTMLElement; - } : - function isElementQuirky( obj ) { - return obj && typeof obj === 'object' && - obj.nodeType === 1 && typeof obj.nodeName === 'string'; - }; + var isElement = ( typeof HTMLElement === 'object' ) ? + function isElementDOM2( obj ) { + return obj instanceof HTMLElement; + } : + function isElementQuirky( obj ) { + return obj && typeof obj === 'object' && + obj.nodeType === 1 && typeof obj.nodeName === 'string'; + }; // -------------------------- requestAnimationFrame -------------------------- // // https://gist.github.com/1866474 -var lastTime = 0; -var prefixes = 'webkit moz ms o'.split(' '); + var lastTime = 0; + var prefixes = 'webkit moz ms o'.split(' '); // get unprefixed rAF and cAF, if present -var requestAnimationFrame = window.requestAnimationFrame; -var cancelAnimationFrame = window.cancelAnimationFrame; + var requestAnimationFrame = window.requestAnimationFrame; + var cancelAnimationFrame = window.cancelAnimationFrame; // loop through vendor prefixes and get prefixed rAF and cAF -var prefix; -for( var i = 0; i < prefixes.length; i++ ) { - if ( requestAnimationFrame && cancelAnimationFrame ) { - break; - } - prefix = prefixes[i]; - requestAnimationFrame = requestAnimationFrame || window[ prefix + 'RequestAnimationFrame' ]; - cancelAnimationFrame = cancelAnimationFrame || window[ prefix + 'CancelAnimationFrame' ] || - window[ prefix + 'CancelRequestAnimationFrame' ]; -} + var prefix; + for( var i = 0; i < prefixes.length; i++ ) { + if ( requestAnimationFrame && cancelAnimationFrame ) { + break; + } + prefix = prefixes[i]; + requestAnimationFrame = requestAnimationFrame || window[ prefix + 'RequestAnimationFrame' ]; + cancelAnimationFrame = cancelAnimationFrame || window[ prefix + 'CancelAnimationFrame' ] || + window[ prefix + 'CancelRequestAnimationFrame' ]; + } // fallback to setTimeout and clearTimeout if either request/cancel is not supported -if ( !requestAnimationFrame || !cancelAnimationFrame ) { - requestAnimationFrame = function( callback ) { - var currTime = new Date().getTime(); - var timeToCall = Math.max( 0, 16 - ( currTime - lastTime ) ); - var id = window.setTimeout( function() { - callback( currTime + timeToCall ); - }, timeToCall ); - lastTime = currTime + timeToCall; - return id; - }; + if ( !requestAnimationFrame || !cancelAnimationFrame ) { + requestAnimationFrame = function( callback ) { + var currTime = new Date().getTime(); + var timeToCall = Math.max( 0, 16 - ( currTime - lastTime ) ); + var id = window.setTimeout( function() { + callback( currTime + timeToCall ); + }, timeToCall ); + lastTime = currTime + timeToCall; + return id; + }; - cancelAnimationFrame = function( id ) { - window.clearTimeout( id ); - }; -} + cancelAnimationFrame = function( id ) { + window.clearTimeout( id ); + }; + } // -------------------------- definition -------------------------- // -function draggabillyDefinition( classie, EventEmitter, eventie, getStyleProperty, getSize ) { + function draggabillyDefinition( classie, EventEmitter, eventie, getStyleProperty, getSize ) { // -------------------------- support -------------------------- // -var transformProperty = getStyleProperty('transform'); + var transformProperty = getStyleProperty('transform'); // TODO fix quick & dirty check for 3D support -var is3d = !!getStyleProperty('perspective'); + var is3d = !!getStyleProperty('perspective'); // -------------------------- -------------------------- // -function Draggabilly( element, options ) { - this.element = element; + function Draggabilly( element, options ) { + this.element = element; - this.options = extend( {}, this.options ); - extend( this.options, options ); + this.options = extend( {}, this.options ); + extend( this.options, options ); - this._create(); + this._create(); -} + } // inherit EventEmitter methods -extend( Draggabilly.prototype, EventEmitter.prototype ); + extend( Draggabilly.prototype, EventEmitter.prototype ); -Draggabilly.prototype.options = { -}; + Draggabilly.prototype.options = { + }; -Draggabilly.prototype._create = function() { + Draggabilly.prototype._create = function() { - // properties - this.position = {}; - this._getPosition(); + // properties + this.position = {}; + this._getPosition(); - this.startPoint = { x: 0, y: 0 }; - this.dragPoint = { x: 0, y: 0 }; + this.startPoint = { x: 0, y: 0 }; + this.dragPoint = { x: 0, y: 0 }; - this.startPosition = extend( {}, this.position ); + this.startPosition = extend( {}, this.position ); - // set relative positioning - var style = getStyle( this.element ); - if ( style.position !== 'relative' && style.position !== 'absolute' ) { - this.element.style.position = 'relative'; - } + // set relative positioning + var style = getStyle( this.element ); + if ( style.position !== 'relative' && style.position !== 'absolute' ) { + this.element.style.position = 'relative'; + } - this.enable(); - this.setHandles(); + this.enable(); + this.setHandles(); -}; + }; -/** - * set this.handles and bind start events to 'em - */ -Draggabilly.prototype.setHandles = function() { - this.handles = this.options.handle ? - this.element.querySelectorAll( this.options.handle ) : [ this.element ]; + /** + * set this.handles and bind start events to 'em + */ + Draggabilly.prototype.setHandles = function() { + this.handles = this.options.handle ? + this.element.querySelectorAll( this.options.handle ) : [ this.element ]; - for ( var i=0, len = this.handles.length; i < len; i++ ) { - var handle = this.handles[i]; - // bind pointer start event - // listen for both, for devices like Chrome Pixel - // which has touch and mouse events - eventie.bind( handle, 'mousedown', this ); - eventie.bind( handle, 'touchstart', this ); - disableImgOndragstart( handle ); - } -}; + for ( var i=0, len = this.handles.length; i < len; i++ ) { + var handle = this.handles[i]; + // bind pointer start event + // listen for both, for devices like Chrome Pixel + // which has touch and mouse events + eventie.bind( handle, 'mousedown', this ); + eventie.bind( handle, 'touchstart', this ); + disableImgOndragstart( handle ); + } + }; // remove default dragging interaction on all images in IE8 // IE8 does its own drag thing on images, which messes stuff up -function noDragStart() { - return false; -} + function noDragStart() { + return false; + } // TODO replace this with a IE8 test -var isIE8 = 'attachEvent' in document.documentElement; + var isIE8 = 'attachEvent' in document.documentElement; // IE8 only -var disableImgOndragstart = !isIE8 ? noop : function( handle ) { + var disableImgOndragstart = !isIE8 ? noop : function( handle ) { - if ( handle.nodeName === 'IMG' ) { - handle.ondragstart = noDragStart; - } + if ( handle.nodeName === 'IMG' ) { + handle.ondragstart = noDragStart; + } - var images = handle.querySelectorAll('img'); - for ( var i=0, len = images.length; i < len; i++ ) { - var img = images[i]; - img.ondragstart = noDragStart; - } -}; + var images = handle.querySelectorAll('img'); + for ( var i=0, len = images.length; i < len; i++ ) { + var img = images[i]; + img.ondragstart = noDragStart; + } + }; // get left/top position from style -Draggabilly.prototype._getPosition = function() { - // properties - var style = getStyle( this.element ); + Draggabilly.prototype._getPosition = function() { + // properties + var style = getStyle( this.element ); - var x = parseInt( style.left, 10 ); - var y = parseInt( style.top, 10 ); + var x = parseInt( style.left, 10 ); + var y = parseInt( style.top, 10 ); - // clean up 'auto' or other non-integer values - this.position.x = isNaN( x ) ? 0 : x; - this.position.y = isNaN( y ) ? 0 : y; + // clean up 'auto' or other non-integer values + this.position.x = isNaN( x ) ? 0 : x; + this.position.y = isNaN( y ) ? 0 : y; - this._addTransformPosition( style ); -}; + this._addTransformPosition( style ); + }; // add transform: translate( x, y ) to position -Draggabilly.prototype._addTransformPosition = function( style ) { - if ( !transformProperty ) { - return; - } - var transform = style[ transformProperty ]; - // bail out if value is 'none' - if ( transform.indexOf('matrix') !== 0 ) { - return; - } - // split matrix(1, 0, 0, 1, x, y) - var matrixValues = transform.split(','); - // translate X value is in 12th or 4th position - var xIndex = transform.indexOf('matrix3d') === 0 ? 12 : 4; - var translateX = parseInt( matrixValues[ xIndex ], 10 ); - // translate Y value is in 13th or 5th position - var translateY = parseInt( matrixValues[ xIndex + 1 ], 10 ); - this.position.x += translateX; - this.position.y += translateY; -}; + Draggabilly.prototype._addTransformPosition = function( style ) { + if ( !transformProperty ) { + return; + } + var transform = style[ transformProperty ]; + // bail out if value is 'none' + if ( transform.indexOf('matrix') !== 0 ) { + return; + } + // split matrix(1, 0, 0, 1, x, y) + var matrixValues = transform.split(','); + // translate X value is in 12th or 4th position + var xIndex = transform.indexOf('matrix3d') === 0 ? 12 : 4; + var translateX = parseInt( matrixValues[ xIndex ], 10 ); + // translate Y value is in 13th or 5th position + var translateY = parseInt( matrixValues[ xIndex + 1 ], 10 ); + this.position.x += translateX; + this.position.y += translateY; + }; // -------------------------- events -------------------------- // // trigger handler methods for events -Draggabilly.prototype.handleEvent = function( event ) { - var method = 'on' + event.type; - if ( this[ method ] ) { - this[ method ]( event ); - } -}; + Draggabilly.prototype.handleEvent = function( event ) { + var method = 'on' + event.type; + if ( this[ method ] ) { + this[ method ]( event ); + } + }; // returns the touch that we're keeping track of -Draggabilly.prototype.getTouch = function( touches ) { - for ( var i=0, len = touches.length; i < len; i++ ) { - var touch = touches[i]; - if ( touch.identifier === this.pointerIdentifier ) { - return touch; - } - } -}; + Draggabilly.prototype.getTouch = function( touches ) { + for ( var i=0, len = touches.length; i < len; i++ ) { + var touch = touches[i]; + if ( touch.identifier === this.pointerIdentifier ) { + return touch; + } + } + }; // ----- start event ----- // -Draggabilly.prototype.onmousedown = function( event ) { - this.dragStart( event, event ); -}; + Draggabilly.prototype.onmousedown = function( event ) { + this.dragStart( event, event ); + }; -Draggabilly.prototype.ontouchstart = function( event ) { - // disregard additional touches - if ( this.isDragging ) { - return; - } + Draggabilly.prototype.ontouchstart = function( event ) { + // disregard additional touches + if ( this.isDragging ) { + return; + } - this.dragStart( event, event.changedTouches[0] ); -}; + this.dragStart( event, event.changedTouches[0] ); + }; -function setPointerPoint( point, pointer ) { - point.x = pointer.pageX !== undefined ? pointer.pageX : pointer.clientX; - point.y = pointer.pageY !== undefined ? pointer.pageY : pointer.clientY; -} + function setPointerPoint( point, pointer ) { + point.x = pointer.pageX !== undefined ? pointer.pageX : pointer.clientX; + point.y = pointer.pageY !== undefined ? pointer.pageY : pointer.clientY; + } -/** - * drag start - * @param {Event} event - * @param {Event or Touch} pointer - */ -Draggabilly.prototype.dragStart = function( event, pointer ) { - if ( !this.isEnabled ) { - return; - } + /** + * drag start + * @param {Event} event + * @param {Event or Touch} pointer + */ + Draggabilly.prototype.dragStart = function( event, pointer ) { + if ( !this.isEnabled ) { + return; + } - if ( event.preventDefault ) { - event.preventDefault(); - } else { - event.returnValue = false; - } + if ( event.preventDefault ) { + event.preventDefault(); + } else { + event.returnValue = false; + } - var isTouch = event.type === 'touchstart'; + var isTouch = event.type === 'touchstart'; - // save pointer identifier to match up touch events - this.pointerIdentifier = pointer.identifier; + // save pointer identifier to match up touch events + this.pointerIdentifier = pointer.identifier; - this._getPosition(); + this._getPosition(); - this.measureContainment(); + this.measureContainment(); - // point where drag began - setPointerPoint( this.startPoint, pointer ); - // position _when_ drag began - this.startPosition.x = this.position.x; - this.startPosition.y = this.position.y; + // point where drag began + setPointerPoint( this.startPoint, pointer ); + // position _when_ drag began + this.startPosition.x = this.position.x; + this.startPosition.y = this.position.y; - // reset left/top style - this.setLeftTop(); + // reset left/top style + this.setLeftTop(); - this.dragPoint.x = 0; - this.dragPoint.y = 0; + this.dragPoint.x = 0; + this.dragPoint.y = 0; - // bind move and end events - this._bindEvents({ - events: isTouch ? [ 'touchmove', 'touchend', 'touchcancel' ] : - [ 'mousemove', 'mouseup' ], - // IE8 needs to be bound to document - node: event.preventDefault ? window : document - }); + // bind move and end events + this._bindEvents({ + events: isTouch ? [ 'touchmove', 'touchend', 'touchcancel' ] : + [ 'mousemove', 'mouseup' ], + // IE8 needs to be bound to document + node: event.preventDefault ? window : document + }); - classie.add( this.element, 'is-dragging' ); + classie.add( this.element, 'is-dragging' ); - // reset isDragging flag - this.isDragging = true; + // reset isDragging flag + this.isDragging = true; - this.emitEvent( 'dragStart', [ this, event, pointer ] ); + this.emitEvent( 'dragStart', [ this, event, pointer ] ); - // start animation - this.animate(); -}; + // start animation + this.animate(); + }; -Draggabilly.prototype._bindEvents = function( args ) { - for ( var i=0, len = args.events.length; i < len; i++ ) { - var event = args.events[i]; - eventie.bind( args.node, event, this ); - } - // save these arguments - this._boundEvents = args; -}; + Draggabilly.prototype._bindEvents = function( args ) { + for ( var i=0, len = args.events.length; i < len; i++ ) { + var event = args.events[i]; + eventie.bind( args.node, event, this ); + } + // save these arguments + this._boundEvents = args; + }; -Draggabilly.prototype._unbindEvents = function() { - var args = this._boundEvents; - for ( var i=0, len = args.events.length; i < len; i++ ) { - var event = args.events[i]; - eventie.unbind( args.node, event, this ); - } - delete this._boundEvents; -}; + Draggabilly.prototype._unbindEvents = function() { + var args = this._boundEvents; + for ( var i=0, len = args.events.length; i < len; i++ ) { + var event = args.events[i]; + eventie.unbind( args.node, event, this ); + } + delete this._boundEvents; + }; -Draggabilly.prototype.measureContainment = function() { - var containment = this.options.containment; - if ( !containment ) { - return; - } + Draggabilly.prototype.measureContainment = function() { + var containment = this.options.containment; + if ( !containment ) { + return; + } - this.size = getSize( this.element ); - var elemRect = this.element.getBoundingClientRect(); + this.size = getSize( this.element ); + var elemRect = this.element.getBoundingClientRect(); - // use element if element - var container = isElement( containment ) ? containment : - // fallback to querySelector if string - typeof containment === 'string' ? document.querySelector( containment ) : - // otherwise just `true`, use the parent - this.element.parentNode; + // use element if element + var container = isElement( containment ) ? containment : + // fallback to querySelector if string + typeof containment === 'string' ? document.querySelector( containment ) : + // otherwise just `true`, use the parent + this.element.parentNode; - this.containerSize = getSize( container ); - var containerRect = container.getBoundingClientRect(); + this.containerSize = getSize( container ); + var containerRect = container.getBoundingClientRect(); - this.relativeStartPosition = { - x: elemRect.left - containerRect.left, - y: elemRect.top - containerRect.top - }; -}; + this.relativeStartPosition = { + x: elemRect.left - containerRect.left, + y: elemRect.top - containerRect.top + }; + }; // ----- move event ----- // -Draggabilly.prototype.onmousemove = function( event ) { - this.dragMove( event, event ); -}; + Draggabilly.prototype.onmousemove = function( event ) { + this.dragMove( event, event ); + }; -Draggabilly.prototype.ontouchmove = function( event ) { - var touch = this.getTouch( event.changedTouches ); - if ( touch ) { - this.dragMove( event, touch ); - } -}; + Draggabilly.prototype.ontouchmove = function( event ) { + var touch = this.getTouch( event.changedTouches ); + if ( touch ) { + this.dragMove( event, touch ); + } + }; -/** - * drag move - * @param {Event} event - * @param {Event or Touch} pointer - */ -Draggabilly.prototype.dragMove = function( event, pointer ) { + /** + * drag move + * @param {Event} event + * @param {Event or Touch} pointer + */ + Draggabilly.prototype.dragMove = function( event, pointer ) { - var originalX = this.dragPoint.x; - var originalY = this.dragPoint.y; - setPointerPoint( this.dragPoint, pointer ); - this.dragPoint.x -= this.startPoint.x; - this.dragPoint.y -= this.startPoint.y; + setPointerPoint( this.dragPoint, pointer ); + this.dragPoint.x -= this.startPoint.x; + this.dragPoint.y -= this.startPoint.y; - if ( this.options.containment ) { - var relX = this.relativeStartPosition.x; - var relY = this.relativeStartPosition.y; - this.dragPoint.x = Math.max( this.dragPoint.x, -relX ); - this.dragPoint.y = Math.max( this.dragPoint.y, -relY ); - this.dragPoint.x = Math.min( this.dragPoint.x, this.containerSize.width - relX - this.size.width ); - this.dragPoint.y = Math.min( this.dragPoint.y, this.containerSize.height - relY - this.size.height ); - } + if ( this.options.containment ) { + var relX = this.relativeStartPosition.x; + var relY = this.relativeStartPosition.y; + this.dragPoint.x = Math.max( this.dragPoint.x, -relX ); + this.dragPoint.y = Math.max( this.dragPoint.y, -relY ); + this.dragPoint.x = Math.min( this.dragPoint.x, this.containerSize.width - relX - this.size.width ); + this.dragPoint.y = Math.min( this.dragPoint.y, this.containerSize.height - relY - this.size.height ); + } - if ( this.options.axis === 'x' ) { - this.dragPoint.y = originalY; - } - else if ( this.options.axis === 'y' ) { - this.dragPoint.x = originalX; - } + this.position.x = this.startPosition.x + this.dragPoint.x; + this.position.y = this.startPosition.y + this.dragPoint.y; - this.position.x = this.startPosition.x + this.dragPoint.x; - this.position.y = this.startPosition.y + this.dragPoint.y; - - this.emitEvent( 'dragMove', [ this, event, pointer ] ); -}; + this.emitEvent( 'dragMove', [ this, event, pointer ] ); + }; // ----- end event ----- // -Draggabilly.prototype.onmouseup = function( event ) { - this.dragEnd( event, event ); -}; + Draggabilly.prototype.onmouseup = function( event ) { + this.dragEnd( event, event ); + }; -Draggabilly.prototype.ontouchend = function( event ) { - var touch = this.getTouch( event.changedTouches ); - if ( touch ) { - this.dragEnd( event, touch ); - } -}; + Draggabilly.prototype.ontouchend = function( event ) { + var touch = this.getTouch( event.changedTouches ); + if ( touch ) { + this.dragEnd( event, touch ); + } + }; -/** - * drag end - * @param {Event} event - * @param {Event or Touch} pointer - */ -Draggabilly.prototype.dragEnd = function( event, pointer ) { - this.isDragging = false; + /** + * drag end + * @param {Event} event + * @param {Event or Touch} pointer + */ + Draggabilly.prototype.dragEnd = function( event, pointer ) { + this.isDragging = false; - delete this.pointerIdentifier; + delete this.pointerIdentifier; - // use top left position when complete - if ( transformProperty ) { - this.element.style[ transformProperty ] = ''; - this.setLeftTop(); - } + // use top left position when complete + if ( transformProperty ) { + this.element.style[ transformProperty ] = ''; + this.setLeftTop(); + } - // remove events - this._unbindEvents(); + // remove events + this._unbindEvents(); - classie.remove( this.element, 'is-dragging' ); + classie.remove( this.element, 'is-dragging' ); - this.emitEvent( 'dragEnd', [ this, event, pointer ] ); + this.emitEvent( 'dragEnd', [ this, event, pointer ] ); -}; + }; // ----- cancel event ----- // // coerce to end event -Draggabilly.prototype.ontouchcancel = function( event ) { - var touch = this.getTouch( event.changedTouches ); - this.dragEnd( event, touch ); -}; + Draggabilly.prototype.ontouchcancel = function( event ) { + var touch = this.getTouch( event.changedTouches ); + this.dragEnd( event, touch ); + }; // -------------------------- animation -------------------------- // -Draggabilly.prototype.animate = function() { - // only render and animate if dragging - if ( !this.isDragging ) { - return; - } + Draggabilly.prototype.animate = function() { + // only render and animate if dragging + if ( !this.isDragging ) { + return; + } - this.positionDrag(); + this.positionDrag(); - var _this = this; - requestAnimationFrame( function animateFrame() { - _this.animate(); - }); + var _this = this; + requestAnimationFrame( function animateFrame() { + _this.animate(); + }); -}; + }; // transform translate function -var translate = is3d ? - function( x, y ) { - return 'translate3d( ' + x + 'px, ' + y + 'px, 0)'; - } : - function( x, y ) { - return 'translate( ' + x + 'px, ' + y + 'px)'; - }; + var translate = is3d ? + function( x, y ) { + return 'translate3d( ' + x + 'px, ' + y + 'px, 0)'; + } : + function( x, y ) { + return 'translate( ' + x + 'px, ' + y + 'px)'; + }; // left/top positioning -Draggabilly.prototype.setLeftTop = function() { - this.element.style.left = this.position.x + 'px'; - this.element.style.top = this.position.y + 'px'; -}; + Draggabilly.prototype.setLeftTop = function() { + this.element.style.left = this.position.x + 'px'; + this.element.style.top = this.position.y + 'px'; + }; -Draggabilly.prototype.positionDrag = transformProperty ? - function() { - // position with transform - this.element.style[ transformProperty ] = translate( this.dragPoint.x, this.dragPoint.y ); - } : Draggabilly.prototype.setLeftTop; + Draggabilly.prototype.positionDrag = transformProperty ? + function() { + // position with transform + this.element.style[ transformProperty ] = translate( this.dragPoint.x, this.dragPoint.y ); + } : Draggabilly.prototype.setLeftTop; -Draggabilly.prototype.enable = function() { - this.isEnabled = true; -}; + Draggabilly.prototype.enable = function() { + this.isEnabled = true; + }; -Draggabilly.prototype.disable = function() { - this.isEnabled = false; - if ( this.isDragging ) { - this.dragEnd(); - } -}; + Draggabilly.prototype.disable = function() { + this.isEnabled = false; + if ( this.isDragging ) { + this.dragEnd(); + } + }; -return Draggabilly; + return Draggabilly; -} // end definition + } // end definition // -------------------------- transport -------------------------- // -if ( typeof define === 'function' && define.amd ) { - // AMD - define( [ - 'classie/classie', - 'eventEmitter/EventEmitter', - 'eventie/eventie', - 'get-style-property/get-style-property', - 'get-size/get-size' - ], - draggabillyDefinition ); -} else { - // browser global - window.Draggabilly = draggabillyDefinition( - window.classie, - window.EventEmitter, - window.eventie, - window.getStyleProperty, - window.getSize - ); -} + if ( typeof define === 'function' && define.amd ) { + // AMD + define('draggabilly', [ + 'classie', + 'EventEmitter', + 'eventie', + 'getStyleProperty', + 'getSize' + ], + draggabillyDefinition ); + } else { + // browser global + window.Draggabilly = draggabillyDefinition( + window.classie, + window.EventEmitter, + window.eventie, + window.getStyleProperty, + window.getSize + ); + } -})( window ); +})( window ); \ No newline at end of file diff --git a/common/static/sass/_mixins-inherited.scss b/common/static/sass/_mixins-inherited.scss index 5a834fa256..fa6a8bfcd2 100644 --- a/common/static/sass/_mixins-inherited.scss +++ b/common/static/sass/_mixins-inherited.scss @@ -358,11 +358,7 @@ background: $lightGrey; .branch { - margin-bottom: 10px; - - &.collapsed { - margin-bottom: 0; - } + margin-bottom: 0; } .branch > .section-item { @@ -370,6 +366,7 @@ } .section-item { + @include transition(background $tmg-avg ease-in-out 0); position: relative; display: block; padding: 6px 8px 8px 16px; @@ -377,7 +374,7 @@ font-size: 13px; &:hover { - background: #fffcf1; + background: $orange-l4; .item-actions { display: block; @@ -385,7 +382,7 @@ } &.editing { - background: #fffcf1; + background: $orange-l4; } .draft-item:after,