Disable Sync link and ribbon button for document libraries in Sharepoint via javascript

Offline sync of document libraries is new feature of Sharepoint 2013 which allows users to sync documents from doclibs on their PC:

There are 2 links: in QCB (quick control block) and in ribbon. In some cases organizations want to disable this functionality. From UI it can be done by going to Site settings > Search and Offilne availability and setting Offline Client availability > Allow items from this site to be downloaded to offilne clients to No:

If we want to do it programmatically we need to set SPWeb.ExcludeFromOfflineClient property to true via basic Sharepoint object model. However if we will need to do that for Sharepoint Online, we will face with the issue, because currently client-side object model doesn’t support it (see web.ExcludeFromOfflineClient property with CMOS discussion). So at least for now we have to do that via javascript.

The tricky part here is that ribbon is not loaded automatically when page is loaded, i.e. appropriate elements won’t be available in DOM. But we may use workaround: create function which will call itself after some time interval (e.g. each 2 seconds) until it will find Sync button which means that user opens the ribbon. Here is the code:

   1: disableSynButtonInDocLibs: function () {

   2:     // qcb (above the list view)

   3:     var qcbButton = $("button[class*='js-listview-qcbSyncButton']");

   4:     if (!qcbButton.hasClass("ms-disabled")) {

   5:         qcbButton.attr("disabled", true).addClass("ms-disabled");

   6:         qcbButton.children().each(function () {

   7:             $(this).addClass("ms-disabled");

   8:         });

   9:     }

  10:  

  11:     // ribbon Sync button

  12:     var syncLink = $("a[id='Ribbon.Library.Actions.Sync-Large']");

  13:     if (syncLink.length == 0) {

  14:         // ribbon is not loaded yet

  15:         setTimeout(disableSynButtonInDocLibs, 2000);

  16:     }

  17:  

  18:     syncLink.each(function () {

  19:         var this_ = $(this);

  20:         if (this_.hasClass("ms-cui-disabled")) {

  21:             return;

  22:         }

  23:         this_.attr("unselectable", "on");

  24:         this_.attr("aria-disabled", "true");

  25:         this_.addClass("ms-cui-disabled", "true");

  26:         this_.click(function (e) {

  27:             e.stopPropagation();

  28:         });

  29:         this_.children().each(function () {

  30:             $(this).click(function (e) {

  31:                 e.stopPropagation();

  32:             });

  33:         });

  34:     });

  35: }

On lines 2-9 we disable QCB Sync link, and on lines 11-34 – Sync ribbon button. On lines 12-16 we check is the button already loaded and if not call itself after 2 seconds. Note how we disable onclick event for the ribbon button: lines 26-33. In order to do that we attach new event handler to the link, which represents ribbon button, and its child elements and stop event propagation to prevent default event handler to be triggered.